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