When you make pixel art inside of Photoshop you’re going to want to export it out so you can use it in your projects and games. However when exporting your pixel images from photo editing software like Adobe Photoshop, your pixel art might save out blurred or fuzzy when you save it to your computer. In this tutorial we will show you how to export your pixel art from Adobe Photoshop so that your pixel art images save clear and sharp.
If you’ve made any pixel art in Photoshop you’re probably wondering how you can use it inside of your projects. You might have made a pixel image and now you’re asking, how do I export my pixel art image from Photoshop? The nice thing is Photoshop works extremely well when exporting pixel art images so that they come out nice and sharp. We’ll cover the steps on how to export your pixel art.
Automatic vs Nearest Neighbor Resampling
We mentioned this concept in our our Resizing tutorial. Basically whenever you’re dealing with images especially photos, the default behavior in Photoshop is to use Automatic when resampling an image. What this means is that Photoshop causes pixels to “blur” which is a technique to hide imperfections when an image is scaled up or
down. However when you are making pixel art, you don’t want to blur pixels, you want them to be sharp and crisp. Nearest Neighbor is a type of resampling that preserves these sharp edges on pixels and prevents blurring whether you scale the image up or down. We will be showing you how to save your pixel art using the Nearest Neighbor resampling.
How to Export a Pixel Art Image
First let’s open up the Adobe Photoshop program. For this tutorial we will use the pixel art dog we used in one of our previous tutorials, How to Make Pixel Art in Photoshop for Beginners. Of course, this tutorial works with any pixel art image that you have, so if you have your own pixel art you can follow along as the steps will be identical.
As we mentioned before we opened our pixel art dog from before. Go ahead and do the same or open your pixel art file in Photoshop.
Now once you have your file open, go ahead and open the navigate to the Export As menu. To export your pixel art image in Photoshop go to File then Export and click the Export As item. Use the image below as a guide.
After you click this a new menu popup will appear. This is the Export As menu. It provides you with several different customization options for exporting your images from Photoshop. The first one we want to select is the Scale option. This option allows you to scale your image up or down before you save it to your computer. Note this doesn’t effect your original image, its just a quick way to save a larger or smaller version of your image. For this tutorial lets scale it up by 500%.
Great! Now when we save our image it will be 500% bigger than our original size. However you may have noticed that our image looks blurry. Remember how we said Photoshop uses the Automatic option when resampling our image? We need to change that. To set the the type of resampling we want in Photoshop click the Resample drop down menu and select Nearest Neighbor. This will make our pixel art nice and sharp again.
As you can see our pixel art is not blurry anymore. Now we are ready to export our image. To save the image to your computer click the Export button. When you do a save dialogue will show up.
Go ahead and enter a name for your new file and a location. When you are ready, click the Save button to save the image to your computer. After you are done go ahead and locate your image to verify that it saved properly.
As you can see our image is 500% bigger than our original and it still maintained its sharp edges. The nice thing is that by using the Export menu you didn’t mess up your original pixel art.
Once again feel free to experiment with the Scale inside the Export menu depending on your project requirements.
Wrap Up
Learning how to export pixel art in Photoshop is extremely important especially when working on projects like 2D video games, because blurry pixel art never looks good, but sharp pixel art looks like a work of art! Thank you for reading.
