Updated 2014.05.29 12:17 +0200 |
Ikke tilgængelig på Dansk
Version 1.0 February 2003.
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.
To follow this article it requires an understanding of basic illustration principles in Adobe Illustrator and Photoshop.
Appendix: Bibliography & Links
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.
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]
Each icons should share some common characteristics before they look similar to the standard Windows XP icons:
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.
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.
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.
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.
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.
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.
While I'm not actually creating an icon in this article, this is an important aspect so Read the details in the MSDN article.
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) 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.
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.
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:
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.
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.
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.
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.
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.