1.Open Fireworks

2. Open or create the image you'd like to make transparent.

3. Select Modify>Canvas Color. The Canvas Color Window will appear.

4. In the Canvas Color window, click in the circle next to "Transparent".

5. Click OK.

6. All parts of your images that are not covered by objects (photos, lines or shapes) will now appear as a grey and white checkerboard pattern. This is Fireworks designation for transparency. When the graphic appears on a web page, those parts of the image will be transparent.
Note: Although the areas will be transparent, they will still be part of the image, and will take up space on the web page. You will not be able to overlap the transparent portion of the image with another image, or with text.

7. When you are satisfied with the image, press File>Export Preview to open the Export Preview window.

8. There are two sections in this window. The first is on the left. In this section are the controls that allow you to select the image options, specify details about the file, and control animation.

The second section is a large, square viewing window, in which you can observe the effects of any changes you make. In the upper left hand corner of the viewing window is a description of the image, showing the image size and how long the image would take to download to a modem.

9. In the Command Section, select the "Options" tab. Select "GIF" as the file format. At this point in time, GIFs are the only web files that can be made transparent.

10. Optimize your image. (see handout: Optimizing an Image).

11. Beneath the color palette on the control side of the window, check to be certain the transparency window says "Index Transparency" or "Alpha Transparency." Select either using the drop down menu.

12. Click in the color well next to the word "Matte" and select the circle and slash symbol. The matte is the background color for functions like anti-aliasing.

Anti-aliasing is the fuzzing of edges to make curves look like curves, rather than blocky pixels (an example is the tiny changes in pixel color around the edges of text to make letter shapes look curved, not stepped along edges). Unless an image has square edges, (with straight sides, and thus no need to anti-alias), there is some anti-aliasing to maintain the look of a smooth shape. Around images like the Arrowhead, and other graphics, raggedy white edges will appear if the anti-aliasing is to a white, rather than transparent matte.

13. The problem with white. If you are exporting a graphic with blocks of white, you may find that the white also becomes transparent. This could be bad. To avoid this:

• Select Alpha Transparency as the transparency type
• Click on the eyedropper with the minus (-) sign, located next to the transparency type.
• In the image preview window, click in the space you want to remain white. It should become white.
  Note: In the case of Index Transparency, clicking in the area you wish to remain white will often turn the background white again.

14. When you are satisfied with the image file size, quality, and the degree of transparency, click "Export."

15. In the Export Window, you can specify where you'd like the image to be saved, and what the file name will be. This is very much like the "Save As" window in many other programs. Save your image with the other files related to your site, perhaps in a graphics file.

16. When you are happy with the file name and have noted or specified the location, click "Save".

17. You will be returned to the main window. When you close the file, you'll be asked if you want to save the image. You should save it, but notice that this is not saving your GIF again. Your GIF image is all one piece - that is, it cannot be edited. Now you are being asked if you'd like to save a PNG file, the file you edited in Fireworks, with all the changes, and all of the same controls you can re-adjust later if you need to. It's good to save all your PNG files in the same place so they are easy to find.

18. Save the PNG, and exit Fireworks.

Step by step Index