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

step 1

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

Step 2

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

Step 3

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

Step 4

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.

Step 4

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

Step 5We’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:


7 Responses

  • Ado

    This is really helpful but I have a question.
    so basically I start with a large pixeled project and then I shrink it. I am asking this question because in another tutorial here in the website it said that I should start with a small one like 16×16.

    • Kiwi

      If the sprite you want to make is smaller than 32×32 pixels, then it’s best to just pixel at that size because shrinking artwork won’t save you as much time. If your sprite is for a standard beatemup or fighter on the other hand, that’s big enough that using larger art will help you save time making the pixels and give you better artistic results

  • dtek

    Great Site!
    If I can add anything, I paint with a brush of 4 pixels in size when working on the 400% version
    from Vancouver, Canada
    peace!

  • Dante

    Thanks for your reply. I’ve tried to merge the layers, but I’m not having any success at all. This is rather frustrating. I’m starting to wonder if GIMP isn’t glitched or something, or that my settings aren’t correct to do this. What are the default options for the “Merge Visible Layers” menu? I think I may have fooled around with this prior to having this problem. Though I was able to merge the two beginning layers using this tutorial, so I’m really not sure why it’s not working now.

  • Dante

    I’ve been following this tutorial, only doing it using GIMP instead of Photoshop since I don’t have access to the former software. I’ve been able to follow it for the most part, but there are a couple parts leave out information that would be helpful to other novices like myself. The first confusion for me came during the shading section. Is this layer part only for the first color of shading only until you resize your picture? The second part of my confusion came during the part after you’ve completed all the layers in step 3. How do I get all these layers to merge into one whole picture before resizing the image in the next section of your tutorial? If you could kindly clear up these two questions I’d really appreciate it. You have a great website here and I’d like to use it to complete the test sprite that I’m working onto see the end results. If I can get this method to work it would be a great help to my game creation process in terms of speeding up the production process. Thanks!

    • Kiwi

      The shading layers trick is really just to help speed up the process of making the shapes of the shadows. Don’t worry about layers once you’ve shrunk the sprite down to its final size. It’s safe to merge them all into a single layer once you’re happy with how the shading looks. You should have the sprite looking mostly right before you shrink it, and by then, the layers (which help you build the shading) have already served their purpose. Any minor corrections you might need to do can just as quickly be done pixel-by-pixel at that size.

      For merging the layers in GIMP, go to Image > Merge Visible Layers, and go with the default options

      Let me know if this clears things up

Back