Create XP-style Icons Using Illustrator or Freehand

The first step is to get familiar with Microsoft's style and design guide for creating Windows XP icons. This gives you some guidelines on what the "look" is all about ("fun, color, and energy"), provides a general color palette (duplicated below), and gives examples of how objects should be angled and grouped.

The color palette used in Windows XP icons.

Did you enjoy reading through the style guide? Then, let's get started with this last step-by-step example, where I'll show you how I make a dog house graphic in the Windows XP style.

In The Dog House!

First, I make a rough sketch of what I want the icon to look like, keeping in mind the angle guidelines provided by Microsoft.

Then, I create a grid of lines that match the perspective grid from the Microsoft style guide, and use the pen tool to create the front of the doghouse. (You may download an Illustrator file with the same grid.)

Once I have the front of the doghouse, I hide the grid (View > Hide Guides) and use the pen tool to draw the side of the dog house:

I fill the side and the front with a red-to-darker-red gradient:

Then I draw two more shapes for the roof and fill them with a darker red-brown gradient. The second shape (the right diagram) is the back side of the roof; it's what the shape would be if you could "see through" the house. It looks a bit odd in the diagram because it's lying on top of all the other pieces of the dog house.

So, I right-click the second shape (the "back" roof) and choose Arrange > Send to Back.

This gives me a nice dog house shape.

I use the pen tool again to create a door shape and fill it with the darker gradient colors.

Then, I use the pen tool -- set to "no fill" -- to draw an outline around the entire shape. I fill it with an even darker red-brown gradient to get a "border" for the shape.

Since this new shape is lying on top of everything else (and hiding the other parts of the image), I send it to the back as before.

My finished vector graphic:

After I copy it into Photoshop and add a drop shadow, the graphic is complete!

That wasn't too hard, was it?

Notes, Links, and References

In some cases, you can get away with setting a stroke for a shape instead of using the pen tool to make a "custom border." With larger-sized graphics, however, I like to make a custom border because then I can have a gradient-filled "stroke."

The Microsoft "Creating Windows XP Icons" document also gives a nice overview of how to take your Photoshop file and, using another piece of icon-editing software, create an icon file (.ico) out of it.

There are tons of other icon editors out there. A simple search at download.com returns lots of results that you can try.

If you want to learn more about perspective drawing, here are a few places to start:

• http://drawsketch.about.com/library/weekly/aa021603a.htm
• http://mathforum.org/workshops/sum98/participants/sanders/Persp.html

Did this article make you wonder, "How do I make 'aqua' (Mac) icons?" Here are two sites that might be helpful with the design aspect of that particular challenge. Just be aware that Mac icons generally require "real" 3D-rendering:

• http://www.pixelcentric.net/aquaicons.html
• http://www.pyrusmalus.com/icons/c/icons_process.html

Stuck for ideas with the "drawing" aspect? intersmash.com shows just how many ways you can make an arrow icon or a shopping cart icon.