"Build a Playlist Browser with Swift" was retired on May 31, 2020. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Code Racer!
You have completed Code Racer!
Preview
In this video, Allison shows us how to design a set of food icons.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[? Music ?] [Code Racer] [Designing an Icon Set]
0:00
We'll use the same principles and techniques I used
0:05
while I created the Code Racer icons, only this time we'll be creating
0:07
food icons for a fictitious company.
0:10
When we're creating this icon set, I'll keep the following things in mind.
0:13
Simplicity allows for individual icons to be easy to scan
0:17
and easy to translate their meaning at both large and small scales.
0:20
This gets more and more important as the quantity of the icon set increases.
0:24
Try to keep the color palette within the icon to a minimum,
0:28
which will allow for a little bit more freedom when coming up
0:31
with a cohesive color palette for the entire icon set.
0:34
We're going to create a food icon set that contains 4 cohesive icons:
0:38
a steak, bread, fish, and veggies.
0:42
I'm going to find a few pictures online to reference and use as a starting point
0:46
for designing my icons.
0:50
[commons.wikimedia.org]
0:52
Be mindful of copyright laws when searching for images online.
0:54
Make sure you're abstracting or loosely referencing an image when tracing.
0:56
To play it safe, you can use resources like Flikr's Creative Commons
1:01
and Wikimedia Commons or purchase stock photos
1:04
to avoid any possible copyright infringements.
1:07
[www.flikr.com]
1:10
You should most definitely do this if you plan to sell or distribute your icon set.
1:12
If your icons are going to have color, it can be helpful to use tools like Adobe Kuler
1:15
to assist you in coming up with a fun color scheme.
1:19
[kuler.adobe.com] It will at least get you started.
1:22
When you're searching for a series of photos,
1:24
try to find images where the object appears to be at the same angle.
1:26
This will help with consistency.
1:30
I'm looking for high angle shots of all of my food.
1:32
I'm also going to look for an image of a T-bone steak
1:35
instead of a picture of a filet, for example,
1:38
because a T-bone would be much easier to recognize as a simple icon
1:40
than a filet.
1:43
When you start tracing the photo, don't be as exact as you would
1:45
if you were cutting the image out of the background.
1:48
Use the photo as a guideline for the general shape
1:50
and go back in, delete anchors and refine
1:53
and continue to do this until you're satisfied with the result.
1:56
Continue to do this for the remaining icons.
1:59
[? Music ?]
2:02
When going from one icon to the next,
2:44
try to keep the same style in mind.
2:46
Keep the dimension, angle, stroke, corner radius,
2:49
et cetera, all the same if you can.
2:52
This will help your icon set to look the best it possibly can.
2:54
Now we have a cohesive set of food icons.
2:58
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up