4/28/23, 5:58 PM So You Want To Be A Pixel Artist?

So You Want To Be A Pixel Artist?

My name is Tsugumo, and this is what I know.

Chapter 8: Finally Making A Sprite

So now that you've read all the other chapters and have done some analyzing of your own, and thinking about how
sprites are set up and all (if you haven't done any of this, then go do it because it will make things much easier for you
when you get down to making a bunch of your own sprites), it's time to start actually making sprites. We're going to look at
a few different styles of sprites, but we'll start off with the classic and most widely used one (for RPGs that is), the Final
Fantasy 2 style sprite. Even if you're not interested in doing small 16x16 sprites, and you just want to learn to do bigger
ones, it's still a good idea to read it all...You can pick up a lot of skills from doing small sprites that you can use when
you're doing bigger sprites. Learn from everything you can. With that said, here we go with FF2 sprites:

Now the first thing you have to know about FF2 sprites, is that they're all divided up in a certain way...This is a 16x16 box
that you see above the text...Along the side is a line of orange, yellow, orange. Those lines are a guide of where
everything goes. In an FF2 sprite, the waist down is given 3 pixels (the bottom orange guide), the torso from the neck to
the waist is given 3 pixels as well (the yellow guide), and the head is given a massive 10 pixels (the top orange guide). If
you talk to people about sprites you'll probably hear the term "SD" come up often...SD stands for "Super Deformed" and is
used to describe scenes in anime when a character who's drawn normally will suddenly shrink down into a stubby sort of
doll looking state where their head is about as big as their body...Anyway, that's what FF2 uses, and a lot of the beginning
RPGs. This is because most of these were made in Japan, where SD is used in anime, and it's also good for expressions.
In the west, we tend to want "realistic" looking characters, where the heads are small and in proportion to the bodies. The
problem with this in the old days, however, is that when you had a sprite box that was only 16x16 to work with, a realistic
head would have to be about 2 pixels wide and 4 tall...While it's in proportion, it doesn't look very good because you end
up with faceless characters, and the most important part of a character is its face, because the player identifies with it
more. The use of a huge head in sprites was common because it allowed for good expressions as well...With a huge
head, you could have them bow their head, shake their head, blink in amazement, grow huge shocked eyes, close their
eyes, yawn, shout, and so on. This gives the characters more "life" and makes them more interesting...With a small
"realistic" head, you're stuck with maybe changing the shading on the 6 pixels and that's about it. For doing realistic
proportions, it's best to use larger sprites (like Phantasy Star IV did). Anyway, now you know why everything was SD for
so long, heh...This is all just my speculation however, I could be totally wrong.

So we'll start with the basic head. This is, pixel for pixel, the basic structure of an FF2 sprite's head...What a lot of artists
will do, if they have to make a lot of sprites, is make a basic "dummy" one that would be an average person and then
modify that for each sprite. It's a good idea if you have to make a lot of characters (especially townspeople)...But make
sure that you modify the dummy enough to make each one look individual and not just color swapped like they did with
Mortal Kombat, heh...So the basic head, two pixels in between the eyes, the eyes are two pixels tall, there's a single pixel
space between them and the sides of the head, as well as between them and the bottom of the jaw. All in all it looks
reasonably proportioned. Note that it doesn't take up the entire space it's allowed...A lot of the room is left for the hair
because hair is important, heh...When you have a 16x16 sprite, and you have only 6 pixels for a body, you don't have a
lot that differentiates one sprite from another, except for colors and a few pixels. To make the characters stand out from
eachother more, everyone usually has an extremely distinct hairstyle. Hair is very versatile and can be short, long, parted
on a side, parted in the middle, tied in a ponytail, tied in pigtails, wrapped into a bun, shaved, spiked, and so on...It's a
good way of separating one character from another, so it gets a lot of space on the sprite. If you were to fill in all of your
characters with black so they were shadows, the only real way of telling them apart would be the shape of their hair.
Anyway, moving on, notice that the jaw comes down to the bottom of the top orange guide.

Now we add the torso...I've set it up so that one fist is forwards and one is back. In older games, sprites would constantly
switch from the left foot forwards frame to the right foot forwards one...This was a way of avoiding making a third
"standing" frame where both feet are in the middle and the hands are at the sides...There are things I want to talk about in
this stance, so I'm going with a frame that's already in the middle of walking. Note I didn't separate the arm from the
torso...You can if you want (and it'll make it look like a jacket sort of deal), but I'm not going to for this one...This guy will

www.yarrninja.com/pixeltutorial/chapter8.htm 1/5
4/28/23, 5:58 PM So You Want To Be A Pixel Artist?

just be a generic shirt and pants character. The yellow guideline defines the distance from the bottom of the jaw to the
waist, and really you only get 2 pixels for the chest because of the waistline (unless it's, say, a dress or a shirt that's
untucked or something and you don't need that line)...I mention this because if you check out his shoulders, you can see
they go up into the orange. The reason for this is that the world you're looking at in the game is not a straight on front
view, and it's not a straight on above view, it's a "top down" view ("top down" is usually used to describe the angle of Final
Fantasy style games). Basically you're looking down at them at around 45 degrees, which is why you can see the front
and tops of houses and such (45 degrees is usually used to describe isometric games (like Diablo, where the tiles run
diagnol instead of straight up and down) because a lot of people don't understand what "isometric" is (you'll come across
it all the time in a drafting class, heh), so that's why "top down" is used instead of "45 degree" for FF style
stuff...confused? Heheh...). Now because it's a top down view, you're going to see part of the top of the characters
shoulders and they're going be back more "under" his head...You have to be thinking about this in 3d in your head to get
it...The more above you're looking down at something, the more of the shoulders you see and the farther under the head
they go. A lot of people make the mistake of doing a flat front view of a character when the maps are all top
down...Honestly, it doesn't matter TOO much...You can get away with it...But it stands out a lot more these days. Back
during the NES days, they warped perspective so unbelievably that it's hilarious to look at now...But at the time it didn't
matter because the graphics were crummy in general and it was the gameplay people wanted anyway. Check out a
dungeon map in the NES Zelda sometime...The room is viewed from straight above, but Link is viewed from a top down
type view, and the statues and various junk is all viewed from a front view, heh...

Now we've got some legs on this guy. Again, note that they're in a walking position, not a normal standing one...There are
some things I have to point out about this...I didn't draw a black line along the bottom of the foot because I need that
bottom row of pixels to show a foot and your eye draws an imaginary line from the left black pixel to the right black pixel
on the leg anyway (if you read the earlier chapter, you already know this...If not, go read it). The character's right leg (the
one that's forward) doesn't go straight down, but it goes in a bit...The reason for this is in the animation process. If you
had the legs just go straight down when they were forwards, and straight up when they were back, the character would
just look like he was stomping left and right as he went along...By curving the leg in a bit, it gives them a more natural look
to their walk. The leg that's back is just a row of pixels basically. Right now it looks like a stubby hip of some sort...We're
going to show that that leg is back when we get into the colors. Also note that the waist is NOT a straight line, it curves,
and the legs go up into the yellow guide to connect to it...This is because it's a top down view. A big mistake people do is
have a straight waist...It stiffens the character out a lot and gives a sort of cardboard cut-out look, which looks really bad.
Curving the line a bit gives them a little more depth, like looking down at a cylinder (think 3d again).

Now he's finally got hair. Hair is something you'll probably spend the most time on...A single pixel can mess up the hair, or
make it look great, so you'll be juggling pixels constantly trying to get a good shape. This guy will just have hair that goes
to the side...I threw in a missing pixel in the top of his hair to give him parted hair, just for demonstration, heh...Note that
his hair doesn't completely cross his face with a black line...With a full black line, it can start to separate the hair from the
head too much (like how the torso and legs look like separate segments), so sometimes you want to just use color
separation to split it up. I did use a bit of black under the parts that flop down because I want to show that they come out
away from his head and aren't slicked down with gel or anything. The general hairline is as from from the eyes as the jaw
is, there's a one pixel row dividing them. It's not mandatory as different characters will have different hairstyles, but it's just
a guide to go with for starting. At first you'll probably want to be working with color AND black at the same time on the hair
to figure out where you don't need black pixels dividing things, because it's easier to tell...I've made a couple zillion sprites
so I just do the outline and figure it out in my head, heheh...This guy's hair goes right up to the top of the sprite, but not
every sprite has to...Short people or kids wouldn't, nor would bald people because the actual head only goes up a pixel or
two under the hair. Of course, if you had shorter people or kids, you'd probably mess with all the proportions and give only
4 pixels for the body instead of 6.

Here I've filled in the sprite with flat colors (no shading). Take note of his hair, shirt, and shoes. I've used the reddish-
brown of his hair to define part of his head, and because there's no black under it, it seems like it's more flat, closer to his
head than his flopping down hair on the other side. Also I left a blank pixel where the black line separates for his part...If I
had filled in that pixel with the hair color, it would create the effect that he's got a strand of hair that sticks up there...Filling
it in with a black pixels makes his hair look flat there, and leaving it blank gives the part. One pixel can make a lot of
difference. His shirt seems to be a muscle shirt (no sleeves)...To turn it into a jacket I would have black pixels that outline
in, and to turn it into a t-shirt, I would put a white pixel on his arm, joined to the rest of the white. That one white pixel will

www.yarrninja.com/pixeltutorial/chapter8.htm 2/5
4/28/23, 5:58 PM So You Want To Be A Pixel Artist?

create a "sleeve" on his arm. To give him long sleeves, I just need to fill his arm in with white except for the last pixel. I'll
demonstrate a bunch of this stuff later.

Now we throw in the shading and we've got our finished sprite. When you're shading your sprites, try to keep the light at a
consistant point...Right now the light it above and to the right of the sprite, so all the shadows are on the left and bottom
sides. A reflex way of shading that a lot of people do is to shade the left and right, leaving the middle brighter...This means
the light sources is right in front of them...It's okay to do, but it can make the sprite look a bit dull because they have no
"left and right", they just have "center"...It's weird to explain, but it makes the sprite more symmetrical and
uninteresting...With shading on just one side, it gives the sprite a definate left and right. Anyway, there's no real "standard"
for how dark the shade should be. You just have to play with what looks good. There are some things you can keep in
mind though...If there are bright lights (say, middle of the day, standing by a fire, etc.), the shadows will be very dark, high
contrast from from the normal color. If the lights are dim (inside a house, night time, etc.), the contrast will be a lot less. I'm
not saying you need different light on your sprites depending on where they are, just keep in mind what sort of effect your
shading can have. Another good thing to keep in mind is that if you squint your eyes and look at your sprite and you can't
tell the light shading from the dark shading, then you can probably use some more contrast. If you can't see a difference,
then why bother shading, right? This comes up a LOT when people use yellow...They just slightly dim it and it's hard to
even notice. The face, being an important part of the character in showing expressions and all usually has less contrast
than the rest of the sprite...This is simply because if you have a lot of contrast, it can start to break up the colors and
becomes distracting to the eye. If you have just a big of contrast, you can see that it's shaded, but it will fit together a
bit...Granted, this contradicts my last point, but like I say, there's no "law" in how to do this stuff...Go with what looks good.
Some games will even have the face completely one color, so that the features (well, the eyes, heh) stand out well. I've
used pretty high contrast in the skin on this sprite, and it's a little bit distracting. The last part to check out is his lower
section. The leg that's behind is completely dark and you can't see the foot. The black outline below it helps set it further
behind...That bottom line could be just dark brown instead, but it would look more like he's just raising his leg. The leg
that's in front HAS to have more light shading on it, so it looks like it's in front. His boot is separated just with color. Also
check out his arms...To have his forwards arm look like it's coming forwards, there's only one pixel of shading on it...The
more shading, the further back it looks...To make his back arm look more like it's behind him, I should have shaded the
entire arm with the dark shade. I left it a bit light though, and it looks like it's more just at his side than it is behind him.
There's more shading on it than there is on his fist though, so it looks behind the point where his fist is, which is good. I've
said before that a single pixel can make a big difference, and now we're going to look at that:

So now you're probably thinking "What the...?" At first glance, all of those sprites look the same...But they all have one
pixel of difference...Check out the forwards fist. I'll explain what this one measly pixel can do...The basic fist in the first one
is just a round ball basically, no corner pixels. As a result it looks like a delicate fist, like someone with small hands would
have. You don't really know much about it, it could be rotated in any direction and you wouldn't know it changed. In the
second one, there's a corner pixel in the bottom left of the fist...Now the fist looks like it's dipping down pointing towards
his legs. He could even be wading through water or climbing over a rock or something with this fist because the point is
down...In the third sprite, the corner pixel is at the top left. Now it looks like he's pointing towards his face, but with a finger
because the bottom right pixel is still rounded which means it can't be an elbow since an elbow is pointed. So basically
he's going "Who, me?" in a way. The fourth sprite has the pixel in the top right and this makes it look sort of like he's
motioning "Come on and get me!" with his hand...He has no elbow and his fingers are up by his head but out a bit. He's
sort of doing an uppercut out to the side...or flipping the player off, heh. The last sprite has the pixel in the bottom right,
and now it look like an elbow because that's a natural position for the elbow to be in (in the other ones, like the third one,
you can't really mistake the pixel for an elbow because that would be extremely weird having the elbow up there, so your
brain assumes it's a finger or hand)...Now with the curve, the curve looks like a fist, opposite the pointed elbow...So now
he's doing an inward uppercut. Maybe starting out a dragon punch or something, heheh. Now that's just ONE pixel:

Here I start messing with two pixels...In the first sprite, he's got the flat side facing in. Two pixels make the fist look much
flatter, like maybe he's slapping or something...You know, so he's got a definate flat edge (a very tight fist maybe). in the
first sprite, he's got it inside and it just looks pretty normal. But say he wants to hold something like a vase up for everyone
to see his strength. So now he rotates his pixels to the top...Now his flat edge is on the top and it looks like he's holding
his hand up, and he could be balancing a pot or a lamp or something on it. In the third one he's got the flat parts out which
looks...well...pretty bad. Heh...The only way to justify this one would be if he had some sort of square armor forearm piece
and he's got his arm at the side, and you'd have to show that by color usage when you were doing the colors...For the last
one, with the flat side on the bottom, he could be playing basketball or something with that arm, or squishing someone.

www.yarrninja.com/pixeltutorial/chapter8.htm 3/5
4/28/23, 5:58 PM So You Want To Be A Pixel Artist?

Now this is all interesting and everything, but it's only TWO pixels, heh...Let's try out three:

Now three pixels does something different from two pixels. Three pixels starts to add "weight" to the fist...Where one pixel
is a delicate fist, three pixels starts turning into a hamfist, like an ogre or big tough blacksmith would have. In these
sprites, they follow the same look as the one pixel ones do, but now they look like big meaty hands, ready to crush
something. The last sprite, with all four corners filled in makes it look like a straight on view of the fist, as if he's punching
at you. Now we'll just take a quick glance at the other arm:

Now we're looking at the back arm, and checking out the pixels on it. In the first sprite, it has no corner pixels and it looks
like maybe a tentacle or something...A loose hand, I guess. No real definition...It acts pretty much like a tail, just flailing
there. In the second one, his fist in in towards his body, like he's flexing his muscles making a half circle with his arm. In
the third one, the pixel is on the outside and it makes it look more like his hand is way out to the side, unlike the one
before it where his hand feels closer to his body. The second sprite is like he's a tough guy walking around, and the third
sprite is more like he's running around with his arms swinging in a running pose. In the last one he's got a flat line for the
bottom of the fist and it looks like he's playing basketball again, or he's got a gun for an arm, some sort of armor, a large
hamfist, etc. Now to just look at the two semi-extremes for a second:

The guy on the left seems light and agile with his arms, not a lot of definition in the fists...The guy on the right is more buff
looking because he's got huge square fists going. Now you should understand what I mean when I say that one pixel can
make so much difference...That's what's interesting (to me) about working with small sprites like this. Juggling pixels
around to figure out how to change someone's expression or movement with just a pixel or two. A few pixels can make
someone look huge like an ogre, or dainty like a fairy. Those few pixels of difference make your sprites look different and
give them more life. This is why you can start with a dummy, but you have to make sure that you alter pixels on it to
change the feeling of the body. I just used the fists as an example for pixels, but you can change a lot with single pixels,
especially facial expressions. Work them them, play around and figure out what looks best for your sprite's pose. Practise,
heh...Practise a lot, and soon it'll become natural.

So we've got the starting sprite, but unless he's paralyzed or mindless, he's going to be wanting to walk around doing
something...even if it's just walking in random directions in a town repeating "Welcome to (name of town)!", heh. So now
we need a second frame for walking...This is generally pretty simple. On the left is our sprite right now, and in the middle
I've simply taken the area where the yellow line is and flipped it horizontally. It's as easy as that. Of course, the problem
now is that the shading has reversed, which means the sun is flipping from one side to the other in the sky. This is
obviously not good, so we just fix the shading up so it's coming from the same side as in the first frame. Now we have two
frames for this guy, and we can check out how he looks animated:

Now this is a simple 2 frame walking animation. When you're kicking around in low res with small sprites, 2 frames can be
enough to get the effect by. In the earlier Final Fantasies (on the Gameboy) the characters would be constantly flipping
between their two frames, even when they were just standing there. But let's say you don't want that...You want to have it
so your sprite will stop animating when the player isn't hitting any keys. Well with the setup now, you'll have to basically
tell it to just not alternate the frames, which means that whenever they've stopped moving, they're in a one leg forward,
one leg back type pose. It's not a big deal, as long as they don't look too strained or anything. Sometimes however, you
want a standing frame. So we'll throw one of those together:

www.yarrninja.com/pixeltutorial/chapter8.htm 4/5
4/28/23, 5:58 PM So You Want To Be A Pixel Artist?

To get this frame, I've simply taken one of the walking frames and put the arms and legs down. I gave him "bulb" hands
because they look more relaxed at his sides than if they were just 3 vertical pixels...That would make him look more like
he was in the army standing at attention or something. The problem with doing a middle frame for a 16x16 sprite is that
you've got that double column in the middle problem...You have to pick and choose where you want pixels to divide the
legs. I wanted them to both look like they were at the same point (straight below him), so I tried to give the same bit of
shading on them (2 horizontal pixels there). If I didn't have any light pixels on the leg on the left, it would look like it was
behind the one on the right. If I had too many, it would look like it was in front. So now we've got a standing frame that the
sprite can return to whenever the player isn't hitting a key. However there's another benefit to having a standing
frame...You can add it into the walking animation:

With a standing frame, you can smooth out the animation. Since a standing frame is basically arms and legs straight
down, they're already in the halfway point between the two walking frames. Now if you throw that in between and after the
frames you have (so you have 4 frames in total...left, center, right, center), you get a much more refined and natural
looking animation. 4 frames is generally the "standard" for doing a walk cycle. You could smooth it out further by adding
frames in between each so you're running around with 8 frames, but that's up to you. Working with small sprites it won't
make a load of difference, but if you had large sprites you might want to do it. If you animate the frames at the right speed
when you have 4 frames though, you can usually get away with it. Anyway, it's all a matter of preference.

Back to main...

www.yarrninja.com/pixeltutorial/chapter8.htm 5/5