Sharp Coder is reader-supported, meaning when you buy through links on our site, we may earn an affiliate commission.
HomeBlogDesign

How to Make Pixel Art Using Photoshop

1108

Unlike a regular art, pixel art consists of a per-pixel color fill, which result in a low level of detail. But despite that, it does not interfere with how much storyline it can communicate.

In this tutorial I will be showing how to create a simple Pixel Art using Photoshop (I'll be using Photoshop Elements but the steps should be fairly similar for the full version of Photoshop).

You can also use this technique for game development, when creating level sprites or a game character.

So let's begin!

Step 1: Create new Image

  • In Photoshop click File -> New -> Blank File...

  • Set the Width and Height to something small (In my case I'll start by making a ground tile, so the Width and Height are set to 16)
  • Set Color Mode to RGB Color then click Ok

  • The new blank image will appear (You can Zoom in by pressing Ctrl and +)

  • Select Pencil Tool and set it's Size to 1 px and Opacity to 100%

Step 2: Paint the Pixels

  • Now we are ready to paint (I will begin by making a ground tile with a grass on top)

As you can see the result image is quite small (I will get to how to make it bigger at the end of the article)

  • Meanwhile I repeated the same process for another 3 elements of my art (House, Fence and a Tree)

  • Now it's time to combine the images, here is the final result:

To scale the image without it losing pixelation you need to do next steps:

  • Go to Image -> Resize -> Image Size...

  • Set the Width to a bigger value (In my case I'll set it to 784 px), the height should scale proportionally.

Now, if you click Ok the image will appear blurry, that's because we need to change the scaling algorithm to "Nearest Neighbor" like this:

And here is the scaled Image (Tip: Click the image to expand it):

Bonus: Filling the Pixel Area

Let's say you finished drawing your pixel character and need to fill the inside with a solid color.

Normally you do it with the Paint Bucket Tool, but you'll notice that some pixels are poking out:

To avoid this, we need to disable the Anti-aliasing in the Paint Bucket Tool:

Much better!