Spriting/Pixel Art Tutorials

Discussion in 'Non-Maker Specific Tutorials' started by Des, Mar 4, 2012.

  1. Des

    Des Veteran

    Messages:
    1,379
    Likes Received:
    556
    Location:
    Dixie
    First Language:
    American
    Primarily Uses:
    N/A
    Howdy!




    Do you want to create your own graphics for your RPG Maker games? Tired of relying on the RTP? I've written an exhaustive series of tutorials on the subject of pixel art and spriting. These are aimed at RPG Maker users, so I hope that you find them useful and look forward to seeing lots of original graphics.




    Here are two of the most popular tutorials—enjoy! You can find the full series on my site,

    Final Boss Blues.​








    If you've been following from the beginning, now you understand the importance of colors, and just how crucial contrast is. You’ve even developed a color palette of your own. It’s finally time to put that knowledge to use.

    We're going to start off by covering the basics (more basics?): form and light. In my introduction, I stated that my goal with this series isn't to create a "how-to" guide, but to help educate and train your mind so that you have the knowledge and skills to become a good pixel artist. The most aspect of that method of teaching is that it's important to get you thinking about your pixels in the right way. So here's something that's important to remember: When you create something with pixel art, you want to think three-dimensionally. This is true of any kind of art, not just pixel art.

    The trick to thinking three-dimensionally is in the approach. I've seen hundreds of pixel art tutorials and so many of them teach you a simple step-by-step process: make an outline, fill it in, then shade. In my opinion, that approach is absolutely incorrect. Sure—there are a lot of tremendous pixel artists (certainly some are better than me) who take the outline-first approach. But the important thing to take from this is the mindset—the way to think about your pixels and your art.

    So let's dive right into it.

    Light Creates Form

    The key to thinking three-dimensionally is about thinking in terms of form rather than shapes. The world that we live in isn't made up of shapes, it's made up of forms. The difficulty in creating pixel art comes from rendering those three-dimensional forms on a two-dimensional plane (the computer monitor). Fortunately, the human eye naturally looks for things in three-dimensional space, so it isn't too difficult to create the illusion of depth.




    This is a shape:




    [​IMG]



    And this is a form:




    [​IMG]



    Simple, right? A shape is two-dimensional: it's a line drawing on paper. A form is three-dimensional and has depth. The difference between a square and a cube is that one is a shape and one is a form.




    That's not a particularly hard concept to grasp. The next idea is important to keep in mind when representing forms: light. A form is only as good as the light source (or sources) that defines it.




    Lets look at some slimes:




    [​IMG]



    Aren't they adorable?

    :)



    Each slime has the same form—if you take away the lighting, all three of them use the exact same silhouette. I started these by creating the silhouette and let the light tell me how to color them and fill them out.




    You can clearly see the forms because of the light—the light creates depth, and depth is required for three-dimensional readability.




    Trainer Tips!

    Your light source is more than just direction—it affects your colors, too. When you spend more time working with colored light sources, you'll be able to take advantage of colored highlights and shadows for a really cool effect. But for the time being, your palette should already be taking light into account— that's why we talked about hue-shifting in the previous section when we chose our colors.




    When you're just starting out, I suggest that you use an arrow to indicate light source like in my example above. After you make a few sprites, keeping light source in mind should become second nature. That's the purpose of this section of the tutorial: constantly thinking about every sprite you create in terms of its forms and light source will help you create sprites with more depth.




    Sculpting with Form




    What's important to think about is how it will affect your art. Let's look at it in a more practical example. I managed to dig up an old sprite that I made (around 2007).




    [​IMG]



    I'm almost embarrassed putting this on the internet today. Why? It's really flat—when I made this I paid little to no attention to thinking about the character in terms of three-dimensional forms (and because the colors have pretty poor contrast and no hue-shifting, among other problems). When I made this sprite, I started with an outline of what I thought was a standard RPG character, and then filled it in. The problem was that I wasn't thinking about how an actual human would be rendered in three dimensions: instead of thinking about the individual forms that make up a human, I was thinking about coloring in my outline.




    The next sprite is more recent—I made it in early 2011.




    [​IMG]



    Huge difference, right? Ignoring the colors and the hair, the biggest fundamental difference in these sprites is the attention to form. What changed between 2007 and 2011? I realized the importance of spriting forms-first.




    When I created the newer sprite, I didn't start with an outline: I started with a silhouette and some highlights, and worked at sculpting and refining. On top of that, I thought more about the human body and modeled the sprite on an actual person's anatomy, rather than basing it on a general idea of "RPG sprite".




    What is the big idea of this tutorial? Unlike most other pixel tutorials out there, I urge you: Do not start with an outline but start with a silhouette.




    Starting with an outline will change the way you think about your sprite: it will naturally put you in a "coloring book" mentality, which will inevitably make the entire sprite look flat. If you think about the multiple forms in three-dimensional space—and how they would be rendered when they are lit up by your light source—everything will come together in a natural way that conveys depth.




    Trainer Tips!

    A lot of great pixel artists start with the outline first—I'm not saying that it's the wrong way to make a sprite. There is no wrong way. But the great artists who take that route have experience thinking in terms of forms and light to begin with—the process that I'm teaching you will help you visualize those forms as you create them. Once you get the hang of doing things this way, you should feel free to experiment with other methods.




    This is why pixel art is more like painting or sculpting: you're working with a MATERIAL—pixels. Pixel art isn't about your strokes: it's about building.




    Building an Object




    So let's put it together and make something new. Open up your art program of choice and follow along—you don't have to create the exact same object, but I'd like for you to take a stab at making something similar. Make an object with a relatively simple form, choose a light source and go to town bringing it to life.




    [​IMG]



    In my example I made a barrel object for an RPG. In most RPGs, the light source will be pretty easy: a straight top-down that allows for easy mirroring. Start with your basic silhouette and sculpt your form until you have something that looks like the object, and then add the details to give it some personality.

    Leave a comment and show me what you've got so far.




    In the next section we'll use what we've learned to start putting together an RPG character.





    In the previous section, I spent a lot of time going over the importance of form and light sources. I tried to convey the importance of creating forms from shining light onto silhouettes—an approach to spriting that emphasizes depth in three-dimensional space. Today, we're going to make use of that technique and create a sprite base.

    Because most people reading this are probably developing an RPG, this sprite is going to be made for a game with that kind of traditional top-down perspective (though not quite top-down exactly—flawless perspective can be sacrificed in exchange for heightened readability, as long as the proper perspective is correctly suggested). If you want to make a sprite for a different kind of game—like a platformer for example, you could use the same technique but from a straighter perspective or maybe with a different light angle.

    Starting is easy: I always start by suggesting forms with silhouettes.


    [​IMG]

    In this example, we're keeping the elements of the sprite separated. In practice I don't usually do this, but in my mind's eye the process is there. When you're first starting out, it might be easier to visualize your forms by splicing them like this, and then bringing them together after you've begun to give them some three-dimensionality. Otherwise it might be difficult to mentally keep your pieces separate when they're meshed together into a silhouette blob.



    Trainer Tips!



    Where are his arms? Personally, I add the arms after I'm happy with the torso and legs—it helps me create better-looking proportions. There's no reason you can't be working on the arms at this step, though—just paint the cylindrical forms like you would with the legs.

    The sprite begins to look like a person in the next step when we apply some lighting.

    [​IMG]


    A second color joins the first, but it isn't particularly detailed. It does succeed in giving some depth to the image—the head looks like a head and the torso looks like a torso. The legs aren't quite perfect, but it's clear that they have a segmented cylindrical form. Now that it's starting to flesh out a bit, we can safely pull the pieces together for the next step.


    [​IMG]

    Now it's beginning to look like a real sprite.

    Another color is added: number 3 is our darkest shade and while it will function as our outline color, we're using it now to further emphasize the darkest shadows and curves. Don't go overboard with it—think about your light source.

    A fourth color is added too, but I haven't applied it to the body yet—I've only used it here to give the head some more definition.

    At this point we're satisfied with the basic forms and the initial construction. With the next step, our goal is to refine, and it brings the sprite to a much more human, nearly complete, level:


    [​IMG]

    Not only have we finally created the arms, but we begin stretching our colors to refine the sprite and start filling in some important details. Color 4 spreads out across the body, becoming a useful highlight, which allows for 1 and 2 (the original colors that we started with) to become useful as our primary midtones. At the same time, the addition of color 5—a buffer between colors 3 and 1—becomes important for shadows, which further emphasize form by expanding on the depth of the sprite. With these additional colors, we refine the cylindrical forms of the torso and the limbs. We've also given more definition to the head—including ears, which make it look more human and help create personality.



    Trainer Tips!



    You'll notice that the highlight on the top of his head has changed—why? It's a hairline now. You don't have to take this approach if you don't like it; you might find it more helpful to keep to a pure-skin base and make the top of the head brighter from the direct spotlight. I find it useful to create a hairline like this because most of the completed sprites will end up having hair, after all. But it's a personal preference. Do whatever you feel comfortable with.

    Our sprite is shaping up nicely and looks nearly complete. All it takes is some more refining:


    [​IMG]

    The final color is added: color 6 isn't used very much, but it provides some highlights that make for a finishing touch. The head's form is further refined with the use of the new highlight color, and now that the arms are attached the hands and shoulders are given proper definition.



    Trainer Tips!



    This particular sprite has an even width—the horizontal width of the sprite uses an even number of pixels. In other words, it doesn't have a single line of pixels that go down the middle—it's missing a distinct line of symmetry. It might be easier for you to create a sprite with an odd number of pixels. Having a single line that goes down the center of your sprite will generally make things much easier, especially when it comes time to start putting clothes on him. Again, do whatever you think is right for you.

    The sprite base is more or less complete at this point. You can keep plugging away at it until you're satisfied, but be careful: it's entirely possible to obsess over details for hours. As I look at it now, I can see little things here and there that can still be fixed, and I might go back to make little changes. But realistically, I'm okay with calling it finished.

    There are two important things left to do with it: animate him, and start making some characters (with clothes!) based on him. We'll save those for another time.

    [​IMG]


    Good luck, and let me see what you've come up with. Leave a comment. :lol:

    Next Tutorial:

    Tiling Tiles







    If you have comments, suggestions, questions or requests go ahead and share in this thread. And let's see what you're making—I'm here to provide feedback.




    If you found these useful, remember that the full series on my site,


    Final Boss Blues. The other tutorials cover all sorts of popular topics, like creating a color palette or animation basics.

    Good luck! And have fun!

     
    Last edited by a moderator: Mar 9, 2012
    #1
    EpicFILE, Kvothe, dbchest and 17 others like this.
  2. arcana23

    arcana23 Villager

    Messages:
    74
    Likes Received:
    6
    Location:
    Durham, UK
    First Language:
    English
    Fantastic! I thank you for this and hope to see more games with accurate lighting!
     
    #2
    R Jennifer Wong likes this.
  3. Apple

    Apple Doodlin' crap 'til I die

    Messages:
    105
    Likes Received:
    15
    Location:
    Insomnia Café
    I demand updates >O

    Seriously, that's some of the finest spriting tutorials I've seen around. And you know what would be nice? Tutorials focusing on RPG-esque animations, since your the spriting tutorial series mainly supports RM users, no?
     
    #3
  4. Des

    Des Veteran

    Messages:
    1,379
    Likes Received:
    556
    Location:
    Dixie
    First Language:
    American
    Primarily Uses:
    N/A
    the next tutorial is planned to be an RPG Walk cycle animation, but i'm taking a short break from these to write some RMVXace tuts and to focus on my game.
     
    #4
  5. Knightmare

    Knightmare Knight of the Night

    Messages:
    1,056
    Likes Received:
    106
    Location:
    Central USA
    First Language:
    English
    Primarily Uses:
    RMMV
    Nice of you to bring this over here. This is a great tutorial. I'm still sucking at it but I know if I practice enough I'll get better.
     
    #5
    ShinGamix likes this.
  6. GemFall

    GemFall Villager

    Messages:
    67
    Likes Received:
    7
    First Language:
    English
    I really appreciate these tutorials a lot!

    The walk cycle will be super useful for me. I'm very much used to static, since I work mainly on art. I'm also very much digging the general pixel tutorials- it helps my workflow a ton. :)
     
    #6
  7. yieldingmydestiny

    yieldingmydestiny n00b

    Messages:
    397
    Likes Received:
    38
    Location:
    Uncertainties
    First Language:
    Melayu
    Nice tutorial. Any beginner should be able to understand this. I like especially the Creating an RPG Base.
     
    #7
  8. Emzie

    Emzie ಠ_ಠ

    Messages:
    1,691
    Likes Received:
    21
    First Language:
    Filipino
    nice great tutorial!
     
    #8
  9. Des

    Des Veteran

    Messages:
    1,379
    Likes Received:
    556
    Location:
    Dixie
    First Language:
    American
    Primarily Uses:
    N/A
    i have recently moved the site to a new host. thanks for waiting through the downtime everyone. i still need to update some links and stuff—if anybody notices any problems just let me know. :)
     
    #9
  10. Fablesinger

    Fablesinger Aspiring Tile Artist

    Messages:
    70
    Likes Received:
    7
    First Language:
    English
    I'm having such a hard time spriting, even with this tutorial. *fail*
     
    #10
  11. Des

    Des Veteran

    Messages:
    1,379
    Likes Received:
    556
    Location:
    Dixie
    First Language:
    American
    Primarily Uses:
    N/A
    well post what you have so far in the wip thread and we will give you some feedback :)
     
    #11
  12. Fablesinger

    Fablesinger Aspiring Tile Artist

    Messages:
    70
    Likes Received:
    7
    First Language:
    English
    @frieza where the wip thread? and thanks a bunch <3
     
    #12
  13. Des

    Des Veteran

    Messages:
    1,379
    Likes Received:
    556
    Location:
    Dixie
    First Language:
    American
    Primarily Uses:
    N/A
    #13
    RyanA likes this.
  14. RyanA

    RyanA Happy Cat

    Messages:
    2,425
    Likes Received:
    230
    Location:
    Not so merry ol' England
    First Language:
    English
    Wow, and I thought you were just a pretty face, frieza :3 This tutorial is brillo-pads! d(o_o)b
     
    #14
  15. afters

    afters Villager

    Messages:
    5
    Likes Received:
    0
    First Language:
    English
    Going to give this tutorial a try, since I'm pretty much a failure at spriting and this looks detailed. Hopefully I'll get to post something in the WIP soon.
     
    #15
  16. MakerZeroOne

    MakerZeroOne Chronic Case of Undeserved Misfortune

    Messages:
    70
    Likes Received:
    91
    Location:
    United States
    First Language:
    American Eng.
    Primarily Uses:
    RMMV
    I know it's an old thread; but your tutorial on your website is really informative. Especially the bit about considering the contrast between two colors to be a color itself. thank you! i hope i can have something to use for my own project; and even to share with others. thanks!
     
    Last edited: Dec 6, 2017
    #16
    Des likes this.

Share This Page