If you are not quite sure what style you want exactly, that's ok. Here is what it breaks down to... ask yourself what frame size you would like to work with. In the end its up to you, there are no rules, only what you think you are capable of doing, and what you think will work the best. However, in this tutorial, I am going to stick to two different sizes to illustrate concepts. These are the 16x24 size sprite frame and the 32x32 size sprite frame. I feel that there is enough of a size difference to significantly change your sprite approach between the two frame sizes, and to warrant an explanation/tutorial of both. Although the exact proportions may be unique for the illustrated frame sizes for the sprites, the techniques and observations made can be applied to any size character sprite that you develop.

Before we dive in, let us discuss the importance of a sprite base. What's a sprite base? Well, basically, a sprite base is just a black outline of a general, sexless, uniform-less character that you will use to make all of your character sets. It will be a lot easier to illustrate rather than try to explain... so let us examine some sprites from Final Fantasy 6(US).

Meet Locke, Cyan, Edgar, and Sabin! Pretty nice looking, huh? Looking at these sprites, they all seem to be pretty unique from each other. They have their own color schemes, facial features, hair color, and clothing style. In fact, the only thing about these sprites that seem to have any similarity are the eyes and the shape of the arms. This is because SquareSoft is good at what they do, and have disguised some sort of sprite base into individual characters. Lets zoom in and see what you wouldn't be able to if you were playing the game on your television.

Having a closer look at things, we can now see general sprite proportion similarities. Lets start from the head and work down. Look at the hair line where the forehead and hair merge together. You can pretty much draw a line across all 4 sprites that would line up where the hairline should begin. Now look at the eyes, looking pretty similar, eh? They clearly have the same chin line, and waist line, and exact same feet size. Also, note how their arms pretty much have the same shape! What am i getting at? The point is that each of these sprites can be made from one sprite base, which helps the artist define the proportions of the character. This way, all the artist needs to do is alter a few pixels here and there to shape the outfit that the character wears. It also sets up a body proportion guide so that they all look consistent. But, we must be careful not to confuse "consistent" with "monotonous". For now, lets look at what would make an appropriate sprite base that could be used to create such characters.

We can use this base to create any character that we need to along the way, whether they be heros, NPC's, villains, etc. In the end, it will save you a lot of work if you create a sprite base for each animation and pose that you plan to implement in your game so that you can reuse them for other sprites as a guide. At first, it might seem like cheating to use sprite bases, but try making several characters without a sprite base. It's not impossible to have consistency, but with a sprite base, you do not have to second guess your sprite's proportions. After making a few sprite bases (facing in all four directions), we can build whoever l we want with no problem!

You might be wondering what that multicolored line is doing there. That is what i call a proportion bar that I sometimes use to line up certain sections of a sprite. For example, in my proportion bar I have a blue section allocating the average space the hair should occupy. The orange allocates the face size, green represents the torso and the yellow represent the legs and feet. Its not necessary to make, but it helps keep things straight while constructing your character. If you have any moral issues against sprite bases, it might be best to toss them aside, especially if you have a wide array of characters to construct. Having demonstrated the importance of a sprite base, let us break into specific frame sizes and proportions.

The 16x24 size frame

This particular frame size is popular in a lot of games such as Legend of Zelda, and many of the later Final Fantasy sprites. Even though 24 pixels is not of base 2 size, ( a factor of 2 to the nth power) the particular height allows enough room for a moderate size body and an overly exaggerated head. The oversized head is great for facial expressions, which enable the characters to display emotion. I will discuss facial expressions in a different section, so we will just mention that it is important to see a characters face. However, it's not necessary if you have something against making detailed faces. Since Final Fantasy 6 character sprites are classic examples of a popular style with a popular frame size, we will look at their proportions and level of detail. First, lets look at the proportional display of a character sprite base, as used previously.

There are some important things to note about the sprite proportions. The most obvious is the overwhelming head size in comparison to the rest of the body. If you count the pixels, it extends 12 pixels high from chin to hair top, making it half the size of the sprite! As stated before, there are no exact rules to this, but if you wish to have a face large enough to express emotion, it would be wise to allocate about half of the frame size for the face and hair. Also, make sure that you do not make the hairline too high. It is important to realize that your hair or hair covered region of your head takes up approximately 1/3 of your head (this topic will also be explained more thoroughly with the facial expression section). So, be sure not to overlook the importance of hair on your character (or at least the skull size above the eye line for a bald character). Also, notice that the chest and torso is only about 2 or 3 pixels tall! If you think about it, this sprite is terribly out of proportion for the normal human being! That's ok though, because with a sprite this small, you don't have a lot of room for detail, so you have to exaggerate certain key features in order to create your character. Like i said before, there aren't any rules, and you have the liberty to do whatever on earth pleases you. So,if you know any other tricks and other subtleties that help you along the way, APPLY THEM! It's not how you get to the finish line, but the fact that you get there that is the key.

Now lets start to build a character. This is where the fun part begins. There are several starting points and Infinite methods in creating a character. I personally combine the steps covered in this tutorial all into one step, but for practicality's sake, we will break it down from the start. Well, first we have to decide what kind of character we want. I'm sure you were thinking about this ever since you had the idea to make a game, and my advice for the designing of a character has already been covered on the previous page. So, lets get to it!

I happen to have been inspired to create a guard/knight type character with some sort of high status (maybe like a mini-type boss sprite). Some features that flashed through my mind included a spiked helmet, gauntlet and leggings. Sounds kind of boring doesn't it? We will just have to stick with this general description, because that is a nice, general notion of what a hero should look like, ala Dragon Warrior style. Our task, is to take this cliche and turn it into something with its own character! First off, we want to shape the outline of our character out of our sprite base. Some things I plan to change are mainly concentrated around the head area (since he will be wearing a helmet, no hair is necessary). I also want to beef up his shoulders to give him a masculine form, so i raised the shoulders a few pixels. After a few minutes, the shaped outline came out like this.

As you can see, i didn't change much from the waist down, but the armor and helmet distinguish the sprite from the sprite base, and that is really the trick. You might not want your outline to be easily recognizable from the base. More importantly I should note that not ALL your characters should look anything like the base... it is ok if a few are the spitting image of the base sprite, such as townspeople, but for our main character, we want to distinguish the new outline from the base. Almost like building on top of the base to hide the old structure. Also, note another change I made with the eyes. I dropped the eyes down one pixel in order to create the illusion of puffy cheeks. Just a subtlety I thought I'd point out. Moving on, now its time to add some color. It is a good idea to do this step in layers if you don't have a lot of experience in shading sprites. Well its really just a matter of picking a color scheme for you character. Let's say gold, red and peach for the skin tone for our sample character, and then using the paint bucket or fill tool in your paint program. Little to no detail is necessary in this step, since you are basically blocking out the character using color.

And voila!!! Ok, I know what you're thinking... he looks like a loser in iron tights! Don't worry we will fix this in just a minute. I buffed him up in some gold armor, but note that I did not go completely overboard with the design. For instance, his chest is a different color than his shoulder plates and his iron tights. This serves as a color barrier between two accessories so that they are easily distinguishable. It is quite easy to see what represents what on the characters body. There is only a little bit of "color bleeding" happening with this helmet and shoulder pads, but when we shade him, we can use highlight tones and shadow to separate these two accessories. Now, lets say for instance I wanted to give him a gold chest plate to complete his knightly outfit. Let's see how looks on the character.

This does not appear to be that bad of a decision. It is the artist's discretion to decide when a sprite looks slightly garbled, and when a sprite looks clean and presentable. But, it is important to note, that the accessories on the sprite on the left are not as defined as the sprite on the right. The colors of the gold chest plate make the helmet and upper body blend together, not to mention surrounding the head in a sea of gold armor. Whatever design your character may take, try not to put the same colors next to each other to the point where the colors start to blend into one mass of a solid color. We use solid colors at first and not just jump into shading so we can spot these kind of things before we start to shade. If you're still a little unclear on the concept, take a look at Locke again.

Let your eye focus on the blue colored accessories of his outfit. You can se that his coat is separated from his bandana by his face, and his pants aren't really touching his coat. The checkered white shirt breaks up the transition between his coat and pants, so that there isn't a big mass of blue. Also notice, that his brown gloves are separate from his brown boots by his coat and pants. Every color collides with a different color, so there isn't any blue coat overlapping blue pants or brown gloves overlapping brown boots. There are a few color changes we COULD make to Locke and there are a few color changes that we should stay away from ( just to illustrate the importance of division of color). Suppose that we wanted to change the color of Locke's bandana to brown. This would work perfectly fine, and is pretty much up to the artists personal discretion. We can see that the bandana is surrounded by the orange face tones and the yellow-greenish hair. There is no blue or brown that surrounds the bandana, so we could make it either blue or brown and it would still be highly distinguishable.

Well, suppose we try to make the gloves blue, because blue might happen to be your favorite color! Here is when we have to take a little color theory into consideration. We see that blue already surrounds the gloves(from the coat). So, it might not be the best decision to try to force the gloves to be blue. As you can see the visual effect of the resulting sprite is not destroyed (lower right hand corner sprite), but it just doesn't allow the hands to stand out as much as the original sprite with brown gloves. Also, look at the balance of color with the blue-gloved Locke. The boots are now the only brown feature in the sprite, throwing off the imagery a tad. Like I said before, these aren't devastating to the imagery, but they can really make a difference in the overall appearance of your sprite. Remember, you only have so much space to represent a human being, every color and every pixel counts!

Lets get back to our hero, who is looking terribly flat at the moment . This is where some traditional 2D art skills come into play. If you aren't that familiar with color theory or shading, you might want to check out the "required reading" section to pick up some info about colors. I will also point out that in small sprites like these, you really shouldn't need more thank 16 colors to illustrate your sprite, so if you find yourself using 50 colors... that might not be as efficient as it could be. But hey, if you have a pretty hot looking sprite that uses 50 colors, and thats what you find works well... then who is anyone to tell you not to use 50 colors. I just wanted to mention the 16 color limitation because a lot of small sprites like these sprites should only use 16 colors if you wanted to place him/her in some sort of GBA game. Using a little color restriction makes your sprites more universal. Having said that we will get back to shading!

Our hero is wearing a good amount of armor. What type of properties does gold, metallic armor have when light shines on it? It reflects light, right? How do we achieve this effect? We need to pick a particular shade of yellow that is significantly brighter than the other shades that you have picked. Highlights stand out the most where shadow meets light, so placing an extremely light shade of a color next to your darkest value will make that white pixel 'pop' out at you. Knowing this, we can place several light shades of yellow pixels on the armor to simulate a light source. Knowing exactly where to put the lighter pixels is something that takes practice and cant really be explained. But just think of it this way... if you put an intense lamp near some shiny plate mail, then the light pixel would just be a reflection of the light source. Hence, if we had a light source coming from the left hand side, then there might be a light yellow pixel placed on the left side of each metallic object. This same rule applies for any other material, but since most materials aren't as shiny as metal, then you would not want to pick such a light shade of whatever color you are using. In my sprite, I assumed a frontal light source, and it turned out something like this.

Notice how there is a highlight on each metallic object which indicates a reflection of the frontal light source. You can also see in the larger version that the reddish cloth behaves in the same manner, but the lightest shade of red is not nearly as bright as the lightest shade of yellow. So, it does not have a shiny feel to it, because the contrast between the red shades are not as dramatic as the contrast between the shades of yellow. Also, notice that i did not eliminate the black outline of the sprite. This is up to the preference of the artist, but be warned that your sprite can easily blend into a similarly colored background and the only thing that might separate the sprite above from, lets say, a hay stack placed behind him, would be that black outline. Now you have your very own homemade hero sprite! Congratulations! Keep in mind that if you're sprite didn't turn out exactly the way you wanted it the first time... that's ok! Sprite making is an elusive skill that can be very tricky to master. Now, let's see how well that sprite base of ours held up from the other Final Fantasy 6(US) character set.

My shading is obviously a tad different from the other characters, but the proportions and sizes match. So, a certain consistency between the sprites is maintained, despite the fact that our new hero is a lot more iron clad than any of the other sprites. Just remember that you might not always get the results you want on the first try, so don't get frustrated! And if you need to, use a reference from a professional sprite, to study their techniques. If you need to copy a style of a well done sprite, do it to learn the style! I have made a few more sprites using our base using the same techniques described above, to illustrate one sprite base's flexibility.