Skyla Doragono
Sponsor
(Note: I didn't take a very serious tone with this, as I hate tutorials that are so stiff you feel like you break them just by scrolling down. If anyone is unhappy with this, I'll change it. Also please note that this isn't finished, and I'll be adding more and more things as time goes on.)
Hello and welcome to my little tutorial. Since ccoa was a <things I can't say in mixed company, so put your own expletive here> and deleted her original spriting tutorial, I've decided to try and make my own.
This tutorial will hopefully help you in not only spriting custom expressions, but also later I hope to go over simple poses as well. Allow me to introduce my favorite lab rat for things like this: Jounouchi.
http://i31.photobucket.com/albums/c391/ ... labrat.png[/img]
Eh heh, anyway, lets start with what you'll be working with.
TOOLS OF THE TRADE
When I sprite, I use Paint Shop Pro 8. It's a simple program to use, and is usually bundled with most Dell computers. The beauty of the program is that it's so simple that any tutorials using it can easily be applied to more advanced graphics programs, like Photoshop or GIMP. You can also use this with any previous PSP program, as long as it supports layering. I believe this is version 6 and up.
At any rate, you'll be using all of two tools while doing sprites.
The paintbrush (or equivalent, depending on your software):
http://i31.photobucket.com/albums/c391/ ... tbrush.png[/img]
These are the settings your paintbrush needs to be at. If you're using a different program, you should know how to do this with your respective program:
http://i31.photobucket.com/albums/c391/ ... ttings.png[/img]
The other tool you'll use is the selection tool:
http://i31.photobucket.com/albums/c391/ ... ection.png[/img]
If you feel confident and you have a steady hand, you can also use the lasso:
http://i31.photobucket.com/albums/c391/ ... ction2.png[/img]
I don't have a steady hand, so I won't be using it, but keep it in mind.
You'll also be doing all of your work on a separate layer. Why? Because if you fuck up royally, to the point where you have to scrap the whole thing, you don't have to hold down ctrl+z until you get back to where you started. All you have to do is ctrl+x to clear the layer, or select the area you messed up on and press the Delete (Del on some keyboards) to clear it.
TIPS BEFORE WE GET STARTED
SIMPLE EXPRESSIONS
BLINKING
OTHER SIMPLE EXPRESSIONS
REALLY SAD
SHOCKED
ANGRY
CURIOUS/REALIZATION
BLUSHING
Next up, I'll cover simple poses you've caught glimpses of through this tutorial.
Hello and welcome to my little tutorial. Since ccoa was a <things I can't say in mixed company, so put your own expletive here> and deleted her original spriting tutorial, I've decided to try and make my own.
This tutorial will hopefully help you in not only spriting custom expressions, but also later I hope to go over simple poses as well. Allow me to introduce my favorite lab rat for things like this: Jounouchi.
http://i31.photobucket.com/albums/c391/ ... labrat.png[/img]
Eh heh, anyway, lets start with what you'll be working with.
TOOLS OF THE TRADE
When I sprite, I use Paint Shop Pro 8. It's a simple program to use, and is usually bundled with most Dell computers. The beauty of the program is that it's so simple that any tutorials using it can easily be applied to more advanced graphics programs, like Photoshop or GIMP. You can also use this with any previous PSP program, as long as it supports layering. I believe this is version 6 and up.
At any rate, you'll be using all of two tools while doing sprites.
The paintbrush (or equivalent, depending on your software):
http://i31.photobucket.com/albums/c391/ ... tbrush.png[/img]
These are the settings your paintbrush needs to be at. If you're using a different program, you should know how to do this with your respective program:
http://i31.photobucket.com/albums/c391/ ... ttings.png[/img]
The other tool you'll use is the selection tool:
http://i31.photobucket.com/albums/c391/ ... ection.png[/img]
If you feel confident and you have a steady hand, you can also use the lasso:
http://i31.photobucket.com/albums/c391/ ... ction2.png[/img]
I don't have a steady hand, so I won't be using it, but keep it in mind.
You'll also be doing all of your work on a separate layer. Why? Because if you fuck up royally, to the point where you have to scrap the whole thing, you don't have to hold down ctrl+z until you get back to where you started. All you have to do is ctrl+x to clear the layer, or select the area you messed up on and press the Delete (Del on some keyboards) to clear it.
TIPS BEFORE WE GET STARTED
- SAVE OFTEN. You never know when a program will crash or a power out will happen.
- Don't be afraid to experiment or deviate from the tutoral. The best graphics are usually created through experimentation.
- Use shift+click while coloring over an area with care. The worst mistakes are made by the lazy.
- NEVER USE THE FILL TOOL, unless you're filling in the background of a sprite with one color.
- Don't be afraid to zoom in until the character set takes up your full screen. It's a good thing to see what you're doing!
SIMPLE EXPRESSIONS
BLINKING
We'll start with the simplest of expressions, blinking.
Blinking is an animated expression that a character usually does when they're standing still, so the first thing you're going to want to do is copy the "idle" frame to all of the frames for the row you're working on.
http://i31.photobucket.com/albums/c391/ ... neojou.png[/img]
That's a lot of spazes.
Anyway, the first frame you're going to leave alone, so do so. Create a new layer, and move on to the second frame.
The first thing you want to do is take the second to lightest color, and color over the top two rows of the eyes.
http://i31.photobucket.com/albums/c391/ ... myeyes.png[/img]
Now, take the dark grayish color that is on top of your eye color, and color over the lighter gray "whites" of the eyes. Then, use a light brown color -- preferably the one from the chin -- and put it on the end of the dark gray line, close to the center. Once this is done, fill in your shading accordingly.
http://i31.photobucket.com/albums/c391/ ... blink1.png[/img]
Note: I just realized I never shaded the skin under the hair on my Jounouchi sprite. Never, ever forget to do this. I'm a bad Skyla. D:
Also note: This makes a good "sad" expression as well.
For the next frame of the animation, you're going to do pretty much the same thing, only you want to color over the first three rows of the eyes, and then sprite the gray line over the eye color. Like so:
http://i31.photobucket.com/albums/c391/ ... blink2.png[/img]
Don't forget the dab of brown at the end of each eye. Also, remember what I said about experimenting? Don't be afraid to try something new, like I just did here; I added a line of shadowing just above the eye line. It looks quite good at it's normal size.
Note: You can also use this frame for just simply having your characters eyes closed, like they're sleeping or what have you.
For the final frame, copy over the work you did for the second frame. This is why I love working with layers; when you need to copy, you only copy over what you need. :P
http://i31.photobucket.com/albums/c391/ ... ingjou.png[/img]
And there you are! One blinking sprite.
Blinking is an animated expression that a character usually does when they're standing still, so the first thing you're going to want to do is copy the "idle" frame to all of the frames for the row you're working on.
http://i31.photobucket.com/albums/c391/ ... neojou.png[/img]
That's a lot of spazes.
Anyway, the first frame you're going to leave alone, so do so. Create a new layer, and move on to the second frame.
The first thing you want to do is take the second to lightest color, and color over the top two rows of the eyes.
http://i31.photobucket.com/albums/c391/ ... myeyes.png[/img]
Now, take the dark grayish color that is on top of your eye color, and color over the lighter gray "whites" of the eyes. Then, use a light brown color -- preferably the one from the chin -- and put it on the end of the dark gray line, close to the center. Once this is done, fill in your shading accordingly.
http://i31.photobucket.com/albums/c391/ ... blink1.png[/img]
Note: I just realized I never shaded the skin under the hair on my Jounouchi sprite. Never, ever forget to do this. I'm a bad Skyla. D:
Also note: This makes a good "sad" expression as well.
For the next frame of the animation, you're going to do pretty much the same thing, only you want to color over the first three rows of the eyes, and then sprite the gray line over the eye color. Like so:
http://i31.photobucket.com/albums/c391/ ... blink2.png[/img]
Don't forget the dab of brown at the end of each eye. Also, remember what I said about experimenting? Don't be afraid to try something new, like I just did here; I added a line of shadowing just above the eye line. It looks quite good at it's normal size.
Note: You can also use this frame for just simply having your characters eyes closed, like they're sleeping or what have you.
For the final frame, copy over the work you did for the second frame. This is why I love working with layers; when you need to copy, you only copy over what you need. :P
http://i31.photobucket.com/albums/c391/ ... ingjou.png[/img]
And there you are! One blinking sprite.
OTHER SIMPLE EXPRESSIONS
Using similar steps above, you can make other simple expressions, like being happy (^_^) or being annoyed (>_<). These are only a couple of examples, but feel free to experiment!
http://i31.photobucket.com/albums/c391/ ... ssions.png[/img]
http://i31.photobucket.com/albums/c391/ ... ssions.png[/img]
REALLY SAD
I personally like the second frame of the blinking animation for a sad expression, but here is an alternate way to do it.
Make a new layer as usual, and use the second lightest skin color to cover all but the eye color, and the last two columns of the eyes except for the first pixel. I know that's a little hard to understand, so here's a picture:
http://i31.photobucket.com/albums/c391/ ... eabuse.png[/img]
Now, this takes some messing around with pallet colors. Take the eye color, and go to your color pallet. With some guess and testing, choose the next darkest color.
http://i31.photobucket.com/albums/c391/ ... loring.png[/img]
Remember not to make it too dark or too light! Using this color, put two pixels over the original eye color. Now, choose another darker color, and put another pixel of that color on top of the last, so it looks like this:
http://i31.photobucket.com/albums/c391/ ... eabuse.png[/img]
Now, use a dark gray color (like the kind that surrounds the ears in this example), and outline the top of the eyes.
To shade the whites of the eyes, take a darker gray (go back to the bottom layer to get it if you need to), and put a pixel of color next to each 2nd darkest eye color on the proper side, then fill in the rest of the shading on the skin accordingly.
http://i31.photobucket.com/albums/c391/ ... nished.png[/img]
And that's it! It sounds complicated, and is difficult to describe. That's why I don't like using this one. :P
Make a new layer as usual, and use the second lightest skin color to cover all but the eye color, and the last two columns of the eyes except for the first pixel. I know that's a little hard to understand, so here's a picture:
http://i31.photobucket.com/albums/c391/ ... eabuse.png[/img]
Now, this takes some messing around with pallet colors. Take the eye color, and go to your color pallet. With some guess and testing, choose the next darkest color.
http://i31.photobucket.com/albums/c391/ ... loring.png[/img]
Remember not to make it too dark or too light! Using this color, put two pixels over the original eye color. Now, choose another darker color, and put another pixel of that color on top of the last, so it looks like this:
http://i31.photobucket.com/albums/c391/ ... eabuse.png[/img]
Now, use a dark gray color (like the kind that surrounds the ears in this example), and outline the top of the eyes.
To shade the whites of the eyes, take a darker gray (go back to the bottom layer to get it if you need to), and put a pixel of color next to each 2nd darkest eye color on the proper side, then fill in the rest of the shading on the skin accordingly.
http://i31.photobucket.com/albums/c391/ ... nished.png[/img]
And that's it! It sounds complicated, and is difficult to describe. That's why I don't like using this one. :P
SHOCKED
The shocked expression is really fun to do, and is also really easy.
For once, we don't need to color over the eyes at all. Instead, take the darkest gray color at the top row of the eyes and color over the brown color next to it.
Now, take the light gray that's used for the whites of the eyes. In the second eye row from the top, color over the darkest gray color with this light gray. Now, under the eye color, add a two-pixel line under it. This should be the end result:
http://i31.photobucket.com/albums/c391/ ... igeyes.png[/img]
Here's where we can have fun. Take a dark red color. See the lightest color right in the center or the sprites face? Not the row directly under, but under that, just above the chin: put a dot of red there for the mouth.
http://i31.photobucket.com/albums/c391/ ... s/oooo.png[/img]
But wait, that's not quite spastic enough for Jounouchi.
Try adding one red pixel on either side of the one you placed. Then, take a lighter red color, and add two rows under the darker red color.
http://i31.photobucket.com/albums/c391/ ... s/gonk.png[/img]
Much better!
Also, I forgot -- again... -- but don't forget to shade the skin accordingly.
For once, we don't need to color over the eyes at all. Instead, take the darkest gray color at the top row of the eyes and color over the brown color next to it.
Now, take the light gray that's used for the whites of the eyes. In the second eye row from the top, color over the darkest gray color with this light gray. Now, under the eye color, add a two-pixel line under it. This should be the end result:
http://i31.photobucket.com/albums/c391/ ... igeyes.png[/img]
Here's where we can have fun. Take a dark red color. See the lightest color right in the center or the sprites face? Not the row directly under, but under that, just above the chin: put a dot of red there for the mouth.
http://i31.photobucket.com/albums/c391/ ... s/oooo.png[/img]
But wait, that's not quite spastic enough for Jounouchi.
Try adding one red pixel on either side of the one you placed. Then, take a lighter red color, and add two rows under the darker red color.
http://i31.photobucket.com/albums/c391/ ... s/gonk.png[/img]
Much better!
Also, I forgot -- again... -- but don't forget to shade the skin accordingly.
ANGRY
An angry emotion is the last of the semi-complicated stuff, but it's really not all that bad once you get the hang of it.
For this, we're going to use the selection tool to cut the eyes of the sprite out and put them on a new layer. Once that's done, select the first two rows of the eyes and move them down one pixel.
http://i31.photobucket.com/albums/c391/ ... adhole.png[/img]
Add a brown pixel on the new second row of the eyes, near the center, then shade the rest of the skin accordingly.
http://i31.photobucket.com/albums/c391/ ... /grrrr.png[/img]
And now you have one very angry puppy. :P
For this, we're going to use the selection tool to cut the eyes of the sprite out and put them on a new layer. Once that's done, select the first two rows of the eyes and move them down one pixel.
http://i31.photobucket.com/albums/c391/ ... adhole.png[/img]
Add a brown pixel on the new second row of the eyes, near the center, then shade the rest of the skin accordingly.
http://i31.photobucket.com/albums/c391/ ... /grrrr.png[/img]
And now you have one very angry puppy. :P
CURIOUS/REALIZATION
This one's kinda hard, and I wouldn't recommend it until you're more confident with spriting. If you're already a great spriter, hey, have at it.
First of all, just copy or cut the entire head onto a new layer. Then, you need to check if your character has big hair; hair that's already at the top of the graphic. If it is, move it one pixel down. Then, move the entire head one pixel up. Then, select the eyes and move them up. Don't forget to compensate for any hair that might be in the way. This should be the end result:
http://i31.photobucket.com/albums/c391/ ... s-ness.png[/img]
I know it looks strange, but bear with me.
Next, fill in the holes in the sprite; give it a neck, fill in the shading and other blank spots resulting from the move around.
http://i31.photobucket.com/albums/c391/ ... edhead.png[/img]
Now, see where that light spot is in the middle of the face? Replace it with a dark red color. Under that dark red, put another light red color.
http://i31.photobucket.com/albums/c391/ ... ousjou.png[/img]
And there you are. :3
First of all, just copy or cut the entire head onto a new layer. Then, you need to check if your character has big hair; hair that's already at the top of the graphic. If it is, move it one pixel down. Then, move the entire head one pixel up. Then, select the eyes and move them up. Don't forget to compensate for any hair that might be in the way. This should be the end result:
http://i31.photobucket.com/albums/c391/ ... s-ness.png[/img]
I know it looks strange, but bear with me.
Next, fill in the holes in the sprite; give it a neck, fill in the shading and other blank spots resulting from the move around.
http://i31.photobucket.com/albums/c391/ ... edhead.png[/img]
Now, see where that light spot is in the middle of the face? Replace it with a dark red color. Under that dark red, put another light red color.
http://i31.photobucket.com/albums/c391/ ... ousjou.png[/img]
And there you are. :3
BLUSHING
I'll end the expressions with a really easy one. This one requires you to use layers. Now normally, I set up my layers before I actually start using the paint tool, but in this instance, I'll make an exception to better explain it.
Make your layer, and then color over the bottom of the face, up to just above the eye color with a light red ("It's not pink, it's light red!").
http://i31.photobucket.com/albums/c391/ ... ghtred.png[/img]
Now, all you have to do on the layer is lower the opacity. For Paintshop Pro, 35% is quite good, but it may be different for each graphics program.
http://i31.photobucket.com/albums/c391/ ... ublush.png[/img]
This can also be used in conjunction with other expressions for a cute effect.
http://i31.photobucket.com/albums/c391/ ... blush2.png[/img]
And that's all! Feel free to try different reddish colors and different expressions.
Make your layer, and then color over the bottom of the face, up to just above the eye color with a light red ("It's not pink, it's light red!").
http://i31.photobucket.com/albums/c391/ ... ghtred.png[/img]
Now, all you have to do on the layer is lower the opacity. For Paintshop Pro, 35% is quite good, but it may be different for each graphics program.
http://i31.photobucket.com/albums/c391/ ... ublush.png[/img]
This can also be used in conjunction with other expressions for a cute effect.
http://i31.photobucket.com/albums/c391/ ... blush2.png[/img]
And that's all! Feel free to try different reddish colors and different expressions.
Next up, I'll cover simple poses you've caught glimpses of through this tutorial.
.