Designing Toolbar Icons for Internet Explorer 5

To create a toolbar icon, you will need to provide each image in two sizes for two toolbar states (grayscale for the default state and color for the active state, when the user's mouse is pointing to it), and in two color depths. The following is a summary of the images that are needed:

• One 20-pixel-by-20-pixel color image (256-color Windows half-tone palette)
• One 20-pixel-by-20-pixel gray image (256-color Windows half-tone palette)
• One 20-pixel-by-20-pixel color image (16-color Windows palette)
• One 20-pixel-by-20-pixel gray image (16-color Windows palette)
• One 16-pixel-by-16-pixel color image (16-color Windows palette)
• One 16-pixel-by-16-pixel gray image (16 color Windows palette)

These images would look like the following:

Designing toolbar icons

Here are some general points to keep in mind when designing toolbar icons:

• Make sure the visual transitions between your default and active images are smooth. An easy way to test this is to create separate layers for the default and active images in a photo imaging program so that you can view the images on top of each other.
• When you design 16-color icons, use the Windows 16-color palette. For both the default and active states, there should be a black border around the icon. Exceptions are where the readability of the image may be affected, such as for an arrow or an "X." The images should have little shading and appear flat.
• When you design 256-color icons, use the Windows half-tone palette. For both the default and active states, the icons should have icon-style borders with gray or color top and left borders and black bottom and right borders. They can have more shade and visual depth than 16-color images, with a light source from the upper left and shading where appropriate.

Creating .ico files

You will need to create two .ico files for one icon:

• The first .ico file contains the active images (color) in both sizes and color depths.
• The second .ico file contains the default images (grayscale) in both sizes and color depths.

It is recommended that you use a graphics program to draw your icons and a development environment, such as Microsoft Visual C++ Development Studio, to create the .ico files.

The two icon files would contain the following graphics:

Drawing your images

1. After drawing your images in a graphics program, place the 16-color and 256-color images in separate files.
2. Index each file to the appropriate palette, either the Windows 16-color palette or the Windows half-tone palette.
3. Save each file as a .bmp.

Creating your icon files in Visual C++:

1. Open each .bmp file.
2. On the File menu, click New, and then click Icon. By default, the icon window that opens displays a standard 32-pixel-by-32-pixel device image.
3. In the Icon window, click New Device Image. Click Custom, and then create these image devices:
• One 22-pixel-by-20-pixel 16-color image
• One 22-pixel-by-20-pixel 256-color image
• One 18-pixel-by-16-pixel 16-color image
  

Note that the device images are two pixels wider than the images, which reflects the actual width of the button. Center your images in the device image area.

4. Delete the default 32-pixel-by-32-pixel device image.
5. Copy and paste the color images from your .bmp files into the appropriate device image size and color depth.
6. To make the background transparent, select the transparent color in the color palette and fill the background of each image where you want transparency.
7. Save this file as an .ico file.
8. To create your default (grayscale) .ico file, follow the same steps.