Create XP-style Icons Using Illustrator or Freehand

In this third and last article of our vector graphic series, you'll use your knowledge of faux 3d vector graphics as we walk step-by-step through a real-life, practical application that I think you'll find extremely useful.

You'll learn how to make your own Windows XP-style artwork, which you may end up using for Website graphics, software application icons, or in other projects.

Note: I'll be making my diagrams and commands using Adobe Illustrator 8, but those who use Freehand should be able to follow along just as easily.

Let's start by deconstructing a familiar XP icon -- the flat-screen monitor shown here:

First, create a rectangular shape for the screen using the Pen tool. It's helpful if you understand a little bit about how to draw with perspective (see the links at the end of this article if you want to learn more).

Fill the shape with a radial, white-to-aqua gradient.

Using the gradient tool, click and hold near the upper middle edge of the shape and drag down, releasing the mouse button just before you reach the bottom of the shape.

Now, we'll create a rounded-edged shape around the screen, which will act as the frame of the monitor. Set the fill of the shape to "none" to help you see what you're doing, then use the pen tool to draw an edge around the screen with rounded corners.

One the shape looks the way you like it, fill it with a grey-to-purple gradient.

Right-click on the shape and choose Arrange > Send to Back. This will allow the blue screen shape to lie on top.

Now, use the Pen tool to create a rounded "L" shape along the top and left edges of the screen and fill it with a purple-to-white gradient. Use the gradient tool to fill the shape with the white coming from the top left corner to make it look like the light is coming from that direction.

Create a highlighted edge along the bottom of the screen using the Pen tool as well. Don't be afraid to zoom in and use the white arrow tool to adjust the edges. We also filled this with the same white-to-purple gradient.

The screen part is done! Now, for the stand…

The stand is essentially made up of two shapes that make the front surface and side surface. First, create the shape for the front surface. I filled it with the grey-to-purple gradient.

Next, create the side shape and fill it with a purple-to-white gradient. The gradient changes from dark-to-light from top to bottom, which makes it look as if the light is hitting the monitor from that side, but the top part is slightly shaded by the screen.

Finally, create a "border" for the shape. This new shape juts out slightly on the left and bottom of the stand, but aligns with the right border of the stand.

When you fill this shape (with a dark purple color, or purple-to-grey gradient), it will hide the pair of shapes that make up the stand.

Again, right-click on the shape and go to Arrange > Send to Back to send the "border" behind the shapes of the stand.

Finally, using the ellipse tool, create the base of the stand, filled with a light white-to-lavender fill.

Again, "Send to Back" to place the base behind all the other objects.

Choose the Scale tool.

With the base still selected, click and hold the mouse button to scale it down very slightly. Hold the Alt key (Option for Mac) while you drag slightly inward and let go of the mouse button. What this does is scale down a copy of the shape. Now you should have two ellipses, one inside of the other.

Select the outer shape and fill it with the darker grey-to-purple gradient colors.

And there you have it: a vector version of a flat-screened monitor that looks disturbingly like the Windows XP monitor graphic, using nine individual shapes and lots of gradients.

Now, let's put this shape into Photoshop and add a drop-shadow to make it look "officially" XP-ish. Select the entire group of objects and copy.

Paste the shape into a Photoshop document ("as pixels"), resize it as needed, then go to Layer > Layer Style > Drop Shadow.

Set the angle of the drop shadow to 135. Set the Distance and Size to 2 or 3 pixels and adjust it to suit the size of your graphic.

And there you have it: an XP-style computer monitor!

Now, to create and make up your own Windows XP-style graphics will take a bit more artistic skill. In particular, you have to be comfortable with drawing in perspective, and you must be able to take the object you want to draw and "simplify" it so that the icon or graphic will work at small or large sizes.