Transparency 273
GIF
Transparency
Web Design in a Nutshell, eMatter Edition
- Once the color is changed, close the dialog boxes and Export to GIF89a,
selecting the background area to be transparent. You’ll know you’ve selected
the correct white because the areas will be filled with the Transparency Index
Color in the preview.
Editing Transparency with the Alpha Channel
Although there isn’t an independent transparency channel stored as part of the GIF
code structure, Adobe Photoshop translates the transparency information for an
image into a sort of picture or map, which can be viewed as an Alpha Channel.
Figure 14-4 shows a graphic (on the left) with the background (in this case, black)
showing through its transparent areas. The image on the right shows the corre-
sponding alpha channel for the transparent areas of the graphic as it appears in
Photoshop. To access the transparency information, open the GIF file in Photo-
shop and select Channel Number 2 in the Channels Palette. Areas of the image
corresponding to the black pixels in the Alpha Channel will be transparent; areas
of the image under white pixels will be visible. There can be no shades of gray in
the GIF transparency Alpha Channel.
Adding transparent areas
You can edit the channel, thus affecting the transparency information for the
image, using any of the selection and painting tools. If you add black pixels to the
Alpha Channel, the corresponding pixels in the image will become transparent
when the image is saved again as a GIF and viewed in a browser. You can edit
Figure 14-4: Transparent graphic and its corresponding alpha channel in
Photoshop
This area is transparent,
allowing the image to sit
in the browser and blend
into the background.
The black area in channel #2
indicates transparency.