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.
- 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.)
- In the Set Palette Transparency dialog box, choose "Set the transparency value to the
current background color" and click OK.
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
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.
- 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.
- 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".
- 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.
- 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!
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
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
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.
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
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.