Through the Magnifying Glass: Part Three tutorial - Wyv and Keep

Okay! So last time we talked about how to select which features in a subject need to be emphasized in order for it to read well in the miniature, and saw that these attributes had to be overemphasized in order to make this happen. Now let’s get into the dirty of it, and make the damn things!

Beginning the Sprite: Painting
One of the common methods for beginning spriters is to start with an outline and then go from there, much as we do with a basic drawing. This is because these days a lot more of us grow up doodling with pencil and paper in classrooms and in sketchbooks much more than we paint.

For larger sprites, this is a perfectly fine method. You can see this quick pixeled outline of the larger Keep is reading fine, and we could go on from here filling in, shading, highlighting, and anti-aliasing. But when it comes to the smaller, actual sprite on the right, it’s clear that we’re going to have a massively tough time doing this. The hair and face are still mostly present, but pretty much everything else is just a mess, and we can’t tell what’s outlining what, or where color should go, or… well really anything. So it’s unlikely you’d want to even attempt to start from here when working in the miniature.

Instead, let’s forget about outline for now and start with color, painting in the the shapes.

If you paint the main hues in the basic shape of the forms, it’s much clearer what’s happening in your sprite. The idea is much easier to grasp, even with only a few colors and simple shapes. I’ve added outlining only in-between sections of purple, where I needed to separate her mask, breasts, and legs/arms. All parts of Keep are present and accounted for, in something of a decent shape. I use this technique in larger sprites as well, and for any beginners who are stuck with the outlining method, I suggest you try it out, as you may often find it easier than starting with an outline.

So, you say, that’s all well and good, Jesse, but the sprite’s not especially impressive. Right you are! It most certainly is not. On to the most important, and most difficult part.

Detailing: Combining Outlining, Shading, Highlighting, and Anti-Aliasing

Daunting? Maybe. But hear me out, because this is simpler than it sounds.

In larger sprites, it’s easy to break all of these things into steps and then progress through them. Add main hues, add shading, add highlights, anti-alias jagged lines, etc. But in smaller ones, it’s often the case that it’s not so simple: you don’t know which of these four things a certain pixel needs to be in order to look the best. You’ll have to use a bit of trial-and-error at first.

Basically what this comes down to at first is adding an outline to the main shade, identifying problem areas, adjusting them, adding shadow and highlight, identifying problem areas, adjusting, adding anti-aliasing, adjusting, and repeating that way. And remember to zoom out and look at the sprite when it’s small! You’ll be able to look at it in a different way and get a new perspective.

It’s a bit tedious at first, but you’ll quickly build an eye for it and develop a subtle personal touch, and soon won’t have to rely on trial-and-error, but will be able to identify conflicts beforehand and retouch appropriately right away. So let’s get to it!

I’ve started with just the hair, headband, and face/mask, so that we can identify what’s going on.

(1) In step one I’ve added a simple outline, picking darker versions of main colors, and we can already see some areas that are going to be a problem. The mask is blending badly into the eyes, and the headband has lost nearly all of its color, so a full outline isn’t going to work. Let’s fix these problems as we continue to step number two and start shading.

(2) Here I’ve added some darker color to the hair and face, and while doing that, begun to do a sort of anti-alias/unshade to the headband and mask. The locations where you want to do this are those where the outline is not as important, and you imagine would blend more in real life. For example, I’ve left the outline of the headband at Keep’s forehead intact, but substituted the main shade as it goes back toward her ear. I’ve kept the dot for her nose dark purple, so it’s more prominent, and gotten rid of the mask outline under her eyes, using shading instead. We see some problems here in the hair outline now looking a tad harsh, and also on the right side of the face (her left), which I have sticking out for her ear, which makes her look a tad fat. So let’s fix these next.

(3) In the third frame we focus on highlighting, and change some of her hair outline to the lighter shade color where it would hit an above light. The headband gets a highlight from the same light, and we change some of the facial outline on our right to show her blonde hair instead, making her face less plump. I’ve also added eye shadow, some facial highlights, and a bit of her hair peeking through the headband. You can see already the head is starting to look much more like a finished sprite!

We’re going to repeat the process a bit more quickly for the rest of her, finishing up her arms, chest, legs, and high heels. Try to keep up!

(4) First we add an outline to her hands, arms (as best we can), high heels, and thighs, but we can already tell we’re gonna have problems with her legs. We’ll deal with it in shading.

(5) The biggest change here is the addition of a shadow behind our heroine, masking some of the hair and the area between her legs. This makes it easier for our eyes to focus on her heels and thighs, where they should. The purple areas on her legs get shading through most, to blend into the shadow, and make her chest more noticeable. I’ve also reshaped her gloves a tad, so they look less like she’s sticking her hands out diagonally, and retouched her arms to match the new pixel of glove creeping up into them.

(6) Here we’ve added highlights to her arms, the right thigh (her left), her heels, changing some of the outline to a highlight, and to her chest. Lastly I’ve replaced a pixel of her chest outline with flesh color, to blend her legs in better.And voilà! Our tiny sprite is complete!There’s still a bit of trial-and-error, and in some parts we’ve ended up with the shade that was present at the beginning, but that’s perfectly okay! It’s all part of the process. And the good thing about small sprites is that once you’re quick, it doesn’t take long at all. So emphasize, patch color, and detail, and practice, practice, practice. Next up: Animating Tiny Sprites!

…P.S. For any of you saying “but Jesse! You didn’t do it in 16px!! This undermines your entire method!” Blasphemers! How dare you doubt me:

Bwaha!