Web Site Building · Layout and Design · Anti-Aliasing

What this is about:

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.

Removing the Jaggies

Solving Web Design Problems 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.

Internet Brothers Logo Without Anti-Aliasing           Internet Brothers Logo With Anti-Aliasing

See what we mean? Now let's examine why. Computer monitors are great at rendering vertical and horizontal straight lines, but when it comes to diagonals or curves they are limited by the square, grid nature of pixels. 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.

Zoomed Image Without Anti-Aliasing           Zoomed Image With Anti-Aliasing

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, 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.

Internet Brothers Logo