In this beginner tutorial you will learn how to create pixel art for your games and projects using Adobe Photoshop! We will go over everything from creating a pixel art image to sharing it with the world!
Are you ready to make your own pixel art? No matter if you want to create something to share to your social media account or maybe you need a character for your retro video game, this Photoshop tutorial will help get you creating pixel art fast with Adobe Photoshop.
If you would like to see other great pixel art ideas view our full list of Free Pixel Art Tutorials
Getting Started
Pixel art is a fast and easy way to create 2D images for your games or for creative works like in the pictures you see in popular mobile games like Flappy Bird! Learning how to make pixel art in Photoshop is also a fundamental for creating great voxel art. There are many tools available for creating pixel art, but in this tutorial we will be using the most popular 2D image software available on the web. Photoshop is the clear favorite for making pixel art because of its many features geared towards making amazing looking pixel art!
Create a New File
Before you begin making pixel art in Photoshop, be sure you have the latest version of Photoshop installed via Creative Cloud, then go ahead and open up the program. You should see a menu similar to the one below. This is called the Welcome Screen. Go ahead and click New File.
A New Document screen will then appear. Here you can select from pre-made templates to help build photo projects designed for different screen sizes. For this Photoshop tutorial we will show you how to make a pixel art dog. To do this we will use the Custom option. Inside the menu on the right called Preset Details type the name HipsterDog and enter 32 for the width and 32 for the height. Click Create when you’re done.
Basically this creates a new file called HipsterDog with a canvas that is 32×32 pixels in size. This canvas will be what we use to draw our pixel art. After you hit Create, you should see a screen like the one below. Keep in mind 32×32 is really small. If you look in the bottom left you will notice we are at 100% on the zoom. Pixel art by nature is artwork that works on the pixel level. We can always scale our pixel art images up later, but while we are designing we have to remain in this resolution.
To make it easier to design though, we can always just zoom in so we can see our pixel art better. To do this press CTRL + on a Windows machine or CMD + on a Mac. We zoomed in until we reached 3200%. You can see the zoom on the bottom left.
If this isn’t enough you can zoom in more or less. Now that we have our empty canvas we need to set up our work environment so we can make some great pixel art in Photoshop.
Set up Adobe Photoshop for Pixel Art
Now that you have your canvas, we need to set up some basic settings in Photoshop that will assist us in making our very first pixel art and also so that it displays properly.
Turn on Nearest Neighbor
When you first open Photoshop all images are created using Bicubic Automatic for Image Interpolation. This is great for normal pictures because when you scale a picture up or down it helps blur pixels so they look “smooth” and less pixelated. However, this is the complete opposite in pixel art. Whenever you make pixel images they have to look crisp and sharp. To do this we need to change this setting to Nearest Neighbor. The images below are an example of when you scale the image we will be making up 8x.
So without any further delay lets change the Image Interpolation. Under Photoshop, go to Settings and select the General category.
Once the preferences menu is open, go ahead and click the Image Interpolation drop down and select Nearest Neighbor (Preserve Hard Edges) from the list of items.
Now when you resize your pixel art, Photoshop will preserve the hard edges giving your artwork a clean, sharp look.
Turn on the Grid
The next important setting we will turn on in Photoshop is the Grid. Pixel art works off of an invisible 2D grid. By turning this on, it will make it easy to see where exactly we are placing our pixels. To turn on our grid go to View > Show > Grid.
When you click Grid you should see something similar to this on your Canvas. Keep in mind, this grid is only a guide inside of Photoshop and will not show up when you export your pixel artwork.
Sometimes the grid will not appear the right size inside of Photoshop. This is because grid lines are not set properly. If you need to change this or you want to double check go ahead and head over to the Preferences panel inside Photoshop again and this time click Guides, Grid & Slices… from the options.
Once the menu opens make sure that the Gridline Every: property has 1 pixels as the values. Also make sure that Subdivisions is 1.
This will guarantee that your grid is the right size. Congratulations! We are now ready to make some pixel art inside of Adobe Photoshop!
Draw Your Pixel Art Image
Now that you have Photoshop set up for pixel art its time to choose the tool we will be using to actually draw our pixel art. Even though there are dozens of tools and shortcuts you can use to make the pixels in your image we will focus on 1 primary tool. That tool is the Pencil tool.
Set Up the Pencil Tool
The pencil tool in Photoshop will become one of the most used tools when you start making pixel art. To maximize its effectiveness we will adjust some settings before we start.
To begin lets select the Pencil tool from the toolbox. You can find it on the right side. It literally looks like a pencil.
One you have the Pencil selected we are going to adjust some properties. Click the the drop down arrow at the top left of the Photoshop window. It should have a number next to it. This number represents how many pixels wide the pencil will draw when you click on the canvas. Since we are doing pixel art we want this to be ultra fine. To do this set the size to 1. This will allow us to draw 1 pixel at a time. Next set the Hardness to 100%. Remember pixel art should be crisp and sharp. This property will prevent anti-aliasing making our pixels sharp.
Outline the Head
And now the moment we have all been waiting for! To draw a pixel simply click anywhere on your canvas. Since we did all the hard work of setting up Photoshop, it should literally be like filling cubes on a grid. We will start by outlining the head using the color Black.
To change colors click the Color box located at the bottom of the toolbox area. A popup will appear where you can drag the slider around to customize your color. Press OK when you’re done.
Now to add a pixel simply click inside of the grid that you created earlier. With our current settings it will fill one cell at a time. Try to replicate the image below by clicking with the Pencil tool.
Very nice! Now that we have the outline for our pixel art character we can begin adding some more detail inside of the head. Continue adding more detail using the same method you used for the outline. Let’s outline the ears and add a nose. Repeat the image below.
It is starting to take shape now! In order to make the glasses for our dog we need to change the color. Click the color box again and input the color below.
Now that we changed the color lets begin drawing the glasses. Try to replicate the image below using the same Pencil tool.
Great work! We now have the majority of our pixel art dog mapped out. Lets begin to fill in the empty areas. A great technique for coloring a row of pixels is to Left-Click on your mouse on the first pixel in a row. Then hold down the SHIFT key and click the pixel on the end of the row you want to color. This will fill in the pixels between automatically saving you some time. Try to complete the image below using the techniques you’ve learned so far.
Great work! You now have the skills to create your own pixel art for your projects! Go ahead and experiment with different colors and add whatever you like to your pixel image. When you’re done turn off the grid we turned on in Photoshop earlier to see the finished product.
Where to Go From Here
Now that you have learned how to set up Photoshop and the fundamentals for creating pixel art, it’s time to learn how to scale up your pixel art images for so you can use it in projects like video games and promotional art. We will be covering this in our next tutorial.
To Learn this, view our next tutorial How to Resize Pixel Art Using Adobe Photoshop.
Do you have an existing image that you want to turn into pixel art? View our tutorial How to turn a Picture into Pixel Art using Adobe Photoshop.
