Creating Transparent Images

Transparent images are those which have been saved in a format (.gif or .png) so that the background is transparent (colorless), thus allowing the web page background to show through in a browser.

If you do not have the necessary software, contact your designer about making the desired image transparent.

Using Fireworks

1. With the image open, sized as needed, and active in Fireworks, click on File/Export Wizard.
2. An Export Wizard dialog box opens. Click in the radio button for "Select an export format" and then the Continue button.
3. In the next dialog box, click "The web" as the destination, and then Continue.
4. In the Analysis Results dialog box which opens, click Exit.
5. An Export Preview dialog box opens. Set these Options-tab parameters:
   • Format (box at top left of screen) = GIF
   • Change "No Transparency" in box at bottom left to read "Index Transparency."
   • If not already checked, check box for "Remove Unused Colors."
   • Note: Checking "Interlaced" causes the image to load a bit at a time instead of all at once.
6. Click Export and choose the location to Save the file as an Images Only type (.gif) file.

Top of Page

Using PhotoShop

For JPG, PNG and GIF images:

(An image in GIF format must first be changed to RGB format from the PhotoShop menu: Image / Mode / RGB Color. Then follow directions below, for any of these 3 formats.)

1. With the image open, sized as needed, and active, click and hold on arrow in the bottom right corner of the Eraser tool. Select the Magic Eraser Tool. (The Background Eraser Tool may also be used.)
2. Using the Magic Eraser Tool, click in an area of the background. It will "disappear" and become transparent. Continue this as needed to erase all of the background.
• Note: The Background Eraser Tool does the same thing, but you must use the usual eraser scrubbing motion to erase large areas rather than just a single click, and it can take out too much if you are not careful. It is helpful, though, if the Magic Background Eraser misses some places, to enlarge the image and erase by clicking with the Background Eraser.
3. Click Save As... and save the file in CompuServe GIF (*.GIF) format in the desired location.

For a PSD (PhotoShop) image file you've created:

1. Click Save As... and save the file in CompuServe GIF (*.GIF) format in the desired location.
2. When you click Save, a "Flatten layers" dialog box opens. Click OK.
3. In the Indexed Color dialog box, Palette = Web, Transparency should be checked, and Dither = diffusion. Click OK.
4. Gif Options dialog box opens. Normal is the usual choice. Click OK. The file is saved.
5. Open the .gif version of the file, and follow steps above to make a transparent background.

Top of Page

Other Options

1. A not-too-expensive image program is LView Pro, available at http://www.lview.com ($70 including a manual, $39 without a manual). the program has a number of features for transferring images to the Internet, including creating transparent images. There is a 21-day evaluation-copy offer available for free download.

PC World's brief review of LView Pro 2004 is at
http://www.pcworld.com/downloads/file_description/0,fid,2785,00.asp

This web site, http://www.nmacmillan.com/transgif.htm, explains how to create a transparent GIF file using LView Pro.

2. Another option is Paint Shop Pro, for $99. http://www.jasc.com/products/paintshoppro/