A Complete Guide to Web Design

276 Chapter 14 – GIF Format

Transparency

Web Design in a Nutshell, eMatter Edition

To make only the background transparent, follow these steps:

1. Before exporting to GIF89a, make a note of the RGB values of the color that
   is shared by the background area and the image elements. In our example,
   that color is white (255, 255, 255). This is the color that will appear when
   transparency is “undone.”


2. When exporting to GIF89a (FileÝExportÝGIF89a), use the eyedropper to
   make the background area transparent. Remember that all the pixels of this
   color in the image will also become transparent.


3. Change the Transparency Index Color from its default gray to the desired
   color (white) by clicking on the swatch and filling in the RGB values in the
   Color Picker. Click OK.


4. Export the image by clicking OK.


5. Open the exported GIF file, and activate Channel #2 in the Channels palette.


6. Wherever you want transparency to be removed (such as the text areas within
   the image), change the black pixels to white using the eraser tool (shown in
   the Figure 14-8), pencil tool, or filled selections. These areas will no longer be
   transparent.


7. Save the file, or export to GIF89a, selecting “#2” from the “Transparency
   From:” pop-up menu. The formerly transparent text is restored to the Trans-
   parency Index Color, which is now our desired white color, as shown in
   Figure 14-9.

Copying transparency information

As with any channel in Photoshop, you can copy a transparency Alpha Channel

from one document to another.

Figure 14-8: Erasing transparent areas in the alpha channel