I'm more worried about TempesT liking PURPLE penises than Balthazar having one

Tried my hand at a Street Fighter 3-styled Jin Kazama (Tekken 3 appearance).




I've kept a sort of progress log; so I wanted to share that. A sort of tutorial perhaps, this might be useful to you if you're learning to sprite!
This is Street Fighter 3-styled though, but the bases for other styles are there as well


#1

Get your base and scale it to the desired size.


#2

What i can recommend is to go to Photoshop and colorize/desaturate your base image, so it makes tracing easier. SeanAlty says he blacks it out, that works too, but not really recommended if you're still learning, or if it's not really necessary.


#3

Trace your base image. For Goku and just usually overall, I use different colors (such as vibrant greens and blues) to trace the seperate parts of body and clothing, but all black works as well, just don't get tangled up with all the lines and have a reference image of who/what you're spriting to see what goes where.


#4

Now remove all the colors that are NOT your baselines. I use Gif Movie Gear to pick all the transparancy colors, but other programs work too, or even do it by hand. But that is lame and a waste of time.


#5

You can now fill in all the seperate parts with simple colors, just to have some differencation. I usually use the color that eventually becomes the lightest color for the lit parts.


#6

Here starts the difficult/fun part. Here you decide your lightsource, and place all your shadows (and drop shadows if that's what you're going for, think KOF XII).
Since I'm going for SF3 styling here, I used desaturated colors for the shaded parts (I already finished the hair and the belt at this state, since it were the smallest parts, and hair is pretty fun too usually!).


#7

Now that the shaded colors are placed, it's time to start refining your sprite. Now you can place the darkest shade for you lit parts (I'm finishing the lit parts now and work on the shaded parts later on). In SF3, usually these are also along the edges of the lit parts. Some inner detailing is also applied with this shade. This shade is usually all the way along the edge of the shaded parts, which allows for a smoothing look (color blending).


#8

We continue with the refining by adding a slightly lighter shade (lighter then the previous, but still darker then the first placed lit color). Some of these colors also appear on the edges of the lit parts (where the skin is the roundest/catches the most sunlight). Remember, shading is not just ment for color blending, but can also make edges appear rounder, or create a sense of thickness, when necessairy.


#9

Now it's time to fill in the darkest edges of the lit parts, such as muscle definition and layering. This color is darker then the one from #7 (but still vibrant).


#10

For skin, I usually apply an EVEN darker, but still vibrant, color, for even more refinement and clearer definition. Here, I did just that.


#11

Now the lit parts are done (or if you want you can apply some very light colors, for reflections, but I've not done that here. This is mostly done for bald/large(fat) persons, or robots(metal objects). So, it's time to color the edges of the SHADED parts. Choose a dark, but desaturated color here.


#12
'
Now you pick a lighter color then the one from #11, and add color to where a little more definition is needed. In SF3, I've seen the shaded parts usually have less colors then the lit parts, so we're gonna leave them at 3, as it is now.


#13

Here you can fix some errors if you find some, or just edits parts that seem a little off. Finishing up!


#14

Now you can go to Photoshop, remove the background and then go to Mode > Indexed Color, then choose Mode > Color Table, you can play with your colors a little, and refine these if needed. Depending on your color seperation, you can then play with the colors to make different palettes. Hope this was useful

Here's the entire progress in animated gif form;

No, Balthazar, sprite this badass instead

Spoiler, click to toggle visibilty

Ctrl + U  brings up the Saturation/Colorize panel. Ofcourse, you need to make sure your image is in RGB mode first, it won't work if it's in greyscale or whatever