Anatomy of an Alpha Channel

 

Compatibilities:

This item has not yet been rated

What is an alpha channel?

An alpha channel is the part of an image that describes transparency. Computer images are made up of individual dots called pixels. Each pixel can be thought of as a single square on a piece of graph paper. Each pixel has to have some method for determining what color it is. There are many ways to tell the computer what color to show a pixel as, and all involve assigning numbers to different color values. For example you can specify the color of a pixel by giving a number each to its hue, saturation, and brightness. The most popular way to describe a pixel's color is known as RGB, or Red, Green, and Blue. You can create most visible colors by mixing red, green, and blue in different proportions. Every pixel in an RGB image has three numbers that are associated with it that represent that pixel's red, green, and blue proportions. These numbers, for various reasons, fall in the range of zero through 255. A pixel that has the maximum red value (255) and the minimum green and blue values (zero) is red. The red values for every pixel in a given image together make up what is known as the red channel. The same goes for green and blue. An RGB image that is 32 pixels wide and 32 pixels high has 1024 pixels. (32 X 32 = 1024) Since each pixel has three color values (red, green, and blue) associated with it, there are actually 1024 X 3 numbers that completely describe that image, three numbers for each pixel. This system works well within a single graphic, but more information about each pixel is needed if you want a graphic to be semi-transparent so that it reveals graphics that are behind it. (We might be talking about layers in Photoshop, tracks in Premier, or sprites-channels in Director to name a few instances of layered graphics.) Graphics programmers needed a way to tell if a given pixel is totally transparent, partially transparent, or totally opaque. This is where the alpha channel comes in. Another number in addition to the red, green, and blue values was added to each pixel to represent that pixel's transparency. The alpha values for every pixel in a given image together make up what is known as the alpha channel. This means that images which have alpha channels are larger. If we return to the 32X32 image mentioned above, we see that the additional channel means that we now need 1024 X 4 numbers to represent the image. The image is larger but it is now much more useful. For example, we can represent a transparent drop-shadow as an area of solid black with it's RGB values (black means R, G, and B would all be zero) but with a gradient in the alpha channel. We can represent a glow with an area of solid white in the RGB values (white means R, G, and B would all be 255) but with a gradient in the alpha channel. (See "Alpha Channel Techniques" below) A pixel with an alpha value of zero is totally transparent and invisible, therefore its RGB values are irrelevant. By the same token a pixel with an alpha value of 255 is totally opaque, and we can ignore any pixels that are behind it. Looked at from a more right-brained point of view, using an alpha-channel can be compared to painting on glass. If you paint on glass with a thick oil paint you won't see anything through the glass. This is like using an opaque alpha channel. But if you paint with a watery powdered tempera, the paint will be translucent. The more water you add to the paint, the more translucent it is, just as the lower a pixel's alpha channel value the more translucent it is. Of course the term "translucency" is a bit of a misnomer because the computer screen doesn't really have "layers." Translucency is just another way of talking about color mixing. If our top layer is red and 50% translucent and our bottom layer is green and opaque, then the color of the topmost pixel will be reddish-green. Change the background to blue and the final color will change to reddish blue. The best way to fully understand these concepts is to see an example of alpha channels in action. Examine Figure 1. In it we represent alpha channel values as a grayscale graphic that is the same size and shape as the source RGB graphic. Black pixels in the alpha channel represent maximum opacity (255), white pixels represent maximum translucency (or zero, which means the corresponding RGB pixel will not be mixed with the background), and gray pixels represent intermediate values by how close to white or black they are. We start on the left of figure 1 with two red squares as defined by their RGB channels. We then add an alpha channel to each square that changes the appearance of the square. In the smaller example it is easy to see that no mixing between red and green occurs in the middle of the square because the middle of the alpha-channel is black and therefore signals that the middle of the RGB data is to be copied without mixing. At the edges of the alpha channel we see values that are neither completely black (opaque) nor completely white (transparent.) In the resulting graphic over the green background we see that those pixels caused a mixing of the red and green, giving red a higher concentration where the alpha channel is darker (the middles of the edges) and green a greater concentration where the alpha channel is lighter (the corners.) If we changed the background from green to blue we would see similar behavior, the red would mixing with blue wherever there were intermediate alpha values. (Exhibit 1) Although it is important that you understand how and why alpha-channels work, luckily you almost never have to manipulate these numbers directly. Paint programs, for example, allow you to choose the RGB values of your paintbrush by simply clicking on a palette of colors. Then, by painting with the brush you are actually modifying the RGB values of the pixels you paint over. Editing the alpha channel values can also happen transparently. (pun intended) In Photoshop, for example, you can choose a brush that is only 50% opaque. When you paint with it, background layers are still partially visible through whatever color you are painting with. This is because the brush is creating 50% alpha channel values for the same pixels that it is adding RGB values to. (A fifty percent alpha value is halfway between 0 and 255, or 127.) Every layer in a Photoshop document has an alpha channel that keeps the transparency values for every pixel in that layer. What looks like a feathered shadow to you looks like a gradient in a layer's alpha-channel to the computer. Future questions: How do you create or edit alpha channels? How do you use alpha channels in Director? What kinds of special effects can be created using alpha channels?