Anti-aliasing Tutorial I

This tutorial will help to explain what anti-aliasing is, as well as how to do it yourself.

Anti-aliasing is a technique used to smooth jagged lines, which appear rough due to the screen not having a high enough resolution to display curves properly. This technique is very important in pixel art for making outlines smoother, and can be used not just for pixel art, but for other things you create, such as logos.

Here is an example of an aliased image, or an image with jagged lines that hasn't had anti-aliasing applied yet (note the jagged appearance of the white circle):






Feel free to download these images and follow along. You can clearly see the white circle is not as smooth as it could be due to the curve. To fix this problem, we note the colors that have jagged lines. On the left it's white/blue, and on the right it's white/red. After noting the two colors, we then choose a value that's between the two colors (in this case, brightness, or how white/black a color is, since white is one of the colors).

Select the red side of the circle with the eyedropper tool in MS paint and click "edit colors". A screen will appear that shoes the number values of the color you selected.

On the right you'll see a sliding bar with white at the top and black at the bottom, and your color in the middle. This is the luminosity bar, and it indicates how bright the selected color is. Since white is the other value, and it is at the top of the bar, we want a color that's about halfway between red and white. We can drag the slider up to about halfway between red and white (if we were aliasing between non-white or non-black colors we would use a different method).

Once you've selected the new color (which should look pinkish), place pixels around the circle's edge inside the corners. Zoom out and make sure it looks smooth--add and remove pixels as necessary. Once it's smooth-looking, use the same method we described above to do the other side. Select the blue side with the eyedropper, click "Edit Colors", and drag the slider up about halfway, then place the blue pixels on the left side. Here is the result:






Looks much better, doesn't it? But this is just a basic tutorial. Ideally you'll want to use more than one color to make it look even smoother. But how do you know what shades to use, or where to put them? In the next tutorial I'll cover this, as well as anti-aliasing between different non-white/non-black colors, and finally go over more advanced techniques to make your anti-aliasing more accurate. Until then, take care!

-kethsong