What is Anti-Aliasing?
Author: Patricia Lynn
In software such as Adobe Photoshop, you are given the option to check the "anti-alias" box when performing certain functions. Though it sounds complicated, anti-aliasing is a very simple concept to understand! You will be an anti-alias expert in just a few moments!
Anti-Aliasing Turned Off
The circle shown at the far left was created in Adobe Photoshop. I created a new image 100px by 100px, with a resolution of 72. Then I clicked the Elliptical Marquee Tool (beneath the Rectangular Marquee Tool), removed the checkmark in the anti-aliasing box, and held the Shift key to draw a perfect circle. If you want to turn-off anti-aliasing, you must uncheck the box before you begin to draw.
Then I filled the circle with red by clicking Edit / Fill, and chose the Foreground Color which I'd already preset. To the right of the circle is a magnification of part of its right edge. Can you see the jagged edge? With anti-aliasing turned off, non-vertical and non-horizontal edges will appear jagged even to the naked eye.
Anti-Aliasing Turned On (No Feathering)
Adobe Photoshop has a solution for this: anti-aliasing! The image to the left shows the result of the same process above repeated, but before I began to draw the circle, I checked the anti-aliasing box. You must check the anti-alias box before you begin to draw. Notice how much better the circle looks on your monitor, and that the jagged edge has disappeared to a large degree.
Anti-aliasing adds a couple of rows of pixels that transition between the color in the edge pixels and the background color - which in our example is white. It doesn't matter what the two colors are. Adobe Photoshop does its best to insert pixels of color that will transition well.
Anti-Aliasing Turned On (With Feathering)
Next to the anti-alias check box is a box titled Feather. In the example above, I took the default of 0 px. If you want the edge to have even more rows of transitional pixels, you can enter a number of pixels in the Feather box. The image to the left shows the same scenario repeated with anti-aliasing turned on and a Feather value of 2 px. The edge does look a bit fuzzy, but this effect may be desirable in some situations.
Since the resolution of computer monitors is not very dense - often 96 or 72 pixels per square inch - creating an image with the anti-aliasing option turned on can make the image look better on the monitor when the image is placed on a webpage.
As a side note: if you want the background of your image to blend seamlessly with a webpage's background color, make sure you optimize the file (File / Save for Web) using GIF compression. Compressing the image as a GIF file will keep the colors pure. JPG compression introduces "noise" into the image and the white background in our example would not stay pure white. Please see our tutorial Optimizing Web Graphics for more information. Also review our tutorial All About JPG and GIF for excellent background information on these two digital graphics formats.
