Antialiasing

One of the most important techniques in making graphics and text easy to read and pleasing to the eye on-screen is anti-aliasing. Anti-aliasing is a cheaty way of getting round the low 72dpi resolution of the computer monitor and making objects appear as smooth as if they'd just stepped out of a 1200dpi printer (nearly).

Take a look at these images. The letter a on the left is un-anti-aliased and looks coarse compared with the letter on the right.

If we zoom in we can see better what's happening. Look at how the un-anti-aliased example below left breaks up curves into steps and jagged outcrops. This is what gives the letter its coarse appearance. The example on the right is the same letter, same point size and everything, but with anti-aliasing turned on in Photoshop's text tool. Notice how the program has substituted shades of grey around the lines which would otherwise be broken across a pixel.

 

But anti-aliasing is more than just making something slightly fuzzy so that you can't see the jagged edges: it's a way of fooling the eye into seeing straight lines and smooth curves where there are none.

 

To see how anti-aliasing works, let's take a diagonal line drawn across a set of pixels. In the example left the pixels are marked by the grid: real pixels don't look like that of course, but the principle is the same.

 

---

 

Pixels around an un-anti-aliased line can only be part of the line or not part of it: so the computer draws the line as a jagged set of pixels roughly approximating the course of our original nice smooth line. (Trivia fact: anti-aliasing was invented at MIT's Media Lab. So glad they do do something useful there....)

 

 

When the computer anti-aliases the line it works out how much of each in-between pixel would be covered by the diagonal line and draws that pixel as an intermediate shade between background and foreground. In our simple-minded example here this is shades of grey. This close up the anti-aliasing is obvious and actually looks worse than the un-anti-aliased version, but try taking your glasses off, stepping a few yards back from the screen and screwing up your eyes a bit to emulate the effect of seeing the line on a VGA monitor covered in crud at its right size. Suddenly a nice, smooth line pops into view.

 

---

So how does one go about anti-aliasing an image? Just be grateful you don't have to do it by hand. Most screen design programs, including Photosop and Paintshop Pro include anti-alias options for things like text and line tools. The important thing is simply to remember to do it, and to do it at the appropriate time.

There are far too many graphics out on the Web that are perfectly well-designed, attractive and fitted to their purpose but end up looking amateurish because they haven't been anti-aliased. Equally, there are plenty of graphics that have turned to visual mush because they've been overworked with the anti-alias tool.

If attempting to anti-alias something manually, or semi-manually,