Anti-Aliasing aka Removing the Jaggies

There are very few web design problems that can't be solved through a suitable application of high explosives. Jagged edges on graphic text or circular art are a prime example. Smoothing those borders or edges can make a big difference in the professional quality of your presentations. However, if you only have access to PSP rather than TNT, you can still get the job done. Nearly all contemporary graphics editors have built-in gradient, or anti-aliasing tools. Let's take a look at what we mean. Here's an example of two Internet Brothers logo graphics. The one on the left has no anti-aliasing, and the one on the right does. Unless you left your bifocals in the car, the one on the right should look better to you.

See what we mean? Now let's examine why. Aliasing is what happens to pixels (individual dots of color that make up the image) that lie on the border between two colors. The computer has to decide which color to render. If no anti-aliasing is done, then the computer just picks one of the two colors, based on which one dominates the border or edge. Using anti-aliasing, the computer invents a new color, one that isn't exactly the color on either side of the border, but instead is a blend of the two. This makes the borders look much sharper to the human eye, even though they're actually fuzzier. Let's zoom in on a cutout section.

Intuitively, it seems like the right hand logo image should be blurrier, but don't byte off more than you can view. On the curved sides of the left logo, you can see the "jaggies". Some of those pixels are only half, or three-quarters, or one-third inside the mathematical boundary of the curves, and the rest are outside. Should they be black, or white? The computer uses a rule which approximates the shape.

To get "rounder" borders, we use anti-aliasing when drawing the logo. In the right image, see how the black curves fade through varying shades of grey until finally getting to white? There's the gradient, and anti-aliasing is why. When using your favorite graphics program, whether it be from Adobe, Microsoft, Corel, Jasc, Macromedia, or any of the wonderful shareware products, make it a point to look for the anti-aliasing tool. It's a lot safer than nitroglycerin.

To print a copy of an Internet Brothers tip or article, simply take a photograph of your computer screen, develop the film and have the photo enlarged to the font size of your choice.

The Internet Brothers have implemented hierarchical menus for navigation. Easier done than said.

The hierarchical menus were created using Peter Belesis' © Dynomat DHTML scripting tool from Webreference. Give them a visit, you'll like what you learn.

Site Map

Needing someone is like needing a parachute. If he isn't there the first time you need him, chances are you won't be needing him again.

Was this site useful to you?