“Fix My Sprite!” Volume 4

I had a young would-be artist ask me once how it was even possible to draw hair. How would you ever be able to draw all the lines for each strand? The answer of course is that very often, an artist has to be less literal than a camera. You have to “suggest” things instead, usually by simplifying them. The way you do so is what determines your visual style.

As a kid I remember fantasizing about how there must someday be an artist so good that their drawing would be indistinguishable from a photograph. Then as years went on I’d go back to that fantasy and begin to realize both 1) boy that’d be pretty dull, and 2) what’d the point be? That second part may sound like a funny question, but the issue is, for all the time and work it would take, the goal of making a piece of art exactly representational can already be accomplished immediately by a cheap, dead machine. When people make art, a large part of the reason is to share their unique interpretation of something. This, again, is usually done by how you simplify and suggest elements.

Tumblr user kamterios ran into some related trouble with a sprite and couldn’t find what the cause was:

“I’ve been trying to draw Asura in the CvS style but I keep on feeling like something is wrong. Could I ask you to briefly look at it and give me some pointers?”

Whenever you begin to notice problems on a sprite that’s nearly done, you have a challenge in that the issue might lie in the drawing, the shading, the coloring, or any number of other details or combinations of details that you’ve added. The fastest solution is to brutally rip things down to the basics and start from the most simple version of the sprite you can make.

In this particular case I’ll skip that step because experience tells me that the “something’s off” feeling is coming in part from a line problem. I’ll focus mainly on the arm because that’s where it can be seen the easiest. The drawing itself is fine, but when converted to pixels and colored, the strong lines begin to stand out. Why does that happen? Pixel art is an unusual style in that you have limited space to spend your choices within. At its thickest, that arm is 15 pixels wide. Meaning as you go down the arm, you only have 15 pixels to convince me that I’m looking at a muscled shiny metal arm, and you have to do it with a pleasing visual style. Oh and lest I forget, you should also try to do it with only 4 colors.

So we’re back to that hair problem. How do you draw everything you need in so small a space? Answer: you have to pick and choose your details. And thus for here I’m going to suggest that the lines are taking up too much valuable space because it’s more important for the arm to emphasize a metallic nature (by giving it a shiny look). To maximize the detail, let’s change the approach: let’s try switching from a drawing mentality to a painting mentality. Use the limited amount of pixels in the arm for fewer lines and more shades of color. In almost every case with pixel art, blending color is how you can suggest details instead of taking up the full amount of room required to spell them out. Again, it’s a unique situation with pixels because of the small and limited space, but the style this technique demands of you can produce a beauty that that carries over to other art media, and is a skill worth picking up.

I also quickly want to make a distinction between inside linework and outlines. Outlines for the most part are simple and can be made to your taste. You just want to make sure you go from darkest on the outmost to lighter on the inmost in order to get a good effect (I find it helps to work on a dark green background)

This part for instance you want to reverse, so that the darker pixel doesn’t go “into” the skin but into the background

So let’s start converting the drawing to a painting. Step one is to eliminate the shading and as many lines as possible (again, focusing on the arm in this case)

Then after converting it to 4 or 5 shades of gray, I take it into Photoshop, resize it 400% ‘nearest neighbor’, and start painting the shading over it

As in my other tutorials, I do it this way because drawing with a Wacom tablet helps me get the ideas down faster and lets me adjust them with more control. If you’re following along, don’t be too worried about getting every single detail perfect yet. Save that for the next step, when you shrink it back down 25% and convert it to Index Mode with 4 colors. That’s when you clean the pixels and spend the time getting things exact.

Once you have the shading and other details the way you want, adding color can come at the end, which makes coloring nice and easy. The shift to color may also inspire a few more corrections.

A few points: some parts I left out because I ran out of time – smaller details like hands and toes are always going to be the most time-consuming part, and while you’re getting familiar with other areas, I recommend simply copying hands and feet from other sprites as closely as you can so you don’t get overwhelmed.

Strangely, I have the opposite advice for areas that are too small to blend, like the eyes and mouth. When it comes to elements like these, in order to keep things simple, you have to embrace the nature of pixels and just work within it. In this case, you’ve done just that. By putting in the shapes, giving it enough accent, you’ve done ‘just enough’ to convey the detail. You might consider a little guiding shadows around the tips of the eye, but that’s hardly required.

Do you want to anti-alias the red pattern on the pants and the blue stripe on the yellow area? That’s a matter of taste. The more intricate the design, the more you might want to consider it to aid clarity, but remember that keeping it simple also makes animation a lot easier.

The linework on the torso I left because that’s an area you can get away with – the space is large enough, and more importantly, it’s all in shadow, so you don’t have light patches that can blend into lines to make them more subtle. (Reference CvS Joe Higashi for all you need there). To keep with the style and to make animation easier, I recommend taking out that extra shade of light you had and just plunging it in full shadow. It also increases the perceived contrast which helps make the lighting seem stronger.

Finally, and this is a general point for all would-be artists, notice how I was able to switch the arm from a line-based style to a shading-based style without redrawing it completely. It’s the same arm because it’s the same anatomy rendered differently.

“Ugh, another artist telling me I should learn anatomy. How original.” Yes but most textbooks don’t drive home the *real* reasons you should pick that stuff up. It’s because it gives you a library of shapes you can select from, within any given pose and camera angle, to make interesting looking designs in whatever style you’re going for – line-based, light-based, etc. It’s the great equalizer: not everyone can draw a straight line, but anyone can learn how a shoulder connects to an arm. You may be a mediocre artist, but if you know what you’re drawing, you’re going to connect with people regardless. It’s the great unifier: two people from different cultures, backgrounds, languages and generations can collaborate on a sprite like this because human anatomy is universal but also allows for interpretive leeway. Knowing how the shapes of a figure fit together gives you a whole lot of shortcuts you can get away with, and gives you the key that activates the viewer’s brain and tells it “yep, that shape’s a tell-tale sign of a forearm. I know because I’ve seen forearms all my life and have secretly recorded that info.” It gives you a way to talk directly to the viewer’s brain and say hey, help me out, tell the viewer this is a forearm for me ahead of time so they don’t have to think about it.

So there you go, a quick solution to a good drawing that didn’t play well with pixels. Next time you run into a details problem, see what happens when you switch from the pencil tool to the brush.