The Basics of Icon Creation the Microsoft Way

Microsoft provides a comprehensive look at creating Windows icons on its Microsoft Developer's Network (MSDN) Library website. The links to articles on this site can change over time, but at the time of the writing of this book a step-by-step article on creating Windows icons was available at the following URL: http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwxp/html/winxpicons.asp.

Note

A vector drawing tool is a tool that can create vector graphics, meaning the graphic is saved as a geometrical formula rather than a pattern of dots (such as raster graphic programs use). Vector graphics do better than raster graphics when they are resized or stretched. Microsoft Paint creates raster graphics.

Note

Adobe Illustrator, Adobe Photoshop (www.adobe.com), and Gif Movie Gear (www.gamani.com/foricons/) are all available as free 30-day trial software and can be downloaded from the sites noted here. Play around with the free versions and see whether creating icons in this manner is for you.

Note

Microsoft provides a suggested RGB color palette and other specifications at http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwxp/html/winxpicons.asp. These are, again, suggestions for professional-looking icons that will be consistent with Windows default icons. If you are creating your icons for yourself or for fun, you should use your own colors and settings. Trial and error is always the best way to develop your own standards for icon creation.

First of all, you need a vector or 3D drawing tool such as Macromedia FreeHand or Adobe Illustrator. Both are suggested by Microsoft in the icon guidelines provided.

Vector drawing tools can be expensive, but if you have access to Illustrator or FreeHand, they can also be used to create Windows backgrounds (see Chapter 11, "Creating a Background Library") and other skin elements. You also need Adobe Photoshop and a program called Gif Movie Gear (GMG), which is used to create the icon files.

Drawing the Icon

The first step in creating an icon is to draw the icon. Microsoft suggests that the icon be created in three sizes: 46¥46, 30¥30, and 14¥14. The reason the icon sizes are not 48¥48, 32¥32, and 16¥16, which is the final icon size, is that a drop shadow is then added to the icon in Photoshop to provide the icon with a 3D look.

So you draw an icon, such as the icon shown in Figure 10.5, which was drawn using Illustrator. After you have the icon, you need to select it and paste it into Photoshop. Again, Photoshop is a fairly pricey software package, but you can do a lot with photos and other images in Photoshop, so it's a great program to have (especially if you need to touch up a digital photo).

Figure 10.5. Draw the icon.

Before pasting, you must create a new Photoshop file that is 48¥48, assuming you started with a 46¥46 drawing in your vector graphics program. You can then stretch the pasted icon to fill the canvas in Photoshop. Also be sure you set the color scheme for Photoshop to RGByou set this on the Photoshop Image menu. Gif Movie Gear, the program you will use to convert the images to icons, can't handle CMYK.

Note

RGB is a color scheme that creates colors by mixing red, green, and blue (hence, the acronym RGB). It is the scheme used by computer display monitors. CMYK is a color scheme that creates all colors as a mixture of cyan, magenta, yellow, and black.

Applying the Drop Shadow

In Photoshop you can apply the drop shadow. On the right side of the Photoshop window is a box called the Layers Palette. It provides a list of each layer in the current image. Because you pasted a drawing into Photoshop, there are currently only two layers: Layer 1 (the drawing) and the background. If you double-click Layer 1 in the Layers Palette, the Layer Style dialog box opens (see Figure 10.6).

Figure 10.6. Add the drop shadow to the icon in Photoshop.

To add a drop shadow to the image, just click the Drop Shadow option in the dialog box. Then click OK to close the dialog box.

There is still one more step to ensure that the drop shadow is not lostyou must merge the drop shadow with the actual image. In the Layers Palette, click Layer 1 (the image layer) to select it. Then select the Layer menu and click the Merge Down command. This merges the image layer with the background layer, preserving the drop shadow.

You need to repeat the copy and paste outlined here to create each of the icon sizes: 48¥48, 32¥32, and so on. The good thing is that you need to draw the icon only once. And if you only need 32¥32 icons for your particular screen resolution, you can just create the size you need because you are really creating the icons for your own use.

Converting Images to Icons

After you have the Photoshop version of your icon and have saved the files as .psd files, which is the default in Photoshop, you are ready to convert the images to icons using Gif Movie Gear.

Note

Gif Movie Gear can do more than just create icons. It can also save image files as cursors (.cur). It is designed to be a tool to create animated GIF files.

When you start Gif Movie Gear, the Start screen appears. You need to add frames (your icon images) to Gif Movie Gear. So, on the Start screen, click Insert Frames. This opens the Insert Frames into Animation dialog box. To, select the Photoshop icon files you created, click the first one and then hold the Ctrl key down as you select others.

Next, click Open. The Handling of PSD Layers box opens. Make sure the One Composite Frame option is selected, and then click OK. If you are opening multiple images, you have to repeat the process (the Handling of PSD Layers box opens for each image).

The images are then pasted as frames into the Gif Movie Gear application window (see Figure 10.7). I placed 48¥48 and 32¥32 icons into the application.

Figure 10.7. Open the Photoshop icon files in Gif Movie Gear.

You need to do two things in Gif Movie Gear: You must make the icon backgrounds transparent, and you must then save the icons in an icon file (.ico). Select one of the icon frames and then click the Pick Transparency Color button on the toolbar (it is the button with eyedropper tool on it).

This opens the Pick Transparency Index dialog box (see Figure 10.8). Use the Zoom button in the dialog box to zoom in on your icon. Use the eyedropper tool to click the background of the icon and make this area transparent.

Figure 10.8. Make the icon background transparent using the Pick Transparency Index.

Click OK when you have made the background transparent. Repeat the process using the Pick Transparency Index dialog box for each icon you placed in Gif Movie Gearmeaning each frame that you inserted.

When you have completed the process, you are ready to save the icon in an icon file. Click the Save button on the Gif Move Gear toolbar. The Save As dialog box opens. Type a name for your new icon file and then change the Save As Type to Windows Icon (.ico). Save the icon file to an appropriate folder.

Now you can open the new icon file using the Desktop Items dialog box via the Desktop tab of the Display Properties dialog box. You can also apply the icons using skinning software you have installed on your computer.

Creating icons in this manner can produce icons of excellent quality, particularly if you have any artistic abilities. However, it is a rather pricey and time-intensive way to create icons for your Windows themes and skins. Each software package involved requires its own learning curve. Another possibility is using a dedicated icon-maker software packagea subject we discuss in the next section.