Anti-aliasing For Graphics and what it does

[Avalon 1]

This tutorial is aimed at those fairly new to graphics and are wondering how to get a smooth looking graphic with a transparent background. The answer is anti-aliasing! This is not restricted to graphics with transparent backgrounds, anti-aliasing will help to give all your graphics a smooth look. Also using the most number of colors available for the file format you are using, (256 colors for GIF) will improve the look of your graphics.

 

Anti-alising is an option in most graphics programs and some have the additional option of varying the strength of the effect for different situations. About the only time you shouldn't use anti-aliasing is for very small font graphics (pixel fonts), this cause the text to look blurry.

 

To see the difference anti-aliasing makes, look at the emaples below.

 

This graphic uses 2 colors, black for the text and black for the background and has no anti-aliasing. This has the typical jagged edge caused when using this approach.

 

This image is the same as the one above but with anti-aliasing and the maximum number of colors available used. The image looks a little smoother but has a red fringe around it, still not exactly what we want. The next example shows how we can remove the red fringe.

 

In this final example the image is the same as the one above with anti-aliasing used, but this time the background color has been changed so it closely matches the background of the forum pages. This is result we are looking for.

 

Hopefully you will find this tutorial useful.