jubeh
12-20-2011, 03:10 AM
http://i48.photobucket.com/albums/f201/Jubeh/kgif.gifIntroduction
This is the first in a series of pixel art tutorials. We'll start by talking about tools, getting started in spriting, and creating a small sprite using NES limitations.
I am by no means an expert at spriting, and I'm barely an artist so this obviously isn't THE ONE GUIDE. It's just me sharing the stuff I've learned in the past couple years.
http://i48.photobucket.com/albums/f201/Jubeh/kgif.gifTools
You'll just need something that lets you draw and something that lets you see your image in motion. A program that does both, like Graphics Gale is convenient. I actually just use MS Paint for drawing and the sprite editor in Game Maker for testing animations.
http://i48.photobucket.com/albums/f201/Jubeh/kgif.gifSize
When people ask me to help them with sprites the first thing I need to know is what size they're going to be. In retro games its very simple.
Typical NES sprites were 16x16 pixels.
http://i48.photobucket.com/albums/f201/Jubeh/tutlilmario.png
Little Mario fits this specification, while big Mario is twice as tall at 16x32.
Really, assuming you're making a game, the sprite just needs to fit into the bounding box you plan to use.
For our purposes we're going to use 16x16.
http://i48.photobucket.com/albums/f201/Jubeh/kgif.gifPalette
Different hardware had different pallettes. I rarely use a specific palette because I can't be arsed to, but if you want an authentic look you can usually find palettes for specific machines online.
One thing to note is that older hardware had limitations on the number of colors a sprite could contain. For our homework, we're going to use NES limitations.
An NES sprite could only contain 4 colors including transparency. This leaves only 3 colors you can use to convey the image considering that it's not just a big block that takes up the entire bounding box.
http://i48.photobucket.com/albums/f201/Jubeh/tutzeldascreen.png
Thus artists had to design their sprites cleverly. When you get a chance, look at the sprites of some of your famous NES games and see the kinds of tricks they used in order to make the sprite look more colorful than it actually was.
http://i48.photobucket.com/albums/f201/Jubeh/kgif.gifOkay Let's Get Started
Open up your image editor of choice, draw a 16x16 pixel square, and zoom in.
Aw fuck this is too hard I give up.
No. Wait no. We can do this.
My usual process goes something like this.
http://i48.photobucket.com/albums/f201/Jubeh/process-1.png
Box, "skeleton", everything else.
I don't normally flesh out the sprite until I've drawn a skeleton of every animation I plan on using it but for the sake of the tutorial we're gonna do it the hard way.
In your square, you're going to want to start your skeleton. For the sake of animation later, it helps to give every body part its own color. Don't worry about the 3 color limit right now. Just draw a vaguely human shape and tweak it until it looks about right. We are going to animate this sprite as if it were in a platforming game, so you may want to draw it in a 3/4ths position. If not, no big deal.
http://i48.photobucket.com/albums/f201/Jubeh/shootout.png
When designing your character's posture, you might want to consider that whole "sillhouette" thing you do in design class. At 16x16 its pretty hard to do, but dont think of it has a hard fast rule. Just something to consider as you're carving out the figure.
http://i48.photobucket.com/albums/f201/Jubeh/ernieandprincess.png
Now comes the actual hard part. Take 3 colors and make a sprite. Start out with your main outfit color. If you take a look at little mario up there his hair, undershirt, and boots are all the same color. They're seperated enough that his general shape is intact without any "blobbing" of colors.
His fleshtone is also used for the buttons, but because of the placement they actually look like buttons and not nipples. Screw around with the colors until it looks right. It doesn't have to make sense at all. Link is wearing green eyeshadow in his sprite. Its no biggy.
http://i48.photobucket.com/albums/f201/Jubeh/baseballbro.png
I threw this guy together for the tutorial. He'll be a pain in the ass to animate for sure due to his long arms, but that's just part of the challenge. If you're following along feel free to post up your own. You don't have to if you don't want to, but if you do I can give you some advice. Next week we'll be animating them.
http://i48.photobucket.com/albums/f201/Jubeh/shot.png
Coming Next Week: Basic Animation
This is the first in a series of pixel art tutorials. We'll start by talking about tools, getting started in spriting, and creating a small sprite using NES limitations.
I am by no means an expert at spriting, and I'm barely an artist so this obviously isn't THE ONE GUIDE. It's just me sharing the stuff I've learned in the past couple years.
http://i48.photobucket.com/albums/f201/Jubeh/kgif.gifTools
You'll just need something that lets you draw and something that lets you see your image in motion. A program that does both, like Graphics Gale is convenient. I actually just use MS Paint for drawing and the sprite editor in Game Maker for testing animations.
http://i48.photobucket.com/albums/f201/Jubeh/kgif.gifSize
When people ask me to help them with sprites the first thing I need to know is what size they're going to be. In retro games its very simple.
Typical NES sprites were 16x16 pixels.
http://i48.photobucket.com/albums/f201/Jubeh/tutlilmario.png
Little Mario fits this specification, while big Mario is twice as tall at 16x32.
Really, assuming you're making a game, the sprite just needs to fit into the bounding box you plan to use.
For our purposes we're going to use 16x16.
http://i48.photobucket.com/albums/f201/Jubeh/kgif.gifPalette
Different hardware had different pallettes. I rarely use a specific palette because I can't be arsed to, but if you want an authentic look you can usually find palettes for specific machines online.
One thing to note is that older hardware had limitations on the number of colors a sprite could contain. For our homework, we're going to use NES limitations.
An NES sprite could only contain 4 colors including transparency. This leaves only 3 colors you can use to convey the image considering that it's not just a big block that takes up the entire bounding box.
http://i48.photobucket.com/albums/f201/Jubeh/tutzeldascreen.png
Thus artists had to design their sprites cleverly. When you get a chance, look at the sprites of some of your famous NES games and see the kinds of tricks they used in order to make the sprite look more colorful than it actually was.
http://i48.photobucket.com/albums/f201/Jubeh/kgif.gifOkay Let's Get Started
Open up your image editor of choice, draw a 16x16 pixel square, and zoom in.
Aw fuck this is too hard I give up.
No. Wait no. We can do this.
My usual process goes something like this.
http://i48.photobucket.com/albums/f201/Jubeh/process-1.png
Box, "skeleton", everything else.
I don't normally flesh out the sprite until I've drawn a skeleton of every animation I plan on using it but for the sake of the tutorial we're gonna do it the hard way.
In your square, you're going to want to start your skeleton. For the sake of animation later, it helps to give every body part its own color. Don't worry about the 3 color limit right now. Just draw a vaguely human shape and tweak it until it looks about right. We are going to animate this sprite as if it were in a platforming game, so you may want to draw it in a 3/4ths position. If not, no big deal.
http://i48.photobucket.com/albums/f201/Jubeh/shootout.png
When designing your character's posture, you might want to consider that whole "sillhouette" thing you do in design class. At 16x16 its pretty hard to do, but dont think of it has a hard fast rule. Just something to consider as you're carving out the figure.
http://i48.photobucket.com/albums/f201/Jubeh/ernieandprincess.png
Now comes the actual hard part. Take 3 colors and make a sprite. Start out with your main outfit color. If you take a look at little mario up there his hair, undershirt, and boots are all the same color. They're seperated enough that his general shape is intact without any "blobbing" of colors.
His fleshtone is also used for the buttons, but because of the placement they actually look like buttons and not nipples. Screw around with the colors until it looks right. It doesn't have to make sense at all. Link is wearing green eyeshadow in his sprite. Its no biggy.
http://i48.photobucket.com/albums/f201/Jubeh/baseballbro.png
I threw this guy together for the tutorial. He'll be a pain in the ass to animate for sure due to his long arms, but that's just part of the challenge. If you're following along feel free to post up your own. You don't have to if you don't want to, but if you do I can give you some advice. Next week we'll be animating them.
http://i48.photobucket.com/albums/f201/Jubeh/shot.png
Coming Next Week: Basic Animation