How to Design an Icon Set3:01 with Allison Grayce Marshall
In this video, Allison shows us how to design a set of food icons.
[? 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 up