Export Transparent GIF and PNG using Fireworks

Posted in Articles

Tweet This Share on Facebook Bookmark on Delicious Digg this Submit to Reddit

Suppose that you had drew the following button in Adobe Fireworks and now want to export it out as a transparent GIF or PNG.

button in Fireworks

button in Fireworks

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

1. To export this image in the GIF format do File -> Image Preview in Fireworks as shown.  We are using Fireworks 8.

Export button in GIF

Export button in GIF

2. Choose GIF for format.  Adaptive for pallette with 256 colors.   Select index transparency.  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, button on a red background might look like …

button with halo

button with halo issues

This is not ideal.

3. 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 GIF file again.

button with a matte color

button with a matte color

Now when I put this new image on the same red background, I no longer see the white halo.

button matted to eliminate halos

button matted to eliminate halos

 

Exporting Transparent PNG

1. As an alternatively to transparent GIF, 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 of Fireworks to be transparent.

blank canvas in Fireworks

blank canvas in Fireworks

2. Now that you have a transparent background, do “File -> Image Preview” and select PNG32.

PNG32 export in Fireworks

PNG32 export in Fireworks

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 reddish background, we do not see any halo effects.

PNG button

PNG button does not have halo effect

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.