CodeLair scripts and tutorials; click to return to home page

Anti-Aliasing

A short but sweet guide to making your images smoother and cleaner.
Last updated: March 19, 2007

Look at these two images. What is the difference between them? That's right, the top one is smooth, and the bottom one is more jagged and rough.

This is because the top image is anti-aliased. Anti-aliasing smoothes out edges and makes images look neater. Here is an enlarged version of the above:

See how the edges fades into the background color? That's what make ant-aliasing such a great tool. Suppose you are creating a new site design, and for the header, you use this shape:

It doesn't look that good on it's own, does it? Well, if you anti-alias the line tool, then you get a much better result:

The lines look less jagged.

There are numerous ways you can use anti-aliasing to your advantage: using line tools, shape tools, even selection tools. Some programs also have an anti-alias option on the fill tool, which is very handy! (If your graphics program does not have the latter, you can use anti-alias on the selection tool, then fill that area with a colour and it will become anti-aliased.)