Software Required: Photoshop 7.0.1 or above or Paint Shop Pro 9

If you are willing to translate this article into another language, please send me an . Thanks!

If you are using Photoshop 7.0, please make sure you upgrade to Photoshop 7.0.1. See this post for more details.

Alpha Channels

Alpha channels, also known as alpha masks, can be a confusing concept for the novice clothing designer, but once mastered they are the key to creating dynamic and exciting content using textures. The concept itself is not a complex one, and once understood, the designer will wonder what she did without them.

Like a Stencil or a Halloween Mask

  1. The best real-world example I can think of is the stencil. Hopefully you all have used stencils at one time or another, but for the uninitiated here's a brief explanation. Letters, sometimes pictures, are cut out of a single sheet of paper, cardboard, or plastic. This sheet is then placed on top of another surface (paper, box, wall) and painted over. Thus the paint is applied to the areas where the cut-out holes are in in the top sheet and nowhere else.
  2. The stencil is acting as a mask -- similar to a halloween mask where the eyes are cut and the rest of your face is covered. Instead of telling the computer (or the rendering engine showing the image) what part of the image should be shown and what part should be concealed, we're telling it what should be opaque and what should be transparent.
  3. alpha_ChannelsPaletterRGB_t.jpg
    Channels Tab
  4. Images in the digital world are made up of small dots on your screen called pixels. Each pixel can contain a mixture of three colors: red, green, and blue (also known as RGB). You can see these three color channels within Photoshop in the Channels tab. Unfortunately Paint Shop Pro's implementation of RGB channels is not quite as elegant or useful, but you can view them by selecting the Image menu and choosing Split Channel and Split to RGB from the sub-menu.
  5. An alpha channel is a black and white (or greyscale) image whose values denote levels of transparency. Black represents 100% percent transparency. White represents 0% transparency, in other words, completely opaque. Grey, the scale of tones between black and white, represents varying levels of transparency (1% to 99%).

  6. alpha_rebus_t.jpg alpha_rebusinps_t.jpg

What are Alpha Channels used for?

  1. In Second Life you will most likely use alpha channels to define the shape of your clothing or to make parts of your objects transparent (windows?). You should now have some understanding of what alpha channels are. The following example will hopefully make it all a bit more clear, so if it's still a little fuzzy, roll up your sleeves and plow on.
  2. alpha_rebus_clothing.jpg

An simple Alpha Channel in Photoshop using a selection

  1. This will be nothing fancy. The point here is to create a simple texture with an alpha channel. You are going to create a blue texture with a transparent border.
  2. alpha_ps_newdoc_thumb.jpg
    Figure 1
  3. Open Photoshop and create a new image that has both a height and width of 256 pixels.

  4. alpha_ps_fill_thumb.jpg
    Figure 2
  5. Fill the image with blue (or any color of your choosing) by navigating to the Edit menu and choosing the Fill... menu item. In the dialog that appears select Color... from the Use: menu.

  6. alpha_ps_marqueebox_thumb.jpg
    Figure 3
  7. Use the Rectangular Marquee Selection Tool alpha_ps_toolbox.gif to create a square-shaped selection in the center of the image.

  8. alpha_ps_saveselection.jpg
    Figure 4
  9. Under the Select menu choose Save Selection.... The Save Selection dialog box appears. Don't name the selection because Photoshop will automatically name it "Alpha 1" for you. Go ahead and press the OK button.

  10. alpha_ps_newalpha_thumb.jpg
    Figure 5
  11. This step isn't required, but I want you to see what has been created. In the Layers palette switch the Channels tab and notice the new channel at the bottom called "Alpha 1" -- that is your new alpha channel. Notice that it is a black box with a white square in the center. The white represents the area that will opaque (in this case blue) and the black represents the area of your image that will be transparent.
  12. Flatten the image by going to the Layer menu and choosing Flatten Image. This is an important step and always needs to be done before saving your image as a TGA file.

  13. alpha_ps_tgaoptions_thumb.gif
    Figure 6
  14. Now navigate to the File menu and do a Save or Save As... and choose Targa as the format. Also, make sure that Alpha Channels is selected below that (this should be checked by default). When the Targa options dialog box appears, make sure you choose 32 bits/pixel.

  15. Upload your new image to Second Life, create a box, and apply the your new image texture to the box. Notice how the area around the colored square you created is transparent? You've created your first texture that includes and alpha channel.
  16. alpha_ps_primshot_three_t.gif
    Figure 7

A simple Alpha Channel in Paint Shop Pro 9 using a selection

It's been pointed out to me that PSP's alpha channel support has changed in the latest versions, so this tutorial is a bit out of date (and I won't be updating it since I don't have a copy of the software). Sorry!

    alpha_psp_newimage_t.gif
    Figure 1
  1. Open Paint Shop pro and create a new image that has both a height and width of 256 pixels.
  2. Fill the image with blue (or any color of your choosing). Select a color in the Materials palette. Then choose the Flood Fill tool from the toolbar or hit F on the keyboard. Once the tool is selected click anywhere in the image to fill it with color.

  3. alpha_psp_selection_t.gif
    Figure 2
  4. Use the Selection Tool (hit the S key on your keyboard) and create a square-shaped selection in the center of the image.

  5. alpha_psp_saveselection_t.gif
    Figure 3
  6. Under the Selections menu choose Load/Save Selections > Save Selection to Alpha Channel. The Save Selection to Alpha dialog box appears. Go ahead and press the Save button.
  7. Now navigate to the File menu and do a Save or Save As... and choose Truevision Targa as the format. A warning dialog will appear that mentions saving only one alpha channel in the image, which is what we want, so make sure to click Yes in the warning dialog.
  8. Upload your new image to Second Life, create a box, and apply the your new image texture to the box. Notice how the area around the colored square you created is transparent? You've created your first texture that includes and alpha channel.
  9. alpha_ps_primshot_three_t.gif
    Figure 4
First version: 15 Nov 2004
Minor revision: 6 Jan 2007