HomeBuy PixelshopDownloadPixelshop FeaturesIcon InformationSupport

Alpha Icon Information

Detailed Information

Introduction to Icons
Alpha Icons
Animated Cursors
Converting an Image
Creating Favicons
Creating Folder Icons
Using an Illustrator image
About the RGB colourspace



 

About the alpha 32-bit icon format

 

This article gives you the technical information about the 32-bit icon format introduced with Windows XP. Although this article looks confusing, rest assured that working with alpha icons with Pixelshop is easy and transparent. This is simply an overview of the format.

 

About the format

The Alpha icon format, introduced with Windows XP, gives icons multiple levels of transparency.  This allows icons to have a smooth effect, and reduces the jagged edges normally present with icons.

Pixelshop screenshot
On the left we have a 256 color icon (no alpha), and on the right we have an Alpha icon.  Notice how the Alpha icon appears to blend into the background.

 

Comparisons

Before we go into more detail, let’s first look at a comparison between 256 color icons and Alpha icons.


Pixelshop screenshot
256 color icons shown against various backgrounds.

 

Pixelshop screenshot
Alpha icons shown against various backgrounds

 

From the two images above, you can clearly see how the Alpha icons appear to ‘blend’ into the backgrounds, whereas the 256 color icons have a ‘cut-and-paste’ appearance.

 

So, what exactly is Alpha?

First, let’s look at normal transparency in icons.  To achieve transparency (where the background shows through) a mask must be used.  This is simply a monochrome icon included with your icon, with black representing transparency, and white representing opaqueness. When the icon is drawn on your screen, this mask is used make the icon seem transparent.


Pixelshop screenshot
A representation of an icon and a mask.

 

Normal, non-alpha icons simply have a black and white mask. Either the the individual pixel is 100% opaque or it is 100% transparent. This gives a blocky look to some icons.

The difference with alpha icons is that they have a grayscale mask, where black is transparency, white is opaqueness, and grays are varying levels of transparency. This both removes the jagged edges, and allows convincing shadow effects.


Pixelshop screenshot
An example of a normal mask and an Alpha mask.

 

What does all this mean for me?  How do I use alpha?

You don’t have to create special masks for icons; Pixelshop does all this for you.  If you’re converting an image without transparency, a high-quality Alpha channel will automatically be created using Pixelshop's advanced algorithms.  If you’re importing a Photoshop image or transparent GIF, Pixelshop will use the Alpha in the file.

If you’re just drawing, simply slide the Alpha slider (next to the color swatches) to adjust transparency.

 

 

Back to top