Tutorial - Configuring Photoshop for 2D Pixel Art

Umer Mansoor Umer Mansoor Follow Dec 11, 2016 · 3 mins read

I’m a huge fan of retro video games and pixel art. Over the Christmas break, I tried (after a long hiatus) to create some pixel art for a retro-style 2D mobile game I was building in Unity for fun. I had to struggle a little in setting up Photoshop to create 2D sprites and the background, so here’s a quick step-by-step tutorial on how to configure Photoshop to create pixel art.

Step 1: Create a Tiny Image

Pixel art is done in very low resolutions. What this means is that you’ll start by creating a very small image, one that you can barely see without zooming in. I can’t give you a rule of thumb, but I generally use 20x20 pixels for sprites (sometimes 40x40 pixels if I want to put in more details) and about 150x80 pixels for backgrounds.

So go ahead and create a new image in Photoshop.

photoshop-pixel-art

After you have created the image, you’ll be able to see it barely. So zoom in so you are able to see it.

photoshop-pixel-art

Step 2: Setup Image Interpolation to Nearest Neighbors

When your pixel art is resized or scaled, you’ll want the edges or corners to look hard and jagged instead of smooth and blurred. Be default, Photoshop uses Bicubic interpolation (or Bilinear) that produces a blurred effect when images are enlarged. While Bicubic interpolation works great for normal images, pixel art scaled using Bicubic look terrible and blurry as hell. As as example (source):

Here’s the old man from The Legend of Zelda who gives you the sword. (You may want to squint to see it)

old-man-from-zelda-original

Here he is scaled up 4x with Bicubic interpolation:

old-man-from-zelda-nn

Scale here 4x using Nearest Neighbor:

old-man-from-zelda-nn

See the difference? Here’s how to configure Photoshop to use the ‘Nearest Neighbor’ image interpolation algorithm.

photoshop-pixel-art

Note: If you are exporting the image (‘Save for Web’ option) and resizing it, make sure that ‘Nearest neighbor’ is selected under ‘Quality’ or ‘Resample’.

Step 3: Set up the Tools

You’ll need to setup your drawing tools and get the desired pixelated effects. For pencil and eraser tools, here are the settings I used:

  • size to 1 pixel (px).
  • hardness to 100%.
  • opacity to 100%.
  • for the eraser tool, mode was set to ‘Pencil’.

photoshop-pixel-art

The only other tool I used was the paint bucket which didn’t require any customization.

Step 4: Show the Grid (optional)

Grid is helpful in positioning and aligning things precisely. I find grid very useful when creating sprites. Grid can be enabled from the ‘View’ menu.

photoshop-pixel-art

Next, we’ll need to adjust the grid so it can display each pixel individually. Open “Guides, Grids and Slices” settings from the Preferences menu and update the grid settings.

photoshop-pixel-art

photoshop-pixel-art

That’s all there is. I hope you found this tutorial helpful and that you go on to create magnificent pixel art :) To quote Bob Ross:

People might look at you a bit funny, but it’s okay. Artists are allowed to be a bit different.



Umer Mansoor
Written by Umer Mansoor Follow
Hi, I am Umer. I live in the San Francisco Bay Area and it is where I work. Since 2011, I have worked at startups, mobile gaming and internet companies. If you have any questions, feel free to message me.

Comments (4)


Adriana

I know the post is old, but it's still useful and one the first results on google, so it's worth noting that you guys put the wrong image after "See the difference? Here’s how to configure Photoshop to use the ‘Nearest Neighbor’ image interpolation algorithm."


Umer Mansoor

Hey great catch. It is fixed!


Rajib

umer mansoor thank you for your nice tutorial.He explain about configuring photoshop for 2D pixel art.He divided her lecture 4 step. if you want to configuring photoshop for 2D pixel art,you must go on in this 4 step.


Karl

Great. But still, when i am importing other pixelart images, it's blurred. Even with the Nearest Neighbor configured.


Speak Your Mind

Join Newsletter
Enter your email address to receive a very occasional newsletter. I'll never spam or sell your email.