How to Sprite Like a Ninja

じ☆ve冰风

How to Sprite like a Ninja
aka: Spriting made Simple!
​

Hey folks, I'm here today to help you learn how to sprite.  There's nothing like watching a sprite you made walk around your game, but I've seen a lot of people too scared to give it a try.  So I'm breaking down my spriting system to give you five steps that will lead you to a completed sprite.  Keep in mind that this isn't the only way to do it, if you find a way that works better for you, use it!


Hidden hint: Spriting and game making should be fun!  If you're having trouble, take a break and come back to it later.

Step 1

​

Decide what you're going to sprite.  That seems like common sense, right?  But sometimes you just have a vague idea of what you want, like "I want to make a modern-looking sprite!".

A 'modern-looking sprite' could mean just about anything (just think about how many different looking people you see every day!), and it can be daunting and seem almost impossible when you're staring at an empty sprite sheet.  So before even opening up your art program, take some time to decide on the basic look you want for your sprite.  For this tutorial I want to make a relatively simple modern-looking male and female sprites, so they'll be wearing jeans and a t-shirt, and their hair will have shaved sides (mostly because it seems fun).

With that decided, it's time to get started!  Since we're making normal humans, we can use the body bases found in the generator.

​

Hidden hint: Remember to keep checking how things look while working.  Having an extra view at 100% while being zoomed in will help make sure things are clear on the sprite. A fancy design that looks good at 300% may look like a mess at actual size.

Step 2

​

Now that we have a plan in mind, it's time to get these sprites dressed.  We'll start by roughing out the clothes and hair.  That means all we'll be doing is getting the general shapes right, using the outline and base colors.  Don't worry about things being perfect at first, we can go back and fix things later.


Hidden hint: Make your life a lot easier by working on separate layers for pants, shirts, and hair.  You'll make mistakes while learning to sprite, but if everything is on separate layers you don't have to worry about messing up something that you're happy with.

Let's start with the pants.  There are two basic ways to get started: outline the pants and then fill in the base color, or use the base color to figure out the shape and then outline it.  Either will work, though I prefer to outline first.

​

And done!  Since these aren't baggy pants, they follow the lines of the body.  I also added shoes at this stage, since they are simply a line at the bottom of the sprite's legs.  Now you might be thinking "but what about the details?  Where are the pockets?".  Those will be added later, along with the shading.  For now, we just want to get the general shapes down.

Next we'll add the t-shirts (on a new layer, of course).  The t-shirts are going to follow the body's lines a lot like the pants, though do I flare the sleeves out a touch.  To better match MV's defaults, we'll make the bottom outlines of the sleeves and shirt black instead of grey.  The default sprites often have black on the bottom edges of clothing, probably to better separate the different pieces when we're looking at them.

​

With the clothing roughed out, now we move onto the hair.  For the hair, since I wanted to have shaved sides, we'll be using two different colors for the shaved and non-shaved parts.  It's a lot easier to tell what is what with the two colors, and we can always recolor the shaved part to match later (or leave it as is and have dyed hair on the sprite).  Normally a sprite's hair sits a few pixels above the head, because hair is poofy, but the shaved parts will hug the head.  For the non-shaved part of the hair, I want it pulled back in a ponytail or bun, so while outlining we can add in some lines for hair strands.  We can change them later, but it's helpful to have a simple guide to keep in mind when we're shading later.

​

And with that, step two is complete for this frame!  Of course, there are still eleven other frames that will need to be done, but here you can decide whether you want to complete each step for all the frames at the same time, or go through all the steps as you work on each frame.  Try both ways, and see which way works best for you.

While we're here, let's quickly talk about the other directions.  The previous steps apply to them as well, so just keep in mind anything special that may not be visible from the front.  The side and back views will show more of the hair, and now we can see that I went with a bun for the male sprite and a ponytail for the female.

​

Hidden hint: Depending on the clothes, the frames can be copied from the front to the back with a only few adjustments, and the left can be mirrored to make the right view.

If you've finished all the frames for this step, you should have a sprite that looks something like below.  Since the ponytail is long and loose, you can see that is swings with each step.  Anything like that, such as long hair, capes, or scarfs, will move as the sprite walks, so just remember to add in that movement to the frames.

Step 3

​

With the sprite roughed out, it's time to now add shading.  I know getting shading right is a challenge, so let's take a quick overview first.  We used a base color to fill in the clothes and hair, so now we want to add in darker shadows and lighter highlights.  Keep in mind our light source is coming from the upper left, so our shadows and highlights will respond to that.  If you're not used to spriting that may not make a ton of sense, but don't start panicking!  We already have a slight guide to shading on the bases.  They show where the light hits the bodies, and where shadows fall.  The tighter the clothing, the more the clothing will follow the base's shading.  Our clothes hug the body pretty closely, so we can get a rough look at how it could be shaded.  The red marks the shadows and the purple marks the highlights.  So just by layering those onto our clothes and swapping them to the correct shades, we can see how it'd look.

Hidden hint: When picking colors, check out the default sprites.  They have a lot of colors to choose from, and already have the shadow and highlights figured out.  All of the colors used in our sprites here were pulled from the defaults!

Of course, the rough shading isn't perfect, so let's go through the steps for each piece.  We'll start with the pants again.  I personally start with the shadows, as well as adding in some details with the outline color to make the pants more jeans-like (mostly by adding some pockets).  The shadows fall near the edges of the pants, and where wrinkles would form.  Then we add the highlights, which mostly fall on points that stick out slightly, like the knees.  Since the pants are pretty tight, there's also some highlights near the pockets and crotch.  Don't forget to add some highlights to the shoes as well!

​

The shirt is next.  We aren't looking for a skin-tight shirt here, so the shading won't be as similar to the rough shading as the pants were.  The big points for shadows will be the armpits and where the shirt wraps around the torso.  We also want to put some shadows near the neck, since the sprite's big head will cast a shadow.  The shirt's highlights are going to be focused on the upper chest and shoulders.  I like to also add some highlights to the stomach area, since most t-shirt do pull away from the body a bit.

​

Hidden hint: Can't get the shading right?  Try looking for some references in the defaults.  There's a wide variety of clothes, and it's likely something will be similar to how you'll want to shade.

Clothes are done, now it's time for the hair.  Remember those hair strands we drew out earlier?  They come into play now.  The shadows will fall close to those strands, and the highlights will mostly fall between them.  Hair is also usually shinier than fabric, so we'll use the shadow color to lighten the upper left outline, as well as add a second, even lighter, highlight.  We also want to put some shadows on the skin, since hair hangs above the face and does cast shadows onto it.  Since this hairstyle is pretty close to the head, the shadows won't be too dark.

And that's the shading done!  Using these steps we can shade all the other directions, keeping in mind where the light source is.

​

When all the frames are done, we'll have sprites that look like this.  Exciting, isn't it?  With the first three steps completed, these sprites are technically ready to be dropped into a game!  The last two steps are much shorter, but just as important, so bear with me.

Step 4

​

Now, I already said that the sprite could be used in a game, right?  But there are still a few things we can change or add to make the sprite even better.

First, we don't want to forget to recolor the shaved sides of the hair.  I decided that I wanted it to all be one color, so we need to color it with the darker purple.  Luckily that's really easy to do with the paint bucket, so we can just color the shaved parts with the outline and shadow colors.

​

Hidden hint: The paint bucket tool is a great way to recolor any part of the sprite.  You can use it to quickly recolor sprites to make a whole bunch of NPCs.

Now the sprites are complete!  Unless of course, you're like me and decide that you want to add in a few little details to give your sprites more personality.  After staring at these two for so long, I decided that they're the type of people to wear earrings and eyebrow rings.  So let's give them some eyebrows that match their hair, and some simple metal hoops.  The earrings are small, so it only takes three or four pixels to make them appear.  The girl also gets some eye makeup, which just follows the base's eyelids.

​

With that decided, it's pretty quick to add those little details to the other directions.  All we have to do is keep in mind which sides the piercings are on.

Once you finish up all four steps for the sprite, it's done!  You'll end up with some sprites that look like this.

Step 5

​

Last, but certainly not least, is step 5: testing, testing, testing!  You can actually (and probably should) test how your sprite is looking in-game as you make it.  It's as easy as setting an event to have that sprite's graphic and walk around a map.  Look for anything that's out of place, like rogue pixels, or how your clothes and hair moves.  If it looks odd, just go back and change it!

​

And that's it!  You can use these steps to make any sprite (large, small, SV, downed).  Practice makes perfect, so get out there and try making your own sprites!

Wow, this got a lot longer than I expected, I hope y'all find this useful.  If you have any questions or comments, feel free to let me know.  Happy spriting!





本贴来自国际rpgmaker官方论坛作者:hiddenone处,因国际论坛即将永久关站,为了存档多年珍贵资料,署名转载到本论坛存档,由于官方帖子为英文原帖，需要中文翻译请点击论坛顶部切换语言为中文就可以将帖子翻译成中文浏览,方便大家随时查看,原文地址：https://forums.rpgmakerweb.com/threads/how-to-sprite-like-a-ninja.68524/