Pixel Art Basics for Beginners, Programmers, and Everyone Else

by Luxon 11.03.14

I often perceive a sort of division between pixel art and “Art,” and although there’s no doubt in my mind that it is a form of art, I see the reasoning behind this—the differences being a manifestation of the limitations imposed on pixel art. Of course, technical limitations aren’t much of a factor any more, so I'm referring to self-imposed restrictions—ones that must exist lest work cease being recognizable as pixel art. I'm talking about the tools, the techniques, the small quantities of pixels and colors available to the artist.

These limitations remove some of the “fiddle room” from the creation of pixel art, narrowing your options and allowing you to focus more on each aspect of the piece. For example, similarly to how vector art can reduce the nodes of a line or shape, at a low enough resolution there is often only one way to most successfully portray a desired stroke. In real life, with pencil and paper, which has infinite granularity rather than pixel and dpi measurements, there are a million ways to portray the same line. It is easy to get caught up in fiddling, erasing, bringing this part of the curve out and this part in, trying to capture “flow” or be evocative. Pixel art doesn’t really give you this option. It is much more obvious whether or not you've got it “right,” as long as your ability to discern is well-honed (which seems to be the downfall of many wannabe pixel artists).

Author’s note: Flow can be regained through anti-aliasing, and this tutorial explains it in terms similar to what I've just described. Tl;dr: If your imaginary pencil line would fall partially out of of the pixel line (if it, hypothetically, were scaled up and printed on a sheet of paper), combine the two colors the line would overlap.

I like to think of pixel art as being very economical—not only in terms of cost, but in the sense that each pixel, each “stroke,” is of high importance. In fact, the lower the pixel count of an image, the higher the “stroke economy” and the more each pixel matters to the final product. This high stroke economy allows you to experiment with and examine each artistic property with a small number of strokes and within a small space that is easy to wrap your head around. This is why “traditional” artists, who have more of a handle on the properties of art, often have an easier time transitioning into pixel art, rather than vice versa—because pixel art is a distillation of art’s properties.

Pixel art snobs like to tell newbies that in order to improve their pixel art they have to practice traditionally. While this might be ideal, you can definitely hone your sense of artistic intuition while making things that contribute more directly towards your goal of creating usable and attractive pixel art.

Not only does the high stroke economy of pixel art help ease the burden of linework and creating an attractive silhouette, it makes experimentation with proportions and scale easier as well. Moving a character’s head or eyeball up, down, or to either side just a pixel or two often makes a huge difference, and frequently there is only one “right” placement. This makes character design more accessible to artists who aren’t particularly knowledgeable about anatomy or composition, although it certainly helps a ton to be able to sketch out characters at a higher res before transferring the design to pixel—a hand-drawn design can portray form and structure better than a tiny sprite, and would help in designing costuming details and understanding how a character might move when animated.

Wrong. Still wrong. That looks about right.

Lighting, or “shading” the sprite is integral in portraying the object’s form, and pixel art allows for more efficient experimentation in creating the illusion of three-dimensionality and various hypothetical lighting schemes. However, pixel art makes it easy to fall into the trap of pillow-shading, as there often isn’t a huge difference between pillow-shading and a convincing illusion of directional lighting. (Where there is pillow shading there is usually banding, which is another thing you should avoid at all costs.) This is where studies and still-lifes would come in handy, but it’s easy enough to remedy pillow-shading if you're aware of when you've done it. A little practice with various basic forms (spherical, concave, convex, etc.) and small details (edges, ridges, cracks) can really improve your work, although the way you portray these things is going to vary based on your resolution and palette size and the material of the object. Learn the way light interacts with basic forms, and you should be well on your way to turning your “programmer art” into just “art.”

Welcome to pillow-shaded, banding-riddled, mindlessly dithered, high contrast, jaggie Hell. Somehow this image was awarded 300 upvotes on /r/pixelart. Let's take a look.

On the left, pillow-shaded colors and banding galore. As illustrated in this example from Nitrome's Flightless, a leaf doesn't need nearly this many colors, nor such high contrast. The color selections on the left are pretty juvenile as well, but let's talk about that.

Pixel art also allows for easier experimentation with color choices—it’s a simple matter of a bucket fill rather than a series of blending layers and manual overpainting. Color theory is a large and contested area of artistic study, and while it isn’t necessary to be an expert on this in order to make attractive pixel art, there are a few concepts you should internalize:

Straight ramps bad. Hue-shifting good. When an object’s color gets lighter or darker, you don’t just add white or black to the hue. A good rule of thumb (although not at all an absolute rule) is that if your light source is warm (i.e. the sun), the color gets warmer as it gets lighter and cooler as it gets darker. If the light source is cool, it gets cooler as it gets lighter and warmer as it gets darker. A little trick I use is to shift the color slider in PS towards blue (up or down, whichever distance is closer) as the color gets darker, although I almost always fiddle with all the colors afterward (which is totally normal and to be expected. Use your judgment.)

Saturation is never static. Generally speaking, an object’s color is most saturated in the mid-tone and less saturated on either end of the spectrum, creating a sort of backwards “C” shape with Photoshop’s HSV color picker. This is not a rule by any means, just something to point you in the right direction, as there are plenty of exceptional situations.

Can you figure out which of these sprites uses a bad palette? I bet you can. (If not, go back and read the previous section again.)

When the limitations of your pixel art become a little less, well, limiting, it’s easy to get overwhelmed. Each pixel should have a clear, defined purpose—it should be a part of a color block, an outline, an anti-aliasing pixel, and so on. As your color and pixel counts increase, it’s easier to lose sight of that. If you can’t figure out what a pixel is doing, you're probably doing it wrong.

A surefire sign of an amateur pixel artist (besides pillow-shading) is pixel scattering. When you're working with a very low resolution, this probably won’t even be an option, but as you add pixels you add more room for error. You probably want to stay away from scattered pixels except in the case of dithering, and you don’t always want to use dithering to shade (in fact, you probably should use dithering rather sparingly). Scattered pixels give pixel art an overall “dirtiness” and lack of polish that doesn’t read as “wood grain” or “stone,” but as noise. Unless you really know what you're doing, don’t do it. Just don’t. Instead, think clusters.

These wood sprites from Frogatto (on the right) read much better and are much more stylish. Look at those sexy clusters. Bonus pillow-shading and banding example for good measure.

I find it much easier to describe the style of a pixel art piece than with other types of art, since pixel art styles can largely be described by the artist’s choices in regards to the basic principles and components of pixel art—size and scale, proportions, color choices, color count and anti-aliasing, outline thickness, etc. This characteristic makes it easier to intentionally create a cohesive style for a pixel art piece or project. Set the rules once you've got a feel for what you like and alter them as you go, but make sure to alter everything consistently.

In this way, pixel art lends itself to tutorialization, but when using or thinking in a step-by-step approach it’s easy to lose sight of the big picture. You flatten the image in your mind’s eye, making it difficult to “shade,” because you're portraying shape rather than form. You get caught up in the rules to the detriment of the final product as a whole. It’s okay to break your rules as long as the end result looks better and looks good in the greater context of the piece or the game. Remember that nobody cares as much as you do, and most people won’t notice the one pixel of outline you removed here and there—even if they do, it’s not the difference between success and failure.