Chat
Discord
Character Base Making Tutorial - Fully Explained
The Spriting Tutorials section on Little Fighter Empire forums houses a great number of widely spread topics within spriting. The quality of these tutorials vary between good, medium and poor and one of them even excellent in terms of how useful, helpful or accurate. I have tested many of these tutorials and have found myself very impressed by what the forums have come up with as a collection.
However there is one downside, one of these tutorials is notoriously difficult to make and has never been by everyones standards, well rounded when made... the Character Base Making Tutorial or CBMT as I will now refer to it. The CBMT has so far produced the most varied and down right horrible results, it is also the most difficult to please everyone with it seems. Although I have only seen and attempted two different CBMT's, none of them have produced the Little Fighter 2 proportions the way anyone would have wanted them. Both Prince_Freeza and I have made that tutorial before as far as I am aware and both to roughly the same degree of quality, even though we went about it differently. Prince_Freeza's guide had a relatively decent Little Fighter proportion to it but lacked the in depth explanation that was required by some users. My previous guide had the explanation and step by step approach covered, but produced horrible proportions that simply did Little Fighter 2 no justice.
It was therefore a quest I had set myself, to produce the best CBMT for Little Fighter Empire forums that they had ever seen. A guide that was able to go into full detail but yet remain simple enough for even the newest or least skilled of spriters to understand and still complete a decently proportioned Little Fighter 2 sprite base.
So I made a tutorial like no other, providing the perfect tool for mapping out the different proportions and heights for the various different body parts. It utilises a colour coded bar to show where on a rough scale everything should be height wise. I have then written a full explanation guide to go with it in the hopes that it will provide you, the members of Little Fighter Empire forums a useful, effecient and accurate guide to making character bases with Little Fighter 2 proportions.
So I present you with the step by step picture process for CBMT and underneath it the written explanation for every step of the way:
Tutorial (Click to View)
![[Image: Tutorial.png]](http://i284.photobucket.com/albums/ll1/eabc1804/Tutorial.png)
Rewritten Guide (Click to View)
The Simplified Guide
At the special request of Marshall, I have rewritten the Character Base Making Tutorial, shortened it and sectioned it for easier reference. It is now ‘find’ friendly to help you quickly reach each section using the CTRL + F keys. Consider yourselves lucky he made the suggestion; otherwise I’m sure most of you would be crying your little hearts out at the 8 page forum post spanning 4383 words... but let us get on with it.
Preparation
Right, before you start the guide properly, here is the preparation for the process. So I am giving you a small but insightful idea onto what tools and programs you might need, giving an explanation as to why to use them.
Programs:
I recommend using one of these programs (although if not possible, Microsoft Paint will do):
Photoshop
GIMP
Photofiltre
Paint.net
The reason for this is because of the amount you can zoom in on these programs and the wide variety of tools they offer. Except for Photoshop I believe they are all free as well, giving you a powerful program to make sprites at your disposal. My suggestion would be if possible though, to get a portable version of Photoshop CS4 (which can be found free when you search Photoshop CS4 Portable Free in Google) or to buy the package. I say this because I believe it to be the most powerful of the programs and possibly the best laid out or easiest to use in my opinion. All of these programs have the tools you need.
Tools:
The tools on the programs that you will need are:
Pencil tool
Brush tool
Fill tool
Magic Wand tool
Blur tool (not absolutely necessary)
You will need most if not all of these and that is why I suggested the programs I did. I am aware that Microsoft Paint does not have the blur tool, thus I am not making it an absolutely necessary tool. Although it will help if you have a program that can use it for your shading towards the end. The only other tool you may need is the bar guide I have made, which is 100% necessary for this process. You can get it from the attachments at the bottom of the guide. I would also suggest getting the drawn tutorial from the bottom of the guide as well, this may come in handy when you’re stuck or cannot understand what I have written.
Setting up:
Right, now we’ve got the tools we need to set up the page, here is how we’re going to do it:
1. Create a new page 79 pixels wide by 79 pixels high. This is the standard Little Fighter 2 size grid for creating characters.
2. In the bottom left hand corner, add the bar guide to the grid. Make sure the bottom of the bar guide is exactly on the bottom of the grid. This will be used for character heights and proportions.
Simple process wasn’t it. Now let’s get down to the fun part – actually creating the sprites.
Bar Guide
This tutorial depends completely on the use of the bar guide. Whilst you are using this tutorial it shall be your only true friend, nothing else matters in this world. So now I will introduce you to the bar guide.
Each section is coloured specifically to maximise the chances of reaching the correct height and proportions for each component of the Little Fighter’s body. So here is the list of colours on the bar guide and what they refer to:
White Section - Head
Purple Section - Neck
Dark Blue Section - Upper Torso and Upper Arm
White Spot Section - Chin
Green Section - Abdominal Region and Lower Arm
Red Section - Waistline
Pale Blue Section - Hands
Pink Section - Upper Leg
Brownish Green Section - Lower Leg
Blue Section – Foot
Head
This is the main part of the Little Fighter characters form. The head is always done first because it is the component that allows you to map out the rest of the body. To create the head we use a 15px pencil tool with a white colour. You then do two strokes or points with the tool, the top of the upper stroke being in line with the top of the bar guide and the bottom of the other stroke being in line with the white spot on the bar guide.
This is where we change to the 1px pencil tool. On the right hand side of the characters face draw a diagonal line that goes up roughly 4 pixels higher than the white spot section on the bar guide and about 6-8 pixels wide. On the characters left hand side of the face, go up about 6 or 7 pixels and out about 4 or 5 to reach the heads widest point. This forms the front of the face and the jaw line from a ¾ view or the standard view at which you speed Little Fighter Characters.
Just above where you did the jaw line on the right hand side of the characters face you should draw an ear coming out about 6 pixels as the widest point and possibly around 5 pixels high. The top of the ear appears closer to the head than the bottom of the ear and so maybe 1 or 2 pixels from the edge of the ear you can start to finish off the top of the head by bringing it around to peak at the top of the bar guide and all the way back round to connect to the front of the head. Remember to round it off so if you didn’t have the ear the head would look relatively egg shaped.
Skeleton
For the character to support their head or to stand up, they’re going to need a frame. We’re going to produce a simple skeletal frame upon which we will add the flesh and rest of the body. To start off we are going to add the spine to our sprite. The spine is the column of vertebrae (bones in your back) that runs down your back from the back of the head all the way down to the pelvis (the bone to which your hips and backside is). Normally the spine would take the natural curvature of a slight S-shape, as you would be able to see if someone stood properly without forcing their back to be straight. In this case, we are going to go against official anatomy and use a straight line. This is because it isn’t necessary for us to draw the S-shape on the sprite, as it helps us in no way whatsoever. So from the right hand side of the chin (on the white spot line of the bar guide), using a 1px dark blue pencil tool, draw a vertical line going down all the way through the dark blue section and down through to stop at the very bottom of the green section on your bar guide. This is going to act as the characters ‘spine’ or more properly referred to in this example as the ‘centre line’.
There is no need to overcomplicate the sprite by drawing a full pelvis, so we are not going to and instead are going to use a line to judge the size of the hips. So, using a 2px red pencil tool, draw a line (in line with the red section on your bar guide) roughly 8 pixels outwards from the characters left and roughly 9 pixels from the characters right. On smaller characters or thinner characters this may be decreased by a pixel or two on average or maybe more, whilst on a larger character this may be increased by one or two pixels either side. The reason it is larger on the right hand side is because it is closer to the camera or to you whereas on the left hand side it is further away from the camera or you, therefore appearing smaller. Artists use something called point perspective to bring across this idea.
The broadest part of the body is the shoulders and so is true with Little Fighter characters as well. The male upper body it is triangular in appearance, being widest at the shoulders and most narrow towards the waist and hip region. As said before about point perspective and distance from the camera, the shoulder that is furthest away will seem smaller and less broad than the one that is closer, in the case of Little Fighter’s – their right shoulder. Using a 1px blue pencil tool draw a horizontal line that is wider than the hips, just under the jaw. On the characters right, the shoulder should be a fair bit wider than the hips, whereas on the characters left, the shoulder should be only slightly wider. For average sized characters, similar to build of Davis it is good to have a 4 pixel and a 2 pixel width above the hips respectively (that is the character’s right is 4 pixels wider and his left is 2 pixels). The difference between shoulder width and hip width is less apparent on thinner characters and is often reversed on the more fat characters. It is however emphasized on the larger characters. Women are a different story though; this is not a good technique for the body of women. Women have a more hourglass figure and their body tapers in towards their waist, and then comes back out at the hips. With women, the hips and shoulders tend to be the same width, but that will be discussed in another tutorial.
Now to stop the character floating about randomly they need to come into contact with the floor. This is where the legs come in. We’re going to use the pink colour 1px pencil tool at first as it is the upper leg colour to draw them. Now, the legs don’t start at the very edge of the hips and instead start a little more towards the middle otherwise your legs would just out at the side and have a huge gap in between. I suggest using a 4 pixel distance from the edge of the hips on either side of the body. Draw a line going diagonally down from just under the hip line to the very bottom of the grid at roughly shoulder width. I say shoulder width because the character requires some form of balance. When the feet are closer together than shoulder width, they are slightly taller and so the centre of gravity is raised higher. This makes them easier to knock over. The further the legs are spread apart, the lower the centre of gravity of a character and therefore the more stability and balance they have, although this may come at the cost of speed. Shoulder width is the medium at which you can get a decent amount of balance and a good amount of speed. You should separate the legs into their components using the colours on the bar guide at the correct heights.
In real life you will find that when you have your arms ‘straight’ down at your sides and hanging loosely that they are not actually ‘straight’. There is a slight bend at the elbow at which the forearm comes forward. However, in Little Fighter characters, most standing positions have straight arms completely. I for art and realism sake made the arm of my base slightly bent. So we’re going to do a basic length of the arm, which is roughly 21 pixels from shoulder end (the skeleton of the shoulder) to the very tip of the hand (very bottom of the pale blue section on bar guide). So using the 1px pencil tool set to dark blue, either draw a line ending at the bottom of the dark blue section on the bar guide or have it end 8-9 pixels from the shoulder edge. This is the average size of the upper arm on standard Little Fighter characters. The forearm can then be done from the top of the green sections to the bottom of the green section on the bar guide or is also roughly 8 pixels – you would do this in 1px green pencil tool. Finally for the hand, it’s only about 5 pixels in length for Little Fighter characters and is drawn in the same direction as the forearm in light or pale blue down to the bottom of the pale blue section on the bar guide or as a 5 pixel extension to the lower arms direction. This is also done in 1px pencil tool.
Body
It is time to give our base some shape. Padding out the character to the right proportions is the crucial when making the Little Fighter character. The neck is probably the most left out and unnoticed component of a Little Fighter characters body. This is because it’s a tiny section just under the ear of the character. You will do this in a purple 1px pencil. Just under the ear do 2 to 3 pixels down and 1 or 2 pixels towards the chin from there. That is your finished neck, wasn’t that easy?
Now we’ve done the neck, we can fill out the shoulders and the trapezius muscles. These muscle groups perform the function of lifting your arms and shrugging. Trapezius muscles in general are part of your back and act as assistors to shoulder based movements – that is they help the shoulders raise the arms. The trapezius muscles start off attached to the neck quite high up and then slope slowly down towards the shoulders. Using a dark blue 1px pencil tool, start off the trapezoid muscles just under the neck on the right hand side of the character. They should come out quite a fair bit from the neck, maybe 2 or so pixels before it slopes down towards the shoulders and ending at the shoulders edge or end points. On the other side, the trapezius muscle shoulder only is 1 pixel higher than the shoulder and end 2 pixels or so away from the shoulder line end of edge. This is because that shoulder is further away, so it appears smaller. The same applies for the trapezius muscle going down to it. More muscular characters will have higher trapezius muscles and higher shoulders, causing the neck to be more hidden. Less muscular characters or thinner characters may have a longer neck and smaller trapezius muscle.
It is time to do the main torso or upper body of the character. Although looking at the character from near enough the front, using a ¾ view you actually see some of the thickness of the back as well. As you go up from the hips and waist, the size of the torso widens because of the large muscles in your chest and your laterals. Your laterals are the muscles at the sides of your back that help to form your underarm or armpits as they are commonly referred to as. On the left hand side of the character, still using a blue 1px pencil tool draw a line going vertically up from the characters hips and only outwards 1 pixel or so about half way up. This side of the body remains relatively flat, especially with the fact that the arms can come across it, it doesn’t spread out much. On the characters right, draw a line from just above the edge of the hip up towards the shoulder edge, but not reaching the shoulder edge. It should be short of the shoulder edge by about 2 or 3 pixels otherwise the laterals would be too wide and could restrict arm movement. I would suggest filling in the body using the fill tool after doing the first part of the legs section, you will need the centre line for it.
Legs
First, in the same line as the centre line or spine, using a pink 1px pencil tool, draw a 5 or 6 pixel line going down from the hips. This is where your legs are going to meet; you should now fill in the body using the fill tool set to dark blue before continuing.
Okay, let’s start with the characters right leg. Still using the 1px pink pencil tool draw a diagonal line going downwards from the centre line where the legs meet to the bottom of the brownish green section on the bar guide. This should be roughly 4/5 pixels away from the skeleton leg line you drew earlier. On the other side of the same leg, starting at the hip edge instead of the centre line, repeat the process. This should also be roughly 3/4/5 pixels away from the skeleton leg. Join the bottoms of the leg across using a horizontal line.
On the left leg, you once again start from where the legs meet and go down to the bottom of the brownish green section using another diagonal line. This should be roughly 4 or 5 pixel distance from the skeleton leg as you progress towards the bottom. Repeat as before on the other side of this leg, only using a 2 or 3 pixel distance from the bottom, starting at the hip edge. Once again, connect the legs off at the bottom.
Now fill in the legs using the fill tool and a pink colour. You can then shape the legs a bit by rounding them off at the bottom using a black 1px pencil tool and taking off bits of the leg you do not like.
Arms
Arms are normally the hardest part to draw on the sprite. This is because of allowing yourself to put them in any position you chose earlier on, making it hard to imagine or reach the exact end product that you pictured. So I can only suggest the small part of making them 6 or 7 pixels wide on the characters right, as is standard for most Little Fighter sprites that I have looked at. They should be 1 pixel thinner on the characters left roughly or exactly the same, but once again that is based on how far the arm is from the camera compared to the right arm. My real suggestion is to do 1px layers in dark blue pencil tool either side each time to build up the arm. This way you can get to a size that you think is suitable or you like. Do not worry of the arm overlaps the body section; we will use shading to fix that later.
Hands and Feet
Next is probably the easiest part – the hands. For the hands, start off using the light blue 1px pencil tool and draw a circular shape on the end of the forearm. This should be about 5 pixels long at most, assuming that you’ve followed the bar guide measurements up until now. It should be 1 or 2 pixels wider than the forearm as well. This is because, if you look at a clenched fist (as we’re going to assume that Little Fighter characters all have rounded clenched fists – tensed to those who do not understand) or any style of hand in fact, it comes outwards slightly at the palm leading to the little finger and on the other side leading to the thumb. You can then fill in the hand with the pale blue fill tool.
As for feet, it gets slightly trickier than the hand. This is not where you should do the same as you do with the hands; the feet are to be treated completely differently. You use a blue colour 1px pencil tool for this. The right foot of the character, assuming you are using standing position for your sprite, should be facing towards you. The bottom of the foot should be wider at the bottom that at the top, around 10-11 pixels compared to 9-10. The shoe should gradually go outwards either side towards the middle reaching a peak of about 13-14 pixels and then slope back in towards the bottom.
The left foot is facing slightly to the side, so you get a view of the back of the foot and the slightly lengthier front of the foot. The back of the foot should be done flat, going out 1 or 2 pixels more than the top and bottom of the foot whereas on the other side it should slope outwards from the top about 3 or 4 pixels before coming back in 1 or 2 pixels at the bottom. You can now fill in your feet using the fill tool.
Shading
We’re going to do shading before we do the final touch ups. So right now you need to pick two colours, one that is darker for the shaded regions of the character and one that is lighter for what got hit by the sunlight. Using the darker colour and a 1px pencil tool, go over the whole of the head. This is optional, but I used a yellow 1px pencil to draw a sun in the top right hand corner of the grid, this is just to remind me where I will be shading and where the sun will hit. Now, using the lighter colour and a 1px pencil tool, add a lighted region to the face. Around the middle of the head I leave around 6 pixels of shaded region, then round the shaded region into the unshaded towards the top of the head and completely across the bottom of the jaw. This is because the jaw is hit least by the sun.
Now we’re moving onto the neck region, which is probably the darkest region of the body in terms of shading as the head stops it from getting light. I would suggest getting your darker colour and darkening it a little more for this part. You then go around the bottom of the jaw using this colour and a 1px pencil tool. The shaded region should then be 2 pixels all the way around the bottom of the head.
Using your original shade colour, go over the rest of the body entirely. Then, as we did with the head, we’re going to use the lighter colour and once again using the 1px pencil tool highlight all the area’s where the sun hits. Shading will be explained better in another guide.
Touch Ups
Now is the best part, finishing touches. What you’re going to do is use the 1px brush tool, using the correct colours in the correct regions (unshaded and shaded) and finish or perfect the shape of your Little Fighter base. For parts you want to erase and do over, use a 1px black brush tool to erase some of the parts. This will give you your finished shape.
The next part depends on whether you have the blur tool or not. If you have a program that allows you to blur using filter (such as Photoshop or GIMP) then using the magic wand tool set at a tolerance of 100 highlight the body of the base. The whole of the base should then be selected. Go into filter – blur – blur. This will allow the character to have a more realistic shading finish, instead of an extremely sharp shade. If you haven’t got the blur tool, using the 1px brush tool and the shaded or unshaded colour, go across the line at which the shading ends. This will allow the colour to slowly fade through into the other one, producing your less sharp shading.
Credits
These are the people that credits go to and the explanations as to why they deserve the credits:
Marshall – for suggesting the CTRL + F friendly method of creating the guide. Making it easier for all of you to flick through the guide to find the points you need help on.
Reaper – for suggesting a less defined method of approach to proportions and shape. He has helped you all in receiving a guide that is not 100% fixed and allows for varying positions and proportions.
Eddie – for spending 2 days solidly working on producing what was meant to be a shortened but more useful and helpful guide. Admittedly it isn’t shorter at all, in fact it’s even longer, but still the task is done.
Hopefully this helps you all,
Eddie
At the special request of Marshall, I have rewritten the Character Base Making Tutorial, shortened it and sectioned it for easier reference. It is now ‘find’ friendly to help you quickly reach each section using the CTRL + F keys. Consider yourselves lucky he made the suggestion; otherwise I’m sure most of you would be crying your little hearts out at the 8 page forum post spanning 4383 words... but let us get on with it.
Preparation
Right, before you start the guide properly, here is the preparation for the process. So I am giving you a small but insightful idea onto what tools and programs you might need, giving an explanation as to why to use them.
Programs:
I recommend using one of these programs (although if not possible, Microsoft Paint will do):
Photoshop
GIMP
Photofiltre
Paint.net
The reason for this is because of the amount you can zoom in on these programs and the wide variety of tools they offer. Except for Photoshop I believe they are all free as well, giving you a powerful program to make sprites at your disposal. My suggestion would be if possible though, to get a portable version of Photoshop CS4 (which can be found free when you search Photoshop CS4 Portable Free in Google) or to buy the package. I say this because I believe it to be the most powerful of the programs and possibly the best laid out or easiest to use in my opinion. All of these programs have the tools you need.
Tools:
The tools on the programs that you will need are:
Pencil tool
Brush tool
Fill tool
Magic Wand tool
Blur tool (not absolutely necessary)
You will need most if not all of these and that is why I suggested the programs I did. I am aware that Microsoft Paint does not have the blur tool, thus I am not making it an absolutely necessary tool. Although it will help if you have a program that can use it for your shading towards the end. The only other tool you may need is the bar guide I have made, which is 100% necessary for this process. You can get it from the attachments at the bottom of the guide. I would also suggest getting the drawn tutorial from the bottom of the guide as well, this may come in handy when you’re stuck or cannot understand what I have written.
Setting up:
Right, now we’ve got the tools we need to set up the page, here is how we’re going to do it:
1. Create a new page 79 pixels wide by 79 pixels high. This is the standard Little Fighter 2 size grid for creating characters.
2. In the bottom left hand corner, add the bar guide to the grid. Make sure the bottom of the bar guide is exactly on the bottom of the grid. This will be used for character heights and proportions.
Simple process wasn’t it. Now let’s get down to the fun part – actually creating the sprites.
Bar Guide
This tutorial depends completely on the use of the bar guide. Whilst you are using this tutorial it shall be your only true friend, nothing else matters in this world. So now I will introduce you to the bar guide.
Each section is coloured specifically to maximise the chances of reaching the correct height and proportions for each component of the Little Fighter’s body. So here is the list of colours on the bar guide and what they refer to:
White Section - Head
Purple Section - Neck
Dark Blue Section - Upper Torso and Upper Arm
White Spot Section - Chin
Green Section - Abdominal Region and Lower Arm
Red Section - Waistline
Pale Blue Section - Hands
Pink Section - Upper Leg
Brownish Green Section - Lower Leg
Blue Section – Foot
Head
This is the main part of the Little Fighter characters form. The head is always done first because it is the component that allows you to map out the rest of the body. To create the head we use a 15px pencil tool with a white colour. You then do two strokes or points with the tool, the top of the upper stroke being in line with the top of the bar guide and the bottom of the other stroke being in line with the white spot on the bar guide.
This is where we change to the 1px pencil tool. On the right hand side of the characters face draw a diagonal line that goes up roughly 4 pixels higher than the white spot section on the bar guide and about 6-8 pixels wide. On the characters left hand side of the face, go up about 6 or 7 pixels and out about 4 or 5 to reach the heads widest point. This forms the front of the face and the jaw line from a ¾ view or the standard view at which you speed Little Fighter Characters.
Just above where you did the jaw line on the right hand side of the characters face you should draw an ear coming out about 6 pixels as the widest point and possibly around 5 pixels high. The top of the ear appears closer to the head than the bottom of the ear and so maybe 1 or 2 pixels from the edge of the ear you can start to finish off the top of the head by bringing it around to peak at the top of the bar guide and all the way back round to connect to the front of the head. Remember to round it off so if you didn’t have the ear the head would look relatively egg shaped.
Skeleton
For the character to support their head or to stand up, they’re going to need a frame. We’re going to produce a simple skeletal frame upon which we will add the flesh and rest of the body. To start off we are going to add the spine to our sprite. The spine is the column of vertebrae (bones in your back) that runs down your back from the back of the head all the way down to the pelvis (the bone to which your hips and backside is). Normally the spine would take the natural curvature of a slight S-shape, as you would be able to see if someone stood properly without forcing their back to be straight. In this case, we are going to go against official anatomy and use a straight line. This is because it isn’t necessary for us to draw the S-shape on the sprite, as it helps us in no way whatsoever. So from the right hand side of the chin (on the white spot line of the bar guide), using a 1px dark blue pencil tool, draw a vertical line going down all the way through the dark blue section and down through to stop at the very bottom of the green section on your bar guide. This is going to act as the characters ‘spine’ or more properly referred to in this example as the ‘centre line’.
There is no need to overcomplicate the sprite by drawing a full pelvis, so we are not going to and instead are going to use a line to judge the size of the hips. So, using a 2px red pencil tool, draw a line (in line with the red section on your bar guide) roughly 8 pixels outwards from the characters left and roughly 9 pixels from the characters right. On smaller characters or thinner characters this may be decreased by a pixel or two on average or maybe more, whilst on a larger character this may be increased by one or two pixels either side. The reason it is larger on the right hand side is because it is closer to the camera or to you whereas on the left hand side it is further away from the camera or you, therefore appearing smaller. Artists use something called point perspective to bring across this idea.
The broadest part of the body is the shoulders and so is true with Little Fighter characters as well. The male upper body it is triangular in appearance, being widest at the shoulders and most narrow towards the waist and hip region. As said before about point perspective and distance from the camera, the shoulder that is furthest away will seem smaller and less broad than the one that is closer, in the case of Little Fighter’s – their right shoulder. Using a 1px blue pencil tool draw a horizontal line that is wider than the hips, just under the jaw. On the characters right, the shoulder should be a fair bit wider than the hips, whereas on the characters left, the shoulder should be only slightly wider. For average sized characters, similar to build of Davis it is good to have a 4 pixel and a 2 pixel width above the hips respectively (that is the character’s right is 4 pixels wider and his left is 2 pixels). The difference between shoulder width and hip width is less apparent on thinner characters and is often reversed on the more fat characters. It is however emphasized on the larger characters. Women are a different story though; this is not a good technique for the body of women. Women have a more hourglass figure and their body tapers in towards their waist, and then comes back out at the hips. With women, the hips and shoulders tend to be the same width, but that will be discussed in another tutorial.
Now to stop the character floating about randomly they need to come into contact with the floor. This is where the legs come in. We’re going to use the pink colour 1px pencil tool at first as it is the upper leg colour to draw them. Now, the legs don’t start at the very edge of the hips and instead start a little more towards the middle otherwise your legs would just out at the side and have a huge gap in between. I suggest using a 4 pixel distance from the edge of the hips on either side of the body. Draw a line going diagonally down from just under the hip line to the very bottom of the grid at roughly shoulder width. I say shoulder width because the character requires some form of balance. When the feet are closer together than shoulder width, they are slightly taller and so the centre of gravity is raised higher. This makes them easier to knock over. The further the legs are spread apart, the lower the centre of gravity of a character and therefore the more stability and balance they have, although this may come at the cost of speed. Shoulder width is the medium at which you can get a decent amount of balance and a good amount of speed. You should separate the legs into their components using the colours on the bar guide at the correct heights.
In real life you will find that when you have your arms ‘straight’ down at your sides and hanging loosely that they are not actually ‘straight’. There is a slight bend at the elbow at which the forearm comes forward. However, in Little Fighter characters, most standing positions have straight arms completely. I for art and realism sake made the arm of my base slightly bent. So we’re going to do a basic length of the arm, which is roughly 21 pixels from shoulder end (the skeleton of the shoulder) to the very tip of the hand (very bottom of the pale blue section on bar guide). So using the 1px pencil tool set to dark blue, either draw a line ending at the bottom of the dark blue section on the bar guide or have it end 8-9 pixels from the shoulder edge. This is the average size of the upper arm on standard Little Fighter characters. The forearm can then be done from the top of the green sections to the bottom of the green section on the bar guide or is also roughly 8 pixels – you would do this in 1px green pencil tool. Finally for the hand, it’s only about 5 pixels in length for Little Fighter characters and is drawn in the same direction as the forearm in light or pale blue down to the bottom of the pale blue section on the bar guide or as a 5 pixel extension to the lower arms direction. This is also done in 1px pencil tool.
Body
It is time to give our base some shape. Padding out the character to the right proportions is the crucial when making the Little Fighter character. The neck is probably the most left out and unnoticed component of a Little Fighter characters body. This is because it’s a tiny section just under the ear of the character. You will do this in a purple 1px pencil. Just under the ear do 2 to 3 pixels down and 1 or 2 pixels towards the chin from there. That is your finished neck, wasn’t that easy?
Now we’ve done the neck, we can fill out the shoulders and the trapezius muscles. These muscle groups perform the function of lifting your arms and shrugging. Trapezius muscles in general are part of your back and act as assistors to shoulder based movements – that is they help the shoulders raise the arms. The trapezius muscles start off attached to the neck quite high up and then slope slowly down towards the shoulders. Using a dark blue 1px pencil tool, start off the trapezoid muscles just under the neck on the right hand side of the character. They should come out quite a fair bit from the neck, maybe 2 or so pixels before it slopes down towards the shoulders and ending at the shoulders edge or end points. On the other side, the trapezius muscle shoulder only is 1 pixel higher than the shoulder and end 2 pixels or so away from the shoulder line end of edge. This is because that shoulder is further away, so it appears smaller. The same applies for the trapezius muscle going down to it. More muscular characters will have higher trapezius muscles and higher shoulders, causing the neck to be more hidden. Less muscular characters or thinner characters may have a longer neck and smaller trapezius muscle.
It is time to do the main torso or upper body of the character. Although looking at the character from near enough the front, using a ¾ view you actually see some of the thickness of the back as well. As you go up from the hips and waist, the size of the torso widens because of the large muscles in your chest and your laterals. Your laterals are the muscles at the sides of your back that help to form your underarm or armpits as they are commonly referred to as. On the left hand side of the character, still using a blue 1px pencil tool draw a line going vertically up from the characters hips and only outwards 1 pixel or so about half way up. This side of the body remains relatively flat, especially with the fact that the arms can come across it, it doesn’t spread out much. On the characters right, draw a line from just above the edge of the hip up towards the shoulder edge, but not reaching the shoulder edge. It should be short of the shoulder edge by about 2 or 3 pixels otherwise the laterals would be too wide and could restrict arm movement. I would suggest filling in the body using the fill tool after doing the first part of the legs section, you will need the centre line for it.
Legs
First, in the same line as the centre line or spine, using a pink 1px pencil tool, draw a 5 or 6 pixel line going down from the hips. This is where your legs are going to meet; you should now fill in the body using the fill tool set to dark blue before continuing.
Okay, let’s start with the characters right leg. Still using the 1px pink pencil tool draw a diagonal line going downwards from the centre line where the legs meet to the bottom of the brownish green section on the bar guide. This should be roughly 4/5 pixels away from the skeleton leg line you drew earlier. On the other side of the same leg, starting at the hip edge instead of the centre line, repeat the process. This should also be roughly 3/4/5 pixels away from the skeleton leg. Join the bottoms of the leg across using a horizontal line.
On the left leg, you once again start from where the legs meet and go down to the bottom of the brownish green section using another diagonal line. This should be roughly 4 or 5 pixel distance from the skeleton leg as you progress towards the bottom. Repeat as before on the other side of this leg, only using a 2 or 3 pixel distance from the bottom, starting at the hip edge. Once again, connect the legs off at the bottom.
Now fill in the legs using the fill tool and a pink colour. You can then shape the legs a bit by rounding them off at the bottom using a black 1px pencil tool and taking off bits of the leg you do not like.
Arms
Arms are normally the hardest part to draw on the sprite. This is because of allowing yourself to put them in any position you chose earlier on, making it hard to imagine or reach the exact end product that you pictured. So I can only suggest the small part of making them 6 or 7 pixels wide on the characters right, as is standard for most Little Fighter sprites that I have looked at. They should be 1 pixel thinner on the characters left roughly or exactly the same, but once again that is based on how far the arm is from the camera compared to the right arm. My real suggestion is to do 1px layers in dark blue pencil tool either side each time to build up the arm. This way you can get to a size that you think is suitable or you like. Do not worry of the arm overlaps the body section; we will use shading to fix that later.
Hands and Feet
Next is probably the easiest part – the hands. For the hands, start off using the light blue 1px pencil tool and draw a circular shape on the end of the forearm. This should be about 5 pixels long at most, assuming that you’ve followed the bar guide measurements up until now. It should be 1 or 2 pixels wider than the forearm as well. This is because, if you look at a clenched fist (as we’re going to assume that Little Fighter characters all have rounded clenched fists – tensed to those who do not understand) or any style of hand in fact, it comes outwards slightly at the palm leading to the little finger and on the other side leading to the thumb. You can then fill in the hand with the pale blue fill tool.
As for feet, it gets slightly trickier than the hand. This is not where you should do the same as you do with the hands; the feet are to be treated completely differently. You use a blue colour 1px pencil tool for this. The right foot of the character, assuming you are using standing position for your sprite, should be facing towards you. The bottom of the foot should be wider at the bottom that at the top, around 10-11 pixels compared to 9-10. The shoe should gradually go outwards either side towards the middle reaching a peak of about 13-14 pixels and then slope back in towards the bottom.
The left foot is facing slightly to the side, so you get a view of the back of the foot and the slightly lengthier front of the foot. The back of the foot should be done flat, going out 1 or 2 pixels more than the top and bottom of the foot whereas on the other side it should slope outwards from the top about 3 or 4 pixels before coming back in 1 or 2 pixels at the bottom. You can now fill in your feet using the fill tool.
Shading
We’re going to do shading before we do the final touch ups. So right now you need to pick two colours, one that is darker for the shaded regions of the character and one that is lighter for what got hit by the sunlight. Using the darker colour and a 1px pencil tool, go over the whole of the head. This is optional, but I used a yellow 1px pencil to draw a sun in the top right hand corner of the grid, this is just to remind me where I will be shading and where the sun will hit. Now, using the lighter colour and a 1px pencil tool, add a lighted region to the face. Around the middle of the head I leave around 6 pixels of shaded region, then round the shaded region into the unshaded towards the top of the head and completely across the bottom of the jaw. This is because the jaw is hit least by the sun.
Now we’re moving onto the neck region, which is probably the darkest region of the body in terms of shading as the head stops it from getting light. I would suggest getting your darker colour and darkening it a little more for this part. You then go around the bottom of the jaw using this colour and a 1px pencil tool. The shaded region should then be 2 pixels all the way around the bottom of the head.
Using your original shade colour, go over the rest of the body entirely. Then, as we did with the head, we’re going to use the lighter colour and once again using the 1px pencil tool highlight all the area’s where the sun hits. Shading will be explained better in another guide.
Touch Ups
Now is the best part, finishing touches. What you’re going to do is use the 1px brush tool, using the correct colours in the correct regions (unshaded and shaded) and finish or perfect the shape of your Little Fighter base. For parts you want to erase and do over, use a 1px black brush tool to erase some of the parts. This will give you your finished shape.
The next part depends on whether you have the blur tool or not. If you have a program that allows you to blur using filter (such as Photoshop or GIMP) then using the magic wand tool set at a tolerance of 100 highlight the body of the base. The whole of the base should then be selected. Go into filter – blur – blur. This will allow the character to have a more realistic shading finish, instead of an extremely sharp shade. If you haven’t got the blur tool, using the 1px brush tool and the shaded or unshaded colour, go across the line at which the shading ends. This will allow the colour to slowly fade through into the other one, producing your less sharp shading.
Credits
These are the people that credits go to and the explanations as to why they deserve the credits:
Marshall – for suggesting the CTRL + F friendly method of creating the guide. Making it easier for all of you to flick through the guide to find the points you need help on.
Reaper – for suggesting a less defined method of approach to proportions and shape. He has helped you all in receiving a guide that is not 100% fixed and allows for varying positions and proportions.
Eddie – for spending 2 days solidly working on producing what was meant to be a shortened but more useful and helpful guide. Admittedly it isn’t shorter at all, in fact it’s even longer, but still the task is done.
Hopefully this helps you all,
Eddie
Original Guide (Click to View)
Written Process And Explanation:
1) Start off with a grid of 79 x 79 pixels. This is used because it is the standard Little Fighter character size. Make sure that the grid is completely black by using the fill tool on whichever program you choose to use.
2) Copy the bar guide which I have uploaded and put it in the very left or right hand corner of the grid, making sure the bottom of the bar is on the very bottom pixel in the corner. This bar guide is 60 pixels tall, leaving a 19 pixel gap from the top of the grid. The colour codes are as follows:
White Section: Head
Purple Section: Neck
Dark Blue Section: Upper Torso and Upper Arm
White Spot Section: Chin
Green Section: Abdominal Region and Lower Arm
Red Section: Waistline
Pale Blue Section: Hands
Pink Section: Upper Leg
Browny Green Section: Lower Leg
Blue Section: Foot
3) Using the pencil tool, set at 15px put down two brush strokes, vertically in line with each other, the top of the first being in line with the top of the bar guide and the bottom of the other being in line with the white dot section. This produces the main part of the head.
4) Now switch to a 1px pencil. You can then craft the head. This is probably the hardest part of Little Fighter characters and so I made a rough guideline to it.
- On the characters right hand cheek (your left) you go 1 up 2 along, 1 up 2 along, 1 up 1 along, 1 up 1 along from the bottom line or chin. This should give you the right shape for jawline.
- On the front and left hand side of the character (your right) you go 1 up 1 along, 1 up 1 along, 2 up 1 along and 2 up 1 along from the bottom line or chin.
- For the ear, from the last part of the jawline which you had made (see 1st -) go 1 up 4 along, 1 up 1 along, 1 up 1 along, 1 up, 1 up 1 back. You can then fill out the shape for the top of the head, making sure it peaks in line with the top of the bar guide and it should go all the way round to connect with the front of the face of the character.
This will give you the finished shape for your character base's head. Next we move on to shading it.
5) Moving away from the white head seems to be a good idea now, as it will help with your character base's shading later on. So pick the SHADED colour for your characters skin and then using the fill tool or going over with the 1px brush as I did (bit more time consuming and doesn't produce the irritating 'dirty pixels' around the outside of the head) get rid of all the white of your character's head.
6) Now he seems quite shady, we should bring a little light to his life. So I drew a sun with a few rays in the top right hand corner of the grid, nothing too large but it's still there. This acts so that you can imagine or understand where the light hits the head, causing the shadows to be cast. So we grab our actual skin colour or tone, and we apply that to the face. Generall the whole chin should be left shaded, I normally leave about 6 pixels of shading around the back of the head towards the middle, leaving the ear completely shaded. The shading lines should then be drawn back out from the middle of the head to the bottom and the top, giving the head it's more rounded and spherical appearance.
7) This may seem slightly pointless now, it does to me most of the time but I gave it a go anyway, purely because it seems to happen with other people's work to 'highlight' the areas that get hit by the most light. So, for the shaded region I took a sample of the colour using the eyedropper or pipette tool and then increased the brightness by 1% and reduced the saturation by 6%. I highlighted around the ear using this, as the ear is slightly stuck out and will obviously be hit by sunlight. I applied the same style of technique on the very front edge of the face, making it slightly lighter as the sun hits it most.
8) Okay neck time. As much as people say 'you haven't given your character a neck' I never really noticed it until recently. Most characters have a 2 pixel seperation between the head and the trapezius muscle which then moves down to the shoulder. That is your bases neck. Seems really silly doesn't it? Well it isn't, without it, the character looks like its just got a floating egg with a massive great lump sticking out of it rammed on it's shoulders. So using the purple you add the neck. From where the ear attaches to the head, you go 2 down and then another 1 along towards the chin (This is provided you followed my instructions for the shape of your base's head). There, your character now has a neck.
9) Right, now we're going to give your base a mock skeleton, piece by piece. We're going to give your base a spine like element. This is the bone running down your back that connects the lower body to the upper body, it is also used to support your head, as your neck is part of it. It is normally slightly curved to form an S-shape, however, thanks to some people in the previous attempt at a tutorial I made, I have decided that it is much easier to use a straight line. Also, the spine would usually run down from the neck, but I'm giving you a special tip to help your spriting and speeding the process up. From the your character bases right hand side of his chin (your left) draw a dark blue (torso coloured) line down from the jaw right down into the end of the green section or 'abdominal region' (touching the waistline). This will make your character look, if you've done it right, like a balancing egg on a stick.
10) Your character cannot shake those hips, kick or move without specific crossing points known as 'joints'. So, lets give him some hips to shake that booty. This is where I will start talking about camera angles and what is known as the 3/4 view. Your character, I'm assuming is not standing head on towards to the camera, he is instead facing slightly to the side aswell. Now, you'd expect a diagonal line to be drawn here, but that would not be correct. A horizontal line still suffices, but will be different distances from the centre line, which I called the 'spine' for you. On the characters left (your right) there is a dot, somewhere in the infinite distance. This will be the base for your 'point perspective'. As you move from the point in the distance towards the camera, the size of the object increases. Certain sides become more apparent then others. The side closest to the point (the character's left) will therefore be shorter than the side away from the point (the character's right), albeit not by much. I've drawn the waist to come out 8 pixels from the characters left and 9 from the characters right. For thinner characters this could be 7 and 8 or even 6 and 7, for larger it could be 9 and 10 or even 11 and 10. You will draw the waist in red and it should be in line with the red markings on the bar guide, 2 thick. Funnily enough, it is 1 pixel wider on both sides of the head. You're going to ask, why 2 pixels thick? When you look at the human body, where your hips and waist are, your body seems to go straight down before it reaches your legs, and this isn't a small point where it suddenly goes in and back out.
11) Alright, we've got the hips, but what about the shoulders, what on earth should we do about those? The male figure is more triangular, it's shoulders are wider than it's waist. So, refering back to point perspective, the characters left (your right) is going off into the distance, and so appears smaller to you. The characters right on the other hand is coming towards you and so should appear larger. I drew the shoulders on the line just under the chin, they are 2 pixels wider on the characters left than the waist, and 3 or 4 pixels wider on the characters right than the waist. With thinner characters, the difference between shoulder width and waist or hip width is less apparent. With female characters, they have a more hourglass figure, they do not taper down towards the hips but is more tapered towards the middle of the waist (slightly higher up than your hips drawn on your character) and then comes back out or female characters I would recommend using a shoulder width exactly the same size as the hip width, and they should be much less wide than the mans.
12) The character needs something to stand on, so lets give it some legs. Using the pink or upper leg colour, start the first leg, on the characters right (your left) and start it from 4 pixels from the edge of the hip (providing you used my original hip set up, if you used a thinner version, then use 3/2 pixels from the edge) and draw a diagonal line down to the bottom of the grid either at shoulder width or just below, although it should be wider than the hip. What I did was do a rough 4 down by 1 along each time. You then repeat the process with the other leg, 4 pixels from the edge, going down to shoulder width at the bottom. Why shoulder width? Look at how people stand, naturally their feet fall to shoulder width or just under, but why? It's to do with balance. Having your legs closer together makes you easier to knock over or trip as you're a less wide object, and so your centre of gravity is higher. Whereas when your legs are more spread, your centre of gravity is lower, thus making you harder to knock over. I'll explain more about this when I eventually release the 'stances' tutorial I am working on.
13) Okay, now we're moving onto arms. Let your arm be free at your side when you stand up, now look at it. It does not go straight down without bending does it? I have incorperated this into the pose for which this tutorial has done, although it is considered more straight armed for the Little Fighter characters such as Dennis and Davis in their poses. My pose is a bit more 'ready' for combat. We shall do the upper arm first, in the dark blue colour that is the upper arm and torso. I start at the shoulder end (characters left or your right) and go 2 pixels down to start off. I then go 1 along and 4 down (in my diagram this may look confusing, as I have skipped the points at '1 along'). With the character's right or your left, I go 1 along and 3 down after the initial step. The upper arm shall stop at the bottom of the dark blue section on the bar guide.
14) The lower arm is just bending the arm back in slightly in most cases. In the Little Fighter original characters, it would be a continued line down from the upper arm. The lower arm goes from the top of the green section or abdominal and lower arm region and goes down to the bottom of the hips (last red point on your bar guide). See wasn't that easy? You'll note that the lower arm is slightly longer than the upper arm, this I have taken from looking at human beings ordinarily. In Little Fighter characters it is normally the same, as you can tell from the punch sprites.
15) Hands now. Continue them down from the lower arm until the bottom of the light blue or hands section on your bar guide. Simple really, this is because characters do not tend to bend their hands round in odd directions, and ofcourse Little Fighter character's hands are generally round blobs.
16) I then segmented the legs using colours corresponding to the bar guide's colours and heights. This will become important later on when the legs become thickened and the feet need to be done.
17) Trapezoid muscles time. These are your upper back region and help the shoulders and back with most lifting and arm raising movements. On the characters left (your right) the trapezoid is only one pixel higher than the shoulder line and is 1 or 2 pixels closed to the head than the shoulders end point. On the characters right (your left) the trapezoid starts 3 pixels higher than the shoulder line, just under the neck. You bring this out from the jawline to 3 or 4 pixels further than the neck. You then go 1 down and 1 along and then 1 down and 1 along again, this will give you the height and thickness of your trapezoid muscles and how they join to the shoulder. The reason for the differences in height for the trapezoid muscles is once again, point perspective. The closer it is to the camera, the higher and larger it is, the further away from the camera, the lower and smaller it is.
18) Thicken the arms out slightly by adding 1 pixel thickness to the outside of the arms and the shoulder. You can also round the shoulder a bit through whilst you do so. This will give you the general shape of the body and the arm, bringing it more to life.
19) We do the outline of the torso now, just for help on getting a rough estimate on size. You start at the edge of the hips, on the characters left (your right) the torso should either go straight up or about 3/4 pixels up it should go out towards the arm ONLY 1 pixel. It will then continue up from there. On the characters right (your left) I would suggest starting by going 2 up from the hip, 1 along 4/5 up, 1 along 4/5 up and finally 1 along 5/6 up, brining it to the shoulder line. This will give you a rough estimate of the body, useful later.
20) In line with the 'spine' or centre line, under the hips draw a pink line going down 5/6 pixels. This will be the point at which the character's legs will 'meet' from the eyes perspective.
21) Colour coding the drawing correctly, draw the characters right leg (the one on your left) by going 1 along and 6 down from the centre line below the hips, 1 along 6 down, 1 along 5 down. Then draw a line across to the leg line you drew before. On the outside of the leg, you should go 2 down from the hip, 1 along 3 down, 1 along 4 down, 1 along 5 down, 1 along 5 down 1 along 5 down. If not, something similar to this should suffice. Then it should be in line with the line you drew on the other side of the leg (or the bar guide's lower leg bottom). Connect them up.
22) For the inside of the other leg, you go one along 8 down from the centre line below the hip, 1 along 8 down. Then connect it up to the leg line you had drawn for that leg. You should do for the outside of the leg, 4/5 down from the edge of the hip, 1 along 5/4 down, 1 along 5 down, 1 along 7 down. You can then connect this to the other part of the leg.
23) I then recoloured the legs pink and filled them in using the fill tool.
24) Fill in the torso using fill tool.
25) Time to pad out the arms properly. Fill them out by 1/2 pixels on the outside of the arm first, then fill them out on the inside by 3/4 pixels. This should make it fairly close to the body, and in the terms of upper arm and the top of the lower arm, mainly on the characters right (your left) it should come in contact with the body. The characters left arm (your right) should be slightly less thin than the other arm by 1 or 2 pixels. The average thickness for Little Fighter arms is around 6/7/8 pixels. Now would be another good time to round off the shoulders and make them smoothly run with the arms.
26) The hands are generally light blue squares at first going down from the lower arm until the lowest part of the light blue or hands section on your bar guide. Then 1 pixel from the top and bottom of the hand, I would draw 1 pixel outwards either side on each hand. This will give it the Little Fighter characteristic round hand shape.
27) Round off the bottoms of the leg by using a 1px black pencil tool, exactly the same black as the background. This should give it a slightly more natural finish on the legs.
28) The feet are actually more difficult than some people make out. They try to do the same thing with the feet as they do the hands, or atleast some of us used to. For the characters right foot (your left) on the outside of the leg, using the blue or foot colour on the bar guide, go 1 down and 2 along from the leg, 1 down 1 along, 4 down, 1 back 1 down, all the distance to match the width of the bottom of the lower leg (should be across bottom of grid), 1 up 1 along, 4 up, 1 back 2 up. On the other foot, starting from the inside, you should follow this guideline roughly: 4 down from the leg, 1 along 4 down, 1 back 1 down, roughly 10 along, 1 up 1 along, 3 up, 1 back 1 up, 1 back 1 up, 1 back 1 up. This should, if you've done it exactly how I have, produce the same results of good looking feet. If you've done different proportions slightly for the rest of the body, then the proportions may be slightly different for your feet.
29) Using the fill tool, fill in the feet.
30) The area under the characters jaw and around the neck is always slightly darker than the shading on the face. Why? Because it's better hidden from sunlight as the jaw hides it. So take a shading colour slightly darker than that you used on the face and colour around the jawline with a 2 pixel radius from it. Also don't forgot to add this to the neck aswell.
31) I then went across the outline of the figure in the shade colour that you used on the face originally, being careful not to go over the edges or over the previously shaded region. After finishing the complete outline using the 1/2px pencil tool, use the fill tool to fill in the body.
32) Then using the skin colour you used on the face, go around the body to produce the highlights and shadows that the light from the sun would cause. Shadows are normally rounded and are not straight lines, experiment to get the most accurate effect. I will go through shading in a 'shading' tutorial to be released at a later date.
33) Finally you are allowed to use a 1px brush! No longer will you have to face this pencil of doom. Use the 1px brush to fortify the edges, add a bit more shape and some lightly colouring round the edges of your characters body and neck, I found this helped most at the tops of trapezoid muscles and near the neck and hands. Especially around the hands and feet, it gives them a bit more shape.
34) Using the magic wand tool, highlight the entire body. This is mainly for GIMP and Photoshop users, but go into filter and select blur - go to blur. This should give the shading a bit more blend.
35) Your character base should now be done, you can adjust his shape slightly using a black 1px brush and then you can begin working on him. Hurrah!
1) Start off with a grid of 79 x 79 pixels. This is used because it is the standard Little Fighter character size. Make sure that the grid is completely black by using the fill tool on whichever program you choose to use.
2) Copy the bar guide which I have uploaded and put it in the very left or right hand corner of the grid, making sure the bottom of the bar is on the very bottom pixel in the corner. This bar guide is 60 pixels tall, leaving a 19 pixel gap from the top of the grid. The colour codes are as follows:
White Section: Head
Purple Section: Neck
Dark Blue Section: Upper Torso and Upper Arm
White Spot Section: Chin
Green Section: Abdominal Region and Lower Arm
Red Section: Waistline
Pale Blue Section: Hands
Pink Section: Upper Leg
Browny Green Section: Lower Leg
Blue Section: Foot
3) Using the pencil tool, set at 15px put down two brush strokes, vertically in line with each other, the top of the first being in line with the top of the bar guide and the bottom of the other being in line with the white dot section. This produces the main part of the head.
4) Now switch to a 1px pencil. You can then craft the head. This is probably the hardest part of Little Fighter characters and so I made a rough guideline to it.
- On the characters right hand cheek (your left) you go 1 up 2 along, 1 up 2 along, 1 up 1 along, 1 up 1 along from the bottom line or chin. This should give you the right shape for jawline.
- On the front and left hand side of the character (your right) you go 1 up 1 along, 1 up 1 along, 2 up 1 along and 2 up 1 along from the bottom line or chin.
- For the ear, from the last part of the jawline which you had made (see 1st -) go 1 up 4 along, 1 up 1 along, 1 up 1 along, 1 up, 1 up 1 back. You can then fill out the shape for the top of the head, making sure it peaks in line with the top of the bar guide and it should go all the way round to connect with the front of the face of the character.
This will give you the finished shape for your character base's head. Next we move on to shading it.
5) Moving away from the white head seems to be a good idea now, as it will help with your character base's shading later on. So pick the SHADED colour for your characters skin and then using the fill tool or going over with the 1px brush as I did (bit more time consuming and doesn't produce the irritating 'dirty pixels' around the outside of the head) get rid of all the white of your character's head.
6) Now he seems quite shady, we should bring a little light to his life. So I drew a sun with a few rays in the top right hand corner of the grid, nothing too large but it's still there. This acts so that you can imagine or understand where the light hits the head, causing the shadows to be cast. So we grab our actual skin colour or tone, and we apply that to the face. Generall the whole chin should be left shaded, I normally leave about 6 pixels of shading around the back of the head towards the middle, leaving the ear completely shaded. The shading lines should then be drawn back out from the middle of the head to the bottom and the top, giving the head it's more rounded and spherical appearance.
7) This may seem slightly pointless now, it does to me most of the time but I gave it a go anyway, purely because it seems to happen with other people's work to 'highlight' the areas that get hit by the most light. So, for the shaded region I took a sample of the colour using the eyedropper or pipette tool and then increased the brightness by 1% and reduced the saturation by 6%. I highlighted around the ear using this, as the ear is slightly stuck out and will obviously be hit by sunlight. I applied the same style of technique on the very front edge of the face, making it slightly lighter as the sun hits it most.
8) Okay neck time. As much as people say 'you haven't given your character a neck' I never really noticed it until recently. Most characters have a 2 pixel seperation between the head and the trapezius muscle which then moves down to the shoulder. That is your bases neck. Seems really silly doesn't it? Well it isn't, without it, the character looks like its just got a floating egg with a massive great lump sticking out of it rammed on it's shoulders. So using the purple you add the neck. From where the ear attaches to the head, you go 2 down and then another 1 along towards the chin (This is provided you followed my instructions for the shape of your base's head). There, your character now has a neck.
9) Right, now we're going to give your base a mock skeleton, piece by piece. We're going to give your base a spine like element. This is the bone running down your back that connects the lower body to the upper body, it is also used to support your head, as your neck is part of it. It is normally slightly curved to form an S-shape, however, thanks to some people in the previous attempt at a tutorial I made, I have decided that it is much easier to use a straight line. Also, the spine would usually run down from the neck, but I'm giving you a special tip to help your spriting and speeding the process up. From the your character bases right hand side of his chin (your left) draw a dark blue (torso coloured) line down from the jaw right down into the end of the green section or 'abdominal region' (touching the waistline). This will make your character look, if you've done it right, like a balancing egg on a stick.
10) Your character cannot shake those hips, kick or move without specific crossing points known as 'joints'. So, lets give him some hips to shake that booty. This is where I will start talking about camera angles and what is known as the 3/4 view. Your character, I'm assuming is not standing head on towards to the camera, he is instead facing slightly to the side aswell. Now, you'd expect a diagonal line to be drawn here, but that would not be correct. A horizontal line still suffices, but will be different distances from the centre line, which I called the 'spine' for you. On the characters left (your right) there is a dot, somewhere in the infinite distance. This will be the base for your 'point perspective'. As you move from the point in the distance towards the camera, the size of the object increases. Certain sides become more apparent then others. The side closest to the point (the character's left) will therefore be shorter than the side away from the point (the character's right), albeit not by much. I've drawn the waist to come out 8 pixels from the characters left and 9 from the characters right. For thinner characters this could be 7 and 8 or even 6 and 7, for larger it could be 9 and 10 or even 11 and 10. You will draw the waist in red and it should be in line with the red markings on the bar guide, 2 thick. Funnily enough, it is 1 pixel wider on both sides of the head. You're going to ask, why 2 pixels thick? When you look at the human body, where your hips and waist are, your body seems to go straight down before it reaches your legs, and this isn't a small point where it suddenly goes in and back out.
11) Alright, we've got the hips, but what about the shoulders, what on earth should we do about those? The male figure is more triangular, it's shoulders are wider than it's waist. So, refering back to point perspective, the characters left (your right) is going off into the distance, and so appears smaller to you. The characters right on the other hand is coming towards you and so should appear larger. I drew the shoulders on the line just under the chin, they are 2 pixels wider on the characters left than the waist, and 3 or 4 pixels wider on the characters right than the waist. With thinner characters, the difference between shoulder width and waist or hip width is less apparent. With female characters, they have a more hourglass figure, they do not taper down towards the hips but is more tapered towards the middle of the waist (slightly higher up than your hips drawn on your character) and then comes back out or female characters I would recommend using a shoulder width exactly the same size as the hip width, and they should be much less wide than the mans.
12) The character needs something to stand on, so lets give it some legs. Using the pink or upper leg colour, start the first leg, on the characters right (your left) and start it from 4 pixels from the edge of the hip (providing you used my original hip set up, if you used a thinner version, then use 3/2 pixels from the edge) and draw a diagonal line down to the bottom of the grid either at shoulder width or just below, although it should be wider than the hip. What I did was do a rough 4 down by 1 along each time. You then repeat the process with the other leg, 4 pixels from the edge, going down to shoulder width at the bottom. Why shoulder width? Look at how people stand, naturally their feet fall to shoulder width or just under, but why? It's to do with balance. Having your legs closer together makes you easier to knock over or trip as you're a less wide object, and so your centre of gravity is higher. Whereas when your legs are more spread, your centre of gravity is lower, thus making you harder to knock over. I'll explain more about this when I eventually release the 'stances' tutorial I am working on.
13) Okay, now we're moving onto arms. Let your arm be free at your side when you stand up, now look at it. It does not go straight down without bending does it? I have incorperated this into the pose for which this tutorial has done, although it is considered more straight armed for the Little Fighter characters such as Dennis and Davis in their poses. My pose is a bit more 'ready' for combat. We shall do the upper arm first, in the dark blue colour that is the upper arm and torso. I start at the shoulder end (characters left or your right) and go 2 pixels down to start off. I then go 1 along and 4 down (in my diagram this may look confusing, as I have skipped the points at '1 along'). With the character's right or your left, I go 1 along and 3 down after the initial step. The upper arm shall stop at the bottom of the dark blue section on the bar guide.
14) The lower arm is just bending the arm back in slightly in most cases. In the Little Fighter original characters, it would be a continued line down from the upper arm. The lower arm goes from the top of the green section or abdominal and lower arm region and goes down to the bottom of the hips (last red point on your bar guide). See wasn't that easy? You'll note that the lower arm is slightly longer than the upper arm, this I have taken from looking at human beings ordinarily. In Little Fighter characters it is normally the same, as you can tell from the punch sprites.
15) Hands now. Continue them down from the lower arm until the bottom of the light blue or hands section on your bar guide. Simple really, this is because characters do not tend to bend their hands round in odd directions, and ofcourse Little Fighter character's hands are generally round blobs.
16) I then segmented the legs using colours corresponding to the bar guide's colours and heights. This will become important later on when the legs become thickened and the feet need to be done.
17) Trapezoid muscles time. These are your upper back region and help the shoulders and back with most lifting and arm raising movements. On the characters left (your right) the trapezoid is only one pixel higher than the shoulder line and is 1 or 2 pixels closed to the head than the shoulders end point. On the characters right (your left) the trapezoid starts 3 pixels higher than the shoulder line, just under the neck. You bring this out from the jawline to 3 or 4 pixels further than the neck. You then go 1 down and 1 along and then 1 down and 1 along again, this will give you the height and thickness of your trapezoid muscles and how they join to the shoulder. The reason for the differences in height for the trapezoid muscles is once again, point perspective. The closer it is to the camera, the higher and larger it is, the further away from the camera, the lower and smaller it is.
18) Thicken the arms out slightly by adding 1 pixel thickness to the outside of the arms and the shoulder. You can also round the shoulder a bit through whilst you do so. This will give you the general shape of the body and the arm, bringing it more to life.
19) We do the outline of the torso now, just for help on getting a rough estimate on size. You start at the edge of the hips, on the characters left (your right) the torso should either go straight up or about 3/4 pixels up it should go out towards the arm ONLY 1 pixel. It will then continue up from there. On the characters right (your left) I would suggest starting by going 2 up from the hip, 1 along 4/5 up, 1 along 4/5 up and finally 1 along 5/6 up, brining it to the shoulder line. This will give you a rough estimate of the body, useful later.
20) In line with the 'spine' or centre line, under the hips draw a pink line going down 5/6 pixels. This will be the point at which the character's legs will 'meet' from the eyes perspective.
21) Colour coding the drawing correctly, draw the characters right leg (the one on your left) by going 1 along and 6 down from the centre line below the hips, 1 along 6 down, 1 along 5 down. Then draw a line across to the leg line you drew before. On the outside of the leg, you should go 2 down from the hip, 1 along 3 down, 1 along 4 down, 1 along 5 down, 1 along 5 down 1 along 5 down. If not, something similar to this should suffice. Then it should be in line with the line you drew on the other side of the leg (or the bar guide's lower leg bottom). Connect them up.
22) For the inside of the other leg, you go one along 8 down from the centre line below the hip, 1 along 8 down. Then connect it up to the leg line you had drawn for that leg. You should do for the outside of the leg, 4/5 down from the edge of the hip, 1 along 5/4 down, 1 along 5 down, 1 along 7 down. You can then connect this to the other part of the leg.
23) I then recoloured the legs pink and filled them in using the fill tool.
24) Fill in the torso using fill tool.
25) Time to pad out the arms properly. Fill them out by 1/2 pixels on the outside of the arm first, then fill them out on the inside by 3/4 pixels. This should make it fairly close to the body, and in the terms of upper arm and the top of the lower arm, mainly on the characters right (your left) it should come in contact with the body. The characters left arm (your right) should be slightly less thin than the other arm by 1 or 2 pixels. The average thickness for Little Fighter arms is around 6/7/8 pixels. Now would be another good time to round off the shoulders and make them smoothly run with the arms.
26) The hands are generally light blue squares at first going down from the lower arm until the lowest part of the light blue or hands section on your bar guide. Then 1 pixel from the top and bottom of the hand, I would draw 1 pixel outwards either side on each hand. This will give it the Little Fighter characteristic round hand shape.
27) Round off the bottoms of the leg by using a 1px black pencil tool, exactly the same black as the background. This should give it a slightly more natural finish on the legs.
28) The feet are actually more difficult than some people make out. They try to do the same thing with the feet as they do the hands, or atleast some of us used to. For the characters right foot (your left) on the outside of the leg, using the blue or foot colour on the bar guide, go 1 down and 2 along from the leg, 1 down 1 along, 4 down, 1 back 1 down, all the distance to match the width of the bottom of the lower leg (should be across bottom of grid), 1 up 1 along, 4 up, 1 back 2 up. On the other foot, starting from the inside, you should follow this guideline roughly: 4 down from the leg, 1 along 4 down, 1 back 1 down, roughly 10 along, 1 up 1 along, 3 up, 1 back 1 up, 1 back 1 up, 1 back 1 up. This should, if you've done it exactly how I have, produce the same results of good looking feet. If you've done different proportions slightly for the rest of the body, then the proportions may be slightly different for your feet.
29) Using the fill tool, fill in the feet.
30) The area under the characters jaw and around the neck is always slightly darker than the shading on the face. Why? Because it's better hidden from sunlight as the jaw hides it. So take a shading colour slightly darker than that you used on the face and colour around the jawline with a 2 pixel radius from it. Also don't forgot to add this to the neck aswell.
31) I then went across the outline of the figure in the shade colour that you used on the face originally, being careful not to go over the edges or over the previously shaded region. After finishing the complete outline using the 1/2px pencil tool, use the fill tool to fill in the body.
32) Then using the skin colour you used on the face, go around the body to produce the highlights and shadows that the light from the sun would cause. Shadows are normally rounded and are not straight lines, experiment to get the most accurate effect. I will go through shading in a 'shading' tutorial to be released at a later date.
33) Finally you are allowed to use a 1px brush! No longer will you have to face this pencil of doom. Use the 1px brush to fortify the edges, add a bit more shape and some lightly colouring round the edges of your characters body and neck, I found this helped most at the tops of trapezoid muscles and near the neck and hands. Especially around the hands and feet, it gives them a bit more shape.
34) Using the magic wand tool, highlight the entire body. This is mainly for GIMP and Photoshop users, but go into filter and select blur - go to blur. This should give the shading a bit more blend.
35) Your character base should now be done, you can adjust his shape slightly using a black 1px brush and then you can begin working on him. Hurrah!
- Develop your own style. Not everybody can sprite exactly like Little Fighter 2 characters and most have their own odd flaws or differences. Some of them even suit the artist and give it their little signature. Examples of these include: Chishio's work, Alectric's work, Apocalypsis' work, Siegvar's work and Prince_Freeza's. Their styles are definately worth taking a look at. Even though slightly different to Little Fighter, they pull it off with ease and grace.
- Apocalypsis and the other great spriters have said this time and time again. There will probably never be someone capable of creating exact copies of the Little Fighter style. So do not fret if you can't get it as perfect as you'd like to. This guide was only to give you a rough guideline on the shapes and forms and help you to reach your Little Fighter spriting goal. May it be used for such purposes.
- Look at real life. If you ever get stuck on poses and bodyparts, shading and folds, always look to real life. Art might not be exactly like real life, but it in most cases is a simplified form. Take references, move your own body about and look at the angles, shapes and sizes. This should help you create your own sprites and drawings properly.
- Move on to other tutorials. This is not the be all and end all of tutorials, it might be more helpful than others, or it might not. Look at others and judge for yourself how useful it is.
Okay, and now it's credits time:
- Apocalypsis, Prince_Freeza, Phil and everyone else that took part in Prince_Freeza's tutorial thread. For stating that nothing will be exactly Little Fighter and so for setting me the challenge of trying to reach that goal.
- Little Fighter Empire forumer's as a whole. You've all given and gotten me as far as I've come right now and some of you have given me helpful pushes in the right direction that I will never forget. The tutorials made by you guys were really helpful.
- The moderators and admins. Without you lot, none of this could have ever happened. You've been there for us all through thick and thin and helped guide us to our goals and even challenge us to reach new ones. So here is your thanks.
Okay, I guess that's all from me. I just want to say to you all, happy spriting, hopefully this guide helps you,
Eddie
Downloadable Attachments:
Character_Base_Making_Tutorial_Fully_Explained.txt (Size: 17.71 KB / Downloads: 221)
- Written Guide
One day, I shall become, TUTORIAL-MAN: Superhero of writing overly long, overly annoying tutorials which most people probably won't read, but will give it a stab at the first 5 lines!