Photoshop Tutorials -- Transparent GIFs |
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 (see figure 8.2).
 |
| figure 8.2 |
For effect I'll add a drop shadow using Alien Skin's Eye Candy (see figure 8.3). This is only for demonstration purposes and has no outcome on the final transparent GIF.
 |
| figure 8.3 |
Here's where the fun begins!
Select Image, Mode, Indexed Color. Photoshop will inform you, via a warning message, that it must flatten the layers. If you think you might need to change this image in the future you'll probably want to click "Cancel", save the image as a PSD (Photoshop file) to preserve the layers, and then repeat the process this time letting Photoshop flatten the layers.
At this point a dialog box will appear that will enable you to select the palette, color depth, number of colors, and dithering mode. All of these should be experimented with to yield the best quality image. I can't really tell you which will work best as it's somewhat subjective and dependent upon the image you're creating.
I chose Adaptive, 8-bit, 256 and none for this particular image.
I probably could have used less colors and ended up with a smaller GIF with the same quality because there's only the text and the shadow to deal with. Images with more details and colors would yield different results.
Click "OK".
Now that the image has been transformed into indexed mode you can "Export" it as a GIF file.
Select File, Export, GIF89a Export.
This will bring up the GIF89a Export Options dialog box (see figure 8.4)
 |
| figure 8.4 |
At the middle right of the dialog box you'll notice three icons. The third is of an eyedropper. It should be darker than the other two meaning it's active. If it isn't, click on it.
With this tool active click on the preview image somewhere on the color you want to be transparent.
The color you selected should be replaced with gray (see figure 8.5) in the preview window NOT in the actual image
 |
| figure 8.5 |
In the GIF89a Export Options dialog box (figure 8.4) you also have the option of saving your GIF as Interlaced. This decision is up to you. Personally I prefer not to use interlacing so I normally de-select this option.
NOTE: If you look closely you'll see a fringe of blue, the background color I chose from the texture. This is present due to the anti-aliasing of the text and the shadow. You could remove this fringe using various methods but I find it easier to create the GIF against the appropriate color. Choosing the right color will allow the transparent GIf to blend seamlessly (pun intended) into the background.
When you click "OK" the Export GIF98a dialog box will appear. Give your GIF a filename and click "Save".
Your GIF is now ready to be uploaded to your web server.
Click here to see what my finished GIF looks like on the tiled background.
That's it.... Be sure to check out some of our other Photoshop tutorials or take a look at our new Photoshop Quick Tip Videos.
|
|
|
We'd like to hear from you... If there are any Photoshop techniques you'd like to see covered, send us an e-mail.
|
