Creating Icons and Bitmaps

In a graphical user interface, icons convey attributes or tasks. An effective icon clearly represents its function and is easy to remember; an ineffective icon reduces the usability of an application by making it appear obscure and unapproachable.

Icons are used in different ways. They can either resemble what they represent—for example, a book used to represent a dictionary—or they can provide a characteristic of something, such as a gas pump to represent a gas station. Icons can also be symbolic representations, which may or may not be clear to the user. An example of this type of icon is the light bulb icon found in many Windows-based applications, which turns on and off the TipWizard.

Icons are most often used on buttons, but they can be used for progress indicators as well. When a Windows CE color icon has a Windows 95 equivalent, both icons use the same design and color. However, you must create a 16-color version and a grayscale version of the icon to ensure that it displays correctly on both color and 2-bpp devices.

Note The icon editor in the Windows CE Toolkit for Visual C++ 5.0 can create icon (.ico) files that retain both 16-color and 2-bpp gray versions of an icon.

In addition to using Windows 95 icon equivalents, you can create your own icons using the standard Windows 16-color palette. To add dimensionality to an icon, use highlights and shadows, but remember, the icons you create must translate correctly to 2-bpp gray if your device supports both grayscale and color displays. The following table shows how the 16-color palette translates to four grays.

Color Red Green Blue Gray Conversion
Black 0 0 0 Black
White 255 255 255 White
Dark gray 128 128 128 Dark gray
Light gray 192 192 192 Light gray
Dark red 128 0 0 Black
Red 255 0 0 Dark gray
Dark yellow 128 128 0 Dark gray
Yellow 255 255 0 Light gray
Dark green 0 128 0 Black
Green 0 255 0 Dark gray
Dark cyan 0 128 128 Dark gray
Cyan 0 255 255 Light gray
Dark blue 0 0 128 Black
Blue 0 0 255 Dark gray
Dark magenta 128 0 128 Dark gray
Magenta 255 0 255 Light gray