XP Toolbar Icons - Why 8-bit Alpha?

Introduction

This article describes the advantages of using toolbar glyphs and icons with variable transparency ("alpha") in your Windows applications. We have put together a few examples using our toolbar glyphs to illustrate the improvements in image clarity that can be achieved.

What does it mean?

Historically, the usual method of setting transparent pixels in a glyph or icon has been to assign a "mask" color to an image. All the pixels in the image that should be transparent are assigned the mask color. When the toolbar button or icon is drawn, all pixels colored the same as the mask color are converted to the color of the background. It works, but it is rather crude - there are a few potential pitfalls which we will show later

Full color bitmaps are often "24-bit" which means each pixel in the image is represented by 24 bits of color data. The 24 bits are divided into 8 bits each of red, green and blue data. Each 8 bits of data allows for 256 intensities. By combining the 256 intensities of red, green, and blue it is possible to represent 256 x 256 x 256 different colors - that's 16777216 in total.

But bitmaps do not stop at 24-bit; it is possible to create 32-bit bitmaps. If a 32-bit bitmap has the usual 24 bits of red, green, and blue color data then there are a further 8 bits spare that can carry more information. This extra 8 bits can specify the transparency of each pixel, and just as there are 256 levels of red, green, and blue, there can be 256 levels of transparency. We don't usually refer to it as transparency however; the term more frequently used is Alpha.

Now Windows XP supports 32-bit bitmaps with 8 bit alpha and to make sure you can take advantage of this, all Glyph Lab toolbar glyphs and icons are supplied as 32-bit BMP files with 8 bits of alpha data. But what are the advantages? Read on.

Anti-Aliasing

Icons and toolbar glyphs are small - typically less than 32 x 32 pixels (XP now uses 48 x 48 pixel icons as well called "tiles"). That's not much to work with when creating your masterpiece! A common problem is that any edge detail of you image can look jagged or rough, or lack fine detail. To avoid this problem a technique called anti-aliasing is used. This adjusts edge pixels to be a weighted mixture of the foreground and background color. Lets look at an example.

For the sake of simplicity we will look at a simple red circular "stop" toolbar button 24 x 24 pixels in size. Without any anti-aliasing and on a typical toolbar background, the glyph looks like this. Note we are showing both the actual size glyph and 400% zoomed version.

Figure 1. A basic non - anti-aliased stop glyph.

As you can see - it doesn't look too good. The actual-size glyph look as bit rough around the edges. Let's see the effect that anti-aliasing has.

Figure 2. An anti-aliased stop glyph.

Much better! By blending the edge pixels into the background we have achieved a much smoother circle. So, we have solved the problem of how to make the glyph look good on a light beige background, but what if we want to display it on other colors of background. As mentioned earlier, with our 24-bit bitmap we can assign a color to be transparent an fill all background regions of the glyph with this color. Typically, magenta is chosen as it does not occur very frequently in images. The "transparent" regions are called a mask. Here is our masked stop button.

Figure 3. An anti-aliased stop glyph with magenta mask applied.

To ensure we get a degree of anti-aliasing we have kept the blended edge pixels. This is how most toolbar glyphs are supplied - it is assumed that the toolbar will be light gray or light beige in color, so a compromise is chosen that should look OK on most toolbars. With icons this is not so easy as the desktop could be an color or have wallpaper on it. Therefore, for icons it is usually better to avoid excessive anti-aliasing and, if possible, put a darker edge around light regions.

But what if our user has chosen a darker color for the toolbar background using the Windows "Appearance" settings. It doesn't have to be beige and gray. As an extreme case to illustrate the problem lets assume out user is a bit of a "goth" and likes their toolbars black. Here is our button as it would appear.

Figure 4. The masked anti-aliased stop glyph on a black background.

Ugly isn't it. Out anti-aliased edge pixels now show up against the black with horrible results. So what do we do? We could avoid anti-aliasing altogether and be back to the situation in figure 1, but this is far from perfect. Alternatively we could just decide that it out user wants to use a dark background then that is their problem - shame on you!

Let's go back to the start and draw out stop sign as a 32-bit bitmap. Remember our 256 levels of transparency or alpha? Well this time we will use a transparent background and blend the edge pixels with it. The edge pixels will therefore have different levels of transparency depending on how much they are blended with the transparent background. Here is our 32-bit glyph with the transparent background indicated by a checkerboard pattern. (Just the zoomed version is shown.)

Figure 5. The 32-bit glyph with a transparent background.

OK then - let's see how this looks on a black background. The black should be blended automatically with the edge pixels according to their transparency.

Figure 6. The anti-aliased 32-bit glyph on a black background.

Perfect! The button now looks as good on black as it does on beige. Edges are smooth - it looks like a perfect circle again. Just to confirm everything - here is the button on several different toolbar backgrounds.

Figure 7. The 32-bit glyph on several backgrounds.

Other benefits

There are other benefits of using 32-bit glyphs. It's possible to create special effects such as semi-transparent regions that partially show the background behind. It also improves the look of inactive or "Grayed" toolbar buttons as these can be given a degree of transparency to mix them with the color of the toolbar.

With XP the standard is to apply a drop-shadow to icons. This gives the feeling that they are floating slightly above the desktop and also helps them stand out. The drop shadow is semi-transparent with a feathered edge that shows the desktop through it. Here's an example.

Figure 8. 32-bit icon with a drop-shadow.

Will this work in versions or Windows other than XP?

Not directly. It's important to have masked versions of your glyphs and icons for backwards compatibility. However, I will shortly be releasing an article that explains how you can use 32-bit toolbar glyphs in earlier versions of Windows using VB or VC++. Watch this space.

I hope you have found this article interesting and informative. If you have any questions or comments then feel free to send your comments.

Dave Wilkinson.