Professional technique for creating icons
In grammar school when you wrote a paper your teacher probably expected you to write a rough draft. In fact, your teacher probably expected you to write many drafts. So you slaved away on your papers; asking questions and making revisions until you finally had something that was worth handing in. . .right? Well I’m going to let you in on a little secret. . . design in the professional world is the same thing!
In this tutorial I'm not going to deal with specifics as much as I am with general work flow and process. So don't be surprised if I don't include every color hex value or opacity level. Just play around with the settings until you find what feels right.
What you will need
- A paper and pencil. . .really
- Adobe Photoshop
- Idea
- Sketch
- Produce
- Tweak
Part 1: The Idea
I have an idea. . . . .let’s do a home icon! Ok moving on.
Part 2: The Sketch
Before I begin any creative project I always make a sketch, whether it is a literal sketch with pencil and paper or a written description. It’s crucial to get your ideas out first so that you aren’t simultaneously trying to come up with ideas while you’re tackling with the technical aspects of creating it (such as getting the gradient tool to work).
Take out a piece of white paper (8.5 x 11 is good) and a pencil. Start sketching out some ideas for a home icon. How big is the building compared to the roof? Is there a door? Windows? Think about all of these things as you sketch, don’t worry about making the drawings perfect. (If they communicate your idea to you then that’s all you need.)
Take a look at the sketches below to see my process.
 |
See how simple this is. This was my first sketch and the basis for the rest of the project. At first I thought I would go with a 2-d look but after drawing this I felt I could do more. |
 |
I did another sketch, this time with a 3-d look. I liked the direction I was going in but I didn't like the orientation of the roof and I felt the building was a bit too long. |
 |
The next sketch I was pretty pleased with. I thickened up the lines and made the roof small compared to the building to give it a more cartoony feeling. |
So now that I had a shape that I was happy with, I took some more time to develop my idea further. I also began experimenting with color composition.
Before making your final decision about the sketch it's a good idea to see if the line of action or silhouette is strong. Remember that this icon is going to be very small and a strong contour is important.
 |
Notice that even without all the extra information you can still tell that it's a building. In this case I even asked my brother to come and tell me what this looks like. |
All right we have our idea all sketched out and ready to go. You’ll notice that production will go much faster as we have already done most of our creative thinking.
Part 3: Production - blocking out the shape.
All right, no time to waste! let's get to it!
Ok if you haven’t already, I recommend scanning in your sketch and opening it in Photoshop. If you don’t have access to a scanner you may download and use my sketch here. For the purpose of this exercise I’m going to assume you used mine.
With the sketch image open, make a new folder above the sketch layer. Name this folder construction. Or something similar.
Set the opacity of this folder to 55%.
With the construction folder selected, press P to select the pen tool and draw a rectangle like shown below. I applied a stroke to my shape so that I could easily see the contour lines.
The following steps are pretty straight forward, just keep using the pen tool to draw shapes as you trace around the sketch. Don't be concerned if it is super accurate, just block out the shapes, you can always go back and adjust them.
 |
Draw the final door shape and you will have your sketch all blocked out in photoshop. Congratulations! |
Part 4: Production - Color Composition
The next step involves blocking out the color. I need to decide which direction I want the light to come. I decided that the light would come from the side opposite the facing roof. I didn't use any gradients, just solid colors (using brighter colors for parts that were illuminated and darker colors for parts that were in the shadows.)
| I used the colors from my sketch as my palette. I kept the door black because. . .well it's a black door. |  |
At this point you don't need the sketch as a reference so go ahead and hide the sketch layer.
Part 5: Production - Highlights
All right, I'm a big fan of glossy surfaces so I'm going to add a few highlights to spice things up a bit.
Too many times I see highlights added at innapropriate places. Just like when you blocked out the color, keep in mind your light source as you add highlights.
 |
Press P to select the pen tool, make sure that the color is set to white and draw a highlight like shown. Drag the opacity slider for this layer down to 17%. |
 |
Add another highlight as illustrated and set its opacity to 35%. |
What is happening is the light is hitting the roof and then spilling over onto the other side and out front. I made it sharp because sharp edges create the illusion of a shiny surface.
Ok now that we have highlights let's add some gradients to give it a more tangible feeling.
Part 6: Production - Gradients
| Start by adding a vertical gradient to the left wall. Gradient settings and options don't have to perfect here, just play around with it. |  |
| Now add another gradient to the roof of the building, remember that the light source is comring from behind so you'll want it to go from white at the top and darker at the bottom. |  |
| Ok for the third and final gradient, the light is hitting the roof and being partially blocked by casting small shadow on the front of the building. |  |
note:for more information about gradients, highlights and color in graphic design check out my Principles of Glossy Interface Design tutorial.
Lets add a shadow to this icon.
Part 7: Production - Shadows
Press L to select the polygonal lasso tool. Mark a selection under your icon and fill it with black. Don't forget your light source!
|
With that black shadow layer selected, go to Filter > Blur > Gaussian Blur. Adjust the radius until it looks similar to the picture. You may also need to nudge the shadow up a bit to prevent it from looking like the house is floating. |
Part 8: Tweaking
You have a pretty effective icon created! The tutorial is done at this point but I encourage you to go on and tweak it, add some of your own creative ideas.
To get started, a good strategy is to get up from your chair and step back about 10 feet. Look at the image and see if you notice anything that could use some improvement. No seriously. . do it, professional designers and artists do it all the time. You'll be surprised at what you see.
Also try this trick, hold down Shift-Alt and scroll your middle mouse button. It should zoom in and out. This is a helpful zoom as it retains sharp edges.
 |
Here I did an extra 15 minutes of tweaking on the icon. What will you come up with? |
If you look at the picture you'll notice that there are slight mistakes. In the icon business though that's ok, you don't have to have a perfect product for the icon to still be effective. Look at it now when I size it down to 64 x 64.
You can't even see the imperfections can you? And that's a big icon!
Conclusion
So that concludes my tutorial on how to make your own icon from scratch. Don't forget to always sketch out your drawings first, photoshop takes a lot of time and it stinks when you spend a lot of time on a project just for it to go no where.
If you have any questions or comments feel free to contact me.
Good Luck!