Steps Applied

Either actual image transparency or background matching can be used to create simple transparent effects. Both methods start with isolating the image area using selection. That sounds easy but is the most complex part of the process. Once you make the selection, you can use the selection to create transparency or the illusion of it by matching. These steps assume you are working in RGB, not Indexed color.

Creating the Selection

You may need to use a variety of tools, from the selection tools themselves to drawing tools used to edit the mask/selection. If you are not sure how to approach selection, probably the most versatile way is to use a mask. To create an editable mask, you can either create a new Alpha channel (on the Channels palette pop-up menu, choose New Channel), or use Quick Mask.

[NOTE: Using Quick Mask is almost the same thing as creating an alpha channel mask. In fact, it does create an alpha, but in a temporary way.]

Once the channel is created, be sure the view for it is on (click the view 'eye' on the Channels menu). Essentially what using a channel for creating a selection does is allow you to make a selection on screen as a grayscale representation. Use an eraser with a 96% hard brush and start clearing away the area of the mask which would contain the portion of the image you want to retain. The eraser brush should have slightly soft edges to help smooth out some of the more difficult areas of the selection.

[NOTE: If you are very familiar with masking and selection, you may have other preferences for creating the selection.]

To turn the masking channel on and off as you work to view the image below, click the eye for the mask channel in the channels palette. You may need to switch brushes several times to get some of the tougher spots and/or use other drawing, painting and selection tools as you are familiar with them. Take care in clearing away ALL of the red mask over the area of the image you want to keep. When you are done selecting, the hard part is really done.

[NOTE: Usually grayscale portions of the mask will act as a partial selection. For example, 25% gray will select 75% of the tonality of the image. For the sake of GIF transparency, pixels in your selection should be either pure white or pure black. The matching method will tolerate some grayscale.]

The white part of the mask is the area of selection by default though you can change that in the tool options. The black is the portion outside the selection. Also, by default, the black area of the grayscale is viewed as red when the mask is viewed along with the content; if you look at the channel/mask by itself, it will be black.

Hopefully Figure 1 helps clarify mask views. The strip shows how the image looks in Photoshop: the original image with no mask; the image with a the mask viewed at the same time; the mask in grayscale; the image area affected by the selection (showing the potential transparent area as a checkerboard).

Figure 1


[image Photosphere 2001]

After completing the selection (if using Quick Mask, you need to convert back to a selection and save the selection), save the image as a PSD (e.g., myimage.PSD). This will retain what you have done to this point and effectively save the selection with the image. With the selection saved, you can use it to create what you need to make the image transparent on the web.

[NOTE: Using extensions can simplify your image management and stop you from saving over an image that you really want to save. In a later step, when you save the image as a GIF, the naming scheme actually can act like a filing system (i.e. myimage.PSD is related to myimage.GIF, myimage.EPS and myimage.TRG).]

While there are other ways to complete the steps, you can prepare the transparent area for either method that follows by deleting the portion of the image that you want to keep transparent.

1. Save the image as a PSD and flatten if you have it on more than one layer.

2. Double-click the background layer in the Layers palette to change it from Background to Layer 0.

3. Load the selection. You can do this by (Cmd-click)[CTRL+click] on the channel saved as the selection, or by loading the channel from the Select menu (Select>Load Selection).

4.Copy and paste the selected area to a new layer.

5. Select all.

6. Click the background layer.

7. Press the [DELETE] key.

This will clear the background layer and isolate the image area you want to keep. The isolated area will display with transparent areas showing as a checkerboard.

Mimicing Transparency

Without using transparency, you need to match the area of the image that you delete to the background color of the web page. What this does is create a situation where the background of the page and the background of the image blend seamlessly. All you have to do is fill the transparent area of the image with the background color.

The color matching is simple to do if you have set up the image as suggested and the background you are matching is a solid Hex color (not designed).

1. Select the background layer.

2. Change the foreground swatch color to the hex color used with the background. You may want to simplify the selection using the Only Web Colors checkbox.

3. Fill the background layer with the hex color using the Paint Bucket Tool (G) or Fill command (Edit>Fill).

4. Remove the alpha (selection ) channel.

5. Flatten the image and save as a GIF or JPEG.

The advantage is that this can work for either GIF or JPEG images. JPEG files do not actually support transparency, so this method is as close as you can get. This method also allows easy control of blending with the background than true transparency does. For example, this method is very good for use with blends and drop shadows as it won't cut them off or make them look jagged so long as you don't allow the shadow to run off the edge of the image.

[NOTE: Be careful in selecting a level of JPEG compression. JPEG is a lossy compression, the image will degrade more with increased compression levels, and this might throw color matching off.]

Using GIF Transparency Properties

GIF transparency can be controlled in more than one way, but the easiest is by using the GIF89a export. This will allow you to use the current transparency as a basis for GIF transparency and will add a transparent 'color' to the color table.

[NOTE: You may need to load the GIF89a Export plug-in from the Photoshop installation disk. It will be located in the Photoshop installation disk (Goodies>Optional Plug-ins>Photoshop Only>Export). Just copy the Plug-in to the Plugins folder in the Photoshop home directory.]

To complete the export, select GIF89a Export from the File menu (File>Export>Gif89a Export...). This will open the GIF89a Export screen. Click [OK] and the export module will allow you to choose a name and location for the save. The resulting transparency will be based on the transparency you see on screen. After exporting, the image will perform on a web page as if the checkerboard area of the image where empty.

A similar result can be had by using Save for Web. If converting to Indexed Color before saving, be sure to click the Transparency checkbox if there is transparency in the image that you would like to retain.

To base the transparency on colors you select yourself:

1. Fill the background layer with the color you want to use for transparency.

2. Merge visible layers (Layer>Merge Visible).

3. Delete the channel/mask.

4. Switch to Indexed Color.

5. Save using Save for Web or the GIF89a Export.

Either of these dialogues will allow you to select transparency colors and work with the color tables.

[NOTE: Matte color should be set to a color that is most likely to blend with the background, as it is used to blend with any semi-transparent pixels.]

  Copyright © Richard Lynch 2001