Creating Transparent GIFs with Photoshop

This tutorial will show you how to create transparent GIFs. I used PhotoShop 4.0 for Windows. Some things may be done differently with other versions. Although I won't go into detail here, I used Kai's Power Tools 3.02 to create the background texture and to make it seamless.

Start off by opening your texture file (see figure 8.1). This is necessary as you'll need to choose the predominant color from it to use as the color you'll set to transparent.

figure 8.1


Open a new file with File, New. I opened one at 400x200x72dpi.

NOTE: Open the file as an RGB even though you'll change it to Index later. This is so you can use any and all of the special filters you may choose to.


Select the eyedropper tool and use it to choose the predominant color from your texture image. What this color will be, I can't really say. This may take a little trial-and-error on your part. You'll only be able to tell if you've chosen a good color once you see the transparent GIF against the background tile. If you've chosen the wrong color you'll see a fringe around the GIF. If there is an apparent fringe you'll have to start over using another color for the background.

Make the new (empty so far) graphic current and, while holding down the ALT key tap the BACKSPACE key. This will fill the graphic with the color you chose from the texture image.

NOTE: We're obviously creating a new GIF here. The same steps used later on in this tutorial can be used to make an existing image into a GIF with a transparent portion.


Choose a color for your text and use the text tool to enter some text. I entered the word, Transparent (how inventive), in Fujiyama (a font that came with Corel DRAW! 3.0) at 90 pixels. I set bold and anti-aliasing ON. Hold down the CTRL key and use the mouse to center your text