404 Object Not Found

Anatomy of an Alpha Channel

The Question:

How do you create an alpha channel in Photoshop?

The Answer (from Thomas Summerall, Media Lab, Inc.)

There are two ways to create and edit alpha channels: directly, and indirectly.

When editing a layer in Photoshop, every time you use a tool with transparency or anti-aliasing you are indirectly modifying an alpha channel for that layer. I say "indirectly" because you don't explicitly create the alpha channel and you cannot view or edit it separate from its RGB channels. But it is always there, and it always affects the relationship between the layer and any layers behind it.

Directly creating an alpha channel is a manual process. This can be done in two different ways.

You can directly create an alpha channel by using layer masks. This is basically an additional alpha channel that works like the implicit channel, but can be viewed and edited by itself as a grayscale image.

Another way to directly create and edit an alpha channel in Photoshop is in a single layer document. Single layer Photoshop files don't have the implicit alpha channel described above. You can create a document with one layer and add a channel to it. This channel will be interpreted as that document's alpha channel if you save the document as a PICT or Targa file.

Note: One confusing thing occurs when directly editing an Alpha channel. Sometimes white represents opaque (255) and black represents transparent (zero) and sometimes it is the reverse. Neither convention is any better or worse, but you need to know which system you are dealing with. Some applications, like Photoshop, allow you to specify which convention to use.

Creating Alpha Channels Manually

A simple but dramatic effect currently enjoying great popularity among creators of titles and other screen data for big-budget television network news and sports shows is varied transparency title backgrounds.

We'll create an example. Let's say we'd like to have a blue horizontal bar that is opaque at it's left edge and gets progressively more transparent as it goes to the right. We could use this as a subtle background to put titles over which would still allow the viewer to see what's behind the blue bar. If you have read and understood the anatomy of alpha-channels you can probably already guess what you need to do to create this.

We'll create this effect two ways, first directly with a one layer Photoshop document and explicit alpha channel and second indirectly using Photoshop layer transparency.

Direct Alpha Channel Creation:

A good strategy for deciding how to create a particular effect is to divide the elements you'll need into two categories: the RGB graphic and the alpha channel. For the above effect we know we need two things:

• RGB: A solid horizontal blue bar
• Alpha: A grayscale gradient from black on the left to white on the right

This is actually the hard way to do this, but it will give you a good basic understanding of what's happening in the background when you do it the easy way. For those of you who used Photoshop before layers were introduced in version 3, this will be familiar.

1. Create a new Photoshop document that has the dimensions you want the horizontal bar to have. Let's say 50 tall by 200 wide.
2. Fill the entire document with solid blue (not a gradient).
3. Add a channel in the "channels" palette and choose it for editing. Hide the RGB channels so they don't distract you.
   
   
   
   
4. Use the gradient tool to create a gradient of white to black from right to left.
5. View all channels. You will see an approximation of the transparency with the preview color assigned to the alpha channel, usually red. The red color shows through in proportion to how much of the background you will see when using this graphic in Director.
   
   
   
   
6. Save the file as a 32-bit PICT file and import it into Director as a 32-bit cast member.

(If you don't want to create the examples from scratch, you can examine our sample files: manualalpha.psd, manualalpha.pct)

Indirect Alpha Channel Creation with Layers:

Now we'll do it the easy way and let Photoshop handle the messy details.

1. Create a new Photoshop document.
2. Add a new layer.
3. Use the gradient tool to create a gradient of transparent to blue from right to left.
   
   
   
   
4. Save the file as a Photoshop (.psd) file and import it into Director as a 32-bit cast member using PhotoCaster.

(Sample file: autoalpha.psd)

Drag it on the stage. Neat, huh? Now change the color of the stage or put the banner on top of other sprites and watch how the semi-transparent parts of the banner automatically adjust.

Creating the alpha channel directly or indirectly gives the same results:

Creating Alpha Channels with Layer Masks

Layer masks are used to control how different areas within a single layer are hidden or revealed. The layer mask is an alpha channel and it does not actually change any of the pixels in the RGB data in the layer. For this reason, it is a very powerful tool for trying out different effects.

You can add a layer mask that hides or shows the entire layer or only the selected areas of the layer.

• Start with a layer mask that hides or shows the entire layer if you are going to paint on the transparent or opaque areas using a brush tool.
• If you've already made a selection that you want to convert to a transparent or opaque area, use a layer mask based on a selection.

In our example, we will do the latter. A common effect used with portrait Photography is to create a feathered oval "frame" around the photo, fading out against the background.

1. Create a new Photoshop file that is 175 x 200 pixels with a solid background.
2. Fill the background layer with a dark color such as black or navy blue.
3. Add another layer and paste a photograph into it. (You can save the JPG in our sample illustration below and use that if you don't have another photo available.)
4. Use the Marquis to select an oval area surrounding the main portion of the photo. Set the feathering to 12 pixels.
   
   
   
   
5. While the selection is active and the photo layer is selected in the Layers palette, choose Layer->Add Layer Mask->Reveal selection.
   
   
   
   
6. If you don't like exactly where the mask is located, click the link icon between the mask and the layer in the Layers palette to temporarily unlink them. Click on either the mask icon or the layer icon in the list, and then, in the document window, move the layer or mask to the desired position. When you are finished, click the area between the 2 icons to relink the layer and mask.
   
   
   
   
7. Save the file as a Photoshop (.psd) file and import the layers directly into the score as a 32-bit cast members using PhotoCaster.

(Sample files: samplephoto.jpg, photowithmask.psd)

Now delete the solid rectangular cast member and change the color of the stage or put the photo on top of other sprites and watch how the faded border around the photo automatically adjusts.

For more information on creating and editing layer masks in Photoshop, see your Adobe Photoshop User Guide. You might also try unlinking the mask and layer and have some fun using the paintbrush and eraser tools on the mask.

Creating Alpha Channels with Photoshop Transparency Features

Alpha Channels automatically created with Photoshop's transparency effects are ubiquitous in Photoshop files. Every single layer that is not completely filled with an opaque image has an alpha channel that describes which areas of the layer are opaque and which are transparent. In fact, every time you use a tool with transparency or anti-aliasing you are modifying an alpha channel for that layer.

1. Create a new Photoshop document.
2. Add several new layers.
3. On one layer, use the paintbrush to create some shapes.
4. On another layer, use the marquis to select an area and fill it with a solid color or pattern.
5. On a third layer, add some text.
6. Play around with other Photoshop tools such as the cloning tool, the gradient fill tool, or the paint bucket fill tool in feathered selections, remembering to create each element on a separate layer.
7. Save the file as a Photoshop (.psd) file and import the layers directly into the score as 32-bit cast members using PhotoCaster.

Using this method, you are virtually free from having to manually create alpha channels.

(You're on your own here, there's no sample file.)

Using PhotoCaster to Import Photoshop Layers to Director's Cast

For any of these examples, you can directly create alpha channels and save each layer as a PICT file if you want to import it to Director without using PhotoCaster. The more complicated your alpha channel becomes, the more arduous this manual process becomes.

PhotoCaster is an Xtra for Director from Media Lab, Inc. that allows you to access your Photoshop layers from within Director and eliminates the need to manually manipulate alpha channels and export each layer to a PICT file before importing them to Director's cast.

If you don't already have PhotoCaster, the free trial version can be downloaded from the Media Lab web site or installed from the Partners folder on the D8 CD. The trial version of PhotoCaster is fully functional but defaces graphics imported to Director with blue lines.

To install PhotoCaster:

1. Place the PhotoCaster file in the "Xtras" folder located in the same folder as the Director application.
2. Launch Director.
3. To confirm that PhotoCaster has loaded, go to the Insert Menu. You should see the entry Media Lab Media, which gives you access to a popup menu where you can choose PhotoCaster.

To access PhotoCaster, choose the Insert menu and select Media Lab Media. PhotoCaster will appear on the submenu, together with any other Media Lab Xtras installed. Choosing PhotoCaster brings up the main PhotoCaster dialog box.

The PhotoCaster dialog box will display any Photoshop 3.0 or later files in a selected folder. If you use layer effects, you will have to render them before saving the file to import to Director.

Check 32-bit (24+alpha) color to import files with alpha channels. Make sure Separate is checked so each layer in the Photoshop file will be imported as a separate cast member. Also check Import to Score to have all of the layers automatically placed in the score at the same location they had in the Photoshop file.

Simply locate your Photoshop file, click "Open", and stand back! PhotoCaster may take a few seconds to completely import your Photoshop file, but it will inform you of its progress as it goes. (Upon import, all the newly imported cast members will be selected.)

As we've seen above, when you import Photoshop layers into Director at 32-bit (24+alpha) color depth, the alpha channels remain intact. This option is only supported under Director 7 and 8. It creates a bitmap cast member with 24 bits of color information and an additional 8 bits of alpha channel information. The 'Use Embedded Alpha' cast member option is automatically activated when using this option.

You can also use PhotoCaster to import layers at lower color depths to save memory and simulate alpha channels. The only limitation here is that you cannot move the sprites around on the stage because they will have a "fringe" around the edge created by the simulated anti-aliasing.

(Sample file: 8bitimport.psd)

Future questions

• What is anti-aliasing and how is it related to alpha channels?
• How do you use alpha channels in Director?
• Can you use alpha channels in 8- or 16-bit color mode?
• What kinds of special effects can be created using alpha channels?
• Can alpha channels be used on the Web?

404 Object Not Found

404 Object Not Found