melbourne chapter

Recently I had to create some icons for a website I’m working on, so I thought this would be a great opportunity to demonstrate how easy this is.

There seems to be many icon generation tools out their, but it’s just as easy to create icons in Fireworks (or Photoshop).

Creating an icon in Fireworks
Before starting your icon should have a design in mind - remembering there are very few pixels to work with. A good point of reference is the Webdings and Wingdings font-families (I use the Accessories > Character Map).  In this case I am creating an icon for my “Email a Friend” tool.

Now I have my design I create a new 16px by 16px document at 72dpi in Fireworks:

I also want to have some sort of guide when I’m tracing this image so i’ll turn on the grid and set it to 1px by 1px boxes: View > Grid > Edit Grid then View > Grid > Show Grid. I now have a 16px by 16px document divided into 1px squares.

Next I import my design (File > Import), and scale it to the 16px by 16px canvas. You will notice the design is quite aliased, but thats okay, as I only plan to use it as a guide.

The last thing I do before starting my icon is create a working-layer (Layers > New Layer) .
Using the Pencil tool (Tip: chose a different outline colour to the design) I start to trace my design to the nearest pixel (re-click pixels to erase them). Every so often I  zoom out to 100% to check how my outline looks to the naked eye. You’ll notice there is a certain level of optical illusion going on, what is actually steps of pixels at 3200% looks like a curved edge to the naked eye.

Finally I have finished the outline of my design. Notice I also decided to fill the background image to create some contrast.
And here is the final icon in all it’s glory

For more inspiration I suggest you checkout the IconFactory.com.