hiddenone

Lurker Extraordinaire
Global Mod
Joined
Feb 19, 2014
Messages
2,612
Reaction score
5,516
First Language
english
Primarily Uses
RMMZ

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!
Vhmx9SN.png
Hidden hint: Spriting and game making should be fun! If you're having trouble, take a break and come back to it later.

5wqDixA.png
Step 1
R8ZH7fx.png
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.

pjCDGjM.png
Vhmx9SN.png
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.

rThrOgG.gif
Step 2
xUvmHUS.gif
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.
Vhmx9SN.png
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.

dXVgdk7.png

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.

POxb1BU.png

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.
pRlOjR1.png

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.

GxTBZkn.png
Vhmx9SN.png
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.

VPQcqWl.png


DERTRQB.gif
Step 3
LnEL4wJ.gif
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.
UbbGJjN.png
Vhmx9SN.png
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!

X41sb8G.png

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.

L1MJ35X.png

Vhmx9SN.png
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.

iIXHAxI.png
And that's the shading done! Using these steps we can shade all the other directions, keeping in mind where the light source is.
krT5lfk.png
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.
S8QNJ8O.png

EhSlGP4.gif
Step 4
nPQIfmn.gif
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.

yoHOx8u.png

Vhmx9SN.png
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.

reFSAh3.png

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.

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

4ZOUcIS.gif
Step 5
B7yvOER.gif
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!

nogj3EY.gif

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!

Vhmx9SN.png
 
Last edited:

Fudge

Veteran
Veteran
Joined
Aug 9, 2016
Messages
56
Reaction score
46
First Language
English
Primarily Uses
Wow... thanks a lot for sharing your technique. This looks really helpful. I'll look at it more tomorrow.
 

MysteryCorgi

Villager
Member
Joined
Sep 16, 2016
Messages
18
Reaction score
12
First Language
English
Primarily Uses
VNM
This is awesome! Thank you.


I love the lighting on the hair! Also shaved sides are the best.
 

IAmJakeSauvage

Veteran
Veteran
Joined
Dec 4, 2015
Messages
418
Reaction score
671
First Language
English
Primarily Uses
RMMV
This is actually super helpful! Thanks!
 

Krad1213

Laughin-Prince
Veteran
Joined
Apr 6, 2015
Messages
51
Reaction score
23
First Language
English
Primarily Uses
RMMV
This looks super helpful, though I have to ask. How would you do it if you don't want the character to look buff? x'D
 

hiddenone

Lurker Extraordinaire
Global Mod
Joined
Feb 19, 2014
Messages
2,612
Reaction score
5,516
First Language
english
Primarily Uses
RMMZ
@Krad1213 Make the character's sprite squishier. :rwink: The buff look comes from having the shading follow the muscle closely, so if you go easy on the shading then the sprite doesn't look quite as buff. Making the clothes looser so they don't hug the body can also help.
WcPVWhQ.png
 
Last edited:

Trihan

Speedy Scripter
Veteran
Joined
Apr 12, 2012
Messages
3,713
Reaction score
2,830
First Language
English
Primarily Uses
RMMZ
The problem is I'm pretty useless at art these days as I stopped practicing it and focused on coding/writing/composing instead. I can't be good at everything unfortunately.
 

SwaggyPhantom

D3@DP00L ~ S3xy M@TH@F@CK@~~~~
Member
Joined
Mar 18, 2017
Messages
12
Reaction score
25
First Language
English
Primarily Uses
RMVXA
sorry if I sound like a total idiot , but what kind of Application do you use to edit your sprites ? o/ :o
 

Lynch

Veteran
Veteran
Joined
Dec 9, 2017
Messages
44
Reaction score
6
First Language
English
Primarily Uses
RMMV
Wow! Thanks a ton!
 

WickedWolfy

Touch Fluffy Tail!
Veteran
Joined
Nov 27, 2017
Messages
115
Reaction score
50
First Language
En
Primarily Uses
RMMZ
Thank you for the wonderful tutorial - even a completely non-creative person with paws for hand (like your truly) would be able to follow.

Would it be possible to provide some details on the "moving battler", like in step 5, please?
I would also love to hear a suggestion for step 4 for selecting "darker" and "shinier" colors, assuming use of photoshop.

Wait! But there's a bonus question! How do I paw the "other" battlers clothing? Like "sleeping" or "dead" ? =(
 

Lynch

Veteran
Veteran
Joined
Dec 9, 2017
Messages
44
Reaction score
6
First Language
English
Primarily Uses
RMMV
Question: I want to make some moving npc. Like a farmer raking and maids cleaning and maybe some others. Are there places to get those or is there a somewhat easy way for a non-creative person to make them?
 

hiddenone

Lurker Extraordinaire
Global Mod
Joined
Feb 19, 2014
Messages
2,612
Reaction score
5,516
First Language
english
Primarily Uses
RMMZ
@WickedWolfy Do you mean a guide for sprited SV battlers? Besides being larger, I honestly find the steps to be pretty much the same for the walking sprites (they just tend to take a lot longer to finish). For picking colors, there are quite a few good tutorials out there that can help (like this one over on Pixel Joint), but personally I find it simplest to look at the default sprites and use their palettes for most things. As for making sleeping/dead sprites, Avery made a great tutorial for it already, I'd definitely recommend checking it out!

@Lynch I'm sure there are some behavior sprites in the resource section, but they're not all that hard to make with some practice! It mostly would involve tweaking the base sprite, like lifting arms while keeping their legs still and adding in an item. Bonkers has a tutorial on making behaviors, but if people are interested I could probably add in my own here. :)
 

WickedWolfy

Touch Fluffy Tail!
Veteran
Joined
Nov 27, 2017
Messages
115
Reaction score
50
First Language
En
Primarily Uses
RMMZ
@HiddenOne Wonderful! Thank you.
In general, I can't think in terms of "graphical", so anything "sprites" complicated to comprehend.
Wolfy is a "code" wolfy!

Small additional question... Making "not humanoid" sprites? >_> We are talking six legs and eyes on a stem alien style.
 

hiddenone

Lurker Extraordinaire
Global Mod
Joined
Feb 19, 2014
Messages
2,612
Reaction score
5,516
First Language
english
Primarily Uses
RMMZ
@WickedWolfy For non-humans in general, it's best to keep in mind what exactly makes them stand apart, and see if there are any real things that you could use as examples while working. If you want six legs, check out how insects move, and if you want eyeballs on stems consider some slug close-ups. But don't be afraid to use the human as a base, especially for some things like aliens it doesn't take much to get it to look quite 'not human'.
YR6ExBp.png
 

Lynch

Veteran
Veteran
Joined
Dec 9, 2017
Messages
44
Reaction score
6
First Language
English
Primarily Uses
RMMV
Okay - super newb question now. Ummm where are the base sprites? LOL
 

Latest Threads

Latest Posts

Latest Profile Posts

doodled a poring today :kaoluv:
uc
Fire-Emblem Style Level Up System, Boost on Class Change, And Animated Arrows | RPG Maker News #115

Why keyboards don't sleep? Because they have two shifts.
I realized a while ago my game was toooo big in scope. even now I wonder am I trying to do too much by myself. and that's after completely changing the format of the game.
Last week at SLC. Cali awaits. TBH I love SLC more than SF.

Forum statistics

Threads
113,944
Messages
1,078,555
Members
148,046
Latest member
OverlordStatic
Top