Transparent GIFs

Transparent GIFs are great for banners, non-rectangular buttons, separator bars, and accent images. The entire GIF isn't transparent, of course, just one of its colors. The transparent color is usually the background color, letting a non-rectangular image appear to "float" on your page. Here's a set of simple examples:

Each of the cells of the table above contains one of two transparent GIFs, an X or an O. Notice how in each case, the different background colors of the table's cells shows through.

We'll look at two methods of creating transparent GIFs with Paint Shop Pro, and then go over some general points about transparent GIFs.

Set Palette Transparency Method

With this method, the image you work from is altered, so you might want to work from a copy of your image rather than from the original.

  1. With the current Background color in the Color Palette set to the color that you want to be translated to transparency, select Colors > Set Palette Transparency. (If your image has a color depth greater than 256, you'll then be prompted to reduce the color depth.)
  2. In the Set Palette Transparency dialog box, choose "Set the transparency value to the current background color" and click OK.
  3. Save your image as a GIF.

    Note: If you save your image in a file format other than GIF (or PNG), you won't get any transparency -- the transparent areas will be changed to white. Only GIF and PNG support palette transparency.
    It's surprising how many people ask, "Why isn't there any transparency in my transparent GIF?" and the answer is this: "Because your file is a JPEG."

You won't notice any change in your image, but you can see the effect of the change by choosing Colors > View Palette Transparency. Don't be alarmed to see a checkerboard pattern in the areas that you want transparent -- that checkerboard is simply how PSP indicates transparent areas.

GIF Optimizer Method

This is the method I recommend for creating transparent GIFs. With this method, you begin with an image of any color depth or file format, and this image itself will never be changed. Instead, the GIF Optimizer creates a new GIF version of your image.

  1. Choose File > Export > GIF Optimizer. On the Transparency tab of the GIF Optimizer, you're asked what type of transparency your images should have:

    • When you're simply optimizing a GIF and don't want any transparency, choose "None".
    • If you're working from an image that has layer transparency or a mask, choose "Existing image or layer transparency" to translate the layer transparency to palette transparency. This option is also the one to choose if you're working from an image that already has palette transparency that you want to preserve.

    • If you have a selection set in your image, then the two grayed-out options in the figure above will be available. Choosing the first sets everything inside the selection to transparency. Choosing the second sets everything outside the selection to transparency.
    • Choose "Areas that match this color" when you want to translate a specific color in your image to transparency. By default, the color shown in the color swatch is the current Background color on the Color Palette. To change this to some other color click the color swatch, which brings up the Color Picker. Choose your color on the Color Picker and click OK to return to the GIF Optimizer.

      Notice that you can also set a Tolerance level when you choose this option. Tolerance is discussed in the Tips section at the end of this page.

  2. The Partial Transparency tab has some very useful but advanced options that we won't look at here. If you want to learn about these options, click the Help button on the GIF Optimizer and consult "Using the Partial Transparency Tab".
  3. You can also choose settings on any of the other tabs of the GIF Optimizer, optimizing your image as well as setting the transparency. When you have the settings you want, click OK.
  4. In the Save As dialog box, name your new GIF image and select the folder in which to save it. Click Save, and there you are!

General Points

Here are a couple points you should keep in mind when creating transparent GIFs:

  • There's usually a halo effect around the edges of the foreground figure in transparent GIFs. To minimize this effect, try using a background color that matches the dominant color of your page's background. For example, if your Web page's background looks like green silk, use the predominant shade of green in the background image as the transparent GIF's background color.

    If you want a transparent GIF that will look pretty good on several different colored backgrounds, try a neutral background color such as medium gray, experimenting to see what works best. In general, don't use one of the colors in your foreground figure as your transparent color, which can give some rather odd looking results.

  • Only a single color can be translated to GIF transparency. Your image's background might be dithered (containing a mixture of colors to simulate another color). The pixels that don't match the color you select as your transparent color will remain opaque, creating a quite unpleasant effect. You'll need to clean up any dithering in the image's background, making sure that the area that is to be transparent has an entirely uniform color.

    Note: "Entirely uniform color" means exactly the same color. Shades of off-white don't match white, for example. All of the pixels must have a single RGB value in order for them all to be translated to transparency.

Tips

And here are a few additional tips on making and using transparent GIFs:

  • If you use the GIF Optimizer to create your transparent GIF, and choose the "Areas that match this color" option, you can reduce the halo effect mentioned above by adjusting the Tolerance setting. Tolerance can also be useful when the area that you want to become transparent contains pixels that are nearly the same color rather than exactly the same color.

  • If you want to use your transparent GIF as a button, don't forget to set BORDER=0 in the IMG tag. If you do forget, you'll get a highlighted rectangular link border around your non-rectangular image, which probably isn't the effect you had in mind.

  • Create the base image for your transparent GIF by making your figure on a transparent layer, and save this file in PSP format. Then use the GIF Optimizer to create a transparent GIF version. That way, if at some point you need to create a version that works well on a page whose background is very different from what you first had in mind, you'll be ready to make an appropriate version easily using the GIF Optimizer.


Basics

Copyright 1997-2001 Lori J. Davis
All rights reserved