How to Animate in Clip Studio Paint for Beginners

i think clip studio paint is great for animation especially if you want to mimic that 2d animation hand-drawn look like you see an anime here we're going to be animating obviously in my way i'm curious to know how you guys animate so leave your approaches in the comments below i'm very curious to hear what you guys do and as someone who used the internet to learn 80 90 of everything i know at least when it comes to making comics and animation i know what you're looking for think of this video as the ultimate guide for those who want to learn how to animate in clip studio paint the first half of this video is going to focus on the basics all the need to knows especially if you're a beginner so that when we start going into the intermediate stuff you understand what i'm saying so first the basics slash foundation and then the second half is to take those foundations and have an anime style application again we at saddam publishers of the world's most diverse manga anthologies partnered up with celsius the creators of clip studio paint to bring these videos to you these videos are part of a playlist teaching you guys how to use clip studio paint as well as a documentary where we use clip studio paint to create a complete full comic called saturday wars that's a collection of all saturday am core lead characters coming together in a crossover event to battle one common enemy and saturday wars is going to be published inside our newest physical magazine called super saturday coming this december you can pre-order link in the description as well think of it like avengers infinity war but with sadly am characters like sano from my series apple black so if you want to give clip studio paint a try use the link in my description to get a three month free trial now first the basics leg out this is going to create the animation file in the workspace you go up here to file new so just go up here to use of work and here to animation you click that and it gives you these options you don't really want to change much of these but the standard here will have width at 920 height at 1080 and resolution at at least 300. you don't want to play with b's too much you can change the names of things if you want like say the story name you can rename the timeline if you want but you can just leave it as timeline one for now frame rate at 12 so this is 12 frames per second and that's kind of how things will be timed in the animation there are some that work 23 24 even 30. we're just going to work in 12 for this tutorial and then the playback time this is essentially how many frames we're kind of going to see in the timeline at the bottom and we can just have this be 60 for now so 60 frames that's basically five seconds over here at the bottom of black space we just have 20 pixels on each end and that's it right here main animation will be within the output frame that's everything inside this blue line but you can export outside the blue line and within but that would be when we start talking about the options that you have when you want to export your animation after you're done with everything here you just hit ok and voila obviously you can zoom in and out you have the animation folder which is different from a regular folder i'll explain in a second and then you have a layer within that animation folder already and then you have the paper layer right here but we want to kind of want to see our timeline and that's where you kind of go to the window and you go hit timeline and then you get that option now i'm just going to turn it back off for a second just so i can pull the canvas up because i want to be able to see the horizontal scroll bar and then i turn the timeline back on and in the timeline you can also see the same animation folder same as this one right here and then the paper folder once you create this animation workspace in this animation file from the jump you automatically get an animation folder and this paper folder and inside that animation folder you automatically get what is called a cell you can see the cell is numbered one and has the same name with the layer in the animation folder in the layer window this is the layer window this is the timeline window but you can change how the timeline looks by coming here to see if you want to show thumbnails and all but i don't need that so i'm just gonna turn that back to none but you have more options there paper layer here is linked to the paper roll here in the timeline window again if i make it invisible here isn't visible there i haven't drawn anything inside the layer inside the animation folder so we don't see anything visually so even if i turn it off it's not really doing anything but the paper layer that's what's behind everything at the bottom the timeline window is where we're going to be playing with the keyframes the frames and all that good stuff ever all will be explained this is where the magic happens we have an option here to create another animation folder if you want and for now you guys might not understand why but just stay with me here if we hit that it'll create another animation folder obviously you can rename it let's call it anime too and then it has no cells in it and as a result you see it has no layers inside this animation folder to create a cell hit this button or new animation cell and it will create another one called one and it automatically created another layer here with the same name again this is frame one two three four five six seven all the way to 60 frames for five seconds placed at 12 frames per second as we planned but this is one cell so essentially all 60 frames are in this one cell this one cell is linked to the layer in the animation folder in the layer window of the same name so therefore all the frames in this cell will display what's in the layer that it's linked to here you can see has the same animation folder name so it can only be linked to a layer within that same animation folder same goes for the other animation folder this layer right here we click on it you can see it's highlighted with this red bar it can only be linked to any layer within this same animation folder you can create another cell create new animation cell s2 and it automatically created a new layer with the same name now all these frames are in cell one and therefore they will display everything that's linked to the layer for cell one and that's this layer one but for layer two which is literally everything else whatever is in layer two will be displayed for all these frames within the cell we can just delete this animation folder for a second we don't need both let's come over here to layer window right click and i hit delete and it's gone because we deleted the animation folder in the layer window the animation folder in the timeline window is also gone come back up here if we create another cell all the frames in cell 3 will display whatever layer 3 is because that's the layer that the cell is linked to you can move the cells and readjust the timing of things and just to test things out we have layer one and then for layer two and then three if you then drag the cursor back to the beginning or you have this icon here to go to the start and it'll just automatically go to the first frame and then hit the play button and there you have your change create another cell four it's named in a sequence and it automatically creates the layer in the layer window and depending on what layer you want it'll just jump to the first frame within that cell again we can move that cell and now go to the start and then hit play that's essentially how it works once the cursor gets to the end of the timeline because the playback's at 60. it's ending here it then reverts back almost like a loop almost like a little gif and we can move this around if you wanted to end a little earlier so you can readjust the playback afterwards and so you hit play and there you go kind of in a loop as well i'm gonna take it back to 60. another way to change that would be to go to animation here at the top then timeline and then change settings and we can change it from 60 to let's say 45 hit okay and see what happens it reduces to 45 control z back to 60. we can also change the frame rate as well if you go to animation and then go to timeline and then change frame rate change it from 12 to whatever else we want here's a 12 let's say we wanted to change that to 24 it automatically changed the numbers as you can see at the top so now it's 24 frames per second meaning that now 60 is no longer five seconds it's really like maybe two and a half seconds ctrl z and gives us back what we initially had and now it's back to five seconds once you're on the layer it will automatically move to the linked cell on the timeline as you can see and then don't forget that the cells created on the timeline of an animation folder row can only be linked to a layer in the animation folder of the same name in the layer window creating cells automatically create a new layer in the layer window and then it has a naming sequence for organizational purposes here it's kind of naming things one two three four it gets a little complicated later on but for now that's the basic gist so now i'm going to create a new animation folder animate three and i'm going to turn off the previous animation folder we're working on let's do something new again it has no cells in it so we'll create a new animation cell we're going to change the color so in this new layer here let's draw something simple maybe a silhouette of a bird and now all the frames in cell 1 are going to show this birth save frame six i create a new cell so it's the sixth frame where i want to create the second keyframe to cell two what's a keyframe a keyframe in animation and filmmaking is a drawing or shot that defines the starting and end points of any smooth transition these are called frames because their position and time is measured in frames on the strip of film or on the digital video editing timeline like the timeline we have in clip studio pane in betweens are just the frames in between the keyframes always do keyframes before you do the in-betweens because the keyframes are that they're the key frames they're the major positions to watch out for and then the in-betweens just connect the dots as standard practice you don't draw each image frame by frame you draw all the keyframes first space them out and then draw the in-betweens and that comes with practice and knowledge of the guides of animation like the 12th principles of animation and so on and so forth so now i want to draw the second image in layer 2 for cell 2 for our second keyframe but i kind of need to know where the first image ended in order to draw the next one let's just draw so second image bird flapping his wings a little bit use this key here to go to the previous frame and see what that was or you can just click directly on the cell itself and it will just kind of show you the two key frames now that you can see that the positioning is off a little bit because it's almost like the bird is flying backwards so one way to do that would be on that same layer let's hit ctrl t to kind of move it forward a bit but even then yeah we kind of nailed it now but an easier way so control z right there would be to turn on what's called the onion skin so enable onion skin with this icon and that way you can see the previous frame if we had a new cell let's say a cell 3 in front enabling the onion skin will allow us to see what's in front and what's behind we only have a cell behind so we're only seeing what's behind and if we go to the first cell we're kind of seeing what's in front so now with the onion skin enabled i know exactly where that frame should be i can even see it better so even rather than drawing it without seeing using the image already made i can almost trace it to a degree even better than i did before and then flap the wings maybe move a little forward even more and there you go we can also disable onion skin for a second just to see it without it and these are the two key frames now let's create a third keyframe go to the two and let's hit new animation cell notice what it did when creating the third cell and actually copies the properties of the second cell including the distance the second cell has with the previous cell before that which would be the first one but cell 3 only copies that distance when you create a new cell while highlighting the first frame of cell 2. after cell 2 then it would have just created a new cell in that spot but it would have still copied the other properties like the fact that it's just a layer it would have copied the opacity which is hundred and the blending mode which is normal i'll explain for it as we go on if i move the cell 3 around so you can move the cells around so where we adjust the animation if everything kind of seems a little off you can readjust but just moving that if we're on 3 and we created a new cell you can see it mimics the distance from three to two let's pull that four four create a new cell the distance from three to four so control z z go by three and one here i'm going to turn back on the onion skin and now i'm going to draw the third image in layer 3 for cell 3. if i turn off the onion skin there you go now if we're on cell 2 we can kind of see what's in front and what's behind what i have behind is in red and what i have in front is in green i purposely have the colors being a little dissaturated so i get to see the black lines very clearly say the same black lines we use for the line art of our animations if you want to play around with the settings of the onion skin just go here at the top to animation show animation cells and then onion skin settings and then you can change the colors over here for previous frame and the next frame and then how many frames you want to see ahead so sometimes you'll be able to see more than one frame behind and more than one frame ahead you can play around with those settings and the further away the more faded it's going to be but sometimes i can look really complicated so you can just leave it at one and i like these colors because red this kind of tells me okay it's back and green i know it's ahead and i hit okay just gonna close that animation folder right here so these are our keyframes and now we want to make the in between here we're trying to get a smooth transition from the first image in cell 1 to the next image in cell 2 and so on you can highlight the cells and move them around if you want to take one second so it's basically one second to flap his wings at least in this animation we can readjust it later but then i want to figure out the perfect places to insert new cells that would be our in-betweens for the animation to be smooth before we go any further you can see that the drawing looks kind of pixelated and that's because over here if you go to animation and then you have the playback settings i have it on play in real time blue play and prefer speed and this just makes it that while we're working the software is moving and working fast and the whole workflow is not interrupted because if we go the preferred quality then everything is going to look better but it might slow down your process because you know the computer or the software kind of slow down a little bit with these settings it just allows us to make sure our animation is on point hence prefer speed and then when we export the image it can actually be the more accurate quality so notice the naming patterns if we then go in between cells to create a new cell what happens is it does 1a and with the onion skin enabled we can kind of see the images before and after so we know where to draw the image in the middle this tutorial will focus more on the application with clips to your paint and less so where to put your keyframes because that kind of comes with practice and time and i recommend you do a lot of research with animation guides that are out there and the 12 principles of animation because at this point that's more about how to animate in general whether it's with clip studio paint or traditionally or literally anything else it's a whole new world where you're trying to figure out where and when and how to time your frames and in betweens and keyframes and all that so here i have that and maybe i want another one that would be 1b and there you go another cell in between two and three and at the end i'm going to create a new cell but here's the thing i want to create a little loop right so if i create a new cell this is going to create a new layer 4. if you delete a cell over here it doesn't get rid of layer four layer four still exists even though we've not drawn anything in it the layer has been created but ctrl c if it's still connected if we delete layer 4 then that makes cell 4 empty because it's not linked to any layer within the animation folder so doing stuff like this can be a mess but we can still take the cell and then go using this button specify cells while on that animation folder row it'll then give us the options of layers within that animation folder to link to that already exist and i want to link it to layer 1 meaning you can actually link multiple cells to the same layer so notice the naming sequence anything in between we'll just kind of add alphabets and if we were in between alphabets then it just kind of has this weird default where it just says layer one right it then starts layer one all over again but it's gonna control z because we don't need that we don't have anything for that frame anyways we don't want to draw anything there but here because it's after three if we create something new it'll just be four still four but note that if we then delete this cell remember deleting the cell doesn't delete the layer that's already been created for it in the animation folder but if we then want it that comes after 3 in between 3 and 1 it's not going to do four this time it's going to do 3a because when creating a new cell it doesn't it doesn't give it a name of a layer that already exists so because 4 already exists over here and so it's just going to do a 3a remember guys if you highlight the first frame within the cell and then you create new animation cell with that icon it's going to mimic the distance between that cell you started from and the cell before that so you see two frames here and then you see two frames here and then you have it created right so it's copying that distance however you can highlight wherever you want in the frame right as long as it's not the first frame and then turn that on and then create a new animation cell whatever frame you want or whatever frame you have highlighted within that cell it's just going to create the new cell there obviously not copying the distances anymore if you want to copy the distance you have to be on the first frame so if we create our cell here let's say like so we have it 3a so even though it's not copying the distances it's still copying some of the properties from cell 3 and as the properties from the layer that it creates so here you can see 3 800 opacity with a blending mode of normal that's because it copied it from its previous cell that's linked to a layer with those same properties 100 opacity and blending mode normal so let's test that if we go to three reduce the opacity to 59 and the blending mode of multiply now if we create a new cell whether we're on the first layer we'll mimic the same distances from the previous cell here in this case 2a 2 frames two frames but you can see it does the 59 opacity in a multiply blending mode or you just create your cell and you don't want to copy that distance so you create the new cell wherever you want let's say here and remember you can always move it around later so it doesn't really matter i have it at 3a again it copies the properties of the previous cell right based off of the properties on the layer that that cell is linked to move that around i have the onion skin on so i can see three and one i don't want that i kind of want the blending mode to be normal anyways i was just doing that to explain something and create another in between with another cell and then one if we hit play right hopefully that makes sense because all these frames are now linked to the image in layer one and so all these frames are going to show that so what you can do is then click and drag all of these hold alt and then drag it forward and then you have it again now you have new cells all linking to those same layers so you don't have to keep creating new cells we just have enough to kind of get our loop going and then i can select the whole thing hold alt and then drag again one more you can increase the playback increase the bar for that cell if it ends there at 71 because if you don't have that once it gets to that part in the timeline it's literally not going to show anything right because even for the paper it ends there so i can extend the paper as well to be there and we want this to extend to the end as well just for case to extend that layer as well but it's turned off so it doesn't really matter get these bad boys back or you can just come here to where where it needs to be and go to specify cell and then pick the appropriate cell so after 2a is 3 and then hit ok and it will just link to that now if we hit play and this is almost like a little gif and it's flapping it for what six seconds because it's a loop we don't need to like copy it all the time so we can actually reduce this to here as long as the cell pattern is repeated and we start with a cell one and then end and end with the cell right before cell one in this case three b because on the timeline of the cursor is moving once it gets to the end it just goes back to the first then you can hit pause what these icons do this takes us to the last frame and this takes us to the first this takes us to the next frame and this takes us to the previous frame and this is for play and this is where we can test it out to see if we want to move things around to get maybe a better smoother animation sometimes if these frames are not maybe in betweens they're actually just all keyframes or you don't want them to have this naming pattern you can go up here to animation and then to edit track and then rename in timeline order we'll then rename everything in the layer from one to nine and those are basically all the unique images all the unique layers it will rename all the layers in a sequence if you want things to be organized in that way remember if you delete a cell it doesn't delete the layer the layer still exists and in fact we can see it's linked to other cells within that animation folder row think of it as having stacked images for your animation and then you remove one of the images from the stack just because you remove one of the images from the stack doesn't mean that image is gone the image is only truly gone if we delete it here in the animation folder on the layer window so if we do that then you can see there is a hole where every cell for now is an empty cell not linked to anything ctrl z ctrl z we have everything back as we want it doesn't matter how the layers are ordered in the layer window within the animation folder what matters is the order of the cells on the timeline so even if it's numbered the way it's numbered on that layer i could move things around it doesn't matter right what really matters is how the cells linking to those layers are ordered on the timeline and as you can see you have one two three coming after we've already seen one to nine like it's all i can move things around however i want but the timeline order is what matters not necessarily lay order the same way you can link to a layer you can also link to a folder so let's say at eight in between one and eight we want to create a folder even the folder maintains that naming sequence and has it 8a because it's in between but you can't really do anything in 8a because it's not linked to anything in the animation folder row then we can specify cell either here another way to specify cells here at the top animation edit track and then specify cells and then we can just go to that folder name called 8a now we can draw within 8a however there isn't any layer inside 8a a this is just a folder so we want to create a new layer that will be inside 8a and turn on the onion skin and you can have multiple layers so you have another layer and let's say this layer has a different blending mode and opacity right above it even use a different brush different color pull it underneath and that's what's in the eight april you can pull everything let's extend it so we can do more creative stuff remember if we create a new cell now it's going to copy everything in the same way 8a is so if we create a new cell it's going to copy those properties and now 8b is also a folder because 8a was a folder which is the cell before it also has two layers inside and the layers inside also are mimicking the same opacities and blending modes these things sometimes can make things easier for you during the whole process of creating your animation the only thing it doesn't copy the images themselves but it's copying the opacity the blending modes how many layers are in the folder the fact that it's a the fact that it's even a folder it's copying all that stuff i don't need a b so i'm just going to ignore that and pull all these guys back go to 8a i was just playing around with the lighting and the glow so i'm just going to turn that off and for now if you hit play if you go to animation edit track and rename timeline order is going to rename 8a to 9 and rename 9 to 10. you can also zoom in and out in the timeline but remember this is just regular folders and layers but the reason why it works with the whole animation is because it's within an animation folder if we just created say a regular layer or folder outside of any animation folders it's going to create its own in the timeline window except a regular folder just displays what's in the folder as is throughout the timeline all the frames on the regular folder row will essentially display a still image throughout you can't create cells you can't link to anything the same way the default paper layer or any regular layer outside of an animation folder can't be linked to any cells or you can't do anything there you can see here the buttons don't work right buttons don't work to create any cells delete cells specify cells it doesn't work right but independent of any animation folders here it's just on its own if we do draw something on there it's just going to be the same throughout so sometimes it this can be used to create say a background or something right so let's put this layer inside this folder right doesn't matter we can see both you can turn it off here as well since we have a silhouette of a bird let's kind of create a sunset and marquee tool if you wanted to be a real nice circle just hold shift [Music] now we have all that in one animation folder and that's really a background now we can see our bird is still right it's flying but it's really in one place we could have frame by frame drawn it going forward but there are other ways to do that eclipse is compatible with other software so the backgrounds and other assets can be created by other people using whatever they're using or put together all during compositing which can also be done eclipse your paint compositing is just where all the flashy effects and camera movements and blah blah blah can all be made and done to make the animation look more saucy like i said let's try and move this bird without actually having to draw the bird moving that way we can have the bird in a loop while still moving it around because if we drew it frame by frame going forward and smaller towards maybe the sun or whatever we would literally have had to draw every frame of the scene but because we have it in a nice little loopy type thing we can then move the whole board around while it's in its loop and you do that with motion tweening tweening is a key process in all types of animation including computer animations the process of generating intermediate frames between two images called the keyframes like we discussed earlier to give the appearance that the first image evolves smoothly into the second one so you go to that animation folder row you have to first enable keyframes on the layer for motion tweening i like to go to this icon and make sure it's on create keyframe linear interpolation hit this plus button and then gives you more options once you see the icon change you can move that enabling the keyframes over here on this layer for this animation folder row kind of turned our whole animation in that row into an object and then we can then move that object around however we see fit and then here with this icon you get to see more options right so here under position if we change shortcut o to operation or use this icon over here we can kind of move our bird around and we can kind of have it burn a little bit off frame we're going to pull it in later on but you can see once we moved it around on this part of the timeline we see we're at the beginning of the timeline the first frame it creates a keypoint slash keyframe for the position of the bird now we can just go to the last frame in the timeline and this time pull the burr to where we want it to end up notice that it created another keyframe right here and then we want to maybe reduce the size of it as it's going towards the sun hold shift here go to one of the points and then pull that and then it created another key point now if we then go across the timeline you can see what's doing play we have our bird flying across the screen i think now you can actually turn off the keyframes if you want if you turn off the keyframes then you lose that animation turn it back on and then you have it i'm gonna change the blending mode for the animation folder because you can do that maybe overlay and now press play see our bird there are things you can do to animation like throwing in audio audio can help you with your timing of when you do certain parts of the animation especially if you're working with an automatic an animatic is basically let's say a scene or the whole freaking animation but animated in very storyboardy ways so a storyboard animatic right but it still has the sound and everything you need to help you when putting together the actual animation let's take it back to normal so it'd be a black silhouette audio to your animation come here new animation layer audio or file import audio so you can give your animation music or something to work with [Music] and then you see that layer over there i'm going to pull it down once on there you can see some tool properties you can play with like the volume if it's too loud and can also work with the volume kind of like keyframes where you can have part of the volume low and then maybe you move a little further down and then if you increase the volume it's going to create a keyframe so basically we have the volume of the first at 45 and it's going to be increasing until it gets to that next keyframe once we have it at 76 and then a 76 throughout if i hit play you're gonna hear the music you can also import movies so let's say you want to import your storyboard atomatic and so on and so forth the last thing one show last thing i want to show before i get into the deeper more complex stuff would be would be the 2d camera so we come up here to the top go to animation go to 2d camera folder we'll then create a camera folder right here select all the folders you want to mess with hit the first one at the top and hold shift and select the last one that you want and then click and drag them all to put them in the camera folder right so now everything is in that camera folder i'm going to close the camera folder it can be closed or open doesn't matter but then i'm going to open it up you can play around with the opacity blah blah blah really when we want that so we can see more options for position scale ratio and all that and then the camera is basically just showing us everything we're actually going to see now we have the bird flying across the screen right and the camera is just here once you have the shortcut o and you're on object you can kind of see where the camera is seeing so this is what we get to see the camera but we can pull it back and we can have the camera actually follow the bird so say we reduce it right there and then you can see all the keyframes are created for the position scale ratio rotation all that because we kind of moved it we go to the end figure out what the bird is which is down there and we just move it we can also do it to where we as we're moving the camera down we're expanding the camera too so the cam this way the camera is not just panning and then we can go back to the beginning that's where the camera is where the bird is that's where the camera is that's where the bird is right go back to the beginning hit play and they can see the camera following but if we want to see exactly what the camera is then you come to this side where display mode and we go from show field guides where we get to see everything or we go to show camera field of view now we're going to see exactly what the camera is doing make sure you're highlighting that camera is the only way it works then objects we can pull that a little bit up stay within the frame then go back to camera field of view press play and voila also while in this mode and you have keyframes enabled you can find certain spots in your animation folder that maybe you want to record the position of say our bird and just hit keyframe icon here where we had it turned on linear interpolation and it'll just kind of record that and we can find another spot and record those two right and then maybe we want to do something different here in the middle now on our bird object if you want to do something crazy let's shift it far over there when you move it obviously it will automatically record so it's going to do something crazy but i'm just trying to prove a point let's see that again so you can do fun stuff like that also obviously you can't edit the drawing let's say we go to a real g pen while it's an object but if you hit edit layers with active keyframes kind of makes things editable for a second once we highlight the cell we want and see and then we hit the edit button again go hit play it's going to be crazy there you go undo all that jazz then you can do more compositing stuff to really sell it but for now this is all we need for our animation remember that this button only allows us move through the frames and sometimes we kind of just want to go from keyframe to keyframe to kind of make sure everything is working properly if you want to make some edits to them we kind of want to be able to move quickly within within the frames because the alternative would be to come up here to animation edit track and then have to come up here to get to the next cell and that's just tedious you kind of have to come up here to animation then edit track and then select previous up or the same thing but next cell right but instead you can do it where you just have the shortcuts i have shortcuts seven for previous cell nine for next cell and eight for play stop right so without doing anything i just hit my keyboard and i just go to the cells out yeah step by step cell by cell and stuff frame by frame which is faster or just eight for play and stop on my keyboard so you want to create shortcuts for the things that you use often the way to do that would be to come up here to clips to your paint shortcut settings on the main menu under animation right an animation you then look for have play stop here you click on it you can edit it i already have one there or you add a shortcut a different shortcut if you want but i don't want anything you can edit it i can change it to a different one maybe i want it to be six and then i hit okay but i don't want to do that so i'm just going to hit 8 back and uh that'll be that and i hit ok previous cell and excel well literally whatever action you want you then highlight that action edit shortcut type the key one you want to use for and then hit ok now i'm going to turn my keyframes back on so that our bird is doing what it's supposed to be doing i just want to show you guys that real quick so you guys understand a little bit better the importance of going sale by cell we can still do it with the key frames on but i also wanted to you guys see it with the keyframes off first right so i'm hitting seven going cell by cell and now i'm going to sell by cell and then eight the shortcut to display and stop but now we have our whole animation you wanna kinda wanna export you go to file export animation and then you have your options here you can export as a gif as a movie or image sequence usually you might want to export as image sequence if you want to do compositing elsewhere you can export the animation cells so basically just the cells themselves or image sequence which will essentially be frame by frame we hit that figure out where it's going to be exported to you can change the timeline name if you want if you want the files to be exported as a png or jpeg or whatever here you want to take export export the frames on the drawing area if you export the output frames we're only exporting essentially what's within the output area but if you want to export entire canvas that would be exporting you know the 200 pixels on each end as well which i tend to want to do anyways because we use the camera we want to apply the 2d effect camera so we export what the camera is seeing as well and then we have it on output frames way fixed uh the entire canvas you can still follow the camera but it'll be a little weird so we're just going to do output frame right so we're not taking the 200 on each end and apply 2d camera effects there's 74 frames we want to export everything still 12 frames per second that's the frame rate and then you hit ok kinda want it to be exported into a folder let's call it bird or brady and then create so it's gonna go there open that's what's gonna go and hit okay now you go to birdie and we see literally every frame in an image sequence this is it just keeps going down it's almost like a flip book and if there's a flip book and we printed out the flip book and you know we flipping through the pages this is how the animation would be up until the end sport animation you could sport as a gif obvious you know it would just be a gif jif whatever you want to call it any sport as a movie same deal turn the music back on you hit okay then it gives you more options keep all the settings the same again you want to apply the 2d camera effect as is the frame rate is going to 30. you can you can have it be 30. it doesn't 100 need to be 12. if you change it back to 12 it'll just play as it's playing in clips of your paint but let's test out 30 let's see what happens don't touch this and leave it at 128. and works fine 12. okay let's play that practically works the same almost and there you have it guys the basics of animation in clip studio page now it's time for partos so first we do some setup i create a scenario create a little story with narration and dialogue and from that i get an animation storyboard template and i plot out exactly what's going to happen what's going to be happening with the cameras how long we're going to stay on each shot is it going to pan zoom what's going to be happening in the shot with the hair flaps and whatever because the primary thing here is going to be you know some hair flow animation and then the character here eroded sano open his mouth before he closes his arms and that'll be that but then there'll be this narration happening in the background bottom line we figure out the storyboard animatic which is just like a storyboard for a comic but in this case it's for an animation and it will have sound and it'll basically be the animation but in very rough form i import the movie into clip studio paint as well as the audio and in this case i imported both and put them in a folder right under the animation folder that i've created specifically to create the rough keyframes so then create another animation folder for just the line work of those keyframes and then on that same animation folder i'll do the in betweens creating the linework with the onion skin and the main lines not the rough keyframes but the final line art as well as the in-betweens those will be vector lines in the vector layer and for those i advise to use the real g pen the g pen or the real pencil to a thin brush size this is similar to what most anime use currently i'm using the real g pen but if you're going to use the real pencil highlight it hit that wrench and then under texture make sure emphasize density is not ticked on for a darker and more authentic pencil look now remember when you create a new animation folder it doesn't come with any cells so you then create a cell and by default it gives you a cell linked to a raster layer you then delete the layer not the cell because if you delete the cell the layer still exists you delete the layer so you delete the layer in the cell at the same time you delete the layer so it deletes the cell that it's linked to so you lose both at the same time and then you create a vector layer and put it in that animation folder this way remember every cell we then create afterwards will then automatically create a layer linked to that cell and then it'll copy the properties of the layer linked to the previous cell therefore every cell you create automatically creates a layer that's a vector layer here we want all our line work to be vector remember vector layers are easier to edit especially if you're editing with the vector eraser the vector eraser allows you to completely delete full strokes effortlessly if a vector line crosses path with another vector line you can literally erase the stroke before the split in very easy ways and this just helps the process of putting together your line work for your character we create line work based off of the rough keyframes and the rough keyframe animation folder underneath and then we do our in-betweens which will also be vector layers and vector lines using our onion skin we don't need to do in-betweens for the rough we don't need to do in-betweens for the rough you create the rough you play if it does what you want and the timing is okay you then create the vector line work based off of those roughs and then do the in-betweens and then you hit play until it looks good you can always move the cells around like we discussed one of the assets you build as part of the prep for your animation is maybe a character design sheet that just tells you how your character looks like we have here with the road to santa once you finish this video you can see me put together this character design sheet in clip studio paint in a previous video on the channel so there's that and what clips the paint allows you do on the top right you can turn on the sub view window which you can also find in the window at the top just turn on the sub view window and the sub view window allows you import images in there that you can use for reference in this case i'm just using it as reference for me to draw the character in the animation this is best for consistency especially if you're working in teams you can zoom in and out of the sub view eye drop the sub view you can't really edit the image there it's just there for reference to tell you how to draw the character or what colors to use as you can use the eyedropper the key animator is basically the one that handles the keyframes and then they pass on the keyframes to the assistants with notes highlighting where the cells are going to be how many cells are going to be in between the keyframes so how many in between they're going to be and where they're going to be placed sometimes it's what is called a timesheet which you can also export in clips to your paint sometimes visually labeling each cell 1 2 or 1a 2a whatever the case may be so that no one on the team ends up working on the wrong cell by mistake they have a stronger understanding of all the principles and guides of animation they know what they're doing i don't know about me but i'm a one-man army here so i'm kind of handling both the key frames and the in-betweens here it depends on how your team is set up so you got your key or keyframe animators and then assistance filled with second keyframe animators or in betweeners list goes on for a character's body here we're not gonna have that many cells because he's pretty much standing still until towards the end of the animation where he opens his mouth a little bit and then he clenches his fist so there will be new cells to do that on a separate layer where we have lines for the hair that's where we're going to have a lot of cells and a lot of keyframes and in-betweens for a nice smooth hair flow motion because the hair is going to be doing a whole lot more stuff is going to have more cells and more in betweens on that one versus the body it's basically going to be constant for the most part until our character opens his mouth a little bit and then clinches his fists and most of those cells will happen towards the end of the animation so for the majority of the beginning of the animation is just one cell occupying a bunch of frames showing essentially a still image of the character just standing in this pose here on the animation folder for the hair that's separate i'm putting it in between also vector lines here i'm just trying to do the best job i can with the hair motion hopefully it's smooth in the end as you guys will see i'll move cells around to make it work i might delete some lines and replace the lines with other things make sure everything looks as best as possible and you know that comes with time a lot of correction moving cells around and then hitting play in a loop to see how it works until we get it right and doing that consistently is you know the cleanup so sometimes there there's another art director above everything that oversees the whole animation to make sure that everything is smooth and then orders cleanups here and there and editing here and there just to make sure everything looks good sometimes that art director is also a key animator it depends on how your team is set up and then here you know how sometimes you see certain things happen in anime and it kind of feels like a loop but there's this illusion because of all the fluff that's happening around it and maybe the camera is panning in a certain way so it feels less like a loop even if it is a loop like when the hair is flowing in the wind that's because it's a loop so we're going to copy the cells and then restructure it in order to create our loop like we did in the first example in the basic part of this tutorial to make sure our starting point does some cool animation and then transitions back to our starting point so cell one does its thing and then you start creating cells to transition into cell one so you just have to rearrange the cells to get that loop and eventually in the animation the hair will kind of relax where almost like the wind stops blowing a little bit and so then i have to create newer cells that are now breaking from the loop and making the hair kind of fall normally now i'm on the animation folder for the body creating cells towards the end for the closing of the fist and the mouth opening a little bit i also had to add some rough cells in the rough keyframe animation folder as a start so i know what i'm doing before i go back into the animation folder for the body where i'm creating the vector lines and you know the same old same old you create the keyframes first and then you create the in-betweens after always create the keyframes first and then the in-betweens figuring out how many in-betweens you actually need for a smooth transition note that sometimes you might have to duplicate a layer in the animation folder but note when you duplicate a layer in the animation folder it doesn't create a cell you then have to create a cell through specify cells to link it to this new duplicate that you've created in some cases you'd want to do that because you don't want to draw the same thing again especially if you want the drawing to be exact like in the case of this character standing still in this pose the only thing we want to edit is the arm so we duplicate the layer and create a cell linking it to this new duplicate and then just editing that duplicate just in the hands rather than drawing the whole thing from scratch with the onion skin because you're not gonna get it perfect again so in order for the animation to feel smooth and the character to look exactly the same how you want it if you know you're just going to make minor edits to it you want to duplicate that layer and then create a cell to link to it and then edit it versus drawing it from scratch now we're filling in color you want to make sure you're using the fill tool you keep hitting shortcut g and it will toggle a couple other tools before you get to the fill tool and when you're on filter you want to make sure on refer other layers because now we're going to create another animation folder just for the color and inside this animation folder each cell is going to be linked to a folder holding layers and each layer is going to be all the colors that will be on the character so one layer might just be the color for the character's skin another layer might be the color for the character is pants or you might even structure it rather than terms like that but you can structure it into layers where one layer is going to contain all the hues of yellow or all the hues of red and you can stretch structure however you want but essentially we're just filling in the flats but essentially we're just filling in the flats and putting it in a folder and making our cells link to the folder you want to make sure on the fill tool settings you have fill in vector path ticked on as well as include vector path this way when you fill in colors it's going to get in all the spaces it's going to cover even the space that the vector line covers that way you don't have any tiny holes that the colors don't get to you need to have a good understanding of how the fill tool works especially with closed gaps this way if there are certain gaps within your line work you can play around with the closed gap depending on the bar you pick clip studio paint would be forgiving of those tiny holes and rather than fill past it it will still stay within the space again these videos are part of a playlist and in this playlist there is a video that goes into detail about drawing smooth lines especially with vector lines so i recommend you guys go back and watch those if you're interested and maybe in the future we'll do another video that focuses more on the feel tool but if you just follow these settings you should be good there's another video in this playlist that focuses on color and filling in color but in that video you use the magic wand and expanded our selection before we filled in color in order to get these spaces in that video we're using raster lines but vector lines make it easier so if you use a fill tool as long as you have fill up the vector path and include vector path and the lines are vector lines on a vector layer then you should be good because they will fill in the spaces and then fill to the path created by the vector lines this makes it easier to fill up the gaps and the spaces created by your lines so on our new animation folder for color we literally just do that and fill in all the colors for the body you then want to have a new animation folder for color for the hair separate and do the same thing you want to create a new animation folder for things you know would be animated differently or you feel would make your animation easier so here i also have an animation folder for the designs on his body and how they move and make sure they correspond to the movement of the character appropriately so these white glowing lines are literally just white lines with a blue stroke that we hit with a border effect again the video on coloring kind of touches this but anytime you're adding color in clips to your paint it can't be a vector layer you can't fill in any spaces on a vector layer the vector layer primarily is for creating the line work so this whole time we've been filling in colors those have been raster layers so the same applies to the cell shading and lighting here where we're working in cell we're going to be shading in cells that's where the term comes from right cell shading mimics 2d animation style coloring anyways that's why it's called cell shading i'll turn off the animation folder holding the flats of the character so i can see the lines better and how this works is you have an animation folder in this case we'll have one for the body and one for the hair and we'll have animation folders for shading one for the body and then one for the hair and they'll be linked to folders those folders will have one vector layer in it and one raster layer in it you want to make sure you give the raster layer a linear burn blending mode or blending mode you know works best for your shading again i touch on this a little bit in my coloring video with eclipse video paint and then you want to get make sure you give it the right opacity and then the vector layer is just a vector layer and it's all in one folder and the cell is going to be linked to that folder that way if you create cells afterwards they would just copy the properties of the folder linked to the previous cell making the whole workflow easier and then what you do is animate the vector lines first you want to use the vector lines to make sure the animation is smooth and correct for the actual shading because it's much easier to animate with the vector lines than just to animate straight shading with the raster layer because it would just be blobs it'd be hard to use the onion skin to do that so you so you do it with the vector layer in this case doing the cell shading for the body each cell linked to the folder that vector layer inside that folder is not going to be doing much since the body's not moving much but towards the end of the animation where he clinches his fist and opens his mouth and stuff like that the animation changes just a little bit and so most of the animation is going to take place there using the vector lines and once we've done the animation for the vector lines and we have it as smooth as we can then we go to our raster layer within those folders and then we fill in with the same color so it's consistent throughout maybe a cool color or a warm color depending on the environment of the character i'm gonna turn back on the flats so i can see how it works and make sure that the blending modes are right and they're consistent make any tweaks that need to happen and then you're done it'll be much harder to do this for the hair animation because there there's a lot more moving pieces so on the cell shading animation folder for the hair will do the same thing except the vector layers within those folders linked to the cells we'll be doing a whole lot more work sometimes cell shading is not done this way in some cases you might just link the cell to a layer in an animation folder but rather than messing with all the blending modes and the opacities and things like that it will just be a flat color and you'll be using the eyedropper tool to pick the colors you need from the character sheet that will have the swaths for the flats of the character as well as the parts that are going to be shaded in if the mood based off of the environment needs to be tweaked later on that could be done in compositing and we'll talk about compositing towards the end of video and so essentially it's all flats even the shading is just all flats it's a little more complicated or maybe less complicated for some stay tuned to the channel and we will explore it in time the same way we do it to get the shading is the same way we do it to get any lighting or flashlighting or sparks that are going to be hitting the character it's kind of the same approach you're playing with the vector line find those spaces and animate the lines for those spaces and then filling them in with the raster layer you know the vector and the raster will be in that folder that's linked to the cells and then you apply the same approach same way you shade the same way you add any lighting the same way we put in the mood again based off of the environment of the character how the character is going to be colored and all of that again it's covered in the video where i'm coloring your character before we even fill in the colors you actually also want to get your victor eraser and here since we have the lines for the hair on a separate animation folder for the lines on the body there are parts of the hair that kind of overlap with parts of the body so then there are some lines that i want to get rid of once i get rid of them we're still going to see some lines overlap from the lines from the body right because everything's kind of see-through at this point but we don't want to delete the lines for the body because that's consistent but the hair part we can get rid of some of those lines using the vector eraser and then we just make sure that when we're filling in the color on a separate layer because remember the flask will be on a separate animation folder for the hair you just want to make sure that that animation folder is above the line work for the body that way we don't see the line work for the body in places that we shouldn't now i'm doing the same thing to the hair and just tidying up the cells where i feel like maybe while filling in it kind of maybe doesn't look right in certain places some parts need to be manually filled in with maybe a pen or a pencil or whatever and then i'm erasing parts that maybe are expanding past the line work this is overall just cleaning up and tidying up the cells in the animation adding some more flashy sauce with some of the lighting hitting the character same approach you're linked to folders in those folders you have a vector layer to get the path and then the raster layer to fill in those spots with the blending mode opacity touch up and all that and i just have like quick flashes on the character i'm arranging those flashes and cells on the timeline how i see fit remember how we're arranging some of these things are also tied to the storyboard automatic that's still playing at the bottom you guys can't hear it but i can and it also tells me where to place certain things so there are some sounds for like flashes so i know where to place them and i know how to randomize some of the cells because it's just a flash right it doesn't need to be a smooth transition like it flashes on one end and that's that and then the flash is on the other side and that's that so that comes with time and practice and you kind of understand what i'm talking about as you see the cells and then eventually the final animation sometimes if you don't have an animatic you can actually leave notes for where things should happen and that's just hitting that plus button under track label you kind of right click and then you can leave a note for maybe somebody else on your team and hit enter or click away the way to delete it will be to click on it delete the words and then click away or delete the words and hit enter now here i'm just doing some compositing slash editing using the 2d camera where i see fit and then using the motion tweening where i see fit to get what we need to get a desired result you can change the view you can change the field view of the camera to see things a little better and we're doing what we want then i get some of the background assets that we created again sometimes this is done by a separate team some people paint this stuff traditionally scan in and then they use that but here we did it digitally we have a dawn looking vanilla sky type thing and then i'm going to add that to the animation remember remember this can be done on a regular folder outside an animation folder or you can use an animation folder it's up to you however you want to use it to work whether you want to eventually tweet it blah blah blah whatever you want to do or we're going to place it in the frame and then just keep editing until we get the desired result and as you can see everything is slowly starting to come together here i drew my halo the halo is not doing everything with the camera because the folder that the halo was drawn in is outside the 2d camera folder so once i place that in it'll play ball i'll have a following video on the channel that will focus on all the editing that took place so before i show you guys the final after all the editing shout outs to the two and a half people that made it to the end of this video please like the video a lot of work went into it leave comments of any questions you may have as well as your own approaches to making animation holy ghost smash that subscribe button and turn on all notifications hit that bell so you stay notified each time i upload absolutely anything use the links for the free three-month trial of clip studio paint you can pre-order super saturday where saturday awards is going to be published alongside a lot of original content interview with steve aoki rdc world karen berger eisen award winner the list goes on read the sad am comics check out our app it's free to download 7am has the shonen content says the pm has the same content and then saturday brunch is the jose content there's a free starter guide within the magazine that goes into more detail about who we are if you're new and the latest issue of all the magazines we publish are free on the app the magazines feature our comics interviews from people in the industry the list goes on thanks for watching guys without further ado here's the animation i will see the trinity will be born against the blessings of the god of sorcery with the lord a key of dreams to a brighter existence forged from a loving heart the trinity will die the infinite night a great darkness set up to play the world till it descends into oblivion the night is nigh

Channel: Whyt Manga

Views: 331,768

Keywords: How to Animate, How to Animate in Clip Studio Paint, How to Animate for Beginners, for beginners, Clip Studio Paint, Animating in CSP, 2D Animation Tutorial, Cel animation, Animation Tutorial, Anime Animation tutorial, How to make anime, how to make animations, ultimate guide tutorial, Anime, clip studio, 2d animation, clip studio animation, how to, clip studio tutorial, 2d animation process, 2d animation software, animation tips, animations, procreate, photoshop, Animator

Id: KdPkP0boBOo

Length: 65min 31sec (3931 seconds)

Published: Fri Nov 27 2020

Reddit Comments

[u/zupra_zazel]

We needed this

[u/EOverM]

Well, this is perfect timing - I just upgraded to EX.