Export Transparent GIF and PNG using Fireworks
Suppose that you had drew the following button in Adobe Fireworks and now want to export it out as a transparent GIF or PNG.
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.
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 …
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.
Now when I put this new image on the same red background, I no longer see the white halo.
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.
2. 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 reddish background, we do not see any halo effects.
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.