Learn better anti-aliasing for your pixel art

Remember those grade-school lessons where you first learned how to write by tracing over the different letters of the alphabet? What if learning the tricky skill of anti-aliasing were just as simple? And what if the lesson once again involved the alphabet?

This is a method I came up with to teach people how to make the edges and lines of their sprites as smooth and readable as possible. There’s no simpler way to learn it, and even better, you don’t need an expert to tell you if you’ve anti-aliased too much or too little — the perfect amount will be obvious even to the novice.

The technique is as easy as opening up Photoshop or GIMP and typing in some 9 or 10 point text. Your goal is to make all the letters as clear and readable as possible using only black, white and 50% gray pixels. The typeface should be something curvy but simple, like handwriting or other script fonts. If you can make small script letters legible with only 3 colors (that is, 1 anti-alias color), you can make almost anything legible in pixels. There are four difficulty levels and an extra credit, so try them out and see where you are:

BEGINNER

Beginner level is smoothing out nice, clear, legible text that is typed with the anti-alias option off, giving you sharp jagged edges to smooth out. Your mission is to use one gray color to smooth out the letters, and to use it as little as possible.

You can come up with your own workflow, but the process I always recommend for pixeling is to work as magnified as needed, with a “100% view” window on the side.

A thin, curvy typeface at 9 or 10 point size with anti-aliasing turned off is a good place to start. Don't overdo the smoothing — use as little gray and leave as much black as possible.

INTERMEDIATE

Once you’ve become comfortable with the process of smoothing out jagged edges, it’s time to give your brain a new challenge by approaching things from the opposite direction: the next level is nice, clear, legible text with anti-aliasing turned on. That means that now you have to undo the dozens of shades that Photoshop automatically uses and reduce the anti-aliasing to its bare minimum.

As a side benefit, the skills you pick up here could prevent you from ever pillow-shading again.

Cut down the automatic anti-aliasing from Photoshop to teach yourself how to keep a sprite's smoothing simple.

ADVANCED

Now that you have the idea down, it’s time to put your new skills to work. Find yourself a hard-to-read font face (still a script font and still somewhat thin lettering), and try the exercises again, with and without AA. This time the skill you’ll strengthen is the art of interpretation — adding what you see in the mess of text into the final results to help clear things up for the viewer.

Take a weird, barely legible font and see what you can do with it. This will teach you how to work with complicated or overly detailed drawings in your sprites.

MASTER

Ready to blow a few neurons out of your head? Take everything you’ve done so far, the legible and illegible text with and without AA, and while they’re still in text mode layers in Photoshop, rotate them about 30 degrees or so. If they aren’t rasterized, Photoshop will keep them as sharp as possible, and in many cases this will greatly increase the amount of finesse needed to smooth things out.

Your brain's used to writing left to right and to seeing text that way. Now let's start the process of smoothing things your brain's not used to seeing. This will teach you to confidently sharpen characters or objects you've never seen before.

LEGEND

If you want to go beyond this exercise and get yourself as ready as possible for the wilderness of the real world where anything can happen in a sprite, you need to step out of your last comfort zone of working with the familiar forms of the alphabet and apply these exercises to something your brain doesn’t instinctively recognize.

In this case, this could mean working with upside-down mirrored text, and if you want the ultimate test, Wingdings or Japanese/Chinese characters.

..alright, this one's just nuts.