Task 6 How to Create a GIF Transparency

GIF files have an advantage over JPEG files in that they enable you to set certain areas as transparent. This means that you can create silhouette effects to place over Web page backgrounds. The transparent areas in a GIF file are completely invisible. This task uses ImageReady to create the transparency.

  1. Open File in ImageReady

    In ImageReady, choose File, Open. In the Open dialog box, select the file you want to work with and click Open.


  2. Select the Area to Be Transparent

    Using any of ImageReady's selection tools (such as the Magic Wand tool to select areas of similar color), make a selection representing the area you want to make transparent.


  3. Apply a Layer Mask

    Open the Layers palette by choosing Window, Layers. With the selection from Step 2 still active, press and hold the Option/Alt key and click the Add A Mask button at the bottom of the Layers palette. This action "masks out" the selected area, giving you an idea of what the final result will be.


  4. Build Optimize Settings

    When the transparency is the way you want it, choose Window, Optimize to open the Optimize palette. Then specify the appropriate settings. (Refer to Task 4, "How to Build GIF Files for the Web," for instructions on setting up a GIF file.)


  5. Preview in a Browser

    Choose File, Preview In, <selected browser> or click the Browser Preview button in the toolbar to look at the file as it will appear in a browser.


  6. Save Optimized File

    If the file looks good, close the browser and return to ImageReady. Choose File, Save Optimized to save the file using the settings in the Optimize palette.


How-To Hints

Fixing the Transparency

If the transparency in the layer mask in Step 3 is not right, click the Add A Mask button in the Layers palette and paint the transparent selection as you would with any layer mask. (See Part 11, Task 7, "How to Add a Layer Mask," for complete details on layer masks.)

Transparency in Photoshop

You can also set GIF transparencies using Photoshop's Save For Web dialog box. Select the color in the color palette and click the Transparency icon at the bottom of the palette.