2D Character Design - Side View

Going to make a quick tutorial on how to make a character for your 2D game. Won't include animating yet, but I'll run through the things you need to make in order to be ready for animating. This is going to be a very basic character, so it might not be perfect for your game.

I'm using Flash for this because it's well designed for my needs and I can make assets way faster than any other program.  Plus it's vector, which is good if you need to export for a game that requires certain resolutions. Also using a Wacom Intuos 5, if you don't have one, I highly suggest it but these assets you can simply make with pencil/paper and a mouse.

To Begin...

Start off with a sketch of your character, either directly in your program or by hand and scan it in. Make it simple. I sketch one basic sketch in light color and then make a more detailed sketch above that layer in a darker color.

We'll call him Paul.

Next we need to break him apart into different part so we can animate him easier. Depending on what you need, you might want your character in several body parts, but I will make this one very simple. For instance, I could make the arm into (hand) (lower arm) (upper arm) but instead I'll make it into one part.

Here we have a (head) (body) (arm1) (arm2) (leg1) (leg2). There are 2 different arms and legs so we can use the bent ones for run cycles or if the character isn't standing straight up. Later on it'll make more sense. In total we need 6 assets for this simple design, so let's make them.

The Assets

Color isn't important when you start this part, use grey and choose colors later.

• First part is easy, mostly using circles. I gave the head a little depth by using 3 shades + an outline to make it stand out. Then I filled it with a skin tone. Outline I used a less saturated skin tone.
• For the hair, you can use the line tool to make the basic shape, fill it and start dragging the edges to make it more curved. Use the line tool again to add some highlights and other colors.
• Eyes are easy. Mouth and ear I used the same principles as the hair, line tool is very useful to make the shapes you need while keeping vertices low and the image clean/crisp.
• Compose it all together and you have a head finished (probably the hardest part done). I added an outline for the hair so it stands out better
• For these parts, I used a few tricks that you might want to try out also. I listed them at the end of this tutorial.

Be mindful of non symmetrical details.

Same concepts here as before.  You might have noticed I left out the pocket.  Any ideas why?  Unless you're walking one direction throughout the game, you want to make the assets mostly symmetrical.  No one's going to tell anyway, but you will.  Every time you test your game, you'll cringe over that pocket changing sides.

Here are the legs/arms

This is where the bent limbs come into play.  Left image is idle, right image is a still of Paul running.

And finally, composing your images.  You might need to tweak some things to make it look better.  For my example, I made each asset separate from the sketch (to show the steps I take when making assets), but I suggest you draw directly on top of the sketch to make sure your assets fit better.

A Few Tips

• Alt + click is a shortcut I use almost as much as Ctrl + Z. Holding your cursor near an intersection of vertices shows a pointed symbol. You can drag that point around to your liking. Holding it near an edge shows you a curvy symbol, and if you drag, it bends that line.
• Sometimes snapping can get in your way.  ctrl + Shift + / to toggle it on and off depending on your needs.
• I like making thick outlines for characters and I like to use the expand fill option that flash has.  It's in Modify > Shape > Expand Fill. You can also do the opposite with it, but you need to be careful because sometimes it messes up your vectors. I fix the problem by smoothing out the object I'm trying to expand as much as possible (make sure it's only 1 color). I made a custom shortcut for it because I use it so much: ctrl + Shift + F
• Another custom shortcut I made is ctrl + Shift + E which i made flip a selected object horizontally. It's nice for when I need to mirror things.