NextGrid & NextDBGrid








NextGrid .NET

32bit Bitmaps Tutorial

Related Articles:

  • Skill:
  • Version: 1.0.1
  • Author: Bojan Nikolic
  • Created: 2008-04-01
  • Updated: 2008-04-26
Using 32bit (4 x 8 bit) bitmaps (.BMP) instead of 24bit or 8bit bitmaps within our components enable alpha-blended drawing of them. 32bit image beside 3 main channels for colors (reg, green, blue - each occupy 8 bits) include one more channel (also 8 bits) which determine level of transparency of each pixel. It may be from 0 up to 255. If alpha value for pixel 5, 5 is 127 drawing pixel will be semi-transparent. If value is 255 drawing pixel will be fully drawn.

In programs such as Photoshop alpha-channels are usually presented as grayscale image.

32bit bitmap may be placed over any kind of background (solid, gradient, another image...) without need to adjust bitmap after background is changed.

Step 1: Advantages of 32bit bitmaps

Most users are using 8bit (bitmaps with standard windows colors such as green, yellow, blue, red...) and 24bit bitmaps in own applications:

In both cases one color need to be reserved to be transparent color (in this case Fuchsia) while drawing. This color can't be used anywhere else on picture again because it will be skipped while drawing.

With using 8bit images results are very out-dated (icons are usually too edgy) and with new operating systems such as Windows XP, Windows Vista and MAC OS X it recommended not to use them anymore as primary user interface icons.

With 24bit images situations is a little bit better:

As may be seen in image above edges are not more aliases but smooth. This look far better than edged 8bit images. With using 24bit bitmaps we have 3 channels to use (16 Millions of colors) and create what any icon we need. But even with 24bit imageus we still need to use one color as transparent. This mean than in some cases where color is already known icon may look god, but in some not. Example:

As may be seen 24bit images does have some serious problems when applying them on unknown background.

But, with using 32bit images, every pixel on bitmap may be fully, partially or none transparent. This help us to get next results:

As may be seen, edges on this image (green button with white arrow) are smooth and they may be moved around background without need to re-done background or main glyph.

Step 2: Creating 32bit bitmaps within Photoshop

Creating 32bit bitmaps with using photoshop is very easy.

First, image need to be drawn (with using standard tools, layers...).

After image is drawn, we need to determine which parts will be transparented.

To do this, we need to SELECT portions of layers which are going to be fully or partially visible. Since some tools draw semi-transparent objects (like anti-aliased circle where edger are drawn half-transparent to ensure smooth edges), this object will be automatically semi-selected.

Best practice for selecting desired elements may be done with using option "Select Layer Transparency" (right click on layer thumbnail)

In this example, there is only one main shape and we only need to ensure that it is property selected. If for example, object consist from circle and square partially overlapped we need to select first circle, and then add to this selection and square.

Since shape is selected:

next button need to be clicked on palette channels:

new channel named Alpha 1 will be created:

Now, bitmap need to be saved as 32 bit bitmap.

Step 3: Convert PNG bitmaps into 32bit BMS's

Converting existing PNG images into 32bit bitmaps with alpha channels is even easier. After opening PNG image (with alpha channel) within photoshop transparency grid will indicate that image include alpha channel.

Now layer again need to be selected and new channel to be added. Since there is always only one layer process is even easier.

Don't forget that almost every our component support 32bit bitmaps (You may find them with names Glyph, ButtonGlyph, SmallGlyph...) With using them you application will look more modern and attractive.

Was This Article Useful?

Only constructive comments, code contributions... will be publishes. Questions, non-official discussion will not be published.