Icon drawing tutorial
I love designing icons. I am not sure what it is about drawing at a small scale that is so appealing. I think it must stem back to spending hours upon end doodling on the Super Nintendo in Mario Paint when I was in middle school. My mom always said it was a waste of time, but I knew better. Now I am able to share all that otherwise useless knowledge with you!
In this day and age, with cool operating systems like Mac OSX, icons can be up to 128x128 pixels, with partial transparency and thousands of colors. While I certainly appreciate these types of icons, particularly the Firefox logo done by John Hicks, this tutorial will cover the old-school type of icons that can be seen at SimpleBits and IconBuffet.
I must admit, the idea for an icon drawing tutorial is not a unique one. In fact, this tutorial was inspired by Ross Harvey over at Web 9 Design. However, I have a slightly different method than he does, so I figured I would share mine. He recommends starting with an outline, but I have always found it easiest to go from the inside out.
I always start with just black and white, as it forces me to concentrate on the main features, rather than get caught up focusing on colors right away. I usually start with what I anticipate being the most important area to draw correctly. With a person, this might be the eyes, nose and mouth. In the case of this telephone icon we will be drawing, I wanted to make sure to get the 12 buttons squeezed in there first. Yes, there are 12, ten numbers and * #.
Icon Process (200% zoom)
First draw the 12 buttons and put a little border around them.
Then draw a basic outline of the phone.
After that, add in little details such as the line between the phone receiver and the base.
Then, add the cord. So far so good, but all we have is a black and white icon. That is not terribly exciting.
Time for some gradients. If you are using Fireworks, you will need to turn the object sideways, and select the gradient paint bucket and fill things in. If you are using Photoshop or Paint Shop Pro, you can just use the gradient brush, or set start and end points.
Now, add a slightly darker gradient to the outline to soften up the look.
Finish it off by softening the inner lines.
Final Outcome
So, there we have it, a nice little telephone icon that is 30x25 pixels, well within the 32x32 constraints of Windows versions previous to XP, which now allows for 48x48 pixel icons. Go forth my friend, armed with this new pixel drawing knowledge, making sweet icons for the masses!
If you would like to use this icon, feel free. In fact, I've even gone through the trouble of making a little Zip file containing several formats: a web-ready GIF, Windows ICO, source PNG, and the 1-7 Icon Progress chart shown above.
- Download here: phony-icon.zip (32 KB)