Turn your Illustrations into 8-Bit Pixel Art with Photoshop

There’s no denying that those classic pixel art games had their own special charm. Even new HD side-scrollers, despite all their perfect sharpness, can’t make up that artistic quality that has been lost as technology has advanced. Perhaps you’d like to recreate that classic 8-bit pixel art effect with your own illustrations. In this quick tutorial I’ll show you how. It’s very easy to do.

What you need:

1. A picture

2. Adobe Photoshop

Step 1: Open up your image. The image I have here is a background for a digital painting from my comic strip, The Adventures of Chartwell. While the image below is only 600 pixels wide, the image I have open in Photoshop is 4800 pixels x 4800 pixels.

8-bit-pixel art

Step 2: In Photoshop, go to Image->Image Size…

8-bit-pixel art

Step 3:  In the Image Size Panel, first change the resolution to 72 pixels per inch. Then change the width. I chose 125 pixels for my image since that gave the best effect. You may need to tweak this number to get the best results from your image, depending on the original size and dimensions. Finally, and most importantly, set the Resample Image option to “Nearest Neighnbor (Preserve hard edges).” Press Okay when you’re done.

image-size2

Now the image looks really pixelated, but it’s also very small. Too small, in fact, for us to appreciate the pixelated look that we would have seen in the early 1990s. So we need to blow up the image, while maintaining the pixelation.

8-bit-pixel art

Step 4: Go back to Image -> Image Size. Change the width back to its original pixel count. In my case, that is 4800 pixels. Again, make sure the resample option is set to (Nearest Neighbor.) Here’s what it looks like.

8-bit-pixel art

Cool, huh? It looks right out of a classic adventure game like Indiana Jones and the Fate of Atlantis.

In fact…

8-bit-pixel art

There you have it! 8-bit Indy is back in action. I hope you found this tutorial useful. Thanks for taking the time to read it. Till next time!

-Tim

8 thoughts on “Turn your Illustrations into 8-Bit Pixel Art with Photoshop”

  1. Thank you, Tim! This tutorial will really help me in the future with game design! I was trying a whole bunch of things myself to figure out a way to do this, glad I finally decided to look it up. Thanks again 🙂

  2. Thank you, this is exactly what I’ve been looking to accomplish, and I hadn’t any idea it was so simple. This is perfect.

    1. Tim van de Vall

      For pixel art sprites , create an artboard in Photoshop with the proper dimensions, say 64×64 pixels, or 16×16 pixels. Then draw the characters pixel by pixel. I’m not sure what dimensions were used in those old games. This tutorial just shows you how to get that classic look.

Leave a Comment

Your email address will not be published. Required fields are marked *