Pixel Art Basics

Jul 21, 2012

The popularity of pixel art, besides simply being a classic retro aesthetic (late 80’s, NES-era), is also from it being a whole lot faster and requiring less traditional art talent and skill, also that it can be made with far less expensive software. If you are a programmer trying to make art and you have no budget, no one else helping, and don’t have a bunch of time away from programming to make the images look OK, pixel art is in many cases a decent fallback.

Pixel art also becomes a solution if you have an artist coming in who, despite being a very talented and capable illustrator, if their background never involved making a huge volume of art, the quantity of which a game requires for all of the tile sets, characters, items, menus and so on, pixel art can also save them some time. This allows them to crank through more assets in less time than if they were trying to 3D model it or use highly detailed, stylized vector art.

As far as tools to use, if you don’t have access to Photoshop, if you’re a student you can get a student’s deal on Photoshop and that’s well worth it. But if you don’t have access to Photoshop, Paint.NET is a fairly popular tool, also free I believe. Failing that, gimp.org has another art tool that can get the job done.

Speaking of which, when you’re in Photoshop, you want to make sure that you’re using the pencil tool–or whatever the equivalent is in whatever tool that you’re in–not the airbrush, or paintbrush. You want to make sure that you’re affecting one pixel at a time with each click, you don’t want to be partially affecting all the nearby pixels based on how close you are to them. That’s going to totally mess up your transparency and mess up your color palette and so on. You want to be having hard-edged control, absolute transparency or absolute opacity.

It’s important to pick a small palette of colors, for example 4-8 for a given character, maybe a total of 32, or upper bound 256 overall for the game, and to just stick to those. Pick a palette of colors that work well together, that contrast with one another. Then keep using those, either from the eyedropper tool or, preferably, using an index color format to help you stick to those.

Generally speaking you want to avoid gradients. They ruin the effect and they look crummy. This includes of course Photoshop’s popular bevel and emboss layer effects. If you’re doing something spherical like a bomb, instead you can get away with making using a white rectangular highlight on a black circle, that oftentimes will work just fine. If you need one extra shade of gray in there around the white to help make it look a little rounder, that’s totally fine too. You certainly don’t need a full gradient to do it.

Work with a very small image. You’re generally looking at probably a 16×16 or 32×32 pixel image per character. If you want to make larger characters, think of composing them from smaller squares. So using 32×32, maybe it’s 2 of those units tall, or two units wide, or 3×2 if it’s a huge boss.

You’ll want to be using PNG image format, but make sure you’re using the indexed color version that uses binary transparency. This is so the image is either there or see-through. You’ll want to avoid the higher color PNG format in which you can get gradient transparency, where the edges can kind of be faded. That once again will sort of destroy your control over your palette consistency in the game.

One upside of lower resolution art being in many cases faster to produce than higher resolution art is that it’s easier to overproduce. You can prepare multiple versions of important objects, like characters or power-up icons, to compare and pick the best one to go with. Even if you’re not an artist, even if you don’t have any sort of theory to go upon, at the very least you can use your own taste to decide what looks unacceptable versus what looks like it is kind of working. But it’s hard to tell sometimes, especially again if you’re not an artist, until you’ve put them down to lay them out to look at them, to decide which of those you want to keep and go with. Before you’ve animated something, especially if it’s an important character in the game, or an important object, draw several different versions of it in small pixel form, pick which one you think is worth going through with, and then throw away the rest. Get rid of them – you consciously decided that they weren’t as good.

Don’t make images small, pixel by pixel, and then scale up the images themselves to 2x or 3x. The problem with that is you can wind up with “pixels” being say 2×2 or 3×3 and then partially overlapping another one. You can get the corner of one pixel overlapping the corner of another one. It’s unsightly, it’s not faithful to the pixel form. Because you want pixels to be either entirely overlapping one another or not, instead of scaling up the images what you want to do is scale up the graphics buffer in a way that doesn’t blur it. Flixel provides a great facility for this in the form of pixel doubling, which I think is even the default, but whatever your environment is you’ve got some way to scale up an image so that after you draw to the graphics buffer with your 1 pixel per real pixel images, then you can scale the full image.

If you’ve never tried pixel art, I really encourage you to give it a shot. It’s surprisingly easy to get into. Your first time or two, like anything, you’re not going to feel that good about it. But it doesn’t take many attempts before you’ll start to see things coming together that you can use in a game. Draw an overhead spaceship, draw a Space Invaders-style bad guy, draw a little animated running dude. What you’ll find is that once you begin drawing these little things they’ll help inspire you with ideas for how they might move, how they might attack, and how they might interact with each other. You can partly build your game around these little images you’re drawing, the little stamp-sized pictures of characters and power-ups. Program to bring them to life. In some ways those images can sort of be your design document, in a way that as I said in the previous GoldenEye entry, they built in many cases models and textures for all kinds of gadgets for the levels before they decided what to do with them, simply because the existence of those models and textures helped inspire their use in the level design.

So anyway, it’s not as hard as it looks, at the very least to make it acceptable. Granted, there are some extremely talented pixel artists out there–I don’t mean to discredit what they do, what they do is incredible and I can’t speak on their behalf because I’m not one of them. But I can say that to make passable pixel art is entirely within every programmer’s means, every designer’s means, with free software out there.

Do something with the results. Don’t just let them sit there in a folder on your drive collecting cobwebs. Draw some stuff, build a game out of them. This returns to one of my classic suggestions for approaching design documentation: once you’ve got these little stamp-sized pictures try putting them together in a mock-up screenshot. Once you’ve got some tiles, some characters and items, put them together in a mock-up screenshot. Think through what information you’ll need to display to the player in terms of score, health, or lives, and how or where that’s going to go on the screen, how it’s going to look. Program to bring that image to life.



Learn and practice team game development with Gamkedo Club.
Membership worldwide. Professional support. Proven process.




Subscribe by e-mail to receive weekly updates with Gamkedo.Community interviews and YouTube training videos for game developers!



One Comment

  1. […] DeLeon here. I recently had a friend reach out to me based on another entry from this month, the Pixel Art entry. He said it helped push him over the line from it being something he thought about, to […]

Leave a comment

Comments Form
  • Your email will not be used for any purpose other than to update you in replies to your comments. Your website address will be shown as a link from your name with your comment. Your profile photo is auto-magically provided by Gravatar.

All contents Copyright ©2017 Chris DeLeon.

Site production by Ryan Burrell.