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

[DinosaurNothlit]

Thanks for the karma!

Lol, I just noticed that I gave Ron bare feet.  I think I got so used to drawing Animorphs that I forgot that some people actually wear shoes.  

Ah, well, we'll just say that Ron encountered some magical shoe-eating section of floor somewhere in Hogwarts.  Probably one of Fred or George's pranks.

[DinosaurNothlit]

Okay, I admit it, I lied.  I said that there would be only one more lesson.  But, as it turns out, I forgot to give Ron shoes, which at first seemed like a mistake on my part, but then I realized I could use my mistake to teach an extra lesson.  How to shade a patterned, or multi-colored object.  Trust me, class, this is something I really really wish I had known.  Particularly at about the time I was working on Jake's smiley for the Smiley project.  It would have made those stripes so much less frustrating.  Ah, well, you live and you learn.

Lesson 6: How to (Easily) Shade a Multi-Colored Object

Let's start by re-coloring Ron's feet.  To do so, we need to find two Pokemon, one for his sock color, and one for his shoe color.  I've picked Silcoon and Starly, respectively.

[spoiler][/spoiler]

Now, do you remember the method I taught earlier for quickly and easily changing the color of an object?  In case you don't, I'll recap.

Simply get out the eraser tool, right-click on the new color you want to change something to, left click on the old color you want to change it from, and hold down the right-mouse-button and drag the eraser over your picture until everything that was the old color is now the new color.

Using this method, I will switch the highlight color of Ron's feet with the color derived from our Starly (which is actually the shadow tone of Starly's lighter-colored lower body, but that's beside the point):

[spoiler][/spoiler]

And now the mid-tone:

[spoiler][/spoiler]

The shadow color:

[spoiler][/spoiler]

And finally, the outline color:

[spoiler][/spoiler]

And next, we copy and paste the image of Ron so that there are two of them.  Like so.

[spoiler][/spoiler]

Use the same method described above to turn the second Ron's feet white.

[spoiler][/spoiler]

Okay, now you're ready to begin the patterning.  Simply erase the areas in the first Ron's shoes that you wish to be white.  Use the pencil tool for this, and just select plain and pure white as your color to draw with, and that should serve to erase whatever you don't want.  Use the pencil to 'cut out' the pattern that you wish to appear in white, on the brown shoes.

When patterning an object, you can use either object as your 'base' and draw the pattern on the other; it doesn't matter which you use (unless one of them has any pure white as one of its colors, in which case cut holes in the other one, because any other colors will show through the white areas otherwise).  Just think of it as cutting holes in one sheet of construction paper, to be layered over another.  The other color will show up wherever you cut a hole.

Anyway, when we're done, we end up with this:

[spoiler][/spoiler]

Finally, select the first Ron with the select tool.  Make sure the 'clear background' option is highlighted (it's the second of the two pictures of colorful shapes, towards the bottom of the toolbar), and then drag the first Ron so he lines up perfectly with the second.  Always make sure you put the image that you've cut the patterns out of on top of the other one, or else the holes will get covered up and you'll just have a single-colored image.

[spoiler][/spoiler]

Ta-da!  That is the quickest way to shade an image that has multiple colors.  You can extend this technique to as many colors as you need.  Every time you want to add another color to your image, simply make a new layer, change its color, and cut the pattern out of it.

Our next lesson will be in animation.  I'll be showing the classic 'swish and flick' motion of the wand, as shown in the movies.  Goom, if you'd like, you are more than welcome to help me teach this lesson, and show the class how your side of the animation process works.  Which is something I'm also quite curious about, to be honest.

Then, after that lesson, because I just thought of another thing I haven't taught yet, I'm going to go into how I do morphing sequences, which will be a two-part lesson (outlining, then shading).  I've been meaning to draw a morphing sequence for James turning into a lion, anyway, so I'll just go ahead and turn him into an example.  Then I'm pretty sure we'll be done with this tutorial.  No promises, though.  I'll probably think of something else before then.

[DinosaurNothlit]

Good day, class!  We have an exciting lesson today, so I hope you've all studied!

Lesson 7: Animation!

Today, we will be animating Ron's motion of the wand, with a 'swish and flick' motion.

The first step to animating anything is to remove the limb that you wish to animate.  In this case, that limb is Ron's arm.  It's amputation time!

To do this, simply block off a piece of Ron that happens to contain his arm in it, and copy and paste.

[spoiler][/spoiler]

Then, erase the extra stuff surrounding his arm, so that all that's left is the arm.  Be careful not to erase too much!

[spoiler][/spoiler]

Now, before doing this next step, 'take a picture' of Ron as he is now.  In other words, copy and paste him somewhere onto your work area.  You'll need him later, for reference.

Okay, done?  Because now we are going to erase Ron's arm.

[spoiler][/spoiler]

Now, re-draw the part of Ron's torso that is missing:

[spoiler][/spoiler]

Okay, now we're ready for the tricky part.

First off, a note.  I have divided all these 'Rons' into different sheets, simply for the sake of showing you my process.  When I'm actually working on a picture, I tend to just copy/paste every step of the way, so that all my work is right there, where I can easily access it.  This is what I recommend.  Never make a change without making a copy first!

That said, let us begin.

Animation is all about changing angles by tiny increments.  You all remember the lesson on angles, right?  An angle is simply a number of pixels per block.

To change angles, what I usually do is select a bit of a picture, and move it a tiny bit at a time in the direction I want it to go.

[spoiler][/spoiler]

When picking a block to move, it's usually easiest to try and divide it between pixel-blocks, so that when you move the piece that you're moving, you wind up with a straight line.  It's just personal preference, though, because that method just happens to make all the shadows and highlights line up neatly.

[spoiler][/spoiler]

See?

Doing the same thing again, we then get this:

[spoiler][/spoiler]

Think of it a little like film.  Or if any of you have ever done stop-motion animation, it's a lot like that, too.  Each image captures a little bit of motion, so you have to move whatever it is you're moving just a little bit with each image.  Don't worry about saving too many images, because you can always throw them out later (and, in fact, that's exactly what I'll be doing at the end of this lesson).

Another thing to think about, is that a lot of times, when you change an image like this, you have to go back and edit by hand.  Don't worry, you don't have to re-draw the same arm fifteen times.  Just smooth out any lines that look rough after moving anything around (this is where the 'changing angles' part comes in; just keep in mind that fixed numbers equal straight lines, and counting numbers equal curves), and re-shade anything that gets its shading messed up.

In this case, it looks like his sleeve is too big.  So we'll make it a bit smaller before changing the angles some more.

[spoiler][/spoiler]

Then we shift the hand a little bit . . .

[spoiler][/spoiler]

Then we re-draw it a bit, to eliminate that little bump that looks like a thumb (thumbs are fine, of course, but if we have one in only one frame, then it will seem to appear and then disappear, which is not what we want).

[spoiler][/spoiler]

Then we adjust the arm a bit more by moving another 'block' . . .

[spoiler][/spoiler]

Then we move another 'block' and re-draw the sleeve.

[spoiler][/spoiler]

Move another block:

[spoiler][/spoiler]

Now, move another block, re-draw the sleeve a bit so that it hangs down like it did before, and change the angle of the hand.  I changed the angle of the wand, too, from 1-pixel blocks to 2-pixel blocks.

[spoiler][/spoiler]

Okay, now we've done the basic motion of the 'swish,' now for the 'flick.'

Just re-shape the hand from the first arm that Ron started with, and there you go.  The flick only needs to be one frame, after all.

[spoiler][/spoiler]

Okay, so assuming you've now got everything saved on the same page like I told you, your page should look like this:

[spoiler][/spoiler]

We've got one armless Ron, a whole bunch of arms, and the original picture of Ron that I told you to keep for reference.  I think that you don't need to see everything large-sized at this point, since most of the major work is done.

Now, we can eliminate a few of the extraneous arms.  We only need the ones that we can see a noticeable difference between.  All the others will just make the animation look slow and messy.

[spoiler][/spoiler]

Okay, next draw a box around your armless Ron.  Doesn't matter what size, but I like to leave exactly one pixel of white space under his feet (personal preference), and you need to leave enough room in front of him for his arm.

[spoiler][/spoiler]

Then, copy-paste your armless-Ron-in-a-box, as many times as you have arms.

[spoiler][/spoiler]

Then, using your original Ron as a reference, re-attach your Rons' arms.  Be sure you get the arm in the same spot in each frame, or else you will have shoulders that jump all around.

[spoiler][/spoiler]

You're almost done!  If you're lazy, you could probably consider yourself done.  Trust me, I was tempted to.

But, as we have it now, Ron is only moving his arm up and down before flicking his wrist.  What we want is more of a circular motion.  To move something forward and back (into and out of the screen), simply change the shading.

[spoiler][/spoiler]

The top row shown here is Ron moving his arm out of the screen, the second row is him moving his arm away from the screen.  All I've changed is the shading.

When he moves his arm into the screen, the light shines more brightly on his forearm, because the light source is in front of him, and thus the angle of his arm catches more light.  When he moves his arm out of the screen, the shadows are stronger, since his arm is now blocking the light.

So, to show his arm catching more light, simply extend the highlighted areas.  And to show his arm blocking light, extend the shadowed area.

Here's an example, to show what I mean:

[spoiler][/spoiler]

The first arm is coming out of the screen, and is thus angled to block light, and therefore the shadowed space is bigger.

The second arm is angled into the screen, and is thus angled to catch light, and therefore the highlighted space is bigger.

Then, once you've got all of your motion frames, you can begin to separate them.  Save your sheet as a new name, and then change the size of your page (using the knob in the bottom right corner).  Move your box up into the top left corner until the black edge of the box is just covered by the edge of the page.  Then re-size the page until the rest of the black edge disappears, and no more.  This will give you a consistently-sized page for each frame.

Then save it, and re-open the page you had before, and repeat until you have a page for each frame.

Note:  I always make sure to save a backup copy of the page I'm working on, because otherwise I might forget to re-name it before I change the size, and then all my work is gone.    So yeah.  Always save backups!

When you're done, you will have this:

[spoiler]

[/spoiler]

Et cetera.

Just to make things easier on Goom's end, I've recently begun making new folders for each animation sequence, and putting the frames in there.

And once I've done that, I take my folder and right click it, and click "Send to" then "zipped (compressed) file."  Then I upload that zipped file onto our RAFsmiley picture drop site, and then Goom takes it from there.  Goom?  Would you like to take over the class for a bit?

[spoiler=For Goom]I've uploaded the frames to the drop site for you.  The sequence should go 1-2-3-4-5-8-7-6-1-9, with a 1200ms pause on the first frame 1, and a 400ms pause on the second frame 1, and looped.  Let's run the 'swish' a little faster than usual, and let's make frames 2, 3, 4, 6, 7, and 8 go at 70ms instead of the standard 100ms.[/spoiler]

[goom]

your wish is my command.
here's ron.

and an animated tutorial.. (let me know if it's too fast.)

[DinosaurNothlit]

The animated tutorial is great!  One thing, though.  You should probably slow down the frames that have more text, and speed up the ones with less.

What's the frame-rate you're using?

[goom]

The animated tutorial is great!  One thing, though.  You should probably slow down the frames that have more text, and speed up the ones with less.

that's what i tried to do.

open the file in gimp and you can see for yourself.

[DinosaurNothlit]

Okay, class, I'm sure this is the lesson you've all been waiting for!

Lesson 8: Morphing (part 1)

Today we will be learning how to draw the outline of a morphing sequence.  I've been meaning to make a James sprite anyway (remember James, of the Auxilary Animorphs?  No?  Oh, well, he morphs a lion, and that's all you need to know), so I figured I may as well make a lesson out of him!

First, draw your human outline.  You should already know how to do this, so I'll skip the details.

[spoiler][/spoiler]

Next, draw a lion.  I usually start with the head.

[spoiler][/spoiler]

Most animals have a more protruding face than a human, so don't use the flat line that you would use for a human face.  Of course, all animals are different, but most have a sloped forehead and a protruding muzzle of a variable shape/length.  Just play with shapes until you find one that looks right.  And feline heads are the hardest of all.  I have to admit that even this one doesn't look all that catlike to me, and this was the best I could do.  So, uh, don't follow my example on this one.  Go look at a cat!

Anyway, next, draw the body.

[spoiler][/spoiler]

You can get a pretty good idea how to draw most animals' limbs just by looking at your own arms and legs.  Almost all earth vertebrates have the same basic joints.  Cat front legs bend the same way as your elbows.  And the hind legs are just like yours, except with the knee and ankle joints moved up a bit towards the hips.

Note: certain hooved animals, like horses, have 'elbows' that bend backwards compared to yours.  Watch out for that, I've gotten tripped up by those.  Stupid horses.

And the tail, of course, is just two gently curving lines with a little bit of space in between.  Some animals have tails that narrow to a point (such as lizards, kangaroos, and Andalites), so simply diminish the amount of space between the lines as you get closer to the tip.  Cats don't have this issue, since their tails are about the same thickness all along their length.

Okay, so this guy doesn't exactly look like a lion yet?  Easily fixed.

[spoiler][/spoiler]

Ta-da!  Added a mane, and that little tuft at the end of the tail.

Okay, so now we have a lion and a human.  Next step is to put a box around them.  Start with the lion, because he's the bigger one, so he's the one we have to allow the most room for.  Be sure to allow room all around him, for any additional moving around he might end up doing.  Always be sure to allow room for him to stand up, because he may actually end up at his tallest in mid-morph, when he's standing up like a human, but still as big as a lion.  Rachel did this when she was turning into a grizzly bear, and nearly broke out of her frame.

[spoiler][/spoiler]

Then, copy-paste and erase the lion, so that you have a second box.  Make sure you've marked where the back of the lion's hind foot was in the box, so that you can line that spot up with the back of the human's hind foot.  This is so he doesn't jump around the frame while he's morphing.

[spoiler][/spoiler]

Okay, now we start in with the fun stuff.  The actual morphing sequence.

I want to note that, when I first started doing these, I would take the 'mid-point' of two forms, and drawing a half-way form, and then a half-way form of that and the end form, and so on.  DO NOT DO THAT.  It takes much much longer, and the end result is rough and terrible-looking.  I will show you what to do instead.

Choose one of your forms to work from.  I usually choose the more complex form, since it's easier to simplify than to complexify.  So I'm going to work from James's lion form.

Copy and paste the form you're working from:

[spoiler][/spoiler]

Here's were it gets tricky.  Take note of everything that has to change during your morph sequence.

In this example, since he's going from quadruped to biped, the torso changes angle.  The limbs get thinner and change angle slightly, and the shoulder shifts position.  The tail must disappear.  The face must shrink.  And the mane shrinks such that it leaves behind only the hair on the head.  Alter your lion image to take each of these changes into account, just slightly.

[spoiler][/spoiler]

You remember how to change features of your picture, right?  Just select the part that needs to be moved around, move it just a little bit, and fix any lines that get messed up in the process.  Refer to the lesson in animation to brush up on this concept.

Although mid-morphs do tend to look a little ugly (which, of course, is not only okay, but is even canon), keep in mind that the angles and curves still need to look good.  Anything that bends the wrong way, or has a jagged edge where it shouldn't, will stand out in the finished animation.

Just keep counting pixels for those curves, and keep angles constant (well, mostly.  Sometimes you can get away with cheating a bit, but ultimately you have to be the judge of your own work.  Every case is different).

Anyway, next step is to copy and paste the new frame you just drew.

[spoiler][/spoiler]

Then, you just do the same thing again.  Note every detail that needs to change, and gradually work your way there by changing each thing a bit at a time.  I'm afraid I can't really give much in the way of catch-all advice, since every morph is so different.  Just make sure you take note of how each thing changes.

[spoiler][/spoiler]

And I find it fun, because I get to choose how the morph goes.  If you have a morph that grows extra heads, for example, it's up to you whether the extra heads 'split off' from a central head, or whether they emerge as growths on the neck.

For example, in the case of James, I'm choosing to morph his mane into his hair.  I could just as easily have made his mane retract, and then had his hair grow back.  Such are the sorts of decisions you can make.

[spoiler][/spoiler]

Now that he's standing in a nearly human pose, I'm going to start moving the arm back a bit, because I noticed that it's much farther forward on the lion than on the human.

[spoiler][/spoiler]

I typically use nine frames, which was originally because of my silly 'mid-point-method' that I used to use, but as it turns out, nine frames is a good number to go from just about any form to any other.  I'm mentioning this simply because you should always keep that number in mind.  Nine frames to go from one frame to another, so seven frames of mid-morph.  Or however many frames you want to use.  Just keep in mind, so you don't end up changing a frame too much or too little at a time.

[spoiler][/spoiler]

Of course, you can always go back once you've got the sequence done, and fix things up to correct for those 'timing' errors.  I just prefer not to, if I can help it.  I have enough experience under my belt that I can estimate pretty well just how much I have to change each feature, but sometimes I have some trial and error, and that's fine too.

[spoiler][/spoiler]

At this point in the sequence, as you're getting closer and closer to human, it's very important to keep your human frame handy for comparison.  Make sure everything lines up, and that nothing reverses direction.  If his arm moved up in the previous frame, make sure it doesn't go back down again from this frame to his human frame.  Everything needs to be smooth.  Direction reversals look terrible in the animation.

[spoiler][/spoiler]

And there we go!  That's the last mid-morph frame.

Next lesson will be shading a morphing sequence, which is a little different from shading a normal object, because you have to shade the seven mid-morph frames twice and blend them together.  But we'll cover that later.

As extra credit, can anyone tell me at least five features that change in Tobias's morph?

[DinosaurNothlit]

Lesson 9: Morphing (part 2)

We'll start off with the frames we made in the last lesson.  I've actually made just a few changes here, since I realized that the ankle was a little too low, and the tail emerges too suddenly from the human frame.  Which helps me make an important point, actually.  When you do go back and edit your morphing sequence frame-by-frame, you must also edit any surrounding frames, so that nothing reverses direction or changes too suddenly.

[spoiler][/spoiler]

Copy and paste the sequence, because you will need to shade it twice.  Once, with the lion's color scheme, and once, with the human's color scheme.

I'm going to start off the shading with the lion half of the sequence (no particular reason, I just happen to like lions better than humans ).

[spoiler][/spoiler]

I chose Skuntank (the one that looks like a skunk) for the lion's body color, but it didn't go light enough, so I took my highlight color from Milotic (the snake-mermaid thing).  For the mane, I used Tauros.

Then, just use the bucket fill to color in the outlines, just like how we started off when we were shading Ron.  Don't worry about the fully human frame, since you obviously don't need to shade him with the lion color scheme.  All seven midmorph frames have to be shaded twice, but we'll get to that a little later.

[spoiler][/spoiler]

Now, you should know how to shade things at this point, but I'll enlarge the lion frame to show you how I shaded him.  I added a little 'roughness' to his mane by putting highlight in some areas but not others, and putting extra pixels of highlight and shadow here and there in their respective areas.  I'll cover fur textures more in-depth in my next lesson, which will cover specific textures.

You may have noticed that this lion only has two legs.  We will fix this now.

First, select and copy each of the lion's legs.

[spoiler][/spoiler]

Then, by selecting and moving the feet around, you can change the angle of the legs backward or forward.  This is so that the 'back' legs won't look like carbon copies of the 'front' legs.  It's generally advised, if you move a leg so that it's angled forward, you have it sticking out in front of the other leg, and the same if you angle it backwards.  Usually I try to angle both 'back' legs the same way, because it tends to look more symmetrical, but sometimes you can have poses where they're angled towards each other.

Here, I've angled the front and back legs towards each other, but I will later find that this doesn't look good, and change my mind.  But, for reference, the bottom two legs shown are the altered ones, and the top two are the unaltered ones.

[spoiler][/spoiler]

Then, drag your two-legged lion frame over one of his legs, so that he looks like he has three legs now.  Move your picture around until the legs look like they're aligned more-or-less naturally.

[spoiler][/spoiler]

Do the same thing for his remaining leg.

[spoiler][/spoiler]

Now, do the same thing with a few of the mid-morph frames.  With the mid-morphs, you want to gradually 'hide' the extra legs behind the body, because the human doesn't have them, so they have to go somewhere, right?  So, with each successively more-human frame, there should be less and less of the extra legs showing, until they disappear entirely.

Note: be sure to do this step BEFORE you shade any of the mid-morph frames, or you will soon end up having to do some very annoying back-tracking.

[spoiler][/spoiler]

Then, copy and paste any frames you've altered, and use the fill tool to make them white again, then replace the corresponding frames in the bottom sequence (which is going to become the human-shaded sequence) with the four-legged frames.

[spoiler][/spoiler]

Now we shade the lion sequence.  Cue time-lapse photography!

[spoiler][/spoiler]

Note: there should be some point, if an object changes angle, where the lighting changes.  Don't try to slowly decrease the highlight and shadow prior to the change.  Just pick a point where front-lighting over-rides top-lighting, and switch the highlight and shadow.  Do you see the frame in this sequence where that happens?  Take note of that frame, because you should shade your other sequence the same way.  It isn't going to look pretty if the highlight of one frame conflicts with the shaded area of the other, so make sure they match.

Now, it's time to shade the other side of the transformation.  First, as always, we pick our colors.

[spoiler][/spoiler]

Yes, yes, I know, Jake isn't a pokemon.  But I've been using the same skin tone for all the (caucasian) Animorphs so far, and I don't remember which pokemon I used, so I've just been using Jake as a reference.  Flygon supplied the red for the shirt, Marowak the brown for the hair, and Masquerain the blue for the pants.

So, first, we draw a few lines for the morphing suit.  Morphing suits are nice, that way; we don't have to worry about anything fitting like normal clothes should, since it's all skin-tight.

Anyway, you want to make sure that the lines of the morphing suit line up.  You don't want sleeves that jump up and down from frame to frame, unless the arm is moving with it.  Same with the pant leg, and the bottom of the shirt.

[spoiler][/spoiler]

You may have noticed that I deleted the brush at the end of his tail for the human-colored sequence.  This is because it is a feature that is completely lacking in a human, so how would you decide what color to color it?

I've done the same thing for Ax's tail blade when I was shading his human-color sequence, and for nearly every morphing figure's hair on their animal side, since most animals don't have hair.  In fact, James was the first morph that kept his hair through the transformation.

Don't fret, I always add those features back in again later, and I will show you how to do it when the time comes.

Then shade it just like you did the lion colored sequence, and there you go!  Fast-forwarded once again, of course.

[spoiler][/spoiler]

If you're lazy, I suppose you could just copy/paste, and change the colors using the method I've mentioned several times before.  But I never do this.  Why?  Because I like to have fun with textures, and I usually make the textures different from one form to the other.  For instance, in the case of James's human color sequence, his red shirt ended up being too shiny if I gave it a solid line of highlight, so I broke it up into cross-hatched pixels.  Also, I worry about the highlight being too strong if it overlaps completely, but, like I said, I've never actually tried it that way, so I might be wrong.

I made one last last-minute change, to fix the mane.  Which brings me to another point.  If you're still making changes after you've shaded everything (which I often do, since I'm such a perfectionist), make sure that you make any changes to both sequences, the lion-shaded one, and the human-shaded one.  If their silhouettes don't match exactly, then the next step won't work.

[spoiler][/spoiler]

There.  Now it's time to change gears a bit.  We will now be leaving the familiar territory of ms paint, and entering Photoshop.  In my case, Photoimpression 4.  But any program that allows you to create layers and alter transparency will work just fine.

[spoiler][/spoiler]

Upload your picture.  Then, go to Crop/Resize and use your mouse to crop out one frame, and make it into a new layer.  Do this seven times (one for each mid-morph frame, since you don't need to worry about the fully human or fully lion frames), and you will have this:

[spoiler][/spoiler]

You'll notice that I chose to copy the lion-colored frames rather than the human-colored ones.  There is a reason for this choice, and it is on the tip of his tail.  We'll need to keep the full-colored lion sequence, so that we can re-gain the color of the tail tuft.

If you accidently copied the wrong sequence (or, if both forms have a feature that disappears), then simply refer back to a previous draft of your work.  You've been saving copies of everything, like I've told you to, right?

Now, to line the layers up, put one of your frame-layers to half transparency, and line it up with its corresponding layer in the other sequence.

[spoiler][/spoiler]

If the outline looks blurred like that seen above, then it isn't lined up right.

[spoiler][/spoiler]

There you go!  A nice, clean, black outline is what you're looking for.

Next, move the slide-bar to about 7/8ths of the bar.  Accuracy isn't incredibly important here, but just make sure that each frame is successively more transparent than the previous one.

[spoiler][/spoiler]

Then, just do that with each frame, making the transparency for each one 7/8ths, 3/4ths, 5/8ths, 1/2, 3/8ths, 1/4th, and 1/8th, in that order.  Again, don't worry too much about getting it spot-on, just sorta guesstimate.  If you know about where 1/4 is and where 1/2 is, you'll be fine.

[spoiler][/spoiler]

Next, take a screen-shot.  You technically could save the photoshopped pic, and compress all the layers and whatnot, but taking a screen-shot of it is way easier.  Just hold Ctrl and press Prt Scrn.  Then paste the image (which should now be in your clipboard) back into paint, and just erase whatever you don't need.  You should end up with this:

[spoiler][/spoiler]

Remember what I said about needing to fix up the tail tuft?  Look at how it fades out as the color scheme goes from lion to human.  Now, we want it to slowly shrink and disappear, not vaporize into the air.  So here's what we do.  Simply copy, from the lion-color sequence, the parts of the tail that our old human-color sequence was missing.

[spoiler][/spoiler]

Now, drag those pieces over their faded-out counterparts.

[spoiler][/spoiler]

Ta-da!  All done.

The next lesson probably will be our last.  I know, you've heard that before, but now that I've taught morphing I'm honestly running out of things to teach.  The only things that I still know that you don't, are simply a few random textures.  Fur, feathers, grass, wood, glass, etc.  Besides, ten is a nice round number. 

Until next time, class!  Study hard!