Pixel Art Tutorial

[DinosaurNothlit]

Good morning class!

Ahem.  I have decided to share my knowledge of pixel art with all of you.  As many compliments as I have received on my own work, it might surprise you to know that I actually have very little in the way of artistic talent.  With pencil and paper, I can draw little more than stick figures.

So, if I can learn pixels, so can you!  If you have Microsoft paint (or any basic drawing program with a zoom tool, a pencil tool, and preferably a copy/paste option), and a mouse, you can draw sprites.

(I had absolutely no idea where to put this, so if putting it in General Fanfiction was wrong, could a mod please move it?)

EDIT: Images have been placed in spoilers, so as to cut down on loading time, and to make the lessons look a little less messy.

Before I begin, I have a couple of shout-outs.  First is to this lovely website, for teaching me everything that I know.  I will try my best to summarize and simplify those wonderful tutorials, but for the full experience, click the link.

My second shout-out is to CloakedFigure, who is the reason I'm making this tutorial in the first place.  He's working on animated versions of his RAF parodies, and is looking for artists to help him.  Consider that an extra incentive to learn about sprites!

Anyway.  On with the lesson.

Lesson 1:  Lines

If you can count, you can draw with pixels.  Lines (except vertical and horizontal lines) can be thought of as simple repetitions of numbers.  A 45-degree line is 1-1-1-1-1, 60 degrees is 2-2-2-2-2, and so on.

First step to making sprites: zoom in until you can clearly see individual pixels.  Sprite art does a lot of zooming and unzooming, as you zoom in to draw and then zoom out to make sure your work still looks good at normal size.

Anyway, a vertical line is made of, well, a vertical line of pixels stacked one on top of another, and a horizontal line is the same thing only on its side; simple as pie.  Lines at different angles are a bit more complicated, but not by much, as long as you think about it in terms of numbers.  Think of a diagonal, 45-degree line as a series of "one"s.  One pixel up, one pixel across.  A 30 or a 60-degree line is a series of "two"s.  Two-pixel blocks connected at their corners.  Let me show you what I mean.

[spoiler][/spoiler]

The first line depicted is vertical.  From there, you can adjust the angle by adjusting the length of the segments; the "blocks" of pixels.  The longer the blocks, the closer the line comes to vertical, see?  The second line shown above is 4 pixels up to every pixel across.  The third has blocks of 3 pixels, the fourth has 2, and the fifth has 1.  You can do the same thing, only at the horizontal end of the linear spectrum, by turning the blocks on their sides.  The last line shown in the picture above is another 2-pixel-block line, only approaching horizontal instead of vertical.

Basically, lines made of longer blocks approach horizontal or vertical lines, and lines made of shorter blocks appear as more diagonal lines.

A note: You don't typically want to use too many perfectly vertical or horizontal lines in your work, as they tend to look too 'flat,' and thus appear artificial.  Where possible, skew your lines just a teeny bit from the vertical/horizontal to appear more realistic.

Another note: Don't EVER use the line tool as a shortcut!  Computers have no program to count the blocks of pixels, so they will invariably give you a jagged and ugly-looking line (trust me, it only looks like a passable "line" from a distance).  The circle tool cannot be trusted either, for much the same reason.

Last note:  When working with pixels, be sure to ALWAYS save your files as either bitmap or PNG.  Anything else will cause you to lose some resolution, which, when you're working with pixels, means that the bulk of your hard work will be GONE.

Tomorrow's lesson will be about how to make a curve by thinking about lines as numbers.  Class dismissed.

[Darth Revan]

-Yay! I love our new teacher! She's cool.

-Yeah, dinosaurs make awesome teachers!



Thanks Dino, this is gonna be fun!


This might be better suited for the RAFproject board, though.

[Cloak]

Excellent, dino. 

CloakedFigure

Wow.  Formal.

My second shout-out is to CloakedFigure, who is the reason I'm making this tutorial in the first place.  He's working on animated versions of his RAF parodies, and is looking for artists to help him.  Consider that an extra incentive to learn about sprites!

I feel compelled to mention production probably won't start until sometime in November, when I get that microphone.  So, there's no need to rush anything.

[Darth Revan]

Good, time to practice!

Homework that actually might be fun to do! It's a miracle!

[goom]

great idea. +1

can't wait til tomorrow.

[DinosaurNothlit]

Alright, class, today's lesson is "curves."  We will be learning how to- Alright, who just whistled?  Oh, for the love of- not that kind of curves!

Ahem.  *glares around the classroom*  Next person I see misbehaving will be eaten, do you understand?  As I was saying.

Lesson 2: Curves

Curves, like lines, involve nothing more complicated than counting pixels.  Whereas a line goes 1-1-1-1-1, a curve goes 1-2-3-2-1.  Or, in the following example, 4-3-2-1-2-3-4.

[spoiler][/spoiler]

Curves are simple as long as you just remember to transition slowly from one angle to the next.  For a more rounded, flatter curve than the one I've shown above, simply lengthen each tiny section of 'line' that makes up the curve.  So instead of a series of blocks that goes 4-3-2-1-2-3-4, you have 4-3-2-2-1-1-1-2-2-3-4.

[spoiler][/spoiler]

You can make a curve as wide or as tight as you wish, so long as you remember to keep consecutive numbers next to each other.  What follows is what happens if you don't:

[spoiler][/spoiler]

See the sharp points where the angle changes from 1s to 4s?  This effect is much more apparent at low-numbered angles (when you get into blocks of 5s and 6s, this principle no longer applies, and you can feel free to have a 5-length block next to a 10-length block if you need to.  Just not next to a 2 or a 1-length block).

Sometimes you want those sharp points, though, such as when you're trying to draw something with sharp angles, like an elbow or a knee.  And the best way to do that is to have an abrupt angle change.  But an abrupt angle-change in the middle of what ought to be a smooth curve can be jarring.  The key is to know when you want a smooth curve, and when you don't.

The good news is, that any unsatisfactory curve can be fixed just by subtracting a few pixels here and adding a few pixels there.  The right-click button on your mouse is great for that when using the pencil tool in paint.

[spoiler][/spoiler]

The blue squares represent pixels that I'm adding, and the grey squares are pixels that I'm taking out, and viola, there's our nice, smooth curve again!

And you can also add/subtract pixels to change the shape of any curve you don't like.  Let's take that curve from two pictures ago, and make it just a touch wider and flatter.  To do this, you add pixels on the inside edge, and take away pixels on the outside edge.

[spoiler][/spoiler]

Ta-dah!  A wider and flatter curve.  You can do that whenever you need to adjust the shape of a curve; just add a bit here, take away a bit there.

I find this process great for doing outlines.  You need your figure's forehead to be more rounded, or their knees to be not quite so sharp?  Make it so with just a few easy clicks!

And as long as you remember this idea of lines and curves as numbers, you can make just about any shape you can imagine.  Even this one:

[spoiler][/spoiler]

And geometry's favorite shape, the circle:

[spoiler][/spoiler]

As both of these shapes demonstrate, when making any kind of curve, you have to change direction slowly.  This means not changing the numbers of the lines too quickly, but it also means no sudden reversals.

[spoiler][/spoiler]

In this picture, the first curve goes 3-2-1-1-1-1-2-3, but it is still wrong, because the line reversed direction too quickly.  The second curve is smoothed out, with no abrupt reversals, and looks better (for what, though, I'm not completely sure).

And, once again, sometimes a sharp point is what you're trying to draw, in which case a sudden change of angle is exactly what you want.  And that's quite fine.  I only want to teach you how to avoid it when you don't want it.  I figure I don't have to teach you how to make a sharp point.

There is something I want to point out, however.  Sometimes an abrupt change of angle does not make a point that's sharp enough for what you're trying to draw.  In such cases, it is helpful to add a pixel or two on the outside of the outline (this is especially useful when drawing claws).  A couple ways of doing this are shown below (but these are not, by any means, the only methods of making something appear sharper).  The first one shown is a bare outline, and not nearly sharp enough.  The second is better (and probably good enough if you're drawing a sword), but the third one is best if you're trying to draw a claw.

[spoiler][/spoiler]

Now you have all the information needed to make an outline of any object!  In my next lesson, we will learn how to quickly and easily shade that outline.

Anyone who brings an outline to the next class period gets extra credit.  You may pick anything you like, and if I like it, I may raise your current grade by a full letter.  Class dismissed.

[goom]

nice work. i'll be sure to practice this.

[Darth Revan]

This is cool.

[DinosaurNothlit]

(Apologies in advance to anyone who doesn't have Microsoft Paint.  That's what I have, so that's all I can really teach how to use.  The methods would stay mostly the same, it's just that you might have a little more work ahead of you to figure out your own ways of doing things.)

*taps ruler to get everyone's attention*  Pay attention today, class, for today is when we learn the most fun part about pixel art.  The outline was the hard part.  Shading is the fun part.

Lesson 3: Shading

First off, let's start with the outline of the circle I showed you in Lesson 2.

[spoiler][/spoiler]

To color it, we must, first, select at least four different shades of whatever color we wish it to be.  An outline color, a shadow color, a mid-tone, and a highlight color.  You may use upwards of five or six shades if you wish to make your object look a little more detailed, but four are all that is required, and four is all that I normally use.

A few notes about colors.  If you wish your object to appear shiny, choose colors with lots of contrast, especially for the highlight color.  A nice bright highlight gives a very metallic-looking glint.  A grouping of shades that are closer in tone to one another will give your object a dull, earthy sheen.  Choosing different colors for each (a green outline, blue mid-tone, purple shadow, and pink highlight, for example) can sometimes give your object an iridescent look if you pick the colors right.

Also, if you've chosen shades that don't look quite right on the final, shaded object (maybe the four shades you've chosen make your object look too 'blue', and you want it to appear a little more 'green', for instance), most of the time you don't need to change all four colors.  Selecting a new shadow or highlight color is often sufficient to shift the color of your object to what you want.  Changing all four might end up taking your color too far in the other direction.

And as for where to get colors, there are three steps which will be covered in more detail in a bit.  Step 1: Find the picture you like, which has the colors you want, then right-click, click "copy."  Step 2: Open paint and hit "paste," then drag the pasted object so that it doesn't cover up the object you want to color.  Step 3: Select the four shades you like, and color in squares of each color so you don't forget.

Now, it may surprise you to learn that my personal favorite source of colors has always been Pokemon sprites.  I like using Pokemon because most of them are colored with only four or five shades to begin with, and they make it easy to see how each color scheme looks on a finished object, so you can very quickly tell which shades you like.  And, besides all that, there's a Pokemon out there with just about every color imaginable, so you certainly aren't lacking for options.  A good site to copy and paste Pokemon sprites from can be found here.

Okay, let's begin.  We have our shape.  Now let's select a picture to copy and paste next to it:

[spoiler][/spoiler]

I have decided I like that greyish-white color that Nidorina has, so that's what I'm going to be using to shade my sphere.

Now, to separate the shades:

[spoiler][/spoiler]

Make four squares, and extract each color with the dropper tool, then color in one of the squares using the paint bucket tool, so that you can keep track of your colors.

Hint: You should typically use the lightest shade you can find as your highlight color.  Second-lightest should be your mid-tone, and so-on.  You should not use pure white as your highlight, as it makes it hard to put one object in front of another without the back object showing through (but we'll cover that later), and you should not use pure black as your outline color because it tends to make your outline too dark, which makes it look cartoonish (this doesn't apply when you're actually coloring an object black, of course, since your shadow and midtone will be so dark that the black outline will be un-noticeable).

Next step.  Re-color the outline from black, to your outline color.

This can be done by selecting the dropper, right-clicking on the square containing your outline color, selecting the dropper again, and then left-clicking somewhere along your outline.  Then you can select the eraser tool, and hold down the right mouse button while moving the eraser over your outline.  This will erase the black of your current outline and replace it with your outline color.

I've just done this, and my circle now looks like this:

[spoiler][/spoiler]

(For convenience, I'm including a real-size version of the circle from now on, so you can compare the zoomed-in version with the actual version you see when you zoom out).

And, FYI, the eraser method for changing colors that I've described above can be used to quickly and easily change any color to any other color, which is great for when you want to test how different color schemes will look on an object.

Next step.  Use the paint bucket tool to fill your object with your mid-tone.

[spoiler][/spoiler]

Here's where it starts to get a little tricky.  Select your shadow tone.  Think about how you want to show light hitting your object.  I, personally, almost invariably depict my objects with a light source that shines from overhead and to the left, which means that I put my shadow tone just inside the bottom and right edge of my outline.  Like so:

[spoiler][/spoiler]

You should always work from the corners of your outline, at the points where the blocks connect.  Shading looks smoothest when it covers up the jagged corners of the pixellated outline.  Usually, it's good to continue the shadows so that they follow parallel to the edges of the blocks of the outline.  Like this:

[spoiler][/spoiler]

Most of the time, I stop there.  If that isn't enough, however, you can keep building your shadow outward.  Keep in mind at all times that the line of shading should follow your outline, and therefore, if your outline is curved, so too should the shaded regions be curved.  And curved shadows follow the same principles as curved lines.  Counting blocks and all that.

As I build my shadow outward, I wind up with this:

[spoiler][/spoiler]

In order to blend the shadow tone gently into the mid-tone, sometimes it is necessary to use a checkerboard pattern of pixels to blend colors between the two.  This is known as cross-hatching.  Like so:

[spoiler][/spoiler]

The cross-hatched area should more-or-less follow the same general curve as the shadowed area.

Note: Most shading doesn't require cross-hatching, and those that do usually don't require more than a row or two of cross-hatched pixels.  It is most useful for shading large or heavily rounded objects, or for giving an object a dull or clothlike texture.  Cross-hatching should be avoided when shading shiny or metallic objects, except when the object in question is so large that it is absolutely necessary.

After you've finished filling in your object's shadowed part, use your shadow color to replace the part of the outline that your imaginary light is shining on, to lighten part of the outline itself, which will make your object look less cartoonish.  For me, this means re-coloring the top-left portion of the outline.

[spoiler][/spoiler]

Note: Sometimes, especially when you're using shades with high contrast, using the shadow tone is not enough to lighten the outline.  In those cases, the mid-tone can be used instead.

Now it is time for the highlight color.  Use it to lighten the part of your object where the light is hitting.  In my case, the top-left.  This should be right next to the area where you just re-colored the outline in the previous step.  Highlights follow the same principles as shadows.  Build outward from corners, and extend the highlights parallel to the blocks of your outline:

[spoiler][/spoiler]

And fill in if you need to, keeping the outline of the object in mind:

[spoiler][/spoiler]

We're almost done!  Now you just blend the highlight color into the mid-tone, using the checkerboard pattern, just as you did with the shadow.

[spoiler][/spoiler]

Congratulations, you are now ready to shade any object!  Wasn't that fun?

In my next lesson, I will apply the principles of outlining and shading to a somewhat more complex object, so you can review and see my process in more detail.

But first, I will take suggestions from my students for what I should draw.  Any ideas, class?  Something simple enough to make an example of, but complex enough to show my technique.  And I'd prefer not to re-do anything I've done before.

[goom]

how about a tutorial for making heads?
or bodies?

or am i jumping the gun?

[DinosaurNothlit]

Yeah, I could do a basic human sprite as the example in the next lesson.  I wasn't really planning to teach heads and bodies as its own lesson, because everyone has their own style when it comes to drawing humans, and I didn't really want to pass on any of my bad habits to everyone else, heh.

But if that's what you want, then that's cool by me.

[Darth Revan]

Yeah, something to get us started, and if we find our own style, great!

[DinosaurNothlit]

Sorry about the hiatus, students.  I was finding it a bit hard to break down my process (since so much of it has begun to become simply intuitive to me at this point), but I think I've finally got something.

Be warned, this lesson is a bit long-winded.

And so, without further ado, I present:

Lesson 4: Outlining a Person (AKA Ron Weasley: Part 1)

For this lesson, I'm going to show you a basic run-down of how to outline a person.  A few of the pointers I give here might also be carried across to outlining lots of non-human creatures, so pay attention!

I tried to pick a recognizeable person to demonstrate my technique on.  It was originally going to be Harry Potter, but he turned out looking more like Ron, so I decided that Ron doesn't get enough fan-art done for him anyway, so now it's Ron.

Anyway, let's get started on Ron!

First off, we make an outline of a bald head.  Round off the top by using 1-pixel lines on each top corner, like so.

[spoiler][/spoiler]

The face should just be a flat surface when working at this scale.  Trust me, anything you do to that outline (even if it's only one pixel) will seem to stick out too much, and will probably look silly.  There are a few, very few, cases when you need to have something sticking out, but most of the time, a flat line will do.

The neck should be an indentation of about two pixels in length (for a more burly person, you might use just one pixel), and it should actually be lower in the front than at the back (by a difference of about 1 pixel).

Feel free to play with different head shapes and sizes, as well as different shapes of the shoulders (changing the size of something you've already drawn, without backtracking, is a process that will be covered in more detail shortly).

[spoiler][/spoiler]

Adding another pixel forward from the front of the shoulder tends to make it look like the chest is sticking out (as seen in the top picture shown above).

Anyway, I think I like the first head-shape I had, so we'll go back to that one.

An eye at this scale is only one pixel in size, touching the front line of the face, and about midway down the face (if your face is an even-number of pixels, however, then the eye should be just above the midline).

[spoiler][/spoiler]

Next, we draw the chest.  Continue the lines of the shoulders and back straight down, with an inward break on the front side to hint at the bottom edge of the rib-cage.

[spoiler][/spoiler]

It's important to remember the basic shape of the rib-cage, no matter what kind of creature you're drawing.  You don't usually need to off-set your line by more than a pixel to show that the rib-cage is there, but it's still important to remember that it is there.

Also, remember to modify this basic design for if your guy is leaning slightly backwards or forwards, or if he has a different build than I've shown here.  For example, you might want to have a rib-cage that is more prominant (like if you're drawing a burly guy) or less prominant (like in the case of a fat guy, whose rib-cage might be more obscured).

Of course, you also have to keep in mind a bit of basic anatomy that can be found in the general rib-cage area if your subject is female . . . but I don't think I need to explain how to draw that.  Just remember the lesson about curves.  

One last note about the torso.  When your subject is leaning, just keep in mind the principle of angles being represented by numbers that you learned in the first lesson, and you should be fine.  In other words, use constant angles for straight surfaces, no matter what angle they're at.  And a person's back will usually be at a constant angle (the front of the torso should be as well, although to a lesser degree).

Okay, next step, the legs.  Or, well, leg.  Since you're drawing in profile, you only have to draw one!

[spoiler][/spoiler]

Notice the first offset along his back.  This should be at about where his butt is, since most people's butts protrude slightly (and don't think I don't hear you giggling back there in the back row!).

Then, at about where his knee should be, I've put an offset in both lines.  This is optional.  I tend to do this, because straight vertical lines don't ever look as good in sprites as slightly-offset ones, but if your person is, say, standing at attention, their knees probably should be locked in place.

To make legs bent, just as with a leaning torso, keep in mind the principle of angles as numbers.  Make their upper leg one angle, their lower leg another angle, changing angle at the knee.

The length of the leg varies somewhat depending on who you're drawing, but the width is almost always around 4 pixels across (including the outline; 2 pixels across if you don't include the outline).  Thinner than that usually looks too skinny, and thicker than that is probably going to look too fat.

Next, the foot.  Easy as pie.

[spoiler][/spoiler]

Just have a part that protrudes by two or three pixels, then a slanted part, then of course the flat part on the bottom.  And, of course, the shape of the foot can vary by quite a bit, depending on the person's shoes, species, and foot size, so just play around with it until you get something you like.

Okay, I mentioned earlier that I was going to explain how to change the size of things.  In MS Paint, there is a little box tool in the top-right corner of your toolbox.  That is the "drag" tool.  You can use that to "highlight" any object you want to move from one place to another.  Aside from the pencil, this is probably the tool I use more than any other.

Use it to highlight either the feet, or the head, of your person, like so:

[spoiler][/spoiler]

(You can't actually have two drag-boxes active at the same time, but I just drew it that way for simplicity's sake).

To make your guy shorter, move the head straight down, and then move the feet straight up.  Or, if your body is at an angle, rather than moving straight up or straight down, just make sure you follow the angle of your lines.

To make your guy taller, move the head straight up, and the feet straight down.  Then just use the pencil tool to re-draw the lines in the gaps left behind.

This method can actually be used to re-size lots of things.  Just use the drag tool, and bisect the thing or part of the thing that you want to re-size, and "stretch" or "squish" it.  You can re-size things horizontally or vertically, too.

A side note: the drag tool is also super-handy for changing angles.  Just use it to drag part of your figure to the side, then fix any inconsistencies that causes, re-connect any broken lines, and presto!

The next step is to draw the arm.  I usually draw arms (and, for that matter, any limb that is not a direct continuation of the torso the way human legs are) separately from the body, and then re-attach them later.

A quick note: when drawing a creature with a tail, I treat the tail as the continuation of the torso (instead of the leg), and so then I draw the legs separately and attach them later, as well.

Anyway, arms.  The arm should not be much more than about 3 pixels across (including the outline), but, as with legs, length can vary.

I begin by drawing a "tube" of pixels, with a change in angle that denotes the elbow.

[spoiler][/spoiler]

The hand is basically just a vaguely hand-shaped blob.  Don't try to draw individual fingers at this scale.  It can't be done, and it will look ridiculous.  Rather, just outline the very most basic shape of a hand.  I can't really give directions on how to do so, because every hand I draw looks different from every other one.  It all depends on what shape the hand is being held in, what angle it is seen at, and so forth.  Just fiddle with it until it looks right to you.

[spoiler][/spoiler]

Here's an early attempt of mine.  But then I realized that the arm was too long, the hand was too big, and the elbow wasn't noticeable enough.  I added another pixel to the elbow to make it stick out a little more, and shortened the hand and arm.  Oh, and I added a wand, because don't forget this is Ron I'm drawing.

[spoiler][/spoiler]

Next, you overlay the arm over the torso using the drag tool (making sure that your overlay settings are set to "transparent," which is the second option of the two options at the bottom of your toolbar.  There should be two little pictures of colorful shapes, and you click the bottom one.  And also make sure your "right-click color" is set to white):

[spoiler][/spoiler]

Then you erase the line where the outline of the torso shows through, and you wind up with this:

[spoiler][/spoiler]

Next step is hair.  When drawing hair, forget everything you learned about curves.  Hair is not about curves.  Unless you have really, really, really long hair.  Or perhaps an afro.

Even wavy hair can be depicted by alternating 2-pixel-blocks.  And, most of the time when I'm drawing hair, I will have 1-pixel "bumps" protruding, just to show some roughness.  Because hair should usually be a lot rougher than skin.

Anyway, draw the top of the hair and the hairline along the head around the outline of the top of the head.  I've done this in blue:

[spoiler][/spoiler]

Every hairstyle is different, so once again, I can't really give you any hard-and-fast rules for drawing hair.  Just play around with pixels until you get something that looks like the hair you're trying to draw.  Use one-pixel bumps to make hair that "sticks up" and use alternating pixels to denote wavy hair (2-pixels for wavy, 1-pixel for spiky).  Yeah, I think that's about all the advice I know how to give.

After you've drawn some hair, you take out the pixels (shown here in grey) where the hair covers up the outline of the head:

[spoiler][/spoiler]

And you wind up with this:

[spoiler][/spoiler]

Most of the time, you won't get it quite right on your first go.  I had to tweak Ron's hair a bit more after I thought I was "finished."  And I finally got to this, which I was finally happy with:

[spoiler][/spoiler]

When "tweaking" hair, just keep in mind that you put in one pixel at a time, and take one out.  This part will have you zooming in and out like crazy, but that's necessary if you're going to keep checking that your guy's hair looks okay at normal pixel size, and then to zoom back in to work on it some more if it doesn't.

Okay, last step.  Clothes.

When drawing my Animorphs characters, in a way I had it easy because all their outfits are skin-tight.  So all I had to do was outline the neck-line, pants-line, sleeve-lines, and cuff-lines, and that was their clothes.

For Ron, here, though, I wanted to show something a bit more complex.  Wizards in Harry Potter wear robes, after all.

I've made an outline of Ron's robe in blue:

[spoiler][/spoiler]

Just a few pointers on loose-fitting clothes.  Keep in mind how the clothes will hang around a person.  Sleeves should 'fall' down a bit below the line of the arm in such cases.  And cloaks usually curve slightly backwards to the ground, as I've shown.

[spoiler][/spoiler]

And then I erase the covered-up lines and:

[spoiler][/spoiler]

Ta-da!  It's Ron!

Please note that there's a reason that I drew Ron's figure before drawing his clothes on him.  And no, it wasn't so you all could gawk at a nude pixel-figure (and that's more than a little creepy if you actually think that it was).  It was because, if you don't do it that way, you could wind up with clothes that are smaller than the person underneath them is, or that hang wrong, or that defy basic rules of anatomy.  You could very easily get something about your person's basic figure screwed up and never know it, and then not be able to fix it when you do notice it.

Our next lesson will cover how to shade Ron.  If anyone else wants to jump the gun and go ahead and shade him, all of you already have the information needed to do so.

[spoiler][/spoiler]

Class dismissed!

[DinosaurNothlit]

Wow, it's been a while, class.  I sort of, well, forgot all about these tutorials for a while, actually.  I bet you all thought I was never going to finish them.

Haha, you can't get off that easy!

Although, in a way, it's actually a good thing that I forgot about this for so long.  In the meantime, I actually learned about a new method of shading (and one that is actually more widely used in pixel art than my usual method), so therefore I can now teach both!  Oh, don't groan like that.  Learning is fun!

Lesson 5: Shading a Person (AKA Ron Weasley, Part 2)

Let's start with the outline I made before our little vacation.  Do you all remember Ron Weasley here?

[spoiler][/spoiler]

Now, to color him, I have selected a few pokemon, as is my usual method.  The Krabby and the Ninetales are both for his skin-tone.  At first, I spotted Krabby and thought it would make a good skin-tone, but as it turned out, that color scheme ended up a little too dark.  So I used Ninetales, which has a slightly lighter highlight.  I used Ninetales' lightest color as the highlight for Ron, and then Krabby's lightest color as Ron's mid-tone, Krabby's second-lightest color as Ron's shadow tone, and so on.

You'll often have to experiment like that if you want to find just the right color for something.  A lot of times, I can't find just one object that exactly matches the thing I want to shade, so I mix and match different tones until I get what I want.

The hair color and cloak color were easier.  I used Seviper's black for the cloak, and Chimchar's orange-red for Ron's hair.

Okay, now let's start coloring.  Begin by filling in the outlines with the mid-tones:

[spoiler][/spoiler]

Then, re-color the outlines with the outline colors.

[spoiler][/spoiler]

Then, color the forward-and-upward edge of each area with the highlight colors, cross-hatching where you need to.

[spoiler][/spoiler]

I made a little vertical dotted line of highlight towards the bottom of the cloak, to imply the texture of a fold.  Which probably won't even be visible in the final picture, but I put it there anyway because I'm silly like that.  

You'll notice that I didn't really color the hair's forward-and-upward edge.  With hair, what I like to do is shade it sort of randomly, making sure the top and forward edges are generally more highlighted than the rest.  This tends to give it a 'rougher' texture, and serves to make it look more like hair.  Although, Ron has so little hair that it probably didn't make much difference anyway.

Anyway, then you color the back-and-downward edge of each area with your shadow color.

[spoiler][/spoiler]

Finally, color the front edges of the outlines with your shadow color.

[spoiler][/spoiler]

And that's it!  There's Ron.

Now, I mentioned earlier that I'd recently learned a new method of shading.  The one I just showed you is the one that I typically use, but most pixel artists actually use this next one.

Okay, so let's rewind a bit.  Back to when we had Ron filled in with his midtones, and his outline was colored with his outline color, and we hadn't done any shading yet.

*hits rewind button on a remote*

Ah, here it is.

[spoiler][/spoiler]

Okay, this time, put the highlight tone right down the middle of each area.  Depending on the shape of the area in question, this may end up more of a line, or more a blob.  For long and skinny areas, just draw a line of highlight somewhere down the middle.  For wide and round areas, put a blob of highlight in the middle (rounding the edges of the highlight using the rule of numbered curves, of course).  For funny-shaped areas, just have the shape of the highlight roughly mirror the shape of the area you're shading.

For limbs, you can put small blobs of highlight at elbows and wrists instead of lines down the entire arm, but this is optional, and tends to give a more 'muscular' look.  I have therefore not done it this way for Ron.  I just put a line of highlight down his arm.

Some areas are too small to put highlight down the middle (Ron's hand and foot are each two pixels wide), so you just have to pick a side and put it there.

Anyway, after doing all this, Ron looks like this:

[spoiler][/spoiler]

Then, you use the shadow tone to shade next to the outline on ALL sides, being sure to leave a little area of mid-tone in between highlight and shadow (mostly).

[spoiler][/spoiler]

Finally, trace over the outline with the shadow tone in any area where your highlight ends up coming too close to the outline.

[spoiler][/spoiler]

And there, you're done!  You now know not one, but two ways to shade a person (and if you're good at extrapolation, to shade any object).

And, best of all, you can combine these two methods in varying degrees, and in such a way move your light source anywhere around an object!  Well, if you're feeling daring, at least.  Just shift your highlight closer to, or farther away from, the outline.

I think the next lesson is going to be our last.  *sigh*  Please restrain your enthusiasm, class.  You still have to pass your finals!

Sticking with our good friend Ron, here, our next and final lesson will cover how to move parts of pictures around to make animated frames.

Class dismissed!

[goom]

dang!!
nice work, dino, i'll be referencing this a lot. +1