How to make transparent background

683

Thierry Lorey

0

33697

10 October, 2011

Description

Adobe Fireworks is the ideal tool for creating and exporting web graphics. In this tutorial you will learn how to export and optimize your transparent background graphics using Fireworks. Also covered is how to export images that have white areas (or background color areas) in them. This tutorial will show you how to make transparent background in Fireworks with PNG and GIF.

Requirement

All Fireworks versions

Tutorial

1. Transparency and formats

This table shows where transparency is supported for GIF, PNG and JEPG settings:

Formats	Settings
GIF	Transparent background with Index/alpha transparency
PNG-8	Transparent background with Index/alpha transparency
PNG-24	Transparency not supported
PNG-32	Set the canvas transparent
JPEG	Transparency not supported

Advertisement: Visit PsPrint to get the best deals in wall calendar printing!
2. Transparent GIF

In the Optimize panel the different export options available are found in the first drop down menu. Select GIF Adaptive 256 which is the recommended setting for a GIF image.

Setting Transparency: GIF Adaptive 256 has three different types of transparency - "No Transparency", "Index Transparency" and "Alpha Transparency". See the image below to identify where the Transparency option appears.



Figure 1: Optimize Panel

No Transparency - This option is selected by default and shows that there is no transparent background areas in the GIF file.

Index Transparency - The Index Transparency option should be selected if you need your image to have a transparent background where ever the canvas' background color occurs. Therefore the Index Transparency setting makes transparent all pixels with the background color.

Alpha Transparency - This option should be selected if the graphic has areas that contain the background color (white by default) and that should not be rendered as transparent. Only the background area pixels are made transparent in Alpha Transparency.

For example, if you are using a white fill in your graphic and your canvas color is white as well, when you preview the graphic with "Index Transparency" you will find that the white areas will also becomes transparent, whereas with "Alpha Transparency" the graphic will remain white. The images below illustrate this difference :



Figure 2: Index and Alpha transparency in GIF

GIF does not support any true alpha transparency - a color is either transparent or it is not in the GIF format. The gradient glow example you provide demonstrates how the gradient is placed over a solid background and is not actually transparent.

If you move from Index Transparency to Alpha Transparency setting you may not see this working sometimes as both options might be implemented. You may need to go back to No Transparency setting and then select Alpha Transparency to make this work.

3. Advanced Alpha Transparency

In addition to the simple implementation of Alpha Transparency above, you can also make more than one color as transparent using Alpha Transparency. See Figure 1. For this just click the small picker with + button in the optimize panel (see bottom left in panel screenshot above) and pick the color of your image. You will see that the areas with this color will have a transparent background instantly. See tutorial: How to make areas transparent

4. Transparent PNG

PNGs have no issues with white color.

Exporting a GIF image with Alpha Transparent background in some cases might not be as accurate as required because both alpha and index transparency settings fail when you are using a shadow or glow effect - the image will not look perfectly transparent as all pixels are treated as opaque (see slight gray areas around the Index Transparency and Alpha Transparency images above that illustrates this). In such cases we recommend it best to export as a transparent PNG image - PNG with alpha transparency - instead of GIF for optimal results.

The example with this setting: PNG 8 + Alpha transparency is shown below. Notice how there is no gray areas around the shadow and it has a perfectly transparent background:



Figure 3: PNG transparency

PNG-32

To get a transparent background, simply set the canvas transparent and export through Image Preview.

PNG-24 and JPEG

PNG 24 and JPEG don't support transparency.

Conclusion

PNG settings (PNG-8 and 32) are the best choice to get a transparent background with icons or cliparts because we do not run into the white areas issue and because we obtain a better quality than with GIF.

Where to go from here:

Download