There is something fascinating about pixel art. 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 amazing pixel character and need to fill the inside with a solid color.
Normally you do it with the Paint Bucket Tool, but there's a catch, the result is not what we expected:
To avoid the pixels poking out of the outline we need to disable the Anti-aliasing for the Paint Bucket Tool: