Transparent GIFs

TOC

It was mentioned before that the GIF image format allows for areas of the image to be transparent. As you would expect from that statement, when an irregular-shaped image is placed over a background or solid color, the transparent parts of the image will allow what's underneath to show through.

JPEG
on solid background:		 Transparent GIF
on solid background:

Implementation of transparency in GIFs, as well as creating other effects such as drop shadows, rounded or triangular buttons, etc. requires the use of image manipulation software such as Adobe ImageReady or Macromedia Fireworks. If you plan to do a lot of web image manipulation, PhotoShop is the best and would be a good investment.

Images appropriate for conversion to transparency consist of an object on a solid-color background, because the transparency matte can only apply to a single color.

To make a transparent GIF from an appropriate JPEG in Adobe ImageReady:

  1. Open the JPEG image in ImageReady
  2. Use the "magic wand" selection tool to select the background color
  3. Adjust the tool's settings to allow you to get as much of the background as possible without sacrificing too much of the object.
  4. Click "Edit > Cut" or press "Backspace" to remove the backbground (background area now looks like gray checkerboard.)
  5. In the "Optimize" palette, choose GIF format, "Adaptive" reduction, and check the transparency checkbox.
  6. Click the "Optimized" tab of the image editing window to confirm that you've matted out the background (should show as a gray/white checkerboard again), and click "File > Save Optimized As..." and give a filename to your GIF. Do not close the image editing window or quit ImageReady yet! You may have to make additions to the background selection.
  7. View the image in your browser to confirm transparency was achieved.
  8. If there are still pixels or areas of the original background appearing around the object, use the magic-wand tool to re-select the background, choose "Select > Modify > Expand", and expand the background selection a pixel or two to clean up the edges of the object.

<< Insetting Images | Index | Antialising >>