Using Alpha Channel to Blend Image on a Background Smoothly

from:http://www.icongalore.com/xp-icon-articles/alpha-channel-explained.htm

What is a channel?

First, let's talk about channels in general. Depending on the color mode used a color image automatically has either three or four channels. If you are using the RGB color mode (used for anything viewed on a screen) the image has three channels; red, green and blue. If you are using the CMYK color mode (used for printed materials) the image has four channels. The information within these channels, specify how much of each color is used to make the output color, such as indigo, orange, pink etc. These channels are standard in any color image.

What is an alpha channel?

The alpha channel is an additional channel that can be added to an image. It contains transparency information about the image, and depending on the type of alpha it can contain various levels of transparency. The alpha channel basically controls the transparency of all the other channels. By adding the alpha channel to an image you control the transparency of the red channel, green channel and the blue channel.

There are two types of alpha channels, pre-multiplied alpha and straight alpha. Which alpha type you use depends on the software being used.

• Pre-multiplied Alpha (used by Photoshop)
• Straight Alpha

Pre-multiplied alpha

In this case the colors of the foreground are blended with the colors of the background. At the same time the alpha blends from opaque to transparent.

Straight alpha

In straight alpha the foreground and background colors stay the same, and only the alpha channel is blended.

File types that support alpha

The following are the file type that support alpha channel:

• TIFF
• TGA
• PNG
• PSD (Photoshop)
• GIF (special alpha)

TIFF, TGA, PNG, PSD and GIF all support alpha but really only PNG and GIF are used for applications, and the web. Gif, however, uses a special type of alpha. Instead of the alpha channel in a GIF image containing degrees of transparency it only has an on/off transparency. This means that pixels within a GIF image can either be fully opaque or fully transparent. There is no in between. PSD is the Photoshop format, and can be used in most Adobe applications.

How is the alpha channel used?

The alpha channel can be used in several different ways. In many instances the alpha channel is used to seamlessly layer images over any color background or over other images. This is seen constantly in image editing software such as Photoshop. When you open an image and place another image on top Photoshop automatically translates the alpha so that the image is properly anti-aliased and looks smooth and crisp. In other cases elements such as shadows can be properly displayed over various backgrounds, and images. Photoshop also uses alpha channels to hold clipping masks and selection areas. Alpha channels can also be used to display semi-transparent images over backgrounds, images and even other semi-transparent images.

What are the benefits of using alpha channels?

The biggest benefit of using alpha channels is visual appeal. Without alpha channels images layered over one another would not be anti-aliased, and therefore, would have a blocky jagged edge to them. This is not at all attractive. Another benefit of alpha channels is speed. When you save an image with the alpha channel all of the opacity levels are saved with it. You can then place that image over anything you like and the image will still maintain its appearance. This saves time because you can place the image directly over a background without the need to save that image in exactly the right spot over that exact background.


Notice in order to keep the shadow the GIF alpha must display a matte color behind it, while the PNG alpha only displays the semi-transparent pixels.