The Basics

First of all, it’s important to note that this is not a step by step tutorial on how to draw a character. Rather, it assumes that you’ve at least tried to draw a character, and acts as a guide on how to correct a lot of the problems you may encounter early on, when you’re either new to pixel art or trying to improve.

If you’ve drawn a sprite before, it might be helpful to load it up and follow along. If you haven’t, try doing something quick before we start.

That said, If you've made some of the mistakes I'm about to go over, your sprite might look something like this;

Regardless of whether or not you’re proud or horrified, don’t worry about it; because there’s a lot you can do to make a sprite like this better without much effort. Here's a list of a lot of the mistakes I see (and made myself when I began), and how to deal with them.

1 - Too many colors. Low Contrast.

First thing's first; While using a lot of colors may seem like a good idea at first, it also makes your sprite harder to work with. The more colors you use, the longer it will take to animate your sprite, and while using a lot of colors can look good if you know what you’re doing, it’s not going to look better. Just “different”. In game development that time can mean a lot.

So, take that mess of colors, and lower it down to 3-4 shades per color, at most.

Of course, limiting the colors won't mean much if the colors are bad. Every color should be different enough to justify actually including it. With the above sprites, some of the shades are so similar that they’re difficult to distinguish from each other. Like I said before, more color means more work, and if the color has no purpose, then it shouldn’t be there.

Now, there’s no rule for how much contrast you should use. You’re just going to have to get a feel for it. However, if you want a rough estimate, then just use a difference of at least 40-50 between each shade. Even when zoomed out a bit, you should be able to see the difference between them.

Now, you may be thinking “AH! My once awesome sprite! Why is it so jaggy and harsh now?! I TRUSTED YOU”. Well, don’t worry. It doesn’t look bad because of the contrast. Rather, it looks bad because the contrast isn’t being “utilized” yet. Trust me, contrast is your friend.



2 - Messy lines
Before we go any further, it’s important to have clean lines. This is actually a problem I see with a lot of decent pixels artists, be it out of laziness, or just not realizing it. Here’s a few example of messy lines, and the cleaner versions.



Basically, you want to limit everything to a single line of pixels when possible. Being clean also includes making sure that curves are actually curves.

3 - Parallel lines

Basically, when two lines of pixels are next to one another, it exaggerates the fact that they're square and looks jaggy. You can fix this sort of thing by “rounding” the edges of these groups of pixels.

The difference is subtle, but noticeable. Basically, everything will look smoother, and the technique is essential for making things look curved.

4 - Pillow shading. Lighting

Now, to address the elephant in the room..
Pillow shading is when you just shade from the edges towards the center.

The key to solving this problem is using lighting direction, and keeping it consistent. However, keep in mind that shadows help to give a shape volume, and so the shape of the shadow matters a lot. When adding any shadow, think to yourself, "why is this here"?. If the answer is "because it's easier" then it's probably in the wrong place.

5 - Face Shape

Another thing I see a lot in pixel art are these sort of “caved in” faces. I guess as a result of people trying to draw the same way they do at a higher res but running out of space.

Particularly with stylized characters, it often helps to puff out the cheeks a bit, and make the head more bottom heavy. This will usually work well with low-res sprites. I also made the right eye smaller to conform to the shape of the face more.

6 - Hue/Sat Shifting

Finally....time to talk about color some more.

The problem with our current colors is that only the brightness changes between shades, which is a little boring. Colors like yellow are especially bad for shadows, since they end up kind of ******** colored.

To fully utilize color, you need to change not only the brightness, but also the hue and saturation. The general rule of thumb is...

The higher the brightness - The higher the saturation
The lower the brightness - The lower the saturation.

In this example, the first one only changes brightness, whereas the second changes saturation as well. The de-saturated mid-tone helps the highlight "pop"

However, what about with brighter colors?

The problem is that if you just raise the brightness of the blue, it becomes pale. It can't be any more saturated than it is, and so the highlights don't "pop" anymore, because the mid-tones are more saturated. This is where Hue comes in. If you shift the hue and saturation sort of like this,

The cyan appears more saturated than the blue, preventing it from appearing washed out. Here's a few examples with other colors. You can do the same thing with any other color.

 The basic rule of thumb is; shift the hue towards blue as the color get's darker, and shift the hue towards yellow as the color gets brighter. These "patterns" all follow the same scheme. Here's what the yellow to blue pattern above looks like  

There are some exceptions to these rules. For example, because white and dark grey colors have no saturation, they have saturated shadows instead.

Finally, using everything I mentioned above, here's what the sprite looks like with colors that utilize hue and saturation shifting. (+ a minor change to the eyes)

And if you color lines next to highlights with shadow colors...

7 - Head size

It's common to make the head too big, overestimating how much room you need for expressions. I learned the hard way that big heads = characters that can't stick their heads where you want them to. While this is a personal choice, it's something to keep in mind.

And that about wraps it up for now.  Here's the final result.