Icon Design

Icons are used throughout the Windows interface to represent objects or tasks. The system uses icons to represent your software's objects, so it is important to design effective icons that communicate their purpose.

Icon Style

Use a common design style across all icons. Repeat common characteristics, but avoid repeating unrelated elements.

An illustrative style tends to communicate metaphorical concepts more effectively than abstract symbols. However, if you design an image based on a real-world object, use only the amount of detail necessary for user recognition and recall. Where possible and appropriate, use perspective and dimension (lighting and shadow) to better communicate the real-world representation, as shown in Figure 14.35.

Figure 14.35 Graphic improved with perspective and dimension

User recognition and recollection are two important factors to consider in icon design. Recognition means that the user can identify the icon and easily associate it with a particular object. Support user recognition by using effective metaphors. Use real-world objects to represent abstract ideas so that the user can draw from previous learning and experiences. Exploit the user's knowledge of the world and allude to the familiar.

To facilitate recollection, design your icons to be simple and distinct. Apply the icon consistently to build recognition; therefore, design your small icons to be as similar as possible to their larger counterparts. Try to preserve their general shape and any distinctive detail. Icons that are 48 x 48 pixels can be rendered in 256 colors to create very realistic-looking icons, but focus on simplicity and a careful use of color. If your software is targeted for computers that can display only 256 colors, make sure you only use colors from the system's standard 256-color palette. If your software is targeted for computers configured for 65,000 or more colors, you can use any combination of colors.

Avoid using people, stereotypes, faces, gender, or body parts as icons. This is particularly important for an international audience, as such images may not easily translate or could be offensive. When you must represent people or users, depict them as generically as possible; avoid realistic depictions.

Consider how overlay images — such as a shortcut icon, an offline icon, or other visual annotations — might affect the appearance of icons, as shown in Figure 14.36. Make sure they don't cover up the most important parts of your images.

Figure 14.36 Icon overlays and annotations

One solution to avoid covering critical information is to flip your icon image horizontally. If you do, remember to adjust the light source.

Reuse established concepts where possible. For example, if there are existing images for illustrating objects such as documents, you may want to extend that idea, including other details to help differentiate the image for your specific use. However, check on copyright usage before explicitly duplicating any images.

Draw your ideas by using an icon-editing utility or pixel (bitmap) drawing package. Drawing icons directly on the screen provides you with immediate feedback about their appearance. It is a good idea to begin the design in black and white. Consider color as a property enhancement. Test your images on different backgrounds, because they may not always be visible against white or gray backgrounds.

Icon Usage

Icons are primarily intended to represent objects with which users can interact. Therefore, be careful in the use of icons and follow these guidelines:

·                     Use an icon as the representation of an object — for example, a folder icon in a folder's properties window.

·                     Use an icon to reinforce important information — for example, a warning icon in a message dialog box.

·                     Use an icon to provide visual anchors to help users quickly navigate through a task.

Avoid using icons in lower level dialog boxes, as this creates visual clutter.

Figure 1. Icon samples

Icon Design Overview

Icon Style Characteristics

1. Color is vivid.
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. 

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.