A Complete Guide to Web Design

272 Chapter 14 – GIF Format

Transparency

Web Design in a Nutshell, eMatter Edition

transparent with a color you are certain does not appear anywhere else in the

image.

For this example, consider an image that has a white background, but also white

text within the image area. The goal is to turn the white pixels around the image

transparent, but to keep the white text visible.

Creating a distinct color for transparency

1. Flatten your image so any anti-aliased edges will merge with your chosen
   background color (see “Anti-alias to a colored background layer,” earlier in
   this chapter). If you are starting with an Indexed Color image, change it to
   RGB so you can add a color to its palette.


2. Using the Magic Wand tool with the tolerance set to 1 and anti-aliasing turned
   off(these settings are important!), select the areas in the image that you’d like
   to be transparent. Holding down the Shift key allows you to add to your
   selection. (Note, don’t use “Select Similar” or you will selectallthe pixels in
   the image, which is what you’re tryingnot to do!)


3. Fill your selection with a distinct color that does not appear anywhere in the
   image (one of the obnoxious bright colors usually works well). Be sure to
   choose a web-safe color if you are converting to the Web Palette in order to
   avoid dithering.


4. Check the image to be sure that all areas you wish to be transparent are filled
   with the distinct color.


5. Now you can convert the image to Indexed Color, save as GIF format, and
   select the distinct color to be transparent as you would normally.

Changing the distinct color without losing transparency

The following is an additional (and entirely optional) step to the preceding tech-

nique. If for some reason you are unhappy with the new color in your file, or if

you worry that it will be visible if transparency isn’t supported (not as likely as it

used to be), you can turn the new color back to its original color value (white in

our example) while keeping it distinct from nontransparent pixels sharing that

color (the white in the text areas).

1. Create a distinct color for the transparency.


2. After the image has been converted to Indexed Color, open the Color Table
   (ImageÝ ModeÝ Color Table).


3. Find the new, distinct color in the Color Table (if you made it obnoxious
   enough, it should be easy to find), and click on it.


4. Edit the RGB values in the dialog box to set the color back to the color it was
   before (white in our example). By doing this, you are assigning that color to
   two positions in the Color Table; one will be made transparent, the other will
   remain visible.


5. For some transparent-GIF creation tools, it will be important to know the
   position of the new white in the Color Table, so you may want to pay atten-
   tion to the neighboring colors in the table.