Anti-aliasing basically smooths out the rough edges of curved border areas to eliminate the pixelated look. This is done by blending the pixel colors and transparency at the border edge with that of nearby pixels. This control is available for all of the BorderMania Pro Round Button filters, Ellipse, Capsule and Rings.

The Anti-Alias control is a slider with range 0 through 100. At minimum (0) there is no anti-aliasing and at maximum (100) anti-aliasing depth is 2 pixels. In between the depth is linearly proportional to the control setting. The default is midpoint (50) which selects a depth of 1 pixel. For example, here's what Round Button #2 looks like with and without anti-aliasing at control setting 50:

Without anti-alias With anti-alias

Here's a close up look at 4x magnification that shows in more detail what's happening. Note how the anti-aliased edges are actually somewhat blurred but our eyes and brain together perceive the edges as sharper in the normal sized images above.

Without anti-alias With anti-alias

Anti-Aliasing with Dark Backgrounds

There's a problem you run into when you place an image with anti-aliasing on a web page with a dark background. You may notice that conversion to GIF format changes your original image quite a bit. It often loses a lot of quality because GIF files support a maximum of only 256 colors. The original image that you work with in the graphics editor is typically in RGB mode which means 8 bits or 256 combinations for each of the R, G and B channels, which gives more than 16 million possible colors per pixel. So the GIF conversion must compromise quality, often severely.

To make matters worse, GIF89 format supports transparency, but only one of the 256 colors may be designated as transparent. The remaining 255 colors are completely opaque. That is, there is no partial transparency per pixel as there is in the graphics editors. So after the GIF conversion, all of the anti-aliased pixels in the image are assigned a fixed color and no longer have partial transparency.

Without the BorderMania AA Color control, the anti-aliased pixels next to the transparent areas wind up becoming a very light opaque color, approaching pure white. To illustrate the problem graphically, the following diagram shows what happens when you place the image from above on a dark background.

+   =

Obviously this isn't what you want. It looks good on a white background but bad on black. The white fringes around the outer circumference of the button ruin the whole effect. To solve this problem the AA Color and AA Color Enable controls were added. They allow you to select a color for the anti-aliasing to blend into instead of transparency. But you have to plan ahead a little more and choose a color that's similar to the background color of your web page. It doesn't have to be exactly the same color, and in many cases the default (black) works good enough.

To use the AA color controls, your image must have a transparency layer. Since the controls don't do anything when the image doesn't have a transparency layer, they are disabled and hidden. So if you don't see them, that's why. For an example of how AA color works, here's what happens to the image above when you select AA Color Enable with the default AA Color (black):

+   =

Now it looks bad on a white background but good on black like it should. This is a little more work but a necessary compromise to get the quality improvement that anti-aliasing has to offer.


Copyright © 1994-2013 Tom Carlino