How To Animate in Clip Studio Paint - Tutorial for Beginners

in today's tutorial we're going to learn how to animate in clip studio paint by the end of this tutorial you'll have your very own animated gif that you can share so let's get started [Music] so to make a new animation we want to make a new project by going to file new and there's this animation template here where you can set up an animation and there's the default template of 1920x1080 you also get some margins on the outside so you can doodle on the outside kind of useful you can also set up your frame rate and everything over here but i want to show you how to set up one just from scratch so we're going to make a new illustration set it to 1920 by 1080 pixels and press ok and we're gonna need two windows one of them should be open already your layers window over here and we need our timeline window so go up to window make sure layer is turned on as well as timeline right here now to create an animation we need to make a new timeline so if we go down here we can see edit timeline and new timeline button so we want to click new timeline and that'll bring up our options on how long our animation is going to be and what the frame rate is don't worry about this you can always change any of this stuff later if you so choose but for our example we're going to do a frame rate of 12 frames per second and we're gonna do a playback time of 24. so at 12 frames per second and then 24 frames long that's going to give us two seconds of animation if you're using the ex version of clip studio paint which is the cheaper version you're limited to 24 frames but if you're doing simple loops and stuff like that that should be plenty if you want an unlimited number of frames to work with you need to upgrade to the pro version and i would wait for it to be on sale honestly clip studio paint goes on sale all the time the rest of these three we don't really need to worry about they're just there for organizational purposes and then press ok and you can see new stuff has shown up in our timeline down here but we actually can't animate yet we need to make what's called an animation folder so an animation folder is a folder inside of your clip studio layers that contains all of your animation cells that contains all of your layers we're going to go up to here up to this button that says new animation folder we'll click that and it makes a new folder in our timeline and we can also see a new folder right here in our layers so in my timeline i can click and drag this red bar for my playhead this scrubs through my animation i can also change how long my animation is or how short the playback is can make my animation playback start sooner or end sooner by dragging these and if i want to change any settings on my animation i can click these three lines on the top left on my timeline window and here's where all your timeline options are to change things like frame rate and how long your animation is that's going to be under timeline and then you can change frame rate here or you can change settings here so here's another way you can make your animation shorter or longer to start animating we have to create a new animation cell you can see right now i have my animation folder selected i'm on frame one but i actually can't draw anything because i don't have an animation cell created so we're going to click this new animation cell button right here that'll make a blank frame number one and you can see it's added a new layer underneath our group right here our animation folder for this example let's just start with a simple circle and we have our first animation frame let's drag our playhead to frame number two make sure we have our animation folder selected you can see if i select onto a different layer i no longer have the option to create a new animation cell because i don't have my animation folder selected so make sure you have your animation folder selected we're on frame two and we're gonna click new animation cell that will get rid of our artwork up here and we can see that frame number two has been added right here and also a new drawing layer has been added inside of our animation folder to be able to see what our previous frame was we want to turn on onion skin and that's with this button right here enable onion skin so if we turn that on we can see a ghost image of the drawing that came before it so let's get this circle moving so i'm just going to draw it kind of close to where we started but just have it start to move a little bit in this direction and you can see down here i have my thumbnails enabled so that i can see what my drawings look like if you want to change your thumbnail size you can click under this three line setting button on the top left go to thumbnail size and you can change the size of your thumbnails right here so let's go to frame three make sure we have our animation folder selected press this new animation cell button and you can always set these to be hotkeys which is usually a good idea for animation as it'll speed up your workflow i highly recommend having hotkeys set up to edit hotkeys you can go under file and shortcut settings and if you select menu commands up here all of your animation shortcut keys are going to be under this animation section here so things like new animation cell which in my setup i have set to f6 could be pretty useful also go to previous frame and go to next frame is useful to have shortcuts set up for the typical setup is using comma for previous frame and period for next frame so those are some ideas of shortcut keys that could be useful to have set up and for my onion skin currently i can only see one previous drawing if i want to see more than one previous drawing i can click our settings button on our timeline again and onion skin settings are going to be under show animation cells and then onion skin settings right here and i can change this to show three previous frames and three next frames here you can also change if you want it to be colored onion skins half colored or keep it as the original color so if i keep it as the original color and press ok you can see it's turned black i personally like having colored onion skins just because it allows me to see what the previous drawing was and what the next drawing is so now we can see our two previous drawings so let's draw drawing number three down here and if we want to play our animation we can click this play button here but let's say this feels a little bit fast this movement from here to here so we want to do an in between so to do an in between between these two drawings we can select our frame by clicking on it once you'll see a red bar behind the frame to show that that frame is selected so frame number three here is selected i can select it and then click and drag it over by one or however many you want we'll just drag it over by one and you'll see that makes frame number two lasts for two frames and then goes on to frame three so now what we can do we can go in between frames two and three click add new animation cell in between the two hence the name in between and then draw our in between between those two drawings and that's a way to smooth out your motion if something's popping way too fast you can add an in-between that way if you want to select multiple frames you can click and drag a box around just like that and that'll select multiple frames and they can click and move multiple frames that way if you want to copy and paste frames you don't want to do control c and control v because what that does is actually copies and pastes a layer over here which is not what we're trying to do we want to copy and paste these frames so to do that we actually want to right click go to copy and then go to where we want those frames to be right click and select paste so we copy and paste frames in the right click menu on our timeline to get rid of a frame let's say we have a frame of animation that doesn't belong anymore we can select it and hit this delete specified cells button right here and that removes it from the timeline but it actually doesn't delete the drawing the drawing still exists and we can see it over here in our animation folder right here it's just been unassigned onto our timeline here so the way the timeline works is it assigns a specific layer onto that part in our animation so like i said our frame that we got rid of it still exists it's still over here and if we want to bring it back we have to do what's called specify frame and that's this button right here called specify cells and if we click that we can see a list of all of our drawings here so drawing number four was the one we just got rid of so if we select that and press ok we now have our drawing number four back an easier way to do that is to just right click in that frame and then select it from the right click menu here likewise i can also go into my layers panel here create a new layer and then if i want that new layer to be assigned in my animation i can right click in here select frame five and that's assigned that layer into here so let's say for this example i have my animation frame number five right here and then outside of my animation folder i have this drawing right here so you can see this is a separate drawing from my animation frame right here so let's say we wanted to copy and paste these together how would we do that well it's not super intuitive actually and this is something that i struggled with for a long time figuring out how do i just copy this face and then paste it into frame five here you can see i pressed ctrl v but nothing happened it made it as a new animation cell so you can actually see i can right click select frame six and there's the drawing i just pasted if you want to paste something in and have it merge into the layer below you actually have to shift select the two drawings that you copied and pasted move it outside the animation folder window and then you can right click and say merge with layer below and now if we turn our eyeball on and off we can see those are now merged and we drag it back into the animation folder and then we simply right-click and re-specify that frame and now we have our animation with our copied and pasted artwork into it another cool thing we can do is even though each one of our animation cells is a layer we can actually convert this into a group so if we take frame five here right click on it and select create folder and insert layer you'll see it creates a folder that's named number five as well and inside of this folder you can actually have multiple layers so you could draw a smiley face in here you could even do a layer and put it underneath have your color so you can even use folders in your animation as single animation cells another useful thing to know if you have a lot of frames and they're all out of order and mismatched as far as names go you can always go up to animation edit track and then select rename in timeline order and that will rename all of your frames according to their order on the animation timeline so just for fun let's continue animating this ball just moving around we're gonna keep going one frame over and draw our ball moving around experiment with smear frames experiment with um seeing how far you can move the ball so this is called spacing how far apart your drawings are spaced so if your drawings are spaced really far apart they're going to appear to move quickly and then at the end here if our drawings are drawn more close together that's going to make them appear to move slower so just experiment play around and have fun with it after all this is supposed to be fun so now if we play it we can see what our animation looks like and if we want it to loop we can select this loop play button right here and we can see how it turned out pretty neat if we want to export our animation we can go up to file export animation and you can either export it as a movie file or an animated gif are probably the most common ways you're going to export let's select animated gif and then if we save it it'll bring up some options on how you want it to save now make sure that your file size is the correct size according to what your original animation was in this case it's 1920x1080 and for the loop count we want it to loop over and over again so we're going to select unlimited dithering is mostly important if you have like gradients or soft shading you'd want to have dithering turned on and then press ok and then we get a little message pop up saying how big our animation turned out to be press ok and then we can double click on it to open it very cool so now you can post this gif and forum send it to your grandma whatever you want to do with it so one thing when animating is you want to make sure that your character stays consistent and that they don't change volume or go off model or anything like that i just did this ball animation just straight ahead and you can see that i definitely lost volume it got a lot smaller so how do you correct that how do you fix that well clip studio has a tool that's very useful for stuff like that you can imagine it like taking your first frame as a piece of paper and then being able to place it underneath this frame and move it around so you can reference your first frame no matter what frame of animation you're drawing on and that's called the light table in order to see the light table we need a new window so we want to go up to window and then select animation cells and i have mine docked over here it might be down here somewhere i like having it docked over here just so i can more clearly see what's going on and there might be this bar that's like way down here and like really hard to see you want to make sure to take this bar and drag it up around the middle so make sure that's there uh one last thing of setup is on these three buttons down here that say enable disable light tool you want to select this third one right here and then to be able to use it you want to select enable light table up here so make sure only the third one is turned on here and enable light table is turned on over here as well so the way this works is super easy just go to whatever frame you want to reference in this case it's frame number one you'll see that frame appear over here so we want to take frame number one and click and drag it into this bottom section down here that will enable frame one to be on our light table so now you can see when we drag through our timeline frame one sticks around and we can go to any frame we want and we can use this frame as reference it's in the wrong position we need to move it over here so how do we do that well it's really easy all you have to do is go into your light table window here and select frame one from this bottom section here and that will automatically switch you to the tool you need to move it around so you can see our transformation tools appear here we can rotate it using this handle we can change where it rotates with this cross right here we can scale it by dragging the corners we can also flip it horizontal by selecting this flip horizontal button up here or flip it vertical using the button next to it and if you want to reset your transformation you click this reset transformation button here and that will set it back to its default position so for this example we want to move it underneath our layer here and to get back onto our original frame we want to select the top layer in this case layer number 14 under our light table tool here and now we can go back in and redraw our frame so it's the correct size also on the light table you can change its color by selecting this top right button here and selecting monochrome and that'll change it to this blue color you can change it by clicking this drop down and then selecting change layer color and turn it into any color you want you can keep this light table on and just turn it on and off using this enable light tool button here or if you want to get rid of a frame from your light table you can select this trash can here to get rid of it and that's how to use the light table to keep your animation consistent next let's talk about motion tweens so i'm gonna make a new animation i'm gonna click the eyeball to hide the one we just created and i'm going to click new animation folder to make a new animation click new animation cell to do a new drawing and i'll just draw my first frame so to motion tween this layer we want to click on this button enable keyframes on this layer and when we click it it turns on and now we can click this plus on our animation and then click this arrow to drop down to show all the things that we can animate so you can animate position rotation scale you can also animate opacity down here you can right click and go to add keyframe and then let's drag our playhead to the last frame and in order to move this and change it we actually don't want to use the move layer tool and we don't want to press ctrl t to transform it that's not going to work we actually want to use this tool in clip studio which is under operation and then click object and then when we click on our layer we'll see our transform tools appear so now we can take our animation and if we hold shift while we move it it'll stay in a straight line you'll see that'll automatically create keyframes in between and if we drag our playhead we now have a motion tween if we play it you'll see he starts out slow speeds up and then slows down again so this is called smooth interpolation in order to change it so it's not smooth at the beginning and at the end we can select this drop down here and instead of smooth interpolation we can select linear interpolation hold interpolation is kind of like stop motion where it pops from one key frame to the other so we'll select linear interpolation and to change any of our keyframes we just click this button here and you'll see they'll turn green showing that they're linear keyframes we can also change it to be linear at the end here and now if we play it you'll see there's no easing at the beginning and the end so that's how to motion tween an animation you'll see in this example i drew a walking guy but he's not actually walking he just stays on the same frame throughout the whole entire animation if you wanted to animate frame by frame underneath this motion tween what we have to do is we have to turn off keyframe mode by clicking this button here and that enables us to go back into frame by frame animation mode where we can do a new animation cell turn on our onion skin draw our second frame and then we can just animate frame by frame this way so now we have our frame by frame animation if we have our animation selected and we enable keyframes again we can now play it with our frame by frame animation happening on our motion tween also with these keyframes you can right-click on them and switch their interpolation from the right-click menu as well you can also copy and paste them by right-clicking going copy and then right-clicking and going paste and you can drag them around simply by dragging and moving them and if you want to get rid of one you can click this delete keyframe button right here and that'll get rid of it so now that we know how to motion tween we can animate a camera to add a camera to your scene we want to go up to animation new animation layer and select 2d camera folder and when we do that we can see it added a camera on our timeline layer as well as a camera folder right here so the way the camera works in clip studio paint is anything you want to be affected by this camera has to be inside of this camera folder so chances are you want to shift select your entire animation and just click and drag it into the camera folder like so and now when we animate the camera it should affect our entire animation so under our timeline select the first frame on our camera folder right here and then press this add keyframe button again if you want to change the interpolation whether you want it to be linear or smooth you can just select the keyframe right click and say switch to linear smooth or hold interpolation for cameras chances are you want it to be a smooth interpolation which is this purple keyframe here then let's go to frame number 24 or actually let's have it zoom in on frame 13 and then track and follow the character out to the last frame so on frame 13 we want to add a keyframe by clicking this add keyframe button here and then go to our object tool which is under operation and then object and the way the camera works is this blue frame is what the camera is going to be seeing so if you want to do a zoom in you want to actually shrink this blue rectangle into how much you want it to be zoomed in and if you click and drag this corner here you'll see it's scaling onto the corner which might not necessarily be what you want you probably want it to scale into the center here so the way to do that is you want to click the corner click and hold and then hold down your alt button and that will scale it towards the center and now you can see these camera movement indicators here on the corner here so let's go into our last frame here press insert keyframe button and we'll just click and move this blue rectangle to follow our character again we can hold shift so it stays along the same axis right about there and now when we play it well we can see our camera moving but it's kind of hard to tell what's going on if you want to actually see what your animation is going to look like you have to go under animation playback settings and then render 2d camera so if we select that and then play it now we can see what our camera looks like so that's how to animate a camera in clip studio paint the last thing i want to talk about is lip sync in clip studio paint now clip studio paint is technically not an animation program one of the downsides about clip studio paint is you can't scrub audio which if you know anything about lip sync scrubbing audio is super important it's how you understand where the syllables are and everything so it's not the best but i'll show you how to do it anyway to import audio into your animation you can literally drag it from a folder into your animation or another way to do it is to go to file import and select audio then select the audio you want to import i recommend using dot wav files they seem to give the best um the reliability and performance as opposed to mp3 files so select your dot wav file if you want to record your own audio i recommend using the free program audacity and a microphone you could also download audio from let's plays or movies that you really like to experiment with so it's added our wav file to the top of our timeline here and if we go to the top of the layer you'll see our cursor turns into a hand so we can actually click and drag and move this audio around just like that so if we want it to start later we can do that there and again there's no audio scrubbing so scrubbing it over the audio actually doesn't do anything i can't hear anything doing it this way so what i have to do is i have to play it golly and kind of just see where my playhead is at the different um syllables so when doing lip sync animation i actually recommend animating the body first in this section i'm going to talk about how to animate a lip sync shot from beginning to end including body acting if you want to get to the part where i just talk about how to lip sync in clip studio paint skip to this time code right here probably the most important thing in character animation is your body language your body should communicate what the line is saying before expressions before your eyes before lip sync before any of that stuff is applied and a way we could do that is animating a rough animation first i like animating with really simple shapes before i animate more complex shapes it's just easier to squash and stretch really simple shapes rather than fully rendered cleaned up drawings so this is usually how i start my first stage of animation and things like hair or his hat in this example i will animate last because they tend to be animated separately this is called overlapping action it's stuff that kind of trails behind and then has a little bit of settle after the main volumes of the body have moved so things like hair boobs um fat on a character are all really good examples of that so he squashes down to prepare for his line and maybe he jumps up for golly and again i'll use my light table just to make sure i'm keeping things consistent and we want them to end up back on frame number one so i'm going to right click copy that frame right click paste it around there so that's where we want to end up golly okay so that feels pretty good for our main body next i'll do a new animation folder on top first of all let's name these so this is rough body layer and this will be rough overlap for overlapping action so for overlapping action i usually like to have the root follow the body and then leave the tail of anything about one or two frames behind so that's kind of what i'm keeping in mind as i'm going through and doing these so the root follows the body and the tail gets left behind and i kind of just animate it straight ahead and then any time the character stops is when i'll start to have overlapping actions start to catch up so even though the body is holding for a frame i'll have his hat and his hair start to settle and then here's a really big move so things get really left behind while the root follows the body just like that and then again his body's holding up here so we'll start to have his hair catch up as well as his hat will start to go up and start to trail behind as he's falling down so this is why i animate overlapping action last because you really want your body mechanics and your body acting figured out before you start doing this stuff because you kind of start from frame one and then work your way through the animation sort of one frame at a time from beginning to end you follow what the body is doing so here's where he's landing so his hair and everything really gets left behind and then here we can have gravity start to affect it so things drop down and here i'll delay the settle just by one frame so this is our last frame and actually on our original animation let's get rid of the hair on here since we're doing it on a separate layer just like that okay and then we'll just start in between until they settle into the final animation frame and that looks pretty good i think we could probably call that good golly so there's our rough body acting so now what we could do is we could take these animation folders right click and then say create folder and insert layer and just call this whole folder rough animation and then we can take that folder and actually lower that folder's opacity and you could do that not just with regular folders you could also do that with animation folders like i could also take these animation folders and set them to low opacity you can also click this button here to turn folders into a blue sketch layer and then lower the opacity which is really nice for doing rough animation and then we'll do a new animation folder on top and we'll call this cleanup so this is just a suggested workflow it's something that may work for you if you're learning how to animate in clip studio paint so i'm going to go through and clean up all of my keyframes first since those are my my main poses and now that i have all my key frames cleaned up i can go ahead and start doing my in-betweens okay now we have our clean up all done golly we can start animating his mouth so let's make a new animation folder and we'll just draw his first mouth right here now for lip sync i'm going to turn off our other animation layers and we'll just focus on just the mouth for now for lip sync i suggest checking yourself out in the mirror and saying the line in this case golly it's really just a slightly open mouth and then like an a-shaped mouth and then tongue touching the top of the teeth then sort of an e-shaped mouth and then back to default so this is like the gut and then ah and then look and then e so those are the kind of mouth shapes i think i'm gonna go for so let's try and time these out so like i said earlier there's no way to actually scrub this audio to see how it's playing you could do it in a different program and map your lip sync that way but in clip studio what generally i see people do is literally just play the audio golly and kind of judge where the mouse shapes are going to change so i'm going to do a blank frame turn on our onion skin there's a million different ways to do what i'm doing here but my plan here is to animate the mouth just on one layer in the same place and then we'll use motion tweens to move it into place on our animation here another way to do it is to animate it on the character and that's completely fine too that's a great way to do it and you can also kind of see the waveform right here to kind of see where different pieces of audio are going to happen so for golly it's probably going to be about here where the waveform like peaks so let's do there so this was the ah shape for golly and then la for lee so if we drag to where the audio is and press play from that spot we can kind of hear that there's an l shape happening there again not the most efficient way to lip sync but it works so there's our l shape and then e happens about here and for the final frame i generally like to have the mouth close about three to five frames after the audio is done now that's on 24 frames per second remember we're on 12 so about half of that would be like two frames after the audio is done two to three frames so if we play what we have so far golly that's not bad golly one thing i would recommend doing for lip sync is after you get it pretty well timed out select all of your mouth shapes and move them one frame behind if you're on 12 frames per second or if you're on 24 frames per second move it two frames behind because light travels faster than sound is typically how i've heard it explained but it just makes lip sync match just a little bit better golly and i think that looks pretty good and that's one of the reasons i like to animate on a separate layer and then have it motion tweened into place just because i like doing that last minute adjustment of um moving the frames two frames behind golly and now that we have our lip sync all done we can enable keyframes on this layer and since we don't want it to motion tween we want it to just pop from one pose to the other we're gonna change our keyframe interpolation to hold and then we'll click this button to add a keyframe on frame one go to our operation tool and select object so we can move it around and just go frame by frame and just move the mouth where it needs to be and when you move it you'll see it creates keyframes for you and on your animation it might need some adjusting you know especially if um the mouth doesn't fit on the face or you know if you need to change how big the mouth is on any single frame you can always go back and readjust things if you need to this is just going to be a really quick example and let's copy this frame paste it right here where it resets to default and now if we play our lip synced animation golly it works pretty well golly so that's how you animate body mechanics and then add lip sync on top of it one final thing i want to go over before we end this tutorial is how to color your animation clip studio actually has some really cool tools for coloring and i'll show you those now for coloring animation i'm going to create a new animation folder underneath my cleanup folder here so new animation folder double click on the folder name to rename it we'll call it color and then make a new blank animation frame here now you could take a brush and just manually color it in like so but that's a little tedious difficult a really cool way to do this in clip studio is to actually go to your layers panel here select your line art layer which in this case is called cleanup and click this little lighthouse button up here it's called a reference layer so the way a reference layer works is if you use a tool like the paint bucket tool it's going to consider any layer that has a reference turned on and we'll actually use it to fill it in even though we're not filling in on that layer itself so that's super neat under your tool options it should be enabled by default but with your paint bucket selected you'll want to have this little lighthouse turned on and you can click once to fill in each section or what i like to do is click and drag to have it fill in multiples so we could really quickly just go frame by frame create blank animation cells and just really quickly fill in colors this way you'll see i have a propensity for liking um broken lines so it doesn't always work what you could do in those cases is just take your brush here and just close those gaps and then use the fill-in tool just like that and it's just a really quick way to fill in color on your animation super neat golly and that's it hopefully this was helpful to you and got you started with animating in clip studio paint be sure to click here to subscribe to my channel to stay updated on future videos and tutorials if you'd like to help support my work you can click here to visit my patreon page you also get access to rewards like early access to tutorials source animation files and access to a secret patreon only chat room keep on animating and until next time bye

Channel: Jesse J. Jones

Views: 159,702

Keywords: clip studio paint, 2d animation, clip studio, clip studio paint animation, cel animation, clip studio animation, drawing anime, clip studio paint animation tutorial, clip studio paint tutorial, 2d animation tutorial, clip studio tutorial, how to animate, animation tutorial, animation tutorial for beginners, 2d animation software, how to animate in clip studio paint, how to animate in clip studio paint for beginners, camera in clip studio paint, motion tween clip studio paint

Id: YEWQy6-KDZM

Length: 31min 54sec (1914 seconds)

Published: Thu May 05 2022