So, you want to make pixel art - to design your own 2D game art and characters? Or perhaps you want to create a .gif of your dog soaring through the clouds into a pink and purple sunset?
Well budding heroes, heroines, and supervillains, your tale begins right here.
Table of Contents
- What Is Pixel Art?
- What Is The Best Software For Pixel Art?
- 2D Game Perspectives
- How To Make Pixel Art?
- How To Draw a 2D Game Sprite
- Make Your Own 2D Game
What Is Pixel Art?
A pixel is a single unit of measurement on a screen - each letter you’re reading right now is created by an arrangement of pixels. Pixel art is the intentional placement of pixels to create an image.
It’s a beloved gaming art style for its nostalgia, charm, and accessibility, and it’s often used in 2D games to build game sprites and backgrounds.
But, what is a game sprite?
Sprites are images or “objects” that are placed in a game, such as a character, an item, etc.
Pong and Final Fantasy, developed by Atari and Square respectively
In these games, the pixel art has a limited amount of colour, and the enemies and scenery tiles are duplicates. There’s a lot of contrast between the characters and the background, and the resolution is low so you can see the pixels in each of the images.
Back when these games were captivating a generation, game console graphics were only capable of producing simple artwork.
Pixel art is a digital art form conceived from necessity and limitation, and from this, some techniques for creating classic pixel art were established:
- Have control of every pixel you place - a paintbrush doesn’t give you control of each pixel
- Limit the amount of colours you use
- Limited resolution, so you can see the pixels
- Repeat assets (sprites)
In the words of a famous pirate, these are more what you’d call 'guidelines' than actual rules, and in the modern gaming world, what works is more important than what's conventional.
Stardew Valley is an example of a pixel art game created without console limitation, yet you can still see similar techniques.
Stardew Valley, developed by Eric 'ConcernedApe' Barone
What Is The Best Software For Pixel Art?
They say a good worker never blames their tools, but you can’t create pixel art from random electronics, pet toys, and your favourite 'vintage' Busted CD.
Here’s a table of some excellent software that’s commonly used to create pixel art. Included are links to tutorials for creating pixel art in each:
Mac, Windows, Linux
Mac, Windows, Linux
Mac, Windows, Linux
Mac, Windows, Linux
Mac, Windows, Linux
Create in your browser
*Prices based on 23/08/22
2D Game Perspectives
There are three common types of perspective in 2D games: isometric, top-down, and side-on. Each view requires you to draw your pixel art in a slightly different way.
Isometric Pixel Art
Some pixel art games are made in an isometric perspective. This means that when you look at a cube, the three visible sides are all the same size.
Compare the art in Keylocker with the image of the blue isometric cube to see how this looks in a game.
Keylocker, developed by Moonana
This perspective allows the artist to show parts of the scenery that wouldn’t have otherwise been visible. The downside is it can take awhile to create compared to other pixel art perspectives.
You also need to draw at a specific, consistent angle. AdamCYous is a YouTuber and professional pixel artist. He offers some of the most approachable tutorials going, which can help you become a whiz kid in this technique.
You can read more about Keylocker in our interview with lead designer Nana Moon. She discusses her experience as a female developer and making isometric games in GameMaker.
Top-Down Pixel Art
In a game with a top-down perspective, the game looks as though the camera is overhead.
There are different ways of drawing pixel art for a top-down game. In real-time shooters like Hotline Miami, the pixel art is drawn as if everything is from a bird’s eye view.
In games like Undertale, the camera appears to be tilted more. Draw your game characters from a side-on view, and have one wall visible to create this effect.
Undertale and Hotline Miami, developed by Toby Fox and Dennaton Games respectively
Side-On Pixel Art
For those that have never heard of a Mario Brother and don't know what makes him so super, let us introduce you to platformers.
A platformer is a genre of 2D game with a side-on perspective. Although at their peak in the 1980s and 90s, modern classics like Celeste remind us how perfect the marriage between pixel art and 2D platformers really is.
Side-on games often include acrobatic challenges to move around, offering up prime opportunities to create some fun jumping, triple flip, and face-kick animations.
How To Make Pixel Art?
Here’s a breakdown of some pixel art concepts which can transform your Picasso-like blocks into one of eBoy’s finest works.
Pixel art animation by eBoy
What Size Of Canvas Should You Use For Pixel Art?
When thinking about your game, it’s important to consider the resolution. You have to fit in scenery, multiple game sprites, and perhaps dialogue boxes within a designated space.
Consider the resolution of classic hardware and achieve the nostalgic feel you want by using the same canvas size as the corresponding console:
160px by 144px
Game Boy Advance
240px by 160px
256px by 240px
256px by 224px
320px by 224px
Brandon James Greer offers an excellent introduction into canvas sizes.
How Many Pixels Should I Use For My Sprites?
Now that you’ve chosen your game's total resolution, consider the ratio to your game characters and objects. A ratio of 1:24 will make your character look big on-screen, whereas 1:300 will be visible, but pretty hard to see.
Draw all of your game objects in a 1:1 tile in your chosen software. Usually this is between 8:8 or 32:32 pixels, because any more would take a very long time to make. Each time you double the ratio (8:8, 16:16, 32:32), you quadruple the workload for each sprite.
Number of Pixels in a Tile
Pixel Art Colour Palettes
If we consider old gaming software, the NES offered a total of 25 colours at once, whereas the SNES could display 256.
To create classic pixel art, you’ll need to limit your colour palette, but the amount of different colours you use is ultimately up to you.
Think about saturation - how bright or how dark are your colours going to be? Do you want a dark, moody feel, or are you creating something bright and cartoony?
It’s good practice to stay within one area of saturation throughout your game. Try searching images from games with a similar feel to something you want to create.
Check out these tutorials from pixel artists Pixel Pete (Peter Milko) and AdamCYounis on creating colour palettes for games. Adobe also offers a helpful free tool for creating your own colour palette.
Chicory: A Colorful Tale by Greg Lobanov
How To Draw a 2D Game Sprite
Pixel art maestro Saultoon has created a brilliant video tutorial on an efficient way to make pixel art:
1. Draw a silhouette of your sprite. This is often a basic shape with a few extra bits.
2. Erase the black from the silhouette so you can show some features, then clean up any jaggy lines. Keep a consistent line thickness - usually, this is one pixel.
3. Add colour, and if you like, outline it to define your pixel art sprite against the background.
4. Refine your sprite and export it as a .png for stills or a .gif for animations
If you'd like another article on a step-by-step process, check out Glauber Kotaki's tutorial where he helps you learn pixel art by drawing a cool game character.
Drawing Curved Lines With Squares
Does that sound like a jaggy mess? It can be, but there’s a technique to follow that keeps your squares curvy.
Make sure each line in your curve increases in sustained increments in a consecutive order:
Anti-aliasing is a method of smoothing jarring edges by adding shading. Add darker or lighter colours to the edges of your creation to create a smoother image, but be warned: overdoing it can result in a lack of clarity.
What is Dithering in Pixel Art?
Here’s a hint: it’s got nothing to do with twiddling your thumbs.
Dithering is a technique used to add depth and sometimes the illusion of additional colours with a limited colour palette.
Make a pattern, or randomly place the colours you have available, to create a gradient.
What File Type Should I Save Pixel Art As?
Export your files as a .png for static images, or as a .gif for animations.
If you are using GameMaker, you can export a horizontal animation strip as a PNG and suffix its file name with "_stripN" (N is the number of frames in the strip). GameMaker will automatically import that as an animation.
Make Your Own 2D Game
Ready to create your own experience with your own pixel art? GameMaker makes it fast and easy to build your own game.
In our Hero’s Trail tutorial, you can create your own 2D game in 30 minutes. In part two, you learn how to add your own pixel art - so the whole game can be about your heroic pet if you want it to be!
You can also download a bunch of free asset bundles if you’re in need of a burst of inspiration.