How to Create Your Own Frame-By-Frame Animation [for Beginners]

1. Intro: Hi, there. Do you want to start animating, but you do not really know how? This class I'm going to teach you about frame-by-frame animation, which is the perfect way to get into animation. I'll also talk a little bit about different animation principles. In the end, you'll be able to create your own little frame-by-frame animation. My name is Carolin and I'm a freelance 2D artist and game graphics student. I've been working on several game-related projects before, and especially, when working on mobile games, frame-by-frame animation can be really useful to animated characters, create the spreadsheets, or animate the environment. In this class, we will be working with Photoshop, so it can be pretty useful if you have some basic Photoshop knowledge. Though, I will be explaining the most important words we will use to animate, but you don't need any outskirts because I will show you some tricks how we can treat everything without any drawing knowledge at all. Whether you are a freelance artist or just want to try it and your hobby, this class is perfect for you. As I've mentioned before, you can actually use these frame-by-frame animations and games to animate characters or things or you can just do it for fun. I think the most amazing thing apart from the creativity, of course, is that you can see a nearly instant result. You can just draw two friends and already anticipate the action or the motion that is going to happen. I think that is just really amazing. By the end of this class, you will know the basics of animation on which you can then build upon in the future. You will also be able to animate your own little character. Apart from that, feel free to upload your progress and your final project into the class gallery to get some feedback and to inspire others. Also, please don't hesitate to reach out to me if you should have any feedback or questions. You can just write reviews to this class or follow me on my Skillshare profile. You can also message me on one of my social media profiles. You can find me under at naevrah. Should you have any questions, just don't be afraid to ask, I'm happy to help. 2. Animation Principles: We are going to start this class by taking a look at the animation principles. The animation principles were introduced by Disney animators in a book called, The Illusion of Life. Their goal was to create more realistic animations and appealing characters. In this class, I'm only going to talk about the animation principles that will be needed to create fairly simple frame by frame animations. Otherwise, it would be way too much content. The first and most fundamental principle is called squash and stretch. When a ball hits the ground, the force of the motion squashes the ball flat. But because an object needs to maintain its volume, but also why [inaudible]. This squash and stretch effect gives an animation an elastic lifelike quality. Even though it might not always be that visible in real-life, squash and stretch is all around you. Whether it is a simple object like a bouncing ball or more complex constructions like muscles. All shapes are distorted in some way or another when acted upon by an outside force. It adjust can be hard to see. Squash and stretch, imitate and also exaggerates this effect to create a sense of weight. The next principle is called anticipation. It is used to prepare for an action. For example, if you are going to jump off the ground, what are you going to do first. You will bend your knees first, and that is what is called anticipation. Anticipation can also be used for less physical actions, such as the character looking off the screen to anticipate someone's arrival. When it comes to drawing the animation, there are different ways to approach it. The first way is called straight ahead action. In that case you draw each frame of action one after another as you go along. But when you animate pose to pose, you draw the extremes or also called key-frames first. The extremes are the beginning and end drawings of an action. After that, you go to the middle frame and then start to fill in the frames in between, which gives you more control over the action. Though the advantage of the first way, straight-ahead action is that it creates a more fluent in dynamic erosion of movement and thus is better for creating realistic sequences. But on the other hand it can be hard to maintain proportions. Though this problem is removed when animating digitally. Nevertheless, that can be pretty difficult because you can't figure out where you're supposed to be at one time so it's like running blindfolded. Of course, the best way is to master both techniques and combine the advantages. The next principle is slow in and slow out. Sometimes it is also called ease in and ease out. Objects in the real world need time to accelerate and slow down. For example if you start your car, you don't get up to 60 miles per hour right away but it takes it a while to accelerate. Animators call this an ease out. Likewise, if you break, you won't come to full stop right away. Well, maybe if you crash into a wall or something but normally you wouldn't. You would decelerate over a short time and you stand still. In animation this is called an ease in. This principle emphasizes the extreme puzzles. Thus fewer pictures that run within the middle of the animation, so fast action as emphasized as well. If you want to give a scene more life and at more dimension to character animation, the so called secondary actions are used. For example, a walking person can simultaneously swing their arms. They are walking as they are primary action and the secondary action is the swinging of their arms. It is important to keep in mind that the secondary actions should emphasize and never take the attention away from the main action. The last animation principle we're going to talk about is exaggeration. Sometimes animated motions that imitate reality perfectly can look pretty static and die. While it's staying true to reality the action is presented in a more extreme form for are sometimes [inaudible] committed called dramatic effect. As mentioned in the beginning, the exaggeration is also part of the squash and stretch principle because the distortion is often exaggerated to make it look more appealing and interesting. These were only six of the 12 basic principles of animation. If after this class you should be interested in creating more and maybe more complex animations, I can only recommend you to take a look at the other six principles as well. But for now we're going to enter the world of Photoshop and start animating on our own. 3. Photoshop Setup: We will start this class by creating a new document. I always start with a size like 2,000 times 2,000 pixels, but it isn't really important for this class which size exactly at us. Just 52 choose whatever you like. But so the background color isn't really important. Address like this grayish tone because it's more relaxing for the eyes to look at, but choose whatever you like. In the next step we are going to take a look at the windows that are required to animate and some that can be pretty useful. Of course you need the color window over here and the top right-hand corner and as well as the layer manager. You don't really need the swatches window but if you want to leave it open of course you can, it's pretty useful as think of working with colors because you see the last colors you use but it's just a personal preference. As well as this navigator window over here, I just like to keep it open, especially when the composition of an artwork as important. You can just see the her artwork in here are the time, so it's pretty useful to get an overview over the whole scene. But it is not that important in this animation class, so you can also just leave it close or close it. But if you should want to open it, you can find it over here, under Window and then down there navigator, you can just check it. That should appear somewhere on the screen. But the most important Window when animating is of course, the timeline. This is mostly closed in the beginning when you're opening Photoshop. You need to check it and then it should appear here at the bottom. Now we can create our animation in this timeline window, you want to make sure that this button over here says create frame animation. It might say something like create video timeline. But then you can just press on this little arrow here and click on "Create flame animation" and then it should look something like this. The video timeline is of course also used for animation, but then Photoshop calculates the frames in between. This class is all about drawing each frame by frame. That's why it's called frame by frame animation. Of course we are choosing this one and then you can just press on it and it will look like this. It might be that this little frame over here looks a little bit smaller than mine then you can just press on this button over here on the top right-hand corner of the window and click on background options, there you can change the thumbnail size, but you don't have to. It's just that you are able to see that it a bit better. Just press "Okay" to apply it. 4. Creating the Objects: Now that our Photoshop interface is set up, we can actually start animating. I already created a cutoff for layer in the background. You can do it in this column right here, and then place a solid color. I just like to do that so that the background color is always changeable, but, you don't have to do it. Definitely not necessary for this animation. But, something you should definitely do is, apart from, of course, saving every once in awhile, to create a new layer now so that you don't run the background layer. This new layer we are now going to draw the ground. Because the goal of this class was to animate a bouncing ball. Of course, this ball needs something it can bounce off. Lately Photoshop has a shortcut so that we can draw straight lines pretty easily. Therefore, we can just press the "Shift Key" and while doing so, drawing your line so that Photoshop, will make it look straight. Because otherwise, even if you have a graphics template, it can still be pretty hard to trust straight-line, and especially without a graphics template it is nearly impossible to draw nice-looking straight-line. Now it can be pretty useful if we renamed the layer, so that later on we don't get confused when other layers are named nearly the same. We'll just call it ground for now. Now that we've drawn our ground, we will draw our ball as well. We will of course, create new layer. Currently we only have one frame, as you can see here on the bottom left-hand corner. Everything is on this frame run, we see it because, other layers have also be opened, we have select this one frame. But that is no problem, because for now we will just create all the object we will need, and then the next step we will start animating them. Drawing a nice-looking circle is pretty hard, and probably impossible if you don't have a graphics template. Of course we are going to use a tool for that as well. The tool we are going to use is called marquee tool, some may call it selection tool. You might already know what it does, is create a selection on the canvas. For our ball, we will use the Elliptical Marquee Tool, which you can find in the top left-hand corner over here. You might only see the rectangular one, then you just need to right-click onto a tool, select the ellipse. Then we just create a selection on our canvas. The size isn't that important. We can change it later anyways. To make it a circular and not an ellipse, you just need to press and hold the "Shift Key". Now that we've selected this area, we're going to right click into it, and then select this "Stroke" which opens a new window. Then we can change some settings, like the color or the width of the stroke as you can see. We can leave everything as it is and just have to adjust the stroke width to something around ten pixels. You can increase the value if you should like it to be a little bit thicker, or you can decrease it, if you should like it a little bit thinner. I'll just leave the color in black as well and then apply all this. Now you can see our circle and can delete the selection. The shortcut for deleting a selection is "Control and D". Right now it looks very perfect, so if you want some imperfections, you could just draw over the line a little bit, but that is optional and just personal preference. Also, don't forget to rename the layer. The ground is always visible and doesn't change, so it is just called ground. But I'd like you to name the layers of an object that changes over the frames, like the frame they are visible in. For example, if layer one is visible in frame one, I will just call it one, which I'm going to do now for the ball. If we animate pause to pause, and not straight ahead, we have to change the names pretty often, but then if you want to adjust the frame or layer afterwards, it's pretty easy to find. If you want to adjust the size or location of the ball, you can transform it by pressing "Control T", and then the smart frame around the ball appears, which then can be used for transformations. You can apply the changes by pressing "Enter". Now if you want, you can add a face or eyes to the ball. 5. Animating the Bouncing Ball: Now that we've set up the objects, we can create a second frame. It is pretty similar to creating a new layer. Just click onto this small plus sign down here in the timeline. For this animation, we will animate post to post because then you don't lose track of the animation principles, especially a squash and stretch is really important for this one. We're looking at squash and stretch. You might think that the boy never is completely round, but it actually is right at the top end for a short amount of time also at the bottom. In frame one, we can start with the first key pulse at the top where the bar is completely round. The second key pulse will be when he is at the bottom. To create that one, we will just copy this first layer of the bar. To copy a layer you can just press Alt instruct and drop it in the layer manager or you can select the layer you want to copy and press Control +J, which is a little bit faster. Now that I've copied the layer, I will rename it to two because for now it is the one that will be visible in the second frame. Where actually in the beginning I just named the first one key frame one and this one key frame two so that it will be a little bit more clear where we started. Now at this point we have two frames. The first one with the first peoples, so where the ball is in the top. But obviously now the two friends are exactly the same because we didn't yet change anything in the second frame, we just copied the layer. What we want is that in the first frame, only the layer with the ball and key pulse one is visible. In the second frame, only the layer with the ball and key pulse two should be visible and not all the layers and all the frames as it is right now. Right above the layer manager you can see the small box where it says propagate frame one. That means that everything that will be changed in the first frame will be applied to the other frames as well. For example, if you hide layer one, when you add frame one, layer one will be hidden and all the other frames as well. If you still want it to be visible in the second frame, you would have to go to the second frame and while you're in there make layer one visible again. It is really useful in some places but can be pretty annoying in others. You should definitely keep that in mind because otherwise it can happen that layers become visible even if you didn't mean to do that, so just keep an eye on it. We know that in frame two the ball is supposed to be on the ground. While we have frame two selected we can press Control + T and move the ball to the ground. If you want to avoid that it is moving to the side you can press shift while moving it, then it snaps to a grit and it doesn't move that easily to the sides. Now it's on the ground, but it still runs and we don't want to use that position as the second key pulse, but we want the position where the ball squashed flat to the ground and is attached to the sides. We press Control + T again, nominally it's scarce proportionally if you move the frame, but if you want to avoid that, we can just press shift again while it's scaling and move the upper part down to squashes together. Of course, we can't forget the stretch so we extend the sides as well. We fit to exaggerate but, if you press the R key, the pivot point will be in the middle of the transformed frame, which makes it easier to scale it evenly to each side. Now if you play it or switch between those two frames, we already see some kind of motion, which still looks pretty funny though. If we want to make it look a little bit better, we can change the delay between the frames. If we select both frames and click onto the smart arrow next to the frame we can select the amount of time between the seconds. Though, of course, it still looks pretty weird with only two frames. Normally, the more frames you have, the smarter the delay has to be, because otherwise the animation will get pretty slow. Of course this could be intentional, but if it is, for example, a running animation, it will just look a natural. This animation isn't that complex, so we will just start filling in the gaps between the two key frames now and I will rename them back to just the frame number one and two which will have again to be changed in a few moments though. But to insert a new frame between one and two we will just select the first frame and then click again onto this plus sign. Now the new frame, which is called frame two was inserted between the other two frames. The last one which is now frame three, was the previous frame two. Don't forget to rename that layer. Currently frame one and two look exactly the same, like when we created our first two frames. Of course, on frame two we don't want the wall of frame one to be visible. While frame two is selected, we will hide the layer of frame one. To create the new bar position and transformation in frame two, we are going to copy the bar layer from frame one again and make it visible and rename that one to two. Now we can quickly check if on each frame only the ground and one of the ball layers is visible, which should be the case right now. But of course, we didn't yet change the size or position of the ball and frame two. It still looks like the one in the first frame. Because in this frame the ball is falling down, it's stretches a little bit thus we will transform the ball by pressing Control + T and squash the sides and move it down a little. Now the animation already looks a bit more fluent than with only two frames in the beginning. To make it even more fluent, we can actually just copy the second frame to the end of the animation, because the ball looks the same by falling down and try jumping back up. Copying a frame is also very similar to copying layers. We can just press, Alt while dragging and dropping the second frame behind the third frame and now our animation looks like this. Now we are going to insert a few more frames to make it look even better. Though, if it would be pretty smart, this amount could already be sufficient. It has always depend on where its used for and what is this plate, how many frames and innovation needs. For example, most walks cycles consists of eight or 16 frames and then just can be looped. For our ball we will insert the next frame between two and three to make it look more fluent when it hits the ground, because as you can see now there's quite a change between those two frames. When we insert the new frame three, we of course have to rename the others that are following this one. The previous frame three is now frame four, and the previous frame four is frame five. Though, our frame four was on your copy and has no layer on its own, so we won't rename anything for that one. Now we will adjust frame three. Therefore, we'll copy layer two and rename it to three. Then we make layer two invisible and now we have to check each frame of the new layer conflicts with anything and is visible on previous layers, which we then need to fix. In frame one, we see that layer three is visible. We'll just make it invisible there. Because frame one is propagated to every other frame as well, layer three will be made invisible for all the other frames. Thus, we have to go back to frame three where we can see nothing because layer three is invisible again and then make layer three visible. This might sound pretty confusing, but it really helps to just try it out yourself and get used to all this propagating stuff. Now, as we already know from the previous facts frame two and three are the same, so we have to trust frame three, that it fits the movement of the ball, When you are not sure how to transform the ball, you can just make the layer of next frame visible and reduce the opacity it, so that you can see where the ball is in the next frame and how it has to change to achieve that position. But don't forget to make it invisible again. Here we are going to move the ball down to the ground and squash it a bit so that it is nearly round again, but definitely not as squashed as in the following frame. Now we make frame four invisible again because we don't need that reference here anymore and we'll take a look at the animation. It is definitely more fluent right now. Now we can repeat the copy the frame step from before and copy the third frame to after the fourth one. Now frame three and five are the same and we have six frames in total. Because our frame amount is higher, we can now reduce the delay a bit to increase the speed of the animation. We'll just choose a custom number of about 0.05 seconds. At this point, we'll just repeat the previous steps. First, we start by clicking through the frames and take a look of where another frame could improve our animation. I want our frames to the falling or jumping parts which are mid air because they should look as fast as they are right now, but they're still quite huge steps between the frames when it gets crashed on the ground so we just add some frames there. I just select the third frame to insert a new frame between the third and the fourth one. The next step we will copy the ball layer of frame three and to make the out layer in frame four invisible. This is the perfect point to rename all the layers again to keep everything organized. Then we will go back to frame one and make layer four invisible so that it won't be shown on any frame. Finally, we go back to fame four and to make our layer four visible again. We can then start transforming the ball and squash it a bit so that it is a bit closer to the next frame. Now if you play the animation, it does definitely look a bit better. By the way, the shortcut for playing the animation is space which can sometimes be a bit faster than obvious clicking onto the button. As we did before, we will now copy frame four to after frame five, just by drag and drop and pressing Alt. Currently, as soon as the ball reaches the top, it does fall down again nearly instantly, but to increase the time it stays up there we will just insert a new frame at the end of our animation. For frame nine, I'm copying the layer that's still visible here which was there too because we copied the frames and thus didn't have an own layer. Then we'll repeat all the steps again and adjust the visibility and layer names. As soon as better stand, we can transform the ball in frame nine and squash and stretch it a bit to be closer to frame one and create a fluid transition. To make it even, I'll just copy frame nine to after frame one. As you can see, the steps are always the same and only the frame numbers are different, with a total of ten frames we have. By now it runs pretty smoothly and thus our main part of the animation is finished. 6. Adding Details and Export: Of course, we can add some secondary action to this animation now, which is pretty similar to the class project, where you got us to recreate an animation like this, but you have the opportunity to be creative. Obviously the chomping as the primary action, and thinks like closing its eyes are secondary action. Even though it's a pretty small and easy trend with can so much to this animation, and thanks to the names of our layers, we can pretty easily address just one frame. When adding something like arms or rotate, you have to keep gravity, and fossils, and mindful. Of the bouncing of the ball we are able to copy some frames because the ball looks the same when it falls down or goes upwards. But for example, arms would point to the top when ball falls down, and point towards the bottom when the ball goes back up again. Therefore, those frames cannot be copied because they look different. As you'd see in this example, you have to create additional layers. When the animation is finished, you can export it as a go directly in Photoshop. Therefore you have to click onto file, export, and then save follow up legacy, and then your window should open where you can preview the Gif, and change a bunch of things. If your resolution is too big as mine right now, you might not see your whole different the preview, so you'll just click onto the smart arrow in the bottom left hand corner, and activate the fit and BU, afterwards you should check in the top right hand corner that the data type is set to [inaudible] If you want to, you can set the looping options of the animation tool forever so that it just always repeats. Then you can just click the save button, and choose the location where you want to save it, and that's already it. 7. Conclusion: Thus we've reached the end of the class. I hope you had fun and learned something new. Please don't hesitate to reach out to me if you should have any questions. Don't forget the animation principles while working on the project especially squash and stretch is really important, as well as exaggeration and secondary action. You can find an example for the project down below on the project description if you should need some inspiration. Don't forget to upload your projects into the class gallery to get some feedback. But the most important thing is that you have fun. Bye.