Creating Icons and Bitmaps

In a graphical UI, 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 that is used to represent a dictionary—or they can represent a characteristic, such as a gas pump to represent a gas station. Icons can also be symbolic representations, which might or might not be clear to the user. An example of this type of icon is the magnifying glass, which is used on Windows-based desktop platforms to signify a search feature.

Icons most often are used on buttons, but they can be used for progress indicators as well. When a Windows CE color icon has a Windows-based desktop platform application 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 Microsoft Windows CE Toolkit for Microsoft Visual C++ version 5.0 or later can create icon (.ico) files that retain both 16-color and 2-bpp gray versions of an icon.

In addition to using Windows-based desktop platform application icon equivalents, you can create your own icons by using the standard Windows-based 16-color palette. To add depth to an icon, use highlights and shadows; however, recall that the icons you create must translate correctly to 2 bpp gray if the target device supports both grayscale and color displays. The following table shows how the 16-color palette translates to 4 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