Browse DevX
Sign up for e-mail newsletters from DevX


Optimizing Design: Transparency : Page 2

Transparency allows the background of the page to show through portions of the graphics file. You can mimic the effect when you create your graphic.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

GIF/PNG Transparency
Transparency sets one of the indexed colors in the file to be transparent instead of a displayable color.

Only GIFs and PNGs can have a transparent area. GIF and PNG files are made of a fixed set of indexed colors. The transparency feature lets you tell one of those indexed colors to be transparent and let the background of the Web page show through. The alpha channel is somewhat analogous to a mask in print production.

For example, because the triangle has a transparent background, it can be placed on any page or table cell and the page or cell color will show through:

Alpha Channel
Each pixel in the GIF or PNG file can be one of a set of indexed colors. There can be as many as 255 indexed colors in a GIF or PNG file. The colors are described by three color channels: red, green, and blue. Each of the indexed colors is made of some percentage of these three colors.

In addition, the file formats support a fourth channel, the alpha channel. The alpha channel can record places in your image which are "background" and set that index color to have a transparent value.

If you are working with a graphic and have set the file background to "transparent" you have, in effect, set an alpha channel value. When you export that file as a transparent GIF/PNG, that "color" will be transparent.

You can also set a particular indexed color to be transparent. For example, if your graphics file has a black background, you can set black to be the indexed transparency color; everything that is black wiil be transparent.

Creating Transparency
Image editing programs such as Fireworks and Photoshop export transparent GIFs. Here's an example of the Fireworks export box:

Exporting GIFs from Fireworks allows 3 options for transparency:

No Transparency:

Make specific color transparent:
Use alpha channel values:

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date