Resizing your sprites with Nearest Neighbor

Some people (like me) prefer to make sprites from shrunken artwork, but others prefer to sprite their characters at 100% size, building their figures pixel by pixel. That takes obscene levels of patience, but worse, it always sounds to me like a high-risk way to wind up with a stiff, lifeless end result, unless you’ve been working that way for a long time.

Because different people prefer these two different approaches, I’d like to offer a middle ground between working the pixel by pixel method and the resized artwork method, so that both sides can get a taste of good old-fashioned pixel pushing mixed in with the benefits of having life-filled linework to build from.

STEP 1: The Drawing

Draw your lines as normal, but then go nuts with heavy inking.

You’ve seen this before on other tutorials here, but there’s going to be a big difference in this case: instead of aiming for the thinnest lines possible, you want the thickest. So set that Photoshop / Paint.Net / GIMP brush onto the largest setting you can, while still maintaining a descriptive detailed line, because when this gets shrunk, we’re going to lose a lot of the linework.

As usual, use only the lines you need the most, nothing for superfluous detail. So in this case, draw the outline of her hands but not the individual fingers. Her hand outline is an important anchorpoint, whereas her fingers can be added in the pixel stage without costing much time or accuracy. Same with the hair: draw the hairline along her forehead, but don’t worry about the strands flowing off her head.

STEP 2: Threshold Tool

Merge your black lines onto a white background, then use Threshold to turn your artwork into pure black and white pixels, then close any open lines in your art with the Pencil Tool.

Now to commit your lines to pure black pixels. Merge your lines’ layer onto a white background layer (if everything isn’t already on one layer), then go to IMAGE > ADJUSTMENTS > THRESHOLD, and adjust the settings until you have a decent translation of your lines.

From here on out, you’ll only be using the Pencil tool, so that you have zero antialiasing. With the Pencil, make sure before moving on to the next step that all of your lines are closed off.

STEP 3: Coloring and Shading

Coloring your artwork on different layers can help your workflow

With the lineart closed off, you can add colors easily with a few Photoshop tricks. Note that these following steps aren’t the required way of doing it, they’re just helpful for the newbies. I imagine a lot of you know how to color lineart in Photoshop:

Although the Fill Tool is a perfectly useful option, it’s faster and it helps your workflow to go with the Magic Wand. First, set it to Contiguous with no AntiAliasing. Create a new layer on top of the one layer you now have. Go back to the first layer (the one with the artwork) and select the various white areas inside the sprite, and then while each area is still selected, select the new top layer and fill in each one’s base color there. This is now your ‘base colors’ layer.

Make a new layer on top of that one. Turn the Magic Wand’s Contiguous setting off, then go back to the base colors layer and select one of the colors. Let’s say in this case all of the skin color. With all of that color selected, go to the new layer and use the Pencil tool to draw in your shading. This way, you can be sure that your shading will stay inside the lines. Continue with the rest of the colors.

Now make one more layer. Go to the artwork layer and select the black outline, with the Magic Wand’s Contiguous setting still unchecked so that all of the black is selected. With the lines selected, go to that last layer and use the Pencil to color in the lines as appropriate.

STEP 4: Resizing

We’re going to shrink this artwork down to sprite size using Nearest Neighbor interpolation. You can do this by the usual IMAGE > RESIZE, but ideally, you’d want to do it by hand, with some reference sprites to compare not just size but proportion. Go to EDIT > PREFERENCES > GENERAL, and set the Image Interpolation option to Nearest Neighbor. Now, everything you resize by hand will have that setting automatically (you’ll probably want to set that back to Bilinear after you’re done so you can work with other art in Photoshop normally).

Select all of your layers and go into Free Transform mode (EDIT > FREE TRANSFORM or CONTROL + T). Shrink down the art to the right size, but don’t hit Enter just yet, because you’re about to see one of the quirks of Nearest Neighbor: hit the left or right arrow key when it’s at the size you want. It’s already a jumbled mess of pixels now that it’s shrunk down, but as you move it a few pixels to one side or another, they re-jumble themselves as it recalculates. This is actually your one opportunity to go through and find the least-ugly arrangement of pixels that you can before committing to the resize. Once you move them up, down, and around a few times and find the best pixel arrangement, hit Enter.

Well, yuck. That’s quite a mess, isn’t it. But you see now why it was important to have the colors/shading set in place. The outlines are almost decimated, and if that were the only part that got shrunk, this process would be near-useless. But having the colors fill in the inside areas makes it so that far more of the art is preserved. Just enough so, in fact, that those of you with inhuman levels of patience can actually consider this a viable method of mixing your regular pixeling with full-sized drawing.

STEP 5: Filling in Details

We’ve reached the point where it’s time to let your inner pixel artist take over. This is the actual pixeling stage, and where this whole tutorial was designed to get you: a solid, lively starting base figure that you can start pixeling from and get better results with.

Yes, it looks like a jagged mess compared to other methods, but that’s part of the point. These are all suggested anchorpoints that you can use or ignore — people who build their sprites pixel by pixel can still enjoy their usual amount of creative freedom because since these edges and shadows are so rough, you’re not as tempted to stay within their confines, and you can interpret their boundaries however you’d like. And for you lazy bums who only pixel with shortcuts (again, like me), this technique can reintroduce your brain to the exercise it got back in the good old days when you had to make a lot more choices on a sprite.

What’s that, you forgot how to even start? Here’re some suggestions: Once you’ve shrunk it to the final size, clean up the outlines first. That can be an enormous mental help. Next, quickly go over the shadow areas and make sure they’re roughly where you want them to be, then start anti-aliasing. Do one color area first, like the skin, and just focus on getting that part cleaned up. Add the minor details like fingers and hair strands, all while, as usual, working with a 100% thumbnail view off to the side to monitor how well your up-close changes actually work. Got stuck and can’t figure out how to make a part look right? Go ahead and cheat a little: Resize the sprite back up to 400% and add in more details with your tablet, then shrink back down 25%.

Update: pixel artist SinhRa has a video up on YouTube showing this principle at work: