You create the bitmap image with a paint tool. This tool is host-system dependent, as are the images it creates. Under Microsoft Windows, you can use the Paint program that is bundled with Windows. For most bitmap buttons, you will want to use the zoom mode of the paint program to make it easier to adjust the individual pixels.
You create your bitmap as a strip that contains one or more bitmap button faces. For example, the following bitmap image contains six button faces:
You can use more than one bitmap image strip in your program; however, the runtime is more efficient when it pulls multiple images from the same strip. In addition, it is usually more convenient to store multiple images in a single file rather than several small files. Note that all images in a particular strip must be the same size.
When you design the image, the first thing you need to do is to settle on the size of the image. The default size under Windows is 15 pixels high by 16 pixels wide. However, you can use any size you want. Note that the bitmap size is the size of the button's image. To accommodate the button's border, the actual button will be somewhat larger. Under Windows, eight pixels are added to the width and seven pixels are added to the height (so the default button size is 24 pixels wide by 22 pixels high). The first thing you should do in the bitmap editor is set the dimensions of the bitmap to the desired size. For example, a strip of six default-size buttons would have an image size 15 pixels high by 96 pixels wide (6 * 16 = 96).
When you draw a strip that contains multiple images, make sure that each image starts on a boundary that is a multiple of the image size. In the default case, your images should start at offset 0, 16, 32, etc. (i.e., pixel numbers 1, 17, 33, etc.).
Under Windows, certain colors that you use in the bitmap will be mapped to colors chosen by the user in the Control Panel. This mapping allows you to create buttons that will have the same color scheme as the text-labeled buttons on the screen. The following table names the bitmap colors that are translated, as well as their RGB (red, green, blue) values and the system color that they are translated to.
| Bitmap Color
| RGB Values
| System Color Used
|
| Black
| 0, 0, 0
| Button Text
|
| Dark gray
| 128, 128, 128
| Button Shadow
|
| Light gray
| 192, 192, 192
| Button Face
|
| White
| 255, 255, 255
| Button Highlight
|
| Blue
| 0, 0, 255
| Selected Item Background
|
| Magenta
| 255, 0, 255
| Window Background |
It is best to use light gray as your primary background color. This color ensures that the button's edges (which are supplied by the runtime) blend in correctly.