Making Transparent GIFs

Here is some help for how to make transparent GIFs using Photoshop.

A transparent gif is a normal gif image with the exception that you assign one or more of the colors in the image to be transparent. This will allow the background image or color of your web page show through the transparent area.

First a couple of hints. When you make a transparent gif you want to select the transparent color to be a color that isn't in your image.

This image was made knowing that it needed a transparent background. First thoughts might make you want to use white as the background, but if we did that then the white text would have disappeared also. So we chose the medium grey. The other reason for choosing a darker color is that we knew we were putting this over a dark background, black in this case.

In this example, the image was made with a light, but not quite white background color.

Notice how the edge has white ghosting around it. This is because the anti-aliasing around edge of the oval blends the color of the oval, red, with the background color, white. This causes the light colored pixels around the edge.

This is why for transparency you want to choose a background color that isn't in your image and one that is close to the color you'll be using on your page.

How to make your GIF transparent

To be able to create a transparent gif in Photoshop, you must have the Gif89 export filter. This comes with versions 3.05 and later, if you don't have it you can get from Adobe. Open your image and select FILE/EXPORT/GIF89AEXPORT. There are two ways this filter works.

If your image is saved in "index" colors, you can select the colors to be transparent directly from your image or by selecting your colors from the choices below.

If your image is an RGB image, then it must be on an actual layer - not on the "background" layer. Anything that is transparent on the layer (where the gray and white checkerboard shows through) will be the area that will be the transparent color as a gif. Export you image, and you are done. Note: Photoshop will save your transparent color as the default gray if you do not specify another color. To do so, click on the gray box in the export pop-up window. This will give you the color palette and you may pick any color. Click ok, and then ok again to save the image.