HOW TO ANIMATE PIXEL ART GAME CHARACTERS IN PS - TUTORIAL

hey everyone and welcome back to black thorn prod I know in the last video we learned how to draw and color pixel art game characters well I'll continue our journey by delving into the world of animation and actually bring to life our for now static pixel art creations using some cool Photoshop animation features so here I have this little squishy Cupid character I would like to make him a jump animation the reason he hasn't been colored in is because as I said in my video on drawing pixel art game characters it's a whole lot faster and easier animating an outline but then doing so with a fully shaded and colored creation it's best to do all the coloring and details once your animation is complete as we'll see in just a moment the main feature we'll be using to make our animations is the timeline which you can find under window now make sure this button is set to create frame animation and then click it which will give us access to the Photoshop timeline and awesome so currently I only have one frame in my timeline I can create new frames by clicking on this little icon I can now hit the play button and my animation will play except for now there isn't really any animation since both of our frames are displaying the little character in the same pose it's my job to now draw my character in a different pose and on a different wear so it creates a new Photoshop layer called image two and draw my characters slightly squashing themselves getting ready to leap into the air now I can control which layers will be visible and on what frame and Saltz likes my first frame on my timeline and make sure all my first layer is visible and then I'll select my second frame and make sure only the second layer is visible well now hits the play animation button again I will see a quick flash of movement so that was way too fast for my liking though so to slow things down I can click on little arrow under each frame and changed the time each frame lasts for example 0.1 seconds should be a whole lot better if you aren't satisfied with any of the times listed here you can also go ahead and type out your own frame duration by choosing the other option note that you can shift selects multiple frames on your timeline at once which can save you time if you want several frames to last a same amount of seconds on screen or display the same layers I can also make my animation play more than once right here for example if I wanted my animation to loop I can choose the forever option which will stop us from having to continuously smash down the play button now hitting play you'll see that I have a slore looping animation which for now looks kind of boring and unappealing lots of work still needs to be done before it can be implemented into the game worlds you can of course delete a frame on your timeline by selecting it and then clicking the little trash icon now that you know about the main animation tools needed to bring your characters to life let me share with you a couple techniques it'll make your animations a whole lot more fun and easy to make an obvious one is being able to see your previous frames when drawing a new one so I'll create a new frame as well has a new layer called image three and I'll make sure only this third layer is visible on my third frame also make sure that this third layer is hidden on frame one and two now I would like to draw on this third layer my character beginning to leap into the air but this is tough to do because my second pose is invisible I would basically be blindly drawing a wave unsure whether or not my proportions and positioning are correct the easy fix to this is temporarily display my second layer on frame three and lowering its opacity and now I can draw my third layer the character's new pose a whole lot easier because I have that ability of the second layer of course in some cases you may want more than a single predisposed visible in which case you can simply unhide multiple layers with all that said L now completes my jump animation by making more frames and drawing my character in different positions on different layers obviously if you're just starting out pixel art animations I highly recommend you keep your characters simple and small in other words animating an 8-bit creation will be a whole lot easier than doing so with a character 120 pixels wide and long whether or not you're going for something detailed or blocky I recommend when animating to keep your joints nice and loose physically draw each pose quickly don't pay any attention to details jockeys are poking out pixels at this point your main concern is motion you don't need crisp clear outlines to make your animations look good what's really important here is the proportions once the movement feels good only then should you move on to cleaning up lines and adding colors a great tool to use when blocking out your animation is the rectangular marquee tool which you can find right here by a left clicking and dragging you can select multiple pixels at once and then hit ctrl T on your keyboard to use them around the canvas as well has skill them in any direction scaling pixels like this will have the nasty effect of blurring them out but this isn't a big deal when blocking out your animation that since remember at this point all you care about is the movements and proportions of your character a variant of the rectangular marquee tool is the lasso tool which I actually use quite a bit unless you select in a more free organic way multiple pixels so here's my final little animation I'll now have fun coloring each image that makes up my animation staying consistent with the colors I use for each one a cool trick here is making a small color palette on a new layer visible on each and every frame composed of all the colors that make up your creation this way you can simply use your eyedropper tool to select a color instead of having to toggle back and forth between frames which can be pretty time-consuming and annoying before wrapping up the video let me show you a couple more cool animation tricks the next one is about duplicating previous layers for example say I was making an idle animation for this little demon character the only motion I would like here is his body gently moving up and down and so having to create a new layer and draw everything out all over again but simply a little higher or lower feels like a tedious chore so instead don't hesitate to duplicate layers and then use your rectangular marquee or lasso tool to select some pixels and manipulate those which obviously will make you win some time a fun Photoshop animation feature is twins which will basically smooth out and slow down transitions between your various frames for example I'll select the frame before my cube leaps into the air and hits this little icon this will open up the tween menu now I can decide which transitions I would like to smooth out so either the one between this frame and the next one where my cube hops into the air or the previous frame where he hasn't yet squashed I'll choose a knicks frame and for now keep frames to add at one by hitting okay you'll see that Photoshop has added a new frame to my timeline which features my characters squashed to the ground as well has a new leap both a slightly lower opacity this will have the effect of making the transition floor also a little more fluids I could have added more frames which obviously would have made things more as each frame gradually ups the opacity of the knicks frame allures that of the previous one so definitely play around with this feature can really add an extra bit of light to your animations however in many cases you'll want more crisp and responsive animations in other words in many it's best to have a quick choppy attack animation they will feel responsive to the player rather than a slow and frustrating motion and so that is another important tip to keep in mind when animating your game characters make animations fast unless it's part of your gameplay when players hit the jump button they want their character to immediately jump but if not the game will feel laggy and really unsatisfying so make sure not to bog down your animations with loads of anticipation with pixel art especially for 8-bit sprites you can easily get away with a run jump idle or attack animation made up of only two or three frames don't feel the need to make dozens of frames for just one animation just a few showcasing key pauses will be enough for example for an attack you could make one frame where he's standing normal one where he lifts his sword and make sure to make this quick and then another for when you lash it out same for jump where all that's needed in many cases is a pause for the character standing normal one way squashes ever-so-slightly it in anticipation which again should last no longer than a split seconds or shouldn't exist at all then finally a pause for when he's in midair finally adding some small effects to your animation can really add some juice and appeal to your piece for example adding a little of ground shadow to my jumpin slime the scales up and down depending on how far away the counter is from the grounds eels really nice adding a few pixels representing dirts when the character lands in the grounds is also a nice little touch that can make your animation pop some lines of action for extra motion like when a character swings a sword is another final touch which will make your game animation feel awesome and that will mark the end of the video in a few days we will continue our pixel art adventure by learning how to make sprite sheets and how to import those into unity with that said I hope you enjoyed the video and/or learn something new if that's the case been supporting me by a patreon to help me out keep this regular and gamedev contents would be so awesome here's a list of my top supporters who might thanks so much getting the like and subscribe button will also be a huge support all right thanks so much for watching stay tuned lots more coming up Cheers [Applause] [Music] [Applause] [Music]

Channel: Blackthornprod

Views: 240,147

Keywords: blackthornprod, noa calice, game dev, blackthorn, pixel art, pixel, ps, photoshop, tutorial, game art, animation, draw, 2D, how to, HOW TO ANIMATE PIXEL ART GAME CHARACTERS IN PS - TUTORIAL, episode 2, anim, sprite sheets, unity, series, create, making, timeline, frames, 8 bit, zelda, mario, beginner, indie game dev, pixeling, how to animate pixel art, adobe, game characters, drawing, art, easy, movement, pixel art in ps, crisp, retro graphics, tweens, layers, tips and tricks, sketching

Id: mnJb5iwYAmg

Length: 11min 8sec (668 seconds)

Published: Mon May 28 2018