Anti-aliasing plugin for pixel art backgrounds (Photoshop CS4 and CS5)

[Trapezoid]

Photoshop's tools aren't always ideal for pixel-level painting. I'll show you what I mean.


This is Photoshop's brush tool at the smallest setting, with maximum hardness. It's still too blurry! I notice a lot of games, even ones with really good graphics, have backgrounds that look too blurry-- because they were painted with tools that aren't meant to be displayed at 3x. Similarly, the default anti-aliasing settings on the text tool do wonky things with subpixels. For low-res art, it's ugly.


On the flip side, Photoshop's pencil tool has a hard, binary edge. This is the tool you should generally be using for pixel art, but the lines it makes can be too harsh to the eye. Same with text.
You can try to fix this with Photoshop's blur filters, but they'll just make it look hazy. A pixel artist will tell you that you need to get in there and selectively anti-alias those lines manually. Tedious work.

But hey! I found a tool that offers a great in-between option: MLAA.


This is what it looks like when you take the pencil tool's harsh lines and run them through the MLAA filter.
In my opinion, this is the easiest on the eye. Very readable, not too blurry nor too crisp and harsh.

To get it:
First, you'll have to install Pixel Bender for Photoshop CS4 or CS5 (later versions have dropped support, unfortunately.)
http://www.adobe.com/devnet/pixelbender.html

Then, get the MLAA plugin and install the PBG file (or copy it to the "Pixel Bender Files" in your Photoshop program folder.)
https://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=2230024

Pixel Bender will show up in your Filters menu. Click it and Select MLAA from the dropdown list.


You'll probably be good with Threshold at 0.01, Edge Detection Algorithm at 0, and Max Edge Length at 1 or 2 (higher can be too blurry, but is sometimes useful for certain shapes.*)



You might think this is really subtle or nitpicky, but when the player's staring at your backgrounds for extended periods, you really need to get the sharpness right.


(* One minor problem is that it can make unwanted effects in the corners of the image, so watch out for that--maybe work with a canvas slightly bigger than you need.)

[Snarky]

Sweet! I'll definitely be playing around with this. Thanks Trapezoid!

[Monsieur OUXX]

I'm also grateful for this

[Trapezoid]

Another trick I found!
Here's a simple photoshop Action: http://www.eviltrailmix.com/PosterizeAlpha.zip I recommend assigning it to a function key or something.

I actually prefer this to the faux-antialiasing plugin, because you don't have to flatten layers. It takes a layer like this:



And posterizes the alpha channel itself, giving you a harder, simpler edge like this:



This works well with brush strokes, text, or anything that looks a little too blurry.

[Monsieur OUXX]

You mean the white parts are the background, and the black parts are on a separate layer? If yes, then with some fiddling that would be the ultimate tool I've been looking for to remove all rogue pixels that are not fully opaque or fully transparent.

[Trapezoid]

Yup. It uses photoshop's Layer Mask From Transparency feature and posterizes the resultant mask. If you put posterize's levels all the way down it should do exactly what you want. (My example's at 4 levels or so.)

[Monsieur OUXX]

Yup. It uses photoshop's Layer Mask From Transparency feature and posterizes the resultant mask. If you put posterize's levels all the way down it should do exactly what you want. (My example's at 4 levels or so.)

Super cool. Thanks!!!

[Trapezoid]

Since I guess this is my general low-color pixel art tips thread, here's another trick I just found. If you're one of the two people who want to use 8-bit color depth in AGS, you'll notice its color channels are actually 6-bit (RG&B go 0-63 instead of 0-255.) So even though you're importing 256-color images, their colors will be banded and inexact in AGS. While there's no way to do full 0-255 color depth in AGS, you can at least get a live preview of this limitation while working in photoshop:
Add a Posterize adjustment layer to the top of your document and keep it there. Set it to 65. That's it! Now you can tell exactly what your color choices will look like once imported, and adjust them accordingly to avoid ugly stuff.

Edit: Posterize should be 65, not 64, apparently!

[SilverSpook]

Can't believe I've overlooked this alias-killing piece of genius!

Thanks for posting, I'll be sure to use it in the future!