Create a Transparent Gif
Method # 1
1. In this example, we'll try the trickiest transparent gif effect: creating an image that will be transparent against a patterned background. Here's the background we'll use in this example:
If you're using Photoshop 3.0, you'll need to get the Gif89A Export Filter from Adobe. Later versions should automatically install this filter: you'll find it within Photoshop under File/Export/Gif89 Export. If it's not there, try reinstalling Photoshop.
Why is this a problem? Well, you can only make one color transparent when you create a transparent gif. Obviously, in a patterned background, you have a number of colors involved. What to do? In this first method, we'll define the area that is to be transparent by using Layers in Photoshop. First, we'll create the image, making sure that the artwork is NOT on the background layer of the file, as seen below. Open the Layers palette, if it isn't opened already by selecting Window/Show Layer.
You can see in this example that the artwork is on two layers, and the background layer has been turned off by clicking on the eye icon on the Layers palette.
2. Now, find out what color should be defined as transparent. Open the Info Palette by selecting Window/Show Info. Then, use the eyedropper tool to select a color from the background pattern. Choose a color that tends to be darker rather than lighter.
See the R, G, and B values? Jot those down, we'll be using them in just a minute.
Now, select your layered file, to make it the active image, and then select File/Export/Gif89a. You'll see a gray square in the upper left corner of the dialog box that says "(Default) Transparency Index Color". Click on this gray square. A color picker will open. Type in the R, G, and B values that you jotted down a moment ago.
Select OK, and then OK again. You can see the result here.
Method # 2
1. We'll create a second example using different steps to achieve a better result. First, before creating the image for your web page, fill the background of the image with the color selected from your seamless pattern file as described above, using the Info palette. Create the image, and flatten and Index the file. In Photoshop 3, select Mode/Indexed. In Photoshop 4, select Image/Mode/Indexed.
2. Next, select File/Export/Gif89 Export.
Use the Eyedropper tool to select as much of the background as you'd like. You can view the results of this method here.
Main Tip Page