Anti-Aliasing
Graphic artists and designers are used to using "anti-aliased" text in digital documents. Anti-aliasing is subtle blending of the edge colors of a graphic with the background color to soften the stair-stepped look of digital art.
Anti-aliasing on: |
Anti-aliasing off: |
|
 |
 |
In the last few years, Windows has caught up with the Mac in terms of on-screen text presentation. Anti-aliasing at the operating system level practically eliminates the need for anti-aliasing of text that is not part of a graphic element.
The blending with the background color is similar to what happens when you apply a drop-shadow effect or feathered edge to an object:
Anti-aliasing, drop shadows and feathered edges all work when you can control both the color of the art and the color of the background. These techniques can be a poblem in HTML documents if you attempt to use transparent backgrounds in your images because transparency can only be applied to a singe color - not the gradations of that color that produces the soft-edged effect. The result can be a jagged "halo" around your images.
If you want to use a font not usually present in the catalog of PCs or Macs, though, you'll have to become familiar with the technique. The biggest consideration is choice of background color. Moving a transparent GIF of anti-aliased text from the background it was created on to another background can produce undesired effects:
| 1. Anti-aliased drop shadow against a white background -- the white background is not set to transparent in the GIF: | ||
 |
|
|
| 2. Same thing with the background white set to transparent: | ||
 |
|
|
| 3. Same thing against a gray background of #CCCCCC: | ||
 |
|
|
| 4. Transparency with no anti-aliasing: | ||
 |
|
|
The illustrations above show that it is not possible to create anti-aliased text, drop shadows or feathered edges with transparent backgrounds that will work against all possible background colors. To avoid creating pages that will look unreadable (or just bad) with certain background colors, it is best, if you need to use transparency, to use the methods in examples 1 and 4, above.
For most typical web design situations, transparency in images is no longer necessary and simply matching the background of your images with the background of your page provides the same effect without the edge problems.
<< Transparent GIFs | Index | Background Images >>