Browse DevX
Sign up for e-mail newsletters from DevX


Optimizing Design: Transparency : Page 3

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

Anti-alias Transparency
Anti-aliased and other edge effects require special note in transparency.

It is important to note that if your graphic has an antialiased edge, or an edge which is feathered or otherwise treated with effects, transparency won't work quite the way you expect in a GIF file:

This antialiased text is set against a black table cell. When the text was created in the graphics program, the background was transparent. Antialiasing used light colors to create the illusion of smooth rounded edged, adding in white and pale pinks. Against a black background, these antialiased pixels produce a halo effect.
This is the same text, created the same way—except that it is not anti-aliased. There is no halo effect.

One workaround for this is the create the background against the color you expect to be using the image. When the anti-aliasing or other effect is processed, the colors used to create the effect will be those of the background:

Same text, created on a black ground and anti-aliased.
But you wouldn't use this file against a white background—same halo effect, but in black instead of white!

One of the nice things about PNG files is that they support a true 8 bit alpha channel—which means anti-aliasing and special effects issues are far less of problem with PNGs than they are with GIFs.

It isn't just anti-aliased text that creates a problem—drop shadow and other graphic effects create the same halo:

Artifacts occur when the original file has anti-aliased edges, like this drop shadow. Some of the original background color of the image file will be blended into the drop shadow, making an undesirable result when placed on a different background.
To avoid artifacts, create your graphic on a background that is the same color as the background of your Web page, and then specify that color as the transparent color. A fail-safe way to do this open your page in Navigator or Explorer and take a snapshot. Open the snapshot in Photoshop, and use the eyedropper tool to select the background color. In the graphic file, fill the background layer with this color. This may not look very good, but once it's exported with the background color selected as the transparency color, it will look fine on your Web page. lizard

When creating anti-aliased or special effect edges, be aware of the page in which you are using them, and index against a matching color as you create the graphic.

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