Specifying background transparency

Background transparency lets you place a nonrectangular graphic object against the background of a Web page; the areas outside the borders of the object are defined as transparent, letting the Web-page background color show through. You can specify background transparency for GIF and PNG images.

Converting the Background into an ordinary layer

Before you can use the GIF file format’s ability to preserve transparency, you must create some transparency in your image. You’ll do that by removing the white backdrop surrounding the image map. To start this process, you’ll first convert the Background layer to a regular layer.

A Background layer cannot contain any transparency information because, by definition, there is nothing behind it to be seen. If you tried to use one of the techniques that usually can replace colored pixels with transparent ones, the results would be that the original pixels would be changed to the currently selected background color instead of becoming transparent pixels.

Using the magic wand tool to create transparency

In this part of the lesson, you’ll use the magic eraser tool to quickly convert the backdrop color of the zoo map to transparent pixels.

The magic eraser tool erases all pixels of a particular color with a single click. You’ll use this tool to erase all of the white pixels in the layer. However, you only want to erase the white pixels outside of the zoo map (not the white of the lettering), so you will first create a selection that excludes the interior portion of the image.

1.	Select the rectangular marquee tool ().
2.	Draw a rectangular selection marquee so that it includes all the text in the five colored regions of the zoo map, as shown in the illustration below.
3.	Choose Select > Inverse to select everything outside of the rectangular selection marquee.
4.	Select the magic eraser tool (), hidden under the eraser tool ().
5.	In the tool options bar, deselect the Contiguous option so that all white pixels in the selection will be erased, including each isolated white section within the leaves.
6.	Click the white background outside of the zoo map.

Now all the white backdrop is gone, replaced by transparency so that you can see the checkerboard pattern behind the image.

Preserving and previewing transparency

Now you will confirm that the transparent areas in the image will be included as transparent pixels in the optimized GIF file. Then, you’ll preview the transparency in your browser.

Because the ImageReady preview feature displays the image on a Web page with a white background, you’ll change the matte color of the image so that you can see the transparency.

Trimming extra background areas

Although the background of the zoo-map image now contains transparent pixels that do not display, these pixels still take up file space, adding to the size of the image. You can trim away unneeded background areas to improve the layout of the image and optimize the file size.

You will be prompted to save the 14Start2.psd file before closing. Since you are finished with this file for the lesson, there is no need to save the last changes.