Instant pixel art backgrounds with the Dan Fessler Method

In a previous tutorial I went through the steps I used to pixel a Capcom style background, which used Photoshop’s Index painting method and some .ACT files to manage color tables. Game artist Dan Fessler recently posted a method that dithers and reduces colors on regular artwork which drastically simplifies things. Seriously, if you have Photoshop, you have to try this. Read that article and I’ll walk you through how I intend to use it.

Photoshop becomes the best pixel art program available

Long story short, all you need is four specific layers that go on top of your art and you can turn Photoshop art into a pretty convincing game background. There is a catch though, but I’ll get to that. First, let’s see how I could have done my original background using this method.

Here’s the most complex element, which would have taken forever to pixel and dither by hand. It should make a good demonstration. I’ll shrink this down to fit inside a good Capcom-ish 384 x 224 canvas. So that’s my ‘artwork’ layer where everything starts.

Color Reduction

In order to get nice pixel art from full artwork, you have to 1) reduce the number of colors so there’s no gradation, and optionally, 2) you can add in dithering to simulate the gradation that you remove. This next part reduces the colors: Add in a ‘Posterize’ layer adjustment on top of the art layer. Bring its levels down to maybe 6 or 7. You’ve now cut down the colors to something more appropriate for pixel art.

But wow the colors Photoshop chose are pretty wacky. It’d be better if we could choose the colors ourselves. Let’s tell Photoshop ‘you know what, don’t worry about choosing colors for me, just make those Posterized colors grayscale for now’ by adding in a ‘Black And White’ adjustment layer under the Posterize layer.

Ah, that did it — that’s pretty much pixel art already, just without color or dithering. But notice something else: the Black And White layer has sliders to control what color range gets more black or more white. By adjusting those sliders, you can change how your artwork converts without changing your actual art layer. Your drawing-to-pixel conversion is becoming dynamic.

By adjusting the sliders, you can reshade and redistribute your colors without messing up the actual art.

Now to add some color. I could of course just add in the colors myself with a Paint Bucket set to non-contiguous, but Dan’s method lets you get fancy: on top of the other layers, add in a Gradient Map adjustment layer. Yeah, I never heard of it before either, but it’s easy to pick up. You get a gradient that you can click on to adjust, and from there you add in the colors you want to use. I had six metallic colors that went from dark to light, so I added in six gradient stops and put in the hex code for each of them. And with that, instant color assignment — dark colors mapped to dark areas, light colors to light areas.

But guess what, those sliders are dynamic also. If you have colors that aren’t quite mapping right, you can just go in and adjust the stops until the colors correspond to light and dark ranges the way you want.

Dithering made easy

Okay, we’ve done the first part of the conversion by reducing the colors and arranging them where we want. But that banding sure is ugly. It’d be nice if Photoshop could auto-dither a gradation for me with a nice 50% checkerboard dither (as opposed to those ugly noise dithers that Index painting usually gives you) without having to convert to Index Mode. Well guess what. Because of the Posterize layer, there’s now a way to do that.

The trick is that you have to fill an entire layer with a dither pattern. That’s not hard to do with the Paint Bucket’s “Pattern” mode: Select the Paint Bucket, and where you see a dropdown for either Foreground or Pattern, pick Pattern. Then next to that, hit the Pattern dropdown and select a tile pattern that gives you a 50% dither.

Don’t have a dither pattern in your list? Make a new document, 2 pixels by 2 pixels, transparent background. Put a black pixel at the top left and one at the bottom right. Select All and go to Edit > Define Pattern, and give it a name. It’s now in your list for future use.

Now add a new layer right above your art layer and below the other adjustment layers and fill it with the dither pattern. Set the layer style to either Overlay or Soft Light and give it an Opacity of maybe 50% for now. You might also want to make it a clipping mask so the dither doesn’t show up on the background

Note that I set this layer to a clipping mask so it doesn’t dither the transparent background.

Well now look at that. Automated beautiful dithering without switching to Index Mode. Boy and it isn’t even my birthday. Oh and if you’re not passed out from excitement yet, I should also add that the Opacity level makes the dithering dynamic. You can adjust it on the fly. Sufficed to say this is my favorite part of the whole method.

Your favorite part of this whole method on the other hand may likely be what you can do afterward. Watch me smear this pic on the art layer:

Did those colors and dithering just move? Yes they did. I can actually continue drawing on my artwork layer and the dithering and colors will update along with me. I don’t have to redo any of those steps. I can put anything on this art layer and those four simple layers above it will compensate to match and keep it looking just as nice and pixel art-y. And with the dynamic elements of the Black And White, Gradient Map and Dithering opacity, I can spend hours adjusting the results to perfection without accidentally making changes to the art. Seriously Dan, this technique is [was] worth money.

Caveats

But now that I’ve got you all excited that they day has arrived where machines can finally make our art for us, we come to the catch. Actually there’s two. First, the Posterize layer can’t do transparency. If you smear art into a transparent area, that partially transparent smear won’t get color-reduced. The fix is simply to work on a solid color background or else make sure your art has 100% sharp non transparent edges.

But the second issue is that a Gradient Map layer only lets you do one set of colors at a time. That means if I wanted to do my whole background, I’d need those four layers for the metallic blues, four more for the stone whites, four more for the brown rocks, etc. You could imagine that’s a pretty big catch for layer organization and workflow.

Off the top of my head, I can think up some alternatives:

1) You can just plain leave out the Gradient Map altogether and work in grayscale while leaving the coloring for later. It’s a great way to get your contrast set up, and you can just Pencil Tool some base colors on a top layer set to Multiply when you’re done (correcting your palette afterward).

2) As above, leave out the Gradient Map and when you’re done drawing/painting, copy the art layer and put the duplicate on top of the layers and set its Layer Style to Color. Save or backup the pic, then convert it to Index Mode with the appropriate number of colors. Fix the colors as needed. (I’d probably recommend this method)

3) Let’s face it, this is the easiest way you’ll ever find to make a Gameboy screen.

As always, experiment heavily. Some final notes:

1) A nice thing about this is that you can set up these layers once, save it to a Photoshop template, and then use it over and over afterwards without having to redo them. Just add new art.

2) I notice that Posterize doesn’t play well with photographs. I was just now trying to make a Hall of Justice stage from some TV screenshots, but you can tell there’s something ‘off’ when you get blurry screenshots or overly detailed photographs. So far, it seems your best results will come from solid colors and clean gradients.

3) Perfect for logos:

4) And finally, remember to keep the canvas small for the greatest impact. It is still pixel art after all, and everybody’s on HD screens these days so it helps to display a small canvas at 2x size.