 |
Now we'll create a sprite from start to finish. I've included a PSD file you can open with Photoshop (or compatible) so you can see how I arranged things in layers. If at anytime you get confused refer to the included pictures as a reference. If there's something I've left unclear, don't hesitate to email me about it.
-
I'm convinced that a scanner and/or stylus is the absolute best method to use for the base sketch of a sprite. When I say "sprite" I mean a relatively large sprite. It would be pretty useless to sketch out all the animations for a game like Super Mario Bros, the sprites are just too small for it. Perhaps for Super Mario World, and the other 16 bit games. Think SNES graphics, not NES.
When using a scanner, size should be taken into consideration. If you decide to ink the sketches to get a clearer line, be aware that different pens will have different effects. A thick pen will scan well but after resizing the lines might be 2 or 3 pixels thick. If that's what your going for, fine, but most of the time you'll want a thin, crisp line. If using a stylus (a.k.a. Wacom tablet/art tablet) you should find a resolution that your comfortable with so the sketches come out right. These topics are an art in their own rights, but I'm not going to go any farther into them right now.
If you don't have a scanner, there's a Kinko's or equivalent pretty much every where. For now, if you wish, you can use my sketch for practice.
-
Next we turn the blurry sketch into a pixelated base. Resize the sketch to the desired size (this one is 64 x 74). Create a new layer (if your program supports layers, or else just blob over the blurry stuff). I like using a pure green or magenta background and a light gray character with dark gray outlines. This is just a matter of personal taste, try out different styles, a lot of people opt for just a white background with black lines. The key here is to get smooth lines (I didn't do such a great job on this one). You'll have to pick and choose which pixels to keep and which to fill in. Zoom out a lot, it will help you to see if the lines are jagged or wonky in some way not visible when working up close.
-
First thing you should notice is the little color box above the devil girl's left shoulder. Pixel artists use this a lot of the time so they can quickly grab the colors they need easily. Notice the colors are organized into shades, all the reds, blues, and purples have their own column. The number of rows can vary depending on how much detail you need to show. For the skin and hair I chose to use 4 shades (I could have used more or less, depending on palette restrictions, or lack thereof). For the sake of this tutorial, I'll use 4. I only used 3 for the horns/eyes because they take up less of the picture and thus using a whole bunch of shades would be a waist of resources (this is just my opinion of course).
Use the top most shade to fill in the base areas of the sprite (everything that's not the outline). Now use the 3rd shade to color the outlines. There's a reason for using the 3rd shade and not the darkest one (except in the case of the purple, whose 3rd shade is the darkest one), I'll explain it in due time.
-
Now select the 2nd shade and shade away. Don't get too complex with it, just block in where you think the shade should go. Very important: have a constant light source, if the light is shinning on the head from the left, don't have it shinning from the right on the foot (this is very hard to remember, as a lot of the time you don't get to the foot until an hour later, but always keep in you head where the light is coming from. Once again, don't go over-board with the shading. As a general rule, try to keep about half of the sprite shaded, half of it the same.
-
Next, use the 3rd shade to add some more shadows. Usually, you won't do a lot of work in this step. The only noticeable changes are the area around the shoulder, under the neck, and where the hair hangs over the devil girl's forehead. I also used the 4th shade around the shoulder to preserve the outline, as well as under the chin and inside the ear, which are naturally darker than most of the body. As far as I know there's no easy 1-2-3 guide to shading, it's something you have to practice (and practice and practice) until you get the hang of it.
-
Now comes the moment of truth; we're going to make our sprite, which has a "normal" outline, into a sprite with a selective outline. Unfortunately, as far as I can tell, there's no set rule for making the outline (e.g. if the line is at *this* angle and is *this* many pixels long make it like *this*). The only way to figure this out it by trying and referencing other sprites. However, I'll try my best to put into plain English how I go about doing it.
I'm pointing out the 2nd row because those are the only colors I'm using in this step. I think it's best to work like this, one step at a time. It makes thing less confusing, and as far as that goes, I need all the help I can get :)
Okay, take a look at the neck; before, it was all filled in with the 3rd shade. Now I've come in with the 2nd shade and lightened the line up some. I generally stay away from corners, there are times when it's okay to lighten a corner, but as I said, it's something you have to learn on your own. Try flipping between image 6 and 7, you can already tell the sprite is starting to look much more smooth and 3 dimensional. If your having trouble, find some sprites to reference, the Street Fighter Alpha series is probably the best game to ponder over for this kind of stuff.
-
This step is like the last one, except we've moved one row down on the shades (see how setting up your colors in rows can help?). Here you can see I added a bit of shading around the eyes, and the horns look noticeably more 3d. Take a look and notice that while we have done quite a bit of coloring to the lines, it's still mostly made up of the 3rd shade (the shade we used in the colored outline, from the beginning of the tutorial). That's why I told you to use this color instead of the darkest shade, look around at sprites and you'll see the same pattern, 1 shade used mostly for outlining, and a few patches of a darker shade to smooth out the outline.
-
Heh, okay, this step is generally just a bunch of "tweaking." I added dark here, light there, and moved some lines around to make the sprite look cleaner. The most important thing to remember is don't overwork the piece. Once you've gotten to an acceptable place, stop. Your work is now over, mess with the colors if you like (next step), or start on a new sprite, you can tweak and tweak until the cows come home, but you might end up tweaking it into something that doesn't resemble the original at all, so be carefull, and know when to stop.
-
One of my most favorite things about sprites is that you can edit the colors. This may not sound like such a big deal, but it is. Take a look at the new sprite, the only real difference is that I toned down the colors some. I made the skin tone a little softer and turned down the contrast a bit. Compare this new one to the original's colors, and I think you'll see what I'm talking about. While working on the sprite, you may not be able to tell that you colors are a little bit too dark or light. But the good thing is you can always go back and fix the colors once you've got the sprit itself done. Do not overlook this step, it can make a huge difference in the mood and atmosphere of you artwork!
-
Finally (after a little more color tweaking), we are finished with the sprite. The process may seem a little overly complex at first, but after a while it becomes second nature. I hope this helped you out some, and if I find a better/faster/easier way to do this I'll update this tutorial. Feel free to post your sprites here and get some critiques and suggestions from me and other board members, or if your having troubles post your work in progress and see if someone has an answer. Good luck!
Previous page : : Next page
|
