In this book...
Page 181: "GIF vs JPG vs PNG"
Page 182: "PNG King of Transparency"

Export Transparent GIF and PNG using Fireworks

In the previous tutorial, we drew this button.

My version of the file is linked here.

Notice that the corners of the button are white. If you want this button to be on a different color background, you will want those corners to be transparent. The GIF format and the PNG format will support transparency. We will try it with the GIF format first.

Exporting Transparent GIF

12. To export this image in the GIF format do File -> Image Preview select as shown...

And then click the Export button. The problem with GIF is that it is limited to 256 colors. Also depending on the background in which you are placing this image on, you may notice white pixels around the image (known as the "halo effect").

For example, linked here is the GIF image on a redish brown background.

Notice the white edge to the button. This is not good.

13. You can eliminate the halo effect by selecting a Matte color that is the same as the background in which you are going to put the image on. Go to File -> Image Preview. This time select a Matte color that match your background color and export the button.gif file again.

Now when I put this new button.gif image on the same redish background page, you no longer see the white halo.

Exporting Transparent PNG

13. As an alternatively to transparent PNG, you can export this image in the transparent PNG format. To do that, make sure no object is selected by clicking outside of the canvas and change the canvas color to be transparent.

14. Now that you have a transparent background, do "File -> Image Preview" and select PNG32.

With PNG, you do not need to worry about the Matte. Leave it as unselected. And click Export to export the file as button.png. If we place this image on the same redish background page, we do not see any halo effects.

Internet Explorer 7.0 was used for this screen shot.

That is because PNG can support a million colors and has better transparency capabilities. PNG supports alpha channels which enables it to have variable transparency. The only problem with transparent PNG graphics is that older browsers such as Internet Explorer 6.0 is not able to render the transparency.

Next Lesson:

  Drawing the Hover State