Pixel Art by nature starts off very small because you are coloring individual pixels. In this tutorial we will show you how to resize your pixel art using Adobe Photoshop so that your pixel art images becomes larger.
If you’ve started to play with pixel art you might have noticed that it actually very small. So small that you have to zoom in to see it clearly. You might have made a pixel image and now you’re asking, how do I resize my pixel art image in Photoshop? The nice thing is Photoshop supports resizing directly in the program so you can start with a small pixel image and automatically increase the size so its bigger. We’ll cover the steps on how to resize your pixel art.
Automatic vs Nearest Neighbor
When dealing with images especially realistic photos, the default behavior is to use Automatic when resampling an image. This causes pixels to “blur” which is a technique to hide imperfections when an image is scaled up or down. However when dealing with pixel art, you are not allowed to blur pixels. All pixels are supposed to be sharp and clean. Nearest Neighbor is a type of resampling that preserves these sharp edges on pixels and prevents blurring. We will be covering how to resize your pixel art using the Nearest Neighbor resampling.
Getting Started
First let’s open up Photoshop. For this example we will use the pixel art dog we used in our previous tutorial, How to Make Pixel Art in Photoshop for Beginners. Of course, this tutorial works with any pixel art image, so if you have your own feel free to follow the steps provided on your own pixel art.
When you open a pixel art image, it will most likely be extremely small. This is because pixel art by nature is literally working on individual pixels. In our previous tutorial we were drawing a dog and as you can see, when you zoom out, it is super small.
Fortunately, Photoshop makes it very easy to scale up this image so that we can share it or even use it in a game project. To do this we need to open the Image Size menu. This can be found by clicking the Image menu drop down at the top of Photoshop and then
clicking the Image Size… option.
Once you click this a new menu popup will appear. As you can see it
has the width and height of our current pixel art image as well as an
option for resampling which is set to Automatic.
We want to change those settings. First let’s change it from Pixels to Percent. This will allow us to scale up our image in even increments so that our pixels don’t become stretched. Next let’s scale up our pixel art by 1000 on both the Height and Width. That will cause our image to change from 32×32 pixels in size to 320×320 pixels in size. And lastly let’s change our Resample preference from Automatic to Nearest Neighbor which is the setting we talked about earlier.
Once you have those properties changed press OK. You should see an image that is much larger than our original pixel art.
Basically what happened was that our image was evenly scaled up 1000%. That means that our image is now 320 pixels in height and width. To demonstrate how this affected our image, go ahead and turn on the Grid by going to View > Extras.
Once the grid is on, zoom in by pressing CTRL + on a Windows or CMD + on
a Mac. Notice how what used to be 1 pixel is now made up of 25 pixels
(5×5 pixels).
Once again feel free to experiment with the different sizes. Also if you prefer to work with a specific pixel size instead of a percentage go ahead and select that option instead when you are in the Image Size menu.
Wrap Up
Learning how to resize pixel art in Photoshop is invaluable especially when working on projects like 2D video games, where the sprites have to be a specific size. Thank you for reading.
