Journal

Icon Drawing Tutorial

9 December 2005 › 17 comments

I love designing icons. I’m 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’m 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 128×128 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’ve 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’ll 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)

1. So, first draw the 12 buttons and put a little border around them. 2. Then draw a basic outline of the phone. 3. After that, add in little details such as the line between the phone receiver and the base. 4. Then, add the cord. So far so good, but all we have is a black and white icon. That’s not terribly exciting.

5. Time for some gradients. If you’re using Fireworks, you’ll need to turn the object sideways, and select the gradient paint bucket and fill things in. If you’re using Photoshop or Paint Shop Pro, you can just use the gradient brush, or set start and end points. 6. Now, add a slightly darker gradient to the outline to soften up the look. 7. Finish it off by softening the inner lines.

Final Outcome

So, there we have it, a nice little telephone icon that’s 30×25 pixels, well within the 32×32 constraints of Windows versions previous to XP, which now allows for 48×48 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 (32kb)

Discussion + Dissension

1. #1 Beth

   Hey Nathan, I was just talking about this with someone else. Have you ever used Axialis Icon Workshop? It’s great. I build my Icons in Fireworks, then import them into Axialis and clean them up for smaller sizes, and am able to export them for several versions of OS and Windows. It’s pretty cheap and you get free updates for life.

2. #2 Nathan Smith

   Beth, that’s cool. I haven’t yet used Axialis, but will give it a try. I’ve been hacking things out using an older version of Microangelo, but I really like that Axialis supports OSX and Vista. If anyone’s curious, the address is here:

   www.axialis.com/iconworkshop

   For a cool OSX icon tutorial, check this out:

   Creative Bits - Anatomy of an Icon

3. #3 Yannick

   Nice tutorial Nathan. One question though, I noticed you both mentioned two programs you used, but when making icons (not for the web) do you have to have a specific icon making program to finally save it, or can you use Fireworks or Photoshop straight and save it to the proper format?

4. #4 Nathan Smith

   Yannick: As far as I know, you need a specific program to convert icons for various operating systems. For web though, the favicon.ico needn’t be converted. You can just use a normal GIF, chop off the file extension and rename it to *.ICO, lowercase of course.

5. #5 Elliot Swan

   Great tutorial.

   Yannick: I believe there is a photoshop plugin that allows you to convert or save as an .ico file, though I don’t know what it’s called (I’ve never used it).

6. #6 Lance Willett

   Nathan, cool post and nice finished icon! It looks nice.

   For Yannick: I use Photoshop to create icons, and there is a free plugin to save any artwork from Photoshop as a file in the ICO file format.

   Get the plugin.

7. #7 Yannick

   Thank Elliot and Lance. Much appreciated.

8. #8 Nathan Smith

   Cool, didn’t know that about the Photoshop plugin, not being a big Adobe guy myself. Does anyone know of a plugin for Macromedia Adobe Fireworks?

9. #9 Jennifer Grucza

   Thanks for the tutorial. I just started playing with Fireworks for the first time and I’m really liking it (jennifergrucza.com/.../macromedia-fireworks). One thing – you say you have to turn the image on its side for the gradient. I haven’t tried the paint bucket tool with gradient yet, but for the fill color of shapes, it looks like there’s a line you can move around and change its direction to get the gradient going in the direction you want.

10. #10 Nathan Smith

    Jennifer: Good point. Though, I’m a bit picky, so I use a plugin called Fill Handles Assistant, allowing you to specify an exact start and end point such as top-left to bottom-right, etc. You can download this plugin and many others in a pack for free at: Project Fireworks.

11. #11 Jennifer Grucza

    Thanks for the link, Nathan. Though I thought Fireworks let you do that same thing. Maybe it’s a new feature? Do you have Fireworks 8?

12. #12 Nathan Smith

    Jennifer: Fireworks does let you do that, by dragging around the Fill Handle. But, with this plugin, you don’t have to do that, you just tell it the location of the start and end points, relative to the shape of the object. It puts a nice little point and click interface to it, rather than the randomness of trying to precisely place the gradient yourself. I have the Fill Handle turned off in FW, so it doesn’t get in my way, and just use the plugin for positioning gradients.

13. #13 Beth

    I don’t think Fireworks has an equivalent .ICO plugin, but if someone proves me wrong, please do provide a link as this would be useful :)

    Also, Nathan with all this talk of Fireworks recently, I was wondering if you’d ever tried to create custom panels? There’s a tutorial in the (old) Macromedia blogs about creating custom panels with the use of Javascript and Flash. I always wanted to try this but never had the time. Right now I’m thinking it’s just a more complicated actions panel (like Photoshop) but I think it has potential for a lot more.

14. #14 Nathan Logan

    Perhaps the easiest way to create favicons is to use Chami’s favicon generator. It’s good stuff.

15. #15 Nathan Smith

    Nate L: Good point, one needn’t throw away money on an icon converter, if you’re mainly duing them for web usage anyways. That’s a good resource. I’d seen it awhile ago, but totally forgot about it.

    Beth: While I’m aware of the possibility to made additional Fireworks panels, I haven’t ever found myself needing some functionality bad enough to research how to go about doing it. I did though, take the old Fireworks MX 2004 align panel, and overwrote the Fireworks 8 demo when trying it, because it is black and white, and I missed the old orange and blue icons. How geeky is that?

16. #16 Craig Templeman

    To be honest I have no problem making an icon in Fireworks. What I made is a radial elipse, with a gradient for lighting at the top, and then the logo in the middle, so that it looks like a round 3d button. Looks great on a web page. MY problem is, I want to use it as a shortcut on my desktop. I can copy it into MS paint and save it as .ico of course, but it is square and crappy looking since paint resized it to 31×31. How do I export a Fireworks graphic as an Icon? HELP!!

17. #17 Nathan Smith

    Craig: For making *.ico files, I use a program called Microangelo to convert them. If you’re talking about actually having nice, partial alpha transparencies in Windows icons though, I’m afraid you might be out of luck. Mac OSX is the only operating system I’m aware of that has such nice icon capabilities.

Comments closed after 2 weeks.