Creating Windows XP Icons

  • Article

 

Windows User Experience Team
Microsoft Corporation

July 2001

Summary: This article discusses how to design and create colorful and dynamic icons for Windows XP using a vector program, such as FreeHand or Illustrator, and Photoshop. (19 printed pages)

Contents

Introduction
Icon Design Overview
Step 1: Conceptualize
Step 2: Illustrate
Step 3: Creating the 24-Bit Images
Step 4: Creating the 8-Bit and 4-Bit Images
Step 5: Creating the .ico Files
Toolbar Creation
AVI Creation

Introduction

Microsoft® Windows® XP introduces a new style in icon design. The following guidelines walk you through the steps of designing and creating Windows XP-style icons.

The Windows XP icon style is all about fun, color, and energy—and, as there are now 32-bit versions of the icons, smooth edges. Each icon is rendered in a vector program and then manipulated in Adobe Photoshop to create a beautiful image.

These guidelines are geared towards designers. We recommend you work with a good graphic designer, especially one with experience in using vector or 3D programs, to create your images.

Figure 1. Icon samples

Icon Design Overview

This section will familiarize you with the new Windows XP style in preparation for creating your icons.

Icon Style Characteristics

  1. Color is rich and complementary to the Windows XP look.
  2. Angle and perspective provide a dynamic energy to the images.
  3. Edges and corners of elements are soft and slightly rounded.
  4. Light source is coming from the upper left-hand corner with additional ambient light illuminating other parts of the icon.
  5. The use of gradients provides dimension and gives the icon a richer look.
  6. A drop shadow provides contrast and dimension.
  7. Outlines provide definition.
  8. Everyday objects, such as computers and devices, have a more modern consumer look.

Icon Sizes

There are four sizes of Windows icons—48 × 48, 32 × 32, 24 × 24, and 16 × 16 pixels.

We recommend that your icon contains these three sizes:

  • 48 × 48 pixels
  • 32 × 32 pixels
  • 16 × 16 pixels

Figure 2. General icon sizes

Icons on the right side of the Start menu are displayed at the 24 × 24 pixels size. This is not a size that you need to provide.

Figure 3. The 24 × 24 size in the Start menu

If you are creating icons for a toolbar, the Windows standard sizes are 24 × 24 and 16 × 16 pixels.

Figure 4. The standard toolbar icon sizes

Icon Color Depth Support

Windows XP supports 32-bit icons, which are 24-bit images with an 8-bit alpha channel. This allows icons to display with smooth edges that appear to blend into any background.

Each Windows XP icon should contain these three color depths to support different monitor display settings:

  • 24-bit with 8-bit alpha (32-bit)
  • 8-bit (256 colors) with 1-bit transparency
  • 4-bit (16 colors) with 1-bit transparency

Figure 5. 32-bit, 8-bit, and 4-bit versions of the My Pictures icon

Color Palette

These are the primary colors that are used in our icons:

Figure 6. Windows XP icon color palette

Angle and Grouping of Objects

This is the perspective grid that Windows XP style icons use:

Figure 7. Windows XP icon perspective

Not all objects work well at 16 × 16 at an angle. The following objects are usually shown in a straight-on manner:

  • Document icons
  • Icons that are symbols (such as warning or information icons)
  • Icons that are single objects (such as the magnifying glass)

Figure 8. Straight-on icon examples (.Jpg Document, Search, and Favorites icons)

Create overlapping secondary objects at an angle unless it makes more sense, due to readability and integrity, that they are rendered straight on. Consider also how your icons may be viewed as a set to help determine how to group objects.

Figure 9. Overlapping examples (Add or Remove Programs, Print Pictures, Recent Documents)

Drop Shadow

Windows XP icons use a drop shadow to provide definition and added dimension. This effect is added in Photoshop and is described later in these guidelines.

To add the drop shadow to your images, double-click on the image's layer in Photoshop and select Drop Shadow. Then change Angle to 135, Distance to 2, and Size to 2. The drop shadow is black at 75% opacity.

Figure 10. Before and after a drop-shadow is added to an icon

Outlines

When illustrating XP-style icons, add an outline to the image to provide definition and ensure that the image works well on different background colors.

Step 1: Conceptualize

When designing new icons, we recommend grabbing pen and paper and sketching your ideas out.

Here's an example of an initial sketch for the Windows XP My Pictures icon:

Figure 11. Sketch of My Pictures icon

Considerations when designing icons:

  • Use established concepts where possible to ensure consistency of meanings for the user.

  • Consider how the icon will appear in the context of your user interface and how it might work as part of a set of icons.

  • Consider the cultural impact of your graphics. Avoid using letters, words, hands, or faces in icons. When you must represent people or users, depict them as generically as possible.

  • If combining multiple objects into one image in an icon, consider how the image will scale to smaller sizes. We suggest that you use no more than three objects in an icon. For the 16 × 16 size, you can also consider removing objects or simplifying the image to improve recognition.

Note Use the following guidelines on the use of the Windows flag in icons:

  • To support trademark and Windows branding guidelines, do not use the Windows flag in icons, with the exception of the Windows Update icon.
  • The Windows flag should only be used in icons that ship as part of the Microsoft® Windows® operating system.
  • The Microsoft branding team should review any usage of the Windows flag in an icon.

Common Icons

Figure 12. Common icons for Windows XP

Common Toolbar Icons

Figure 13. Common toolbar icons for Windows XP

Step 2: Illustrate

To illustrate Microsoft Windows XP style icons, we recommend using a vector tool such as Macromedia FreeHand or Adobe Illustrator. Use the palette and style characteristics as outlined in the Icon Design Overview.

  1. Illustrate your image using FreeHand or Illustrator.

  2. Create three sizes of the image. Because there will be a drop shadow added to the image later, you should create three sizes that are around 46 × 46, 30 × 30, and 14 × 14 pixels.

  3. Copy and paste the vector images into Photoshop.

    Figure 14. Paste dialog

    Note Photoshop is the recommended image creation tool because Gif Movie Gear, the tool we use to create the .ico files, offers a direct import of Photoshop files. Any image created in Photoshop that uses the "RGB" mode has an alpha channel attached. If there is transparency in the image or layer, that channel becomes meaningful for icon purposes.

Step 3: Creating the 24-Bit Images

After pasting your vector files into Photoshop, the next step is to finalize the 24-bit images.

  1. Once you've pasted your three sizes into Photoshop, check the readability and resolution of your images, especially at the 16 × 16 size. You may need to do some pixel-pushing. If the 16 × 16 is not reading clearly, consider going back to FreeHand to simplify the image at that size.

  2. Add the drop shadow to your images by double-clicking on the image's layer and selecting Drop Shadow. Then change Angle to 135, Distance to 2, and Size to 2. The drop shadow is black at 75% opacity.

    Figure 15. Setting your drop-shadow

  3. To merge the drop shadow and the 24-bit images, create a new blank layer. In the Layers menu, select Merge Visible and merge the three layers.

    Figure 16. Merging layers to keep the drop-shadow

  4. Create three new Photoshop files, one for each size: 48 × 48, 32 × 32, and 16 × 16 pixels. Copy and paste the appropriate image. If an image's drop shadow gets cropped, you should go back to FreeHand, scale down the image, and follow the steps again.

  5. Save each file as a .psd file. Do not merge the image layer with the background layer. It's helpful to include the size and color depth in the file name.

Step 4: Creating the 8-Bit and 4-Bit Images

Creating the 8-Bit Images

Now that you have the 24-bit images ready to be made into 32-bit icons, you need to create 8-bit versions. The 8-bit icons will be displayed in any color mode lower than 32-bit.

The 8-bit versions will not have the 8-bit alpha channel so they will need to have their edges cleaned up as there's no antialiasing (that is, their edges will be jagged).

  1. In Photoshop, duplicate your 24-bit image layer and rename the layer to 8-bit images.

  2. Create a new blank layer and fill the layer with a dark color such as blue.

  3. Merge the 8-bit image layer with the new layer.

  4. Clean up the edges with solid colors, removing any antialiased pixels. Use consistent stair-stepping to make your jagged edges less pronounced.

  5. Check your image on a light background such as white to see how the image looks.

    Figure 17. Cleaning up your images for 8-bit color depth

  6. Create three new Photoshop files for each size: 48 × 48, 32 × 32, and 16 × 16 pixels. Copy and paste the appropriate image.

  7. Next you need to index the images down to 256 colors. The 8-bit icons can have custom palettes.

    1. In your 48 × 48 image, fill the background with a unique color—a color your image is not using. We often use magenta (R255 G0 B255).
    2. Go to Image->Mode->Indexed Color and then select Flatten Layers.
    3. In the Palette dropdown menu, select Custom. In the Custom dialog box, click OK. Click OK in the Indexed Color dialog box.
    4. Save the file as a .psd file.
    5. Save the other two size files using the same background color and applying the custom palette.

  8. Save each file as a .psd file.

Creating the 4-Bit Images

If you want your icons to look good down-level, provide 16-color versions of your icon.

  1. Index your 8-bit images to the Windows 16-color palette.

  2. Clean up your images using only the colors from the 16-color palette.

  3. Use a black outline on the bottom and right edges of the image.

  4. Use a dark gray or other dark color outline for the left and top edges of the image.

  5. Save the three sizes using the same background color. Be sure that the background color isn't used in the image because that is the color that will be the transparent color.

    Figure 18. Example of 4-bit icons

Step 5: Creating the .ico Files

Once you have all your images, it's time to compile them into an .ico file. To create 32-bit icons, we use a tool called Gif Movie Gear (GMG). To get this tool, go to the Gamani Web site.

These steps will walk you through the process of creating a typical .ico file, which has three sizes and three color depths.

  1. You should have a total of nine files—three sizes per color depth:

    48 × 48 at 24-bit

    32 × 32 at 24-bit

    16 × 16 at 24-bit

    48 × 48 at 8-bit

    32 × 32 at 8-bit

    16 × 16 at 8-bit

    48 × 48 at 4-bit

    32 × 32 at 4-bit

    16 × 16 at 4-bit

  2. Open Gif Movie Gear (GMG) and simply drag each image file into the window (or use File->Insert Frames). Each image will become a frame.

  3. When you drag the 24-bit images (or any .psd file with layers) into GMG, you will be prompted with a dialog box:

    Figure 19. Settings for 24-bit images in Gif Movie Gear

    Check that the settings are:

    • Layers as multiple frames in animation
    • No blending: each Layer is a frame
    • Keep background transparency

  4. The background layer of each 24-bit image will appear as a frame. Remove these blank frames by selecting the frame and pressing the Delete key.

  5. You should now have a total of nine frames. The icons should be ordered in increasing color resolution: the first three are 4-bit (16 colors), the next three are 8-bit (256 colors), and the last three are 24-bit color with an 8-bit alpha channel (32-bit total).

    Figure 20. Order of frames in Gif Movie Gear

    Note To check your images' attributes, move your mouse over the images. You will notice a tooltip box containing resolution information about each image. The default setting shows dimensions, transparency, and bit count. You can add or remove the items shown by going to Edit->Preferences->Frame Tips.

  6. For the 8-bit and 4-bit versions, you need to make the background transparent. GMG uses lime green to represent the "transparent" color. You can set your own color (or stay with the default background color) by using the View->Transparency As menu item. The color chosen is only used for viewing and does not affect the images.

  7. To make the 8-bit and 4-bit versions transparent:

    1. Select a frame and click the Pick Transparency Color toolbar icon (the eye-dropper).

      Figure 21. Using the Transparency tool

    2. A dialog box will open showing your icon. With the dropper, click the background color of the icon. This color will change to lime green (or whatever color has been chosen as the transparent background color in GMG).

    3. Repeat for all 4-bit and 8-bit frames.

  8. To save the icon, select File->Save Icon As….

Toolbar Creation

The Windows toolbar icons follow the same style as other icons except they do not use a drop shadow. Because toolbar icons are fairly small, we recommend keeping the images simple. It is acceptable to have the images be straight-on rather than using the angle if it helps the readability of the image.

The Windows toolbar displays two sizes of icons: 24 × 24 and 16 × 16 pixels. There are two states—default and hot (mouseover). For the hot state, we slightly increase the saturation of the images.

The creation of toolbar icons is very similar to non-toolbar icons except the images are put into .bmp strips—basically, an ordered row of icons.

  1. Once you've illustrated the icons in FreeHand at each size, copy and paste them into Photoshop. Put the 24 × 24s on one layer and the 16 × 16s on another.

  2. Draw a single row of boxes for each size on a separate layer. One row of 16 × 16 boxes and another row of 24 × 24 boxes.

    Figure 22. Sample of boxes for toolbar icons

  3. Place each image in a square in the order you need them. Check that there is no overlap between images.

    Figure 23. Placing icons in toolbar frames

  4. Save your Photoshop file.

  5. Next you will create the hot states in Photoshop.

    1. Duplicate the 24 × 24 and 16 × 16 layers. Rename the layers so they're clearly labeled as the hot versions.

    2. For each hot version, select the layer and go to Image->Adjust->Levels… and move the middle arrow to 0.75. Click OK.

      Figure 24. Changing the levels to create "hot" appearance

  6. Once you've created the hot versions, you should have one layer per strip: one default 24 × 24, one hot 24 × 24, one default 16 × 16, and one hot 16 × 16.

  7. Next you need to create individual files for each strip.

    1. One way to do this is to use the Crop tool and crop the file down to a strip's dimensions and then save that file. Each strip must be measured from the beginning of the first box to the end of the last box.

    2. Save each strip as a separate 24-bit .psd file.

      Figure 25. A 24-bit toolbar strip in Photoshop

  8. To save a strip as a 32-bit image, drag a strip into GMG. Remove any blank frames. Go to File->Export as->Filmstrip. In the Film Export dialog box, check that BMP/DIB and 24-bit with Alpha is selected.

AVI Creation

Microsoft Windows XP uses 8-bit AVIs. The process for creating .avi files is the same as icons—you prepare the pieces in Photoshop then drag them into GMG. Follow the instructions for creating 8-bit icon versions.

To save your AVIs using GMG, go to File->Export As->AVI file….

Considerations when creating .avi files:

  • Use magenta (R255 G0 B255) as the background transparency color.
  • In Photoshop, it's important that no stray pixels appear. Set your fill tolerances to 0 and check that antialiasing is not checked.