Consistency in Sprite Design | Motoko Kusanagi Pixel Art

[Music] hello there my name is brandon and i make pictures out of tiny squares and in this video i'm going to be putting together a few character sprites and this one turned out to be a good opportunity for discussing the idea of maintaining a consistent proportion and style when redrawing the same character in various poses um you know part of the trick with good sprite work is that we want to maintain a clear read on recognizable costume elements when viewing that same character at different angles and poses and if those things are kind of changing shape or changing position or even changing sort of the logic with how they're drawn that can just kind of interfere with the recognizability of the character or the action that they're in to get started i've defined an initial sprite height of 40 pixels to work within and i'm planning out the body proportions of my character as a basic skeleton made from simple shapes this is just going to be a neutral front-facing pose so that i can focus on things like the sizing of body parts and costume details and just like the overall rendering style and this will serve as a bass line before moving on to the more dynamic poses eventually the character i'm making is kusanagi from ghost in the shell specifically inspired by her combat outfit from the standalone complex series most of this costume is form fit but then there's this great silhouette of the angled shoulder pad followed by a ring underneath which sort of resembles like the mass of a rolled up sleeve so primarily i'm working on translating those elements and then adding line work for other costume scenes and details that kind of continue on from those points of reference throughout this phase of the artwork the sprite gradually becomes taller than the initial stick figure was because it was sometimes necessary to adjust the proportions once more the costume detailing came into place i'm using a broken outline in certain spots because i find it does a better job at suggesting more complex curves than if you were to try and lock everything into place as a complete line once the sprite is fully colored these dashed lines can blend into a certain degree by stepping to darker shades of the palette but the underlying principle here is that i'm looking for a connect the dots type of thing that'll guide the eye to color the sprite i tried something a little different and started by extracting a color palette from a screenshot of the anime itself i find the rendering style of anime and cartoons overlaps quite well with an approach to coloring pixel art like just in the number of colors and the way that they're used in this case though i've modified that reference palette for my purpose and preferences by boosting the saturation and balancing out the contrast of the gray tones so i'm filling in the linework with a bass tone and then using either a shade or a highlight of that initial tone to bring some definition to the form in this way i'm working from broad color placement first and then slowly moving down to the finer details for example with this costume there's a light gray undersuit with medium gray elements that are layered over top so i started from that dominant mid gray and then i painted over the remaining color blocking to finish the look the finalized sprite maintains that broken outline look for the contouring but it's worked into the sprite by sometimes using one of the darker shades of the palette rather than the full black and if anyone's curious here's what the sprite would look like with those original colors that were poached from the anime screenshot now this is mainly the consequence of trying to repurpose palettes between media like there's a different form factor and readability of surface area in pixel art compared to what would work for like the illustrated style of the anime so my modifications here were just to help bring an extra punch of vibrancy to the character sprite anyway now that the neutral sprite is complete it's time to design a couple dynamic poses that follow the same design and sizing logic drawn out reference lines like this is a great way to keep track of character sizing when making turnarounds and in this case i've also extracted another stick figure type skeleton to portray the underlying proportions that should be maintained for the next sprite i'm going to draw her holding a machine gun like in this reference image here except it's going to be facing to the right the first thing i'm doing is reinterpreting the stick figure skeleton into a side view essentially just that same skeleton standing straight up and down but being viewed from the side instead of the front from here i start to move the limbs around like bending the arm up in an arc and then stepping the legs into an actual stance i'm kind of mimicking the action of actually stepping into this pose from a neutral position i worked in a bit of perspective on the body just so there's more presence than if it were viewed completely from the side and then also because she stepped forward with a bend at the knees she'll be a touch lower to the ground so i've lowered the upper body by a pixel to compensate for that adding the hair helps frame the direction that she's facing and then the gun obviously provides a lot of contacts for the pose as well the remainder of the linework is about connecting up those reference points of anatomy and for the legs in particular i'm following that same application of broken lines to maintain consistency in the rendering approach i worked on this part for a while because i was basically doing really minor iterating to the overall shapes and angles so it'd be a lot of like changing a few pixels at a time and reevaluating you know and then maybe that causes something else to require adjustment um in the end i was able to find a place for everything and then for the coloring i'm following the same steps as before beginning with solid color blocks for each piece of the costume and then placing the secondary tones on top of those this time around i had the first sprite to compare with so i'm evaluating some of the finer details that appear on the neutral sprite and just finding a place for them on the new sprite if it's visible for example there's a bit of the light grey undersuit showing near the collar so that finds a complimentary spot on the new sprite the hair is also rendered in matching way with this darker shade near the corner of the hairline and then the highlights coming around from there it really helps having consistencies like this because like if you picture an animation for example where maybe should be stepping from one pose into the other having complementary placements of features like this between those poses and within all of them i guess actually is going to make sure that those features are entirely traceable when you're moving throughout that animation so here's the finalized look for that sprite and i definitely felt like the proportions stayed tighter by adhering to those guides than if i just freehanded this one and now that we've got a second pose and a more interesting one at that we can actually ease up on making complete redraws and instead make an edit to this one to generate a new pose so for the third one i'm going to take the previous sprite and erase the machine gun then move the hand up into a handgun position i'll erase part of the forward leg and then raise the knee which is now starting to form a bit of a dynamic jumping pose from here i'm actually connecting that together as the front leg and then i'm making what used to be the front leg into the back leg now this little swap of course requires a bit of fine tuning to work into place but the benefits here are that these are just edits to the existing rendered sprite so there's far less workload than a design from scratch and the resulting sprite should be inherently consistent in proportion and styling one of the style changes i made with this one though was sweeping the harrod a little bit just to give the feeling of movement there all right so here are the sprites from this exercise all together and i've also added in some firing effects to finish out those last two even though the workflow for this was pretty involved i'm really pleased with how all these turned out and i think that this approach of tracking and building with proportion and design features is really important for maintaining this kind of consistency when you're developing an extended sprite set because these are just a few sprites i thought that rather than crt time we'd actually close this one out by taking a look at them up on the pixel 64 which is the 64 pixel led picture frame so thank you for watching and take care and keep it square [Music] [Music] [Applause] you

Channel: Brandon James Greer

Views: 40,194

Keywords: pixel art, timelapse, speedpaint, tutorial, character design, anatomy, ghost in the shell, kusanagi, major, stand alone complex

Id: 8LHaD5ZxUT8

Length: 8min 14sec (494 seconds)

Published: Sun Sep 05 2021