Icons and Avatars

People always seem surprised to find out that I do all my icon work in Adobe Fireworks, but it affords some handy vector design tools as well as the bitmap utilities for tweaking pixel graphics.

Start large, and start with basic shapes. For example, when you’re making an icon of something like a camera, you wouldn’t start with the tiny buttons or worry about the colors first – instead you’d make a large box, exaggerating the proportions of the camera and draw a fat circle for the lens. The larger those recognizable features are, the quicker your illustration is going to tell people what the icon is all about. Drill down on details, adding shapes until you can sit about three feet away from your screen and think the basic concept looks good.

Once you’ve got the basic shapes down, shrink the vector illustration and add more details and color. Use 2-color or 3-color gradients to make things shiny or shaded, and tweak them around until they look right. Single pixel outlines can “contain” your icon. In Fireworks, you can change the stroke to be “centered”, “inside” the fill or “outside” the fill, and you can check “fill over stroke”. Normally these options don’t impact Web design too much, but they make a HUGE difference in a tiny illustration, bringing out or hiding important details. Try using a double-outline on your icon to make a finished edge. For example if you’re icon is of a yellow banana, give it an orange-ish outline and then a white outline outside that, then a little drop shadow. The contrasting edge will make the icon pop out.

Very slight drop shadows can add a lot of depth, either inside your illustration, or on the completed icon. At a small scale, adding tiny things like reflections is super easy and can make a big impact on the gloss of the final icon.

While experimenting, duplicate your icon and toy around with it. Compare the new version with the old one before deleting the one you don’t like.

The best part about using Adobe Fireworks for this stuff is that it combines vector and bitmap editing. So don’t be afraid to use some vector art from Illustrator, or some Bitmap art from Photoshop, combining and adding the finishing touches in Fireworks before optimizing. I’ve even seen Tim do some great icons in Flash, which has a very unique freeform drawing toolset.