I'm Michael Suodenjoki - a software engineer living in Kgs. Lyngby, north of Copenhagen, Denmark. This is my personal site containing my blog, photos, articles and main interests.

Article

Creating a Windows XP Folder Icon
Adobe Illustrator tutorial included

Start > Productions > Articles > XP Folder Icon | 

Updated 2014.05.29 12:17 +0200 | 

Ikke tilgængelig på Dansk

By Michael Suodenjoki, michael@suodenjoki.dk.

Version 1.0 February 2003.

Abstract

This article describes what I've found out about making icons and gives a simple example of making a Windows XP folder icon in Adobe Illustrator. This can then be used for further design work and eventually end up as an icon.

Update July 2007: Icon design has progressed since this article was written. I occasionally maintain and update the links section as new information related to icon design is collected.

Figure 1. Screenshot from Adobe Illustrator with the finished folder icon.

Requirements

To follow this article it requires an understanding of basic illustration principles in Adobe Illustrator and Photoshop.

Contents

1 Introduction
2 Icon Design Principles
3 XP Icon Characteristics
4 Tutorial
5 Conclusion

Appendix: Bibliography & Links

1 Introduction

I've been working in the same company for several years were we have developed a series of Windows applications. Through the years I've always felt that the look and feel of the applications were somewhat degrading - or even unprofessional looking. So I took the initiative to investigate how I could improve the look by focusing on the different application icons and toolbars inside the applications. This article describes what I've found out about making icons and gives a simple example of making a Windows XP folder icon in Adobe Illustrator.

The article will try to follow the pace I went through in the process - elaborating sometimes with paragraphs explaining concepts or principles that I came across during my investigation.

Note that I am not a professional designer nor an expert user of the tools mentioned in this article so there may be concepts or explanations that are inappropriate, wrong or too primitive. So don't blame me. I am only an amateur.

2 Icon Design Principles

I started by reading the excellent MSDN article »Creating Windows XP Icons« written by the Windows User Experience Team at Microsoft. I remembered that MSDN presented an article back in 2001 when Windows XP were introduced. Gladly I found that the article were easy to find and still very useful.

In the article I noted that they referred to a vector based drawing application as a means to creating the initial layout of the different objects within the image. One big advantage of using a vector-based application like Adobe Illustrator is that you can resize the image to what ever size you want without changing the resolution, e.g. as you may know when a line appears to be zigzagged by dots and looks awful. The advantage with this is that the image also easily can be used in printed documentation with larger resolutions.

The article also mention that I should draw - on paper with a good ancient pencil! - a rough sketch of my image. Initially however this was not my interest. I was only interested in the more technical details of how to create a good looking icon. By the way, it is not easy to create a good design of your icons. That's why many companies hires professional creative design bureaus to do the job (see my appendix that mentions a few bureaus). They have the knowledge and experience of connecting your ideas (hopefully) to a design concept. That's what they do and live - a hmm, get paid - for.

If you do not want to dwelve on the more detailed icon design principles you may want to skip the following section and proceed to next chapter on XP Icon Characteristics.

[This part of the article is not yet available. For now I suggest reading the material mentioned in the appendix]

Illustrates how modern icons have become more and more complex and realistic.

» Illustrates how modern icons have become more and more complex and realistic. Does this approach translate to good icon design? Now, more than ever, it is important to have a solid concept and clean execution when designing icons. The new larger canvases, and expanded color palettes are unforgiving to the eye and the days of throwing a few pixels together to pass as an icon are long gone. Take a look at this slice of icon history and you'll see what we mean. Illustration and text courtesy the "IconBuilder XP User Guide" from www.iconfactory.com.

 

3 XP Icon Characteristics

Each icons should share some common characteristics before they look similar to the standard Windows XP icons:

Characteristic 1: The angle and perspective should be equal between the images (and objects within the image).

Clear enough. The icons would look stupid if they didn't share the same perspective and angels. The only documentation of what precise this means are given in form of an picture (see below) in the article showing the perspective in a grid image.

Figure 2. The grid image documenting the perspective/angels.

Characteristic 2: Edges and corners of objects are soft and slightly rounded.

What exactly that means are somewhat unclear for me. The article doesn't mention any specific details of the rounded corner angels, so I've concluded that it must be up to the designer.

Characteristic 3: Light source is coming from the upper left-hand corner.

Now it's not exactly that I know of any camera and light position control possibilities inside Illustrator so I figure that this somehow suggest in which angle that I should use for making gradient fill of my objects. Upper left-hand corner. I think that must be -45 degrees, right? The article mention that other additional ambient light may be used to illuminate other parts (objects). So again I think its pretty much up to the designer.

Characteristic 4: The images should have a drop shadow.

While the article mention that this is something you do in the post-process in e.g. Adobe Photoshop or in a icon editor supporting drop shadow, I mention it here anyway.

Characteristic 5: Outlines provide definition.

Yeah right! I guessed this mean that the objects should be drawn in a stroke pen of sufficient thickness that outlines the objects, but which thickness is not mentioned.

Characteristic 6: Use colors from the primary icon color palette.

This will ensure that your icons have this washed out color style as used in the Window XP icons. The icon color palette is luckily fully documented as a set of 31 RGB color specifications (see figure 3 below). In step 3 in my tutorial chapter below a zip file is available for download with the Adobe swatch colors representing the primary icon colors.

Figure 3: The primary Windows XP icon colors.

Characteristic 7: Icons should be provided in standard sizes and colors.

While I'm not actually creating an icon in this article, this is an important aspect so Read the details in the MSDN article.

4 Tutorial

Okay, but back to the practical job of creating our folder icon. I took a copy of the grid image (as seen in figure 2 above) and pasted it into a new Illustrator  document. In this way I could use it to compare my object drawings with the correct angels and perspective of the grid image. Well, actually I cheated. Since I was creating a folder I could simply use the Pen Tool (P) to mark the complete folder from the grid image - making some qualified guesses on the way, of points that were invisible in the grid folder image.

1 First use the Pen Tool (P) The Pen Tool (P) to capture the rough folder layout. That is, define two paths, each in a separate layer. One layer for the back of the folder and one layer for the front of the folder. Don't care what stroke and fill color that you're using. This we change later on. Remember to create several anchor points at the corners; at least one before the corner and one after the corner. If necessary use the Direct Selection Tool (A) to select individual anchor points so that you can move misplaced anchor points. 

Step 1: Screenshot from Illustrator. 3 layers has been created. One with the background image, one with the front folder path and one for back folder path (currently in progress).

2 We now need to smooth the corners of the folder paths. Use of the Convert Anchor Point Tool (Shift+C) to smooth the rounding of the edges of the corners. If you're not familiar with the pen and anchor tool I suggest that you try it out first, e.g. in a new blank image. Reading the help may also be a good idea. If you want to do it real easy you may also try to use the round corner stylize filter; available in Illustrator 10 in the menu item Filter|Stylize|Round Corners.... A good corner value of 2px seems to be appropriate.

Step 2: After rounding the corners in the paths. Note that I've changed the order of the layers so that the Front Folder is in front. Alternatively the two paths could have been put into the same layer and then rearranged the order between them (you know Send Backwards or Bring Forward).

3 Okay, so far so good. Lets get some color into the picture. As mentioned above in the icon characteristics section, XP icons share some primary colors. I've created a swatch template file with the complete set of primary XP icon colors, as well as a Photoshop .aco file. In this way you don't need yourself to setup the necessary swatches representing the colors.

Download swatches.zip file with:

  • Illustrator 10 swatch template file (.AI). Save it into your ".../Illustrator 10/Presets/Swatches" folder and then gain directly access to them from Illustrators Window|Swatch Libraries menu item.
  • Photoshop Adobe Color file (.ACO) with swatches. May be directly loaded (setup) from the Swatches palette.

You may need to restart Illustrator before it appears correctly. Remember to save your current illustration.

4 So now you should have the primary icon color swatches palette available. As the icon characteristics mentions we need to outline the icon with a dark color, so let's select the dark yellow/orange color R255 G204 B0 as a stroke pen color.  Select each of your paths objects, press X to select stroke and then select the color from the swatch palette. I've set my stroke attributes to have a 2pt weight stroke, so that the outline becomes thicker.

After step 4. The folder paths has been outlined with a dark orange stroke of weight 2pt.

Tip: If you want a even better outline you may also create an white inner outline for your object. This may help it stand out better on darker background when the resolution decreases (e.g. in 32x32 or 16x16 pixel icons). The only way I now about making a inner white outline is actually to create two copies of the same object, one slightly smaller than the other and with a white stroke pen.

5 We need some more color into the folder. This time we need to ensure that the folder is lighted correct. I've found that using a gradient color can be used to obtain a least some partially light effect.

  1. Select both path objects of the folder icon.
  2. Select Fill (X).
  3. Select the Gradient Tool (G) and ensure that the Gradient palette is visible with full details (double click on the gradient palette tab to open up details). You should not be ready to select the colors of the gradient. Don't care if your objects already are filled out with a black/white gradient.
  4. Select the left gradient slider and while pressing the Alt key select the light yellow swatch color R255 G255 B153 from the swatch palette with your mouse.
  5. Select the right gradient slider and while pressing the Alt key select the dark orange swatch color R255 G204 B0 from the swatch palette with your mouse.
  6. From the gradient palette enter an Angle value of -45 degrees, so that the gradient is adjusted to an angle fitting the idea of light coming from upper-left corner. You may also play around with the Location of the gradient slider midpoint to make the light more natural. I've found that a Location around 70% seems to be fine.

After step 5: The objects has been filled out with an appropriate gradient fill.

6 The image is soon to be finished. The only thing missing is actually that the front folder path object becomes transparent. So select the front folder path object, select the Transparency palette and adjust the Opacity to an appropriate value. I've found that a opacity around 60% seems appropriate.

Step 6: Adjust the opacity of the front folder path object.

7 Well that basically it. The drop shadow may be added either directly from within Illustrator (Filter|Stylize|Drop Shadow...), within Photoshop (after you have copy/pasted it into Photoshop) or within your favorite Icon Editor (if it supports drop shadow effect).

I've experimented with, what seems to be a very good icon editor, IconWorkshop 5.0 from Axialis. It has a Photoshop plug-in that allows you to transfer a selection from Photoshop directly to a new Icon project in IconWorkshop. A very neat feature that quickly and easily allows you create fancy looking icons.

Screenshot from Axialis IconWorkshop 5.0 with our created folder icon (as created via the Photoshop plug-in). The drop shadow has not yet been added.

5 Conclusion

I've shown you how you can create a simple folder icon from within Adobe Illustrator supporting the Windows XP icon characteristics. Because it is created in a vector based illustration application the image is fully resizable without the usual problem of loss of resolution. This makes it easy to create images that as well can be used in your written documentation; manuals, user guides, help file system etc.

The simple principle of using another image as background and then draw after that allows you to create your own icons versions without necessarily being a master illustrator, capable of drawing images with correct perspective etc. You do need to have a flair for illustration especially color and light aspects, but again you may be inspired by how other icons are designed.

There is of course some work left before the a full icon file is available. But I've found that a good tool, like Axialis IconWorkshop, may help you a lot with this important step.

Hope you dive right into designing your own icons and hopefully have had some use of this article.

Icon Design Principles

Links

Tools

Creative Icon Design Bureau's/Individual's: