# Tutorial - Configuring Photoshop for 2D Pixel Art

DevFeed: [Tutorial - Configuring Photoshop for 2D Pixel Art](<https://devfeed.tech/articles/tutorial-configuring-photoshop-for-2d-pixel-art-24964.md>)

Original publisher: [Read original article](<https://codeahoy.com/2016/12/11/photoshop-pixel-art/>)

Author: umer

Published: 2016-12-11T00:00:00Z

Content type: tutorial

Language: en

Sources: [Code Ahoy - Articles](<https://devfeed.tech/sources/code-ahoy-articles.md>)

Topics: [Tutorial](<https://devfeed.tech/topics/tutorial.md>), [Image](<https://devfeed.tech/topics/image.md>), [Unity](<https://devfeed.tech/topics/unity.md>), [Mobile](<https://devfeed.tech/topics/mobile.md>)

Tags: [image](<https://devfeed.tech/tags/image.md>), [photoshop](<https://devfeed.tech/tags/photoshop.md>), [pixel](<https://devfeed.tech/tags/pixel.md>), [pixel-art](<https://devfeed.tech/tags/pixel-art.md>), [tutorial](<https://devfeed.tech/tags/tutorial.md>), [unity](<https://devfeed.tech/tags/unity.md>)

## AI overview

A step-by-step tutorial for configuring Photoshop to create 2D pixel art, covering small image dimensions, nearest-neighbor interpolation for crisp scaling, and drawing-tool settings.

## Source excerpt

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. After you have created the image, you'll be able to see it barely. So zoom in so you are able to see it. 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) [Image placeholder: the original 21x20 pixel sprite of the old man from a classic 8-bit adventure game.] Here he is scaled up 4x with Bicubic interpolation: [Image placeholder: the same sprite scaled up 4x with Bicubic interpolation, leaving the edges soft and blurry.] Scale here 4x using Nearest Neighbor: [Image placeholder: the same sprite scaled up 4x with Nearest Neighbor, keeping every pixel hard-edged and crisp.] See the difference? Here's how to configure Photoshop to use the 'Nearest Neighbor' image interpolation algorithm. Note