How to Sprite Like a Ninja

Discussion in 'RPG Maker MV Tutorials' started by hiddenone, Sep 19, 2016.

  1. hiddenone

    hiddenone Lurker Extraordinaire Moderator

    Messages:
    1,805
    Likes Received:
    4,454
    First Language:
    english
    Primarily Uses:
    RMMV

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

    [​IMG] Step 1[​IMG]
    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.

    [​IMG]
    [​IMG] 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.

    [​IMG] Step 2[​IMG]
    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.
    [​IMG] 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.

    [​IMG]
    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.

    [​IMG]
    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.
    [​IMG]
    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.

    [​IMG]
    [​IMG] 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.

    [​IMG]

    [​IMG] Step 3[​IMG]
    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.
    [​IMG]
    [​IMG] 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!

    [​IMG]

    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.

    [​IMG]

    [​IMG] 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.

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

    [​IMG] Step 4[​IMG]
    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.

    [​IMG]

    [​IMG] 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.

    [​IMG]

    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.

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

    [​IMG] Step 5[​IMG]
    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!

    [​IMG]

    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!

    [​IMG]
     
    Last edited: Jul 1, 2017
    #1
  2. Fudge

    Fudge Veteran Veteran

    Messages:
    56
    Likes Received:
    46
    Location:
    Taa ll
    First Language:
    English
    Wow... thanks a lot for sharing your technique. This looks really helpful. I'll look at it more tomorrow.
     
    #2
    mlogan likes this.
  3. MysteryCorgi

    MysteryCorgi Villager Member

    Messages:
    18
    Likes Received:
    12
    Location:
    Illinois
    First Language:
    English
    Primarily Uses:
    VNM
    This is awesome! Thank you.


    I love the lighting on the hair! Also shaved sides are the best.
     
    #3
  4. Iliketea

    Iliketea Tea lover Veteran

    Messages:
    848
    Likes Received:
    928
    Location:
    Germany
    First Language:
    German
    Wow, this is good!
     
    #4
  5. IAmJakeSauvage

    IAmJakeSauvage Veteran Veteran

    Messages:
    417
    Likes Received:
    665
    Location:
    Hamilton, ON
    First Language:
    English
    Primarily Uses:
    RMMV
    This is actually super helpful! Thanks!
     
    #5
  6. Krad1213

    Krad1213 Laughin-Prince Veteran

    Messages:
    51
    Likes Received:
    22
    Location:
    California
    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
     
    #6
  7. hiddenone

    hiddenone Lurker Extraordinaire Moderator

    Messages:
    1,805
    Likes Received:
    4,454
    First Language:
    english
    Primarily Uses:
    RMMV
    @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.
    [​IMG]
     
    Last edited: Jul 1, 2017
    #7
  8. Alex Nearwoods

    Alex Nearwoods Villager Member

    Messages:
    20
    Likes Received:
    14
    First Language:
    Portuguese
    Primarily Uses:
    RMMV
    Wow nice guide!
     
    #8
  9. Trihan

    Trihan Speedy Scripter Veteran

    Messages:
    1,483
    Likes Received:
    972
    Location:
    Buckie, Scotland
    First Language:
    English
    Instructions unclear: sprited like a pirate instead. Please advise.

    Joking aside, great tutorial! Makes me want to get out there and start spriting things, which I haven't done in years.
     
    #9
  10. hiddenone

    hiddenone Lurker Extraordinaire Moderator

    Messages:
    1,805
    Likes Received:
    4,454
    First Language:
    english
    Primarily Uses:
    RMMV
    @Trihan Just make sure you eat enough citrus to combat scurvy, and you should be good to go. :rwink:

    I'm glad my guide makes you want to sprite, it's one of the reasons I made it since I think everyone should give it a shot at least once.
     
    #10
    WickedWolfy and feckyeslife like this.
  11. Trihan

    Trihan Speedy Scripter Veteran

    Messages:
    1,483
    Likes Received:
    972
    Location:
    Buckie, Scotland
    First Language:
    English
    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.
     
    #11
  12. SwaggyPhantom

    SwaggyPhantom D3@DP00L ~ S3xy M@TH@F@CK@~~~~ Member

    Messages:
    12
    Likes Received:
    25
    Location:
    The Void
    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
     
    #12
  13. hiddenone

    hiddenone Lurker Extraordinaire Moderator

    Messages:
    1,805
    Likes Received:
    4,454
    First Language:
    english
    Primarily Uses:
    RMMV
    @SwaggyPhantom I use photoshop, but programs like gimp work fine for editing sprites too.
     
    #13
  14. Lynch

    Lynch Veteran Veteran

    Messages:
    44
    Likes Received:
    6
    First Language:
    English
    Primarily Uses:
    RMMV
    Wow! Thanks a ton!
     
    #14
  15. WickedWolfy

    WickedWolfy Touch Fluffy Tail! Veteran

    Messages:
    106
    Likes Received:
    43
    Location:
    East Coast, USA
    First Language:
    En, De, Ru
    Primarily Uses:
    RMMV
    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" ? =(
     
    #15
    Marquise* likes this.
  16. Lynch

    Lynch Veteran Veteran

    Messages:
    44
    Likes Received:
    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?
     
    #16
  17. hiddenone

    hiddenone Lurker Extraordinaire Moderator

    Messages:
    1,805
    Likes Received:
    4,454
    First Language:
    english
    Primarily Uses:
    RMMV
    @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. :)
     
    #17
    Marquise*, Lynch and WickedWolfy like this.
  18. WickedWolfy

    WickedWolfy Touch Fluffy Tail! Veteran

    Messages:
    106
    Likes Received:
    43
    Location:
    East Coast, USA
    First Language:
    En, De, Ru
    Primarily Uses:
    RMMV
    @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.
     
    #18
  19. hiddenone

    hiddenone Lurker Extraordinaire Moderator

    Messages:
    1,805
    Likes Received:
    4,454
    First Language:
    english
    Primarily Uses:
    RMMV
    @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'.
    [​IMG]
     
    #19
    WickedWolfy likes this.
  20. Lynch

    Lynch Veteran Veteran

    Messages:
    44
    Likes Received:
    6
    First Language:
    English
    Primarily Uses:
    RMMV
    Okay - super newb question now. Ummm where are the base sprites? LOL
     
    #20

Share This Page