My Character Sprite Workflow (and Pose Study Timelapse!)

[Music] hello there my name is Brandon and I make pictures out of tiny squares and in a lot of my videos where I create character sprites I've shown how I like to build them up from a kind of stick figure construction I've had several questions about this process so I want to share a sprite time-lapse and take it slower than usual because there's a lot to discuss in how to arrange a character pose and also how to go from the initial stick figure to the final sprite as always this is just me sharing my own preferred workflow and I'm not saying that this is how you have to make character sprites but it's what works for me so if there's even a single piece of information here that helps you as well then that's awesome the character I'm gonna be making sprites for is actually our old pal captain Jace who I created in my perspective video a few weeks ago and I didn't really imagine him having much life beyond that piece but he'll serve the purpose of having some simple human character to pose and draw the first thing I normally do is to find the approximate sprite height I kind of know by now that my personal preference is generally around 35 to 50 pixels tall but if you're still new to pixel art and you're unsure about what height to use then I recommend starting small maybe no larger than 25 to 30 pixels or studying the sizing of existing work if you're looking to achieve something similar to that next I lay down some initial frame work for a neutral standing sprite pose and the main focus for now is on establishing the character proportions so I begin by positioning the head size the torso height and the leg height I'm always trying to improve with Anatomy and gesture but for relatively straight legs I tend to use straight lines if you wind the leg head on and sort of an s-curve when viewing it more from the side will be any definition to the legs later but this helps indicate the overall flow right now for the torso rather than using just a line I find it more intuitive to use a wedge or some kind of block shape where it's easier to visualize how it may look when rotated to different angles in a 3d space in this case character is facing slightly to the right so I shade out the side of the torso and I don't really need to position the gesture the arms quite yet so I leave a circle to indicate where the arm might connect in the meantime I began detailing the face and hair just to make sure I could achieve the kind of look I pictured within this space sometimes it can be a hassle to resize and redraw character once they've been made so it's important to have some rough idea of the desired care size and style early on in the process as far as proportions go an accurate human character will be somewhere around seven and a half heads tall on average but more stylized or cartoony proportions will run smaller than that and I wanted this character to be a little cartoony looking so I've used a head size around 12 pixels tall within an overall height of 50 pixels give or take a cue for the hairstyle next I start adding pixels to thicken up the lines and create a basic silhouette for the lakes when moving from a stick figure to a silhouette it's important to try and preserve the angles or curves you've worked out in a stick figure stage while also building up the muscle structure such as the curvature of the thighs and the calf muscles this can be a delicate balance because sometimes even the difference of one pixel in width can make your character go from looking skinny to beefy but I usually try to err on the side of having a more interesting silhouette rather than one that's too flat and simple but of course this hugely depends on the art style and the character design anyway for drawing in the arms I like to start by placing down a circle for the hand and then work backwards towards the elbow and the shoulder to connect everything together for a more dynamic pose it might also be useful to draw a path for the arms kind of like I had done for the legs but in this resting pose I just wanted the hands to be placed where they wouldn't interfere too much with the visibility of the character I create the arm silhouette with the fill color but then I also leave blank areas that define the costume elements like his gauntlets and shoulder armor if the entire thing were created as a completely dark silhouette I might lose track of that placement so I like to leave these empty areas for those costume elements that'll be colored in later and that kind of leads to the final step before I move on to coloring which is refinement of this line work what I'm looking for at this point is to have a readable character design with clear separation in these costume details just from this single color alone so it's a combination of refining the silhouette but also erasing certain areas to indicate those different costume details or just things that I want to pop when looking at the character I mean there's stuff you could write off like oh I'll just fix that when I add some color but you know if you're able to make a readable sprite out of the line work alone it should translate into the final product being that much better by the time you do add color to it in a way this is essentially like doing one bit work where you're just trying to get some strong readability out of only two colors and I think it's important to explore simple styles or restrictions and pixel art like one bit because the limits imposed by that type of prints direction can really play nicely into learning how to create readable line work so here's a look at the finalized line worked with a few of the previous check points at this point we've already got some clear separation of the different armor pieces on the upper body and readable silhouette for the legs that preserve the initial construction along with a few of those cutouts to indicate additional detail like a knee pad and some anklets on the other leg just throw in some asymmetry and interest my next step is to start shading the line work and when I'm creating colors from scratch I like to begin by working in greyscale I gave myself an evenly spaced grayscale palette of brightness values from 10 up to 90 and I don't think I use them all but it just gives a wide selection to work with the easiest place to start with this is to first fill in all the open spaces I left in my line work just deciding singular gray values to assign within each component this really focuses the design choices because we don't need to worry about color influencing the design quite yet we only need to decide how bright or dark each piece of the costume is compared to another from here I continue layering on different gray scale tones one at the time to create more complex shading I start with a single shade tone and highlight tone for each costume elements and then add extra as necessary if I want to create more steps of shading to smooth things together the other thing I'm doing is lightening some of the line work just to soften it up a little bit and then it also gives the opportunity to make the line work of one area be distinguishable from that of an adjacent area whereas if the line work was left entirely as black it would all just blend together I guess I should mention as well this is obviously a sprite without lines as opposed to one that is created without strong line work to border and break everything up I find that outline look to be more cartoony and that's kind of my favorite look for pixel art I also just really like the way you can use an outline to your advantage such as creating sharper corners in a design or breaking up that line a bit to give more control over the shape and angles of certain objects I feel like it also helps readability when placing the sprite on various backgrounds once we've got the greyscale shading in a good spot it's time to add color and to achieve this I create a new layer and set the blending mode to the color option then when I paint on this new layer the color will overlay itself on top of that greyscale contrast that was already worked out in the previous step if you've watched a lot of my previous time lapses you've already heard me talk about the color blending mode a lot and if you haven't I'd recommend checking out my video about creating four color palettes if you'd like this process explained in even more detail and I also show it within a sprite in that video as well if that happens to be a program of choice it can be important to learn how to develop your own color palettes from scratch because then you can really fully customize your art to match whatever vision you might have for it and this method of starting from greyscale kind of systematizes that process and it's really the best way that I found a great color so far the only side effect of using the color overlay like this is that applying the same color over various gray scale tones looks kind of bland because there's no change in hue that's built into it for the Photoshop people out there sometimes I do use a gradient map instead to get around this but otherwise what I do from here is copied a sprite over and then color pick the different shades and shift their hues apart a little bit using the color slider so instead of the hair being the same hue of blue for the main shades and the outline color the outline gets pushed towards purple and then the highlight gets pushed more towards cyan for example it just breeds more life into the colors and I think makes the sprite look more interesting and appealing for the metallic pieces of armor also building a slight hue shift as well it's kind of a range of really desaturated purple colors it could always be left is a completely d saturated gray but I like playing around with adding a touch of color to it something like cyan blue or purple works really well for adding a cool color temperature to the metallic texture and I mean cool isn't cold rather than like what a rad color temperature and then the final step for this sprite is going to be refinement of the color palette and to do that I arranged all the colors as a palette so I can easily look over the full set and make any tweaks to the hue saturation or brightness based on what I feel is necessary it's also a good opportunity to spot any colors that might be close enough to each other that they could share the same identical color for this set I ended up making the shade color of the pants and the colored outline of the armor into the same color the other thing I noticed at this point is that I wanted to introduce more color steps into my gradient of the gray tones just to get more options for smoothing the shading together and so this is the final I sprite after the refinement another thing I should mention is that I always find it best to design sprites on some kind of a neutral background that doesn't influence or interfere with the design too much meaning no color to it and not too bright or too dark that way the final sprite can hopefully suit a variety of lighting and backgrounds all right so this is great we've got a single sprite but if we want them to be doing more than just standing there we need to explore a few other poses to redraw the same character in a different pose I like to kind of extract the stick figure skeleton from the existing sprite and then pose that again I just use a combination of simple shapes and lines that way we can find really basic construction and proportions that make up this finalized sprite and then it's much easier to play around with a simple stick figure skeleton I wanted to try a completely different and sort of challenging pose and I sketched out this one of him sitting cross-legged eating a bowl of ramen to get going I took that initial stick figure skeleton and started creating the pose by moving each piece into position one at a time again at this stage we're just looking for the pose to be recognizable through use of the stick figure one of the things that happens when you go to make a pose is you think like oh yeah I know what running looks like or I know what sitting looks like and then you go to actually create it and it's like wait how do lakes work again another way through this is to get in that pose yourself or to look up reference images online just to study the angles and the orientation of the limbs this is why the stick figure skeleton is a really nice place to start because it's a simplified form where you can study these poses and then place the limbs and joints based on what you studied for this stick figure pose I also added in a small shape to represent the bowl of ramen because I want it to work out how the arm and the hand would need to be placed to be holding the bowl and also making sure that they're all positioned above the legs so it doesn't really block the recognizability of that pose and then similarly I worked out the positioning of the hand holding the chopsticks at this point I didn't really know how I'd render the chopsticks in the final appearance but having them as part of stick-figure early on will make sure I keep track of their placement throughout the process in order to build up the sprite this is again a process of working with the character silhouette and the line work and just trying to find the cleanest representation of that line work before moving forward for this sprite there's the added importance of having clearly visible accessory components like the bowl and the noodles as well I love how seriously I take this but it's true though if you're making a sprite that's trying to show or communicate something in particular you need to focus the attention to that thing so in this case it makes sense to prioritize the bowl and the noodles within the line work the other part of course is that now we're looking at the character head on so requires reframing some of the features like the headpiece and the hair and I also wanted the face to be a little bit more exaggerated or comical here or you know it just looked like he's really enjoying the meal so here's a look at the completed line work we've got the bowl in the noodles and the stuffiness face expression and then I've also used some heavier shading here to create a bit of dimension in the hairstyle on the left leg there's a little bit of a dashed line just to remember the angle of that front leg and not have the whole thing become a sea of dark silhouette moving along to color what's nice here is that we've got the palette established from earlier and I'm already familiar with the way that it was applied across the design so I can start by filling the line work with a few solid base colors I also already had the bright yellow from his anklet and I reused that as the noodle color and then for the bowl I started with the lightest gray tone just so it's bright and draw some attention that way with the rest of the armor kind of starting at a mid-level gray I continue along applying the shading here in a similar manner to how it appears in the first bright by coloring the outlines and the shading of the hair and giving that slight amount of specular highlighting to his armor pieces I keep the first bright on screen just so I have it to compare back to and to make sure I'm achieving a reasonable level of consistency between them because the lighter tones used in his armor I ended up introducing an even lighter shade to use for the bowl it's almost kind of a bright white just to make that piece super noticeable there's also a highlight of light gray on the tip of his front foot again just to help it pop a little bit more to kind of draw attention and anchor the cross legged sitting pose alright that was a pretty specific pose so let's do one last one with just a bit more action to it for this one I'm gonna do a kick so I begin from that neutral stick figure and start by moving the arms out of the way then bringing the foot up to kind of find the kick height and finally work back from there to lay down an even angle for the leg from here I move the shoulders and ribcage piece around just to give them a more dynamic angle and also to work in a bit of a twisting motion around the torso continuing on it's kind of the same old story of filling out the silhouette and refining the line work in sharing this process I feel like it's also important to mention the different ways that you could actually make pixel art I actually just use the trackpad on my laptop so that's why I respond to having a process that lends itself to basically clicking a single pixel at a time or just using very short motions like this if you're the kind of person who prefers using a drawing tablet you'd likely take a different approach especially if you prefer to draw a character forms immediately rather than building up this kind of framework first a question that comes up a lot with route to pixel art is like do you need to know how to draw to make pixel art and the short answer is probably no not really at least not when you're first starting out but at some point if you want to continue improving or developing your own style I think it's really important to learn like some drawing fundamentals outside the typical scope of pixel art and so a workflow like what I've shown here is just kind of an attempt towards that sort of idea and it's what helped me have more understanding and control over what I was making alright we've been through the coloring twice now so I'm just gonna jump ahead here to the finalized kicks bright with a few of the process check points you'll notice I chose this foot with the anklets for this kick and I was kind of messing around with the idea that they'd provide some sort of extra power for that so I also tried experimenting with a version that had some like kick II swoosh lines to bring in that ability idea and here's the full set again altogether just to wrap this up so this is pretty much the process I follow to make most of my character sprite work in some cases a few of these steps might not be necessary like in cases where the character design is quite simpler than this or if the art style is something entirely different but for the most part this is a pretty good representation of my typical workflow I hope you found it interesting and if there's anything that helps you improve your own work in here then that's even better so thank you for watching and take care and keep it square you

Channel: Brandon James Greer

Views: 225,402

Keywords: pixel art, tutorial, sprite art, character design

Id: 2kqOUWjYbHg

Length: 15min 8sec (908 seconds)

Published: Sat May 16 2020