Animate your Artwork with an iPad

1. 01. Intro: Hi, guys. My name is Maria. I'm an animator and character designer from Turin, Italy. This is my third class in sculpture, and my first last about an image in my previous classes focused on digital illustration, and I was kind of tentative about teaching animation classes. Heroes killed sugar because it's kind of a longer prices. But recently I started a new project called Whores Yearbook. Where did characters from the Harry Potter universe and imagine them as picture in the yearbook in a magical yearbook, so off course these pictures would move. So instead of making a full blood animation, I'm talking about taking a digital illustrations and animated a little bit, just turning it into a animation doodle critical of it. Oh, are animated demonstration. So this means that you don't have to be a pro animator to take this class, but actually, you can just be someone who like traditional drawing digital painting or maybe taking one of my previous classes making bunker to the character, and then you just want to animate it a little bit. I'm a self taught artist, and I always trying better by switching my methods and try and look up new second line taking online courses. And of course, no one in my skills also human sculpture. And you can definitely try and do that to even if you're still at the start of your artistic journey or, you know you're a pro and you just want to switch up and try a different style. Different my thought or do this for fun. This class is not about making a perfect animation. It's about taking administration and making it move in a fun way. We're gonna use an iPad activities using appropriate and rough animator for the animation. You could be doing this for fun. Just, you know, just because you want to take your frustration and make a move and you're surprised friends maybe. Or if you want, you can export these animation is a look and exported to Facebook for your social media profile or exported and make a gift on tumbler or read it or whatever uses a really basic it right. I think that's all of my bubbling for now. So please, let's go ahead and get started in the next video. I'm gonna talk about materials and the persons that we're gonna use you there 2. 02. Process and Materials: Hi, guys. It's me again. So in this video, I'm gonna quickly talk about the process they were gonna use for my teen. Our animated does. So first of all, there's gonna be a few videos where I talk about animation principles. These principles are basically what you need to know. So did animation makes sense. Eso I'm gonna talk about timing, spacing in between. And also, I'm gonna touch upon how to animate specific elements off the body. For example, on I blink or no here or morphine animation. So how to transform one object into another This because it's all things that I am going to use in the demo off my actual animated avatar I just saw. It's easier for you guys to follow that demonstration if you notice principles before, so there's gonna be a few videos about that. And then there's gonna be a demo video off me, creating my illustrated outer. The process in that case is going to be to think about the elements that are gonna move, sketch them, color them alone, different layers, export all of these from pro trade to rough animator, then animate them on the perimeter and then export everything in a gift or a PNG sequence. Or one thing that I am not really gonna talk about that I'm not going to focus on is opportunity, portrait and digital calorie. Because I have a class about that which is to create a cartoony portrait. We broke it up, which is hero social, So you can go in for that class if you want to know more about digital Portrait's, So instead I'm gonna focus more about the animation side of things. If you want an overview appropriate. I have a video about that in mind how to drug to any portrait. Plus, in the next video, I'm going to talk about a rough animator and I'm gonna give you a tour of Europe. So did you know how to use it? So I guess I'll see you. That 3. 03. Rough Animator app Overview: Hi guys. In this video, I'm going to go from the features and interface of rough animator the up we're going to use to animate our digital portrait's or digital illustrations. I'm gonna top on the icon of the app and you know, you have all my existing projects from the Hogwarts yearbook. If you want to open an existing project, you simply tap on it and then top open project. Or if you want to create a new one like I do now top on new project. I'm going to name my project test and have a resolution off 1000 and 80 per 1000 and 80 pixels, which is the maximum height you get on rough, animator. I'm gonna choose a square ratio because I'm gonna post this on instagram. And also, if you want to use yours is an animated profile picture. It's better if it's square. The frame rate is 24 frames per second, which is standard for traditional animation. Here we have the interface. As you can see, there's a canvas in the middle which you can move around and zoom and pinch with two fingers on the left. You have a tool burr with all your projects. Options import audio is, of course, for audio files on voiceovers, import images allies you to import J packs and PNG's, which is what we're going to do from procreate. For the expert options, you have expert moth gift and PNG sequins. Let's see what they are. Expert Ma will expert a video file in full resolution. This is the preferred option. But remember that on social media there is a minimum length for posting videos, for example, on Instagram and Facebook you can post speedy is that are at least three seconds long. So even if you create a short loop, um, it must be at least four seconds, which is 96 frames. You can, of course, expert directly in gift for month, but I must say the quality is very lossy. So I recommend exporting a mock video and then create a gift using one of those online gift making websites like defy. If you want to make your animation on Rough Animator and then cholera it on a different app , you can do that by lower India, pass ity off the Bagram layer and then topping expert PNG sequence, which will export on lee the liners off your video frame by frame, which then you can import on prostrate and color. This is because Rough Animator doesn't offer great coloring tools and the pencil sensitivities rather low. So for coloring, painting on effects, I prefer using procreate. In fact, the way we are going to do it, it's we're gonna prepare the elements and color them in procreate the next four time in PNG and then import all of it in Ref Animator. If it happened, modify layers. You will have different options off course. You can create an entirely new layer, or you can cup timing off a specific layer to another one with blank drawings. I'm gonna rename this layer Test one, and I'll draw some, run himself on it. I then change the duration of this rowing on the timeline from 1 to 2 frames, then tap on up, growing after an Al Joe over the original circle. Really badly, I must say and draw a sad face, but it doesn't matter about the actual drawing is just to show you the tool. So now I have two drawings lasting it. Also four frames. If I tap copy time into blank layer, it's going to create a copy of the layer, but without the drawings, you can also tap copy drawings, which will instead make an exact copy off that layer. If you tap at drawing after, you will make an entirely new drawing instead. If you top duplicate after it will duplicate existing drawing and then perhaps you can at somewhere elements or train. Stop drawing like I'm doing with this squiggle. The timeline taco shows the timeline, of course, so you have to keep it selected out of what you can't see it, and underneath you have your tool option window. Here's the paintbrush, where you can choose colors or color. Pick them from the canvas. You can change the type of paintbrush from normal to solve to texture brush. You can also change the size by sliding from left to right with your pencil. Same thing goes for the opacity and spacing. The spacing is basically the space between the brush shapes, so it gives kind of like a sprayed outline or a compact line. The Razor of Tool works exactly the same way as a paintbrush. The back a tool will feel color shapes that have closed outlines, although you'll probably still have to fill in with the paintbrush around the edges. And this is why I don't think Ralf Animator is great for coloring. Then you have your selection tool, where you can select the whole canvas or specific elements by drawing a selection around the chosen areas. You can then move the selected objects around fleet damn scale them. This is useful when you don't need to make an entirely new drawing, but simply change aspect or scale to an existing object. You can also use it to copy and paste elements to different drawings or different layers. Underneath. You have the reverse action pattern, which allows you to go back one essentially like control Z Ina Derby. Underneath you have the play button, which will render and play the animation and this crap buttons, which allow you to see your animation forward and backward to check the flow of the movement by sliding up and down with the pencil. The last battle is the onion skin total. The onion skin is a very useful tool for animation because it allows you to see at the lower transparency, the drawing before and after the one that you're wrong at the moment on the timeline, as you can see, even if I am in drawing, too, I can see one and three, and so I know where to draw. To make the animation smoother, the onion skin range lets you decide how many drawings before and after you want to see. So, for example, if I slight the next drawings to two instead of one, it will let me see drawing three and four, even if I am on to. But I usually keep it just one drawing before and one drawing ahead. The last thing we have to analyze is the top bar in the timeline. The drama in duration lets you decide how long you want your drawing. That is the purple units that you see on the timeline to be exposed on screen. If I say one, it becomes smaller. If I top on the forward arrow, I can lengthen the duration. You can also delete a drawing or make a cycle. A cycle is the repetition off a certain amount of drawings for a specific amount of frames . For example, here I create a new drawing off 15 frames and then tap make a cycle. I'm gonna make a cycle with four previous drawings which creates those green units that show us that the action will repeat. If you don't want your cycle anymore, you can just up until it cycle, right? These are the most important features in rough Animator Hope everything is clear if it isn't them. You know, in the comments, and I'll answer all of your questions to the best of my capacity. In the next video, we're gonna start talking about basic animation. See you there. 4. 04. Basic Animation: Timing and Spacing: hi guys. And welcome back in this video, I'm going to approach the concepts of timing and spacing which have often been defined the trick between a mediocre animation and a very good one. The illusion of movement is given by the fact that we show a certain object in different positions fast enough for the human eye to take it for motion. There are 24 frames in one second of animation. This means that there are 24 drawings that we can use to move the object. Luckily for us, we control just 12 drawings per 2nd 1 drawing every to frame and the I we still be tricked into seeing as move motion. Don't worry if it all seems nebulous at the moment, it wrote. Come together. Once I animate something more precisely, I'm going a any made a bowl to show you timing and spacing, I'm going to create an animation layer in Rough Animator and draw a ball with the duration of two frames. Then I'm gonna duplicate this drawing and move the ball on the other side of the canvas by selecting it and changing its position on the X translate. Now we can see the ball into different positions. This is the spacing of our action. Or take these positions are called key frames because they are key. They are the start and the end over action. I'm going to change the number of frames that the ball is showed in one position, 15 frames for each position. This means that a little over a second, the bowl jumps from one side to the other. That's fine, but at the moment the action is jittery because, as I mentioned before, we need at least 12 drawings every second of animation. These 12 drawings are cold in betweens because they are in between the two main points, the key friends. But we're going to talk about in between in the next video. For now, just trust me on this, so I'm going to reduce the duration off each drawing to make the action seem a bit smoother , duplicate the ball again and create 1/3 drawing off the bowl position in between the two ends of the movement in order to make the action seamless, jittery. Now we can see that the ball takes the same amount of time to go from the starting position to the middle position to the end position. This is called linear timing, and it's kind of mechanic and boring on the Roberts take the same exact amount of time to do each part of directions. This is why, in animation, timing is so important by defining how long it takes an object to go from point A to point B, we give did action, flair and character. So I'm gonna draw the other frames in between one position and the other to show you what I mean by drawing more frames between the certain position and the ending position. We make the actions lower by drawing less frames. We make the action faster because, of course, one moment the ball is in one place and then accessing the other for the example here of drone more frames between the second house of the movement in the first, This makes it seem as though the ball is slowing down. It starts fast. Let's frames any end, slow, more frames. I even added a little recoil to get a bit more flair. So now I'm gonna create a new layer and draw another bowl to show you the inverted principle I'm gonna make the ball go from one point to the other examples before. But this time I'm gonna draw more frames between the 1st 2 positions and less between the middle and the end. This gives us the impression that the ball is accelerating. It starts slow and it picks up speed and it goes out until it disappeared. Result of the screen. So to recap, the timing of an action gives flair to the animation To make something goes lower, you need to draw more frames in between one key from and the other So making a faster draw . Less frames sometimes just one if you want the action to seem really instantaneous, like in a blink of an eye. Okay, we're going to see timing and spacing again in the next video, paired with a new concept growing in betweens. So don't panic. We'll see each other in the next video by 5. 05. Basic Animation: In-Betweens: hi, guys. And welcome back in this video I'm going to talk about in betweens, which are basically the frames you have to draw in between one extreme position and the other a k a. Key frames so that the animation looks moved. For the sake of this episode, I'm going to draw a circle which becomes triangle, which becomes a line. Am I making another Harry Potter reference here? Perhaps so. Basically, this is called morphing because the objects morph into each other and it's also useful to approach because the animation I will demo for you, for my animated portrait contains some morphing in real terms. In between means that you have to create new drawings in between the key frames by tapping at drawing in rough Animator and draw a very precise line in the middle of the lines off the previous and following drawing, which you can see having selecting the onion skin, too. Two drug in between under fours move animation. The only tip I can give you is to practice practice practice so that your lines become really precise and your hand really study. So you start by drilling in between the two key shrooms, then create a new drawing in between the first and halfway them between the halfway and the second and so forth and so on. - This will give us a smooth animation, but as we render and look at it, we can see the timing of the animation is boring. Mechanical. It's linear time. Plus, there is one other problem with this animation, which is that it doesn't loop at the moment, which means that the vertical line doesn't morph into the circle. It jumps straight back to the circle, which is not what we want. So I am going to go to the first drawing of our circle, select all copy, Go to the end, greater new drawing and paste so that I have the circle at the end of my timeline and I can see in my onion skin what sort of in between so I have to draw so that the line becomes a circles movement. Wait now and we press play. We can see that the animation is perfectly looked going from one shape to the other seamlessly, but the timing is the linear, and it's still boring, so we need to do something about that has been set in the previous video. Timing is old, so to shake things up, we have to shake up the in betweens. We said that drawing more frames will make, the animation goes lower, and this frames will make it go faster. So what I'm going to try here is to draw a frame in between the two key friends and then a frame in between the first house and then one in between the second house. Slow, fast, slow. This will make the animation seem like it's accelerating towards the middle, slowing at the middle and accelerating again out to the end. This expression is gold easing in and easing out, and it's very common for any sort of action. Really. As you can see, I'm going to draw a chart over action, which is a very useful tool to plan an animation, and it's something that I really should have done before starting any mating. But there you go. So I write numbers on the key frames. One is a Circle two is a try and go free is the line. Then I draw a vertical line to signify the progression from one key friend to the other. The circle key frame is the one that I am own at the moment. Then I'm gonna draw ah, horizontal line right in the middle. That's our halfway in between. Then I'm going to draw one line halfway the first and the second health and then another just in between the key frames and the house halfway. I then drove across on each frame that I am on to signify which frame that is. So when I play, I can see that the crosses are jumping up and down, showing me the progression of the animation way. As you can see, it is the visual representation off the concept. More frames to lower animation, less frames, faster motion. I really hope this was useful to understand timing a bit better and approaching him. 6. 06. Basic Animation: Blinking Eyes: Hi, guys. Welcome back. So in this video, I'm going to show you how to quickly animate the blink, which is something that can give a lot of movement to a digital portrait. So even if you don't have any extreme head movements or body movements, if your portrait just blinks from time to time, you know, that's kind of cool. So during the demo, off the actual piece, I'm gonna show you how I'm gonna animate the blink in my in my full picture. But for the moment, I'm just going to show you how to animate it with a simple I so that it's easier toe understand the concept rather than seeing, you know, in a beautiful picture. So here I am. I got my layer, I've called it. Blink on and I have the drawing that I'm gonna drawn on the canvas. So I'm just going to draw very simple high. Um, yeah. Isn't nothing special. Uh, and okay, it was kind of Egyptian a little bit, but anyway, okay. So basically, you have the first key frame, which is the open. I I'm gonna foot a little number here one and then I'm gonna create a new growing drawing out after. And of course, the extreme state on the other side. Off a blink is the idea is closed. So I'm gonna overlay. I'm gonna overlay the the closed I. And of course, I need to remember here that I have the eyelashes. Well, so there you go. You need to kind of, you know, if the allergies here than it needs to do these sort of arc to make sure that the movement is believable. Because, of course, the eyelash close down and it's in facing down. Okay, so this is the key from two. Okay, So disease, our eye closing. So I'm gonna add a few more frames to the east just so that we can see it and it doesn't move. So professed. So Okay, so this is the basic blink. And of course, at the moment, it's, you know, it's not super smooth because there's no in between, right? So we can draw. You know, according to the type of blink that you wanna have, we're gonna start with a basic blink. We can have different breakdowns, you know, different in betweens. So basically, you take the first drawing, go up through in duplicate after this one, I'm gonna reduce it. Because, of course, the in between is to be kind of fast. Otherwise, um, otherwise, you know, you don't It does not move enough. Um and I am going on, draw the eyelid halfway the night and, of course, the the bottom large to stays there. And the rest of the eyelash is here. And then I just delete the rest of the top I because, of course, we don't need it. Way go. As you can see, the the state is in between the open eyes and the closed I and looks, you know, it works nice. So here we go. We have done a basic blink. Of course, you can make it even smoother by adding more in between. But I think disease sort of OK for what we need. We can change. Of course, the state of these. Like for example, we can have. So if you want the guy to just blink quickly, we're going on. Shorten the amount of time that it stays closed, Then go back to the middle point. So the middle in between click on select select all copy go after the close I after him after based. So we have the middle state there, and then we're gonna go to the initial drawing, select all coffee you're gonna go after on after based. So now the blink is gonna quickly close and then open again. Another type of blink that we can have, um, is a So I'm gonna modify layer copy drawings. Okay, so these we're gonna call it a normal thing, and we're gonna do another type of blink which ease the more than angry is really surprise , I guess. Um, so in this case, we have the normal open blink, but then the other state off the bling you frame number two ambling or surprised, As if you are actually closing and squinting your eyes, You know, like is if you don't really believed was going on, Let's see it. Oh, wow. Oh, no. I can't believe my eyes. No. So the of course, the breakdown is gonna be different. Middle line. It's in between here, right? So instead of having to do your in between down here, we're gonna do it halfway through these lines and health weight through here. Of course, The high pupil. You still gonna be there easily toe lines that I created. Not just gonna be starting to beer. Let's see if it works. I think it does. And in this case, we want to keep the the close position quite long so that it gives the impression that the eye is really shutting. And, you know, you're kind of squinting and thinking was going on, and then you can reopen it. So Okay, these are just two simple ways that you can animate a blink and you congee just do it with basically three drawings and then you can just alternate those drawings. And for the normal bring the time chart is gonna be basically keeping one open fling key friend to close bling And in between, just one halfway instead. For the surprised bling the chart is going to be open. I close shoved I and in between halfway Mary. Good. So I guess I'll see you guys in the next video where I'm gonna tell you how to quickly any made hair and and then we're gonna just move through and talk about sketching your actual picture or avatar. Okay. See you in the next video. By 7. 07. Basic Animation: Hair Waving: Hey, guys. And welcome back. So in this video, I'm going to talk about how to quickly enemy here. So here is kind of ah, difficult subject to animate. This is because they are influenced by something called the wave effect. When you have here, or a piece of clothing, like a scarf or anything that is attached to the main body like here we have them anybody, um, so like here or, you know, a car. All these things that are attached to the main body semi rigid, um, sort of structures, um, are influenced by these wave effect. Right? So this means that by they are influenced by the original movement of the body, like the primary movement. So, for example, you know, if you move, um, if you're jumping up and down off course, your hair is gonna follow your movement, but, um is not going to follow it, um, directly, he's going to follow through. Um, Father Fruit is another concept of animation, which is likely to add months. I think for these course. So we're just gonna approach it, Sort of like you know, more. Run the bus way. What? I mean, by the way, The fact is that if the hair is a face, okay, so if they hear it's sort of certain from here this is the point where the hair is attached and there's win coming. Like, for example, the wind is coming from this direction. The hair is gonna move, um, towards the towards the right and up. Right. So if the wind is coming from the bottom, the hair is gonna do this knife for monarch, right? But of course, it's not gonna move from here, you know, it's not from here. It's gonna because they here has weight. So it's gonna be a touch from here and sort of do this right? So it's gonna move them more at the bottom than at the top. So at the top, these the movement is gonna be minimal. It's gonna be this right, And instead, at the top of the bottle, the movement is gonna be larger, Okay? And it's not the best face. It's just something really quick. So let's go on the here later. Now, Um, let's just, uh, give these person like a fringe. Okay, so here's the sort of fringe like a wavy from the fringe. OK, and we're gonna quickly go on a drawing after fright. Eso if the wind is coming from days direction, we're gonna have to make the here go up a little bit, right. And try and keep the volume off the banks of here. So the similar. Okay, so very quickly. We have these sort of movements right now, we're gonna have to create some in betweens. Usually I drove two or three. Um, it's nice to sort of have we could have these sort of timeline where we have hair. This is drawing one. This is Rooming two. Okay, so 1 to 2. And yeah, And then, of course, to 31 So I'm gonna select all of this copy and then create 1/3 drawing. Um, after after based. Okay, so in this one, so wanted you off course, we're gonna have a middle in between. And then perhaps one before and one after. Okay. And then it's gonna be the same way going down. OK, so we're going to make three more drawings. Eso first a drawing and after and let's make the needle on the middle drawing This one is the middle one. Okay, so for the middle drawing. We need to go in between these terms of hair and then in between here, always remember, it means you have to go. Exactly. Health way. The two lines that you see in the onions, kids. Okay, right away. I'm sorry for my boys. Sounds a bit nasal because I am developing a cold because, of course, it's the end of October, and it's to be expected to be a little sick in the change of seasons, so Okay, No, that we are done with the first in between. Okay, we have to make another drawing drawing at after, um here. And this is gonna be the droving in between the first half in the second half, right? So these one we need to again just go have now the difference between one drawing in the other stars to get smaller. So of course, you need to be more precise with your in between. So now that we have these five drawings, we need to go back to the drawing number one. Right. So you're going up? Go back. One going the selection toe. Select copy. Go the end after based, then go back to to the middle one select a little coffee, go to the end after face. Then we go to the first in between select Okabe drawing after base and that's it. Let's see if it works. That's right. And it moves. Sure, it could use a little more work. My in betweens were int the most accurate. But, you know, you see the point kind of works make a cycle Is other drawing after? And maybe a dinner added for harmony rendered this 12345678 So we're gonna go for 16 make a cycle with the last eight, okay? And then, of course, these running could go to 32 sides. It means that this will cycle out before three times. Right on this one also needs to be so There you go. Very good. So the most important thing again, just to recap to remember about here, is that the hair at the bottom or the hair that is farther away from the point to which its stock moves more then the air at this cup. And this is true for any sort of semi rigid body attached to on object serving in a riemann . If you have a ball, right? And these balls has one of those, like fox tails. Um, visible has one of those folks tails attached to the end. These tale is gonna go more at the bottom. So these range of movement is going to be larger than the range of movement here. Right? It's because it's sort of like a call in action. Okay, So good things was all about here on. I will see you guys in the next video where we're actually going to start. They're moving the whole animated doodle cedar. 8. 08. Sketch and Colour on Procreate: hi guys. Now that we have seen in detail some of the basic principles of animation, it's time to get started. With the game off my animated digital portrait, which is Harry Potter themed Off course, you can choose whichever style and type of portrait you prefer. If you're looking for a class on how to draw cartoony digital portrait, you can take my previous classes here on Scotia, where I talked more in that about sketching, character design, color theory and so forth. I am not going to pay as much attention to those topics in this class. Otherwise we would be here for the next month, right? For starters, I'm going to create a custom size canvas off 3000 or 3000 pixels, which is big enough to have nice, crisp visuals when we export the animation is a more file. I'm probably gonna drama name Banner on my portrait because it's a trademark of my horse yearbook, Siri's and I'm going to use my handle since this is going to go help on my instagram. Since this is an animated portrait, the most important thing when preparing the sketch is to think which elements are going to be animated. They need to be small things that can be separated from the main body, like eyes, hair, small objects at hand lights, auras. Also, I think it's always important to consider the main characteristics of the person you're drawing. So, for example, I like to draw in bright. It's kind of my thing. So in my portrait, I'm going to showcase a pen and parchment because this is Harry Potter themed have also decided that the two states of my animation are going to be me as a person and then me in my animal form, because I would totally be in any maggots. In the wizarding world, if you are drawing a portrait with a different same or a realistic one, you can think about another think or action. I don't recommend actions that include the movement of the whole body, like had turning torso, rotation and etcetera because they are really complex. But perhaps another simple thing, like reading a book, holding a flower that loses and Ray grows its petals using a smartphone. Is it just some quick ideas from the top of my head? But if you want feedback on your animation parties, please write it in the class discussion board or in your project, and I will oblige. So going back to my animated avatar, my animal form is going to have the shape of my actual real life dog Buddha. So this type of animation is called morphine, as we saw in video number four on, although it might seem way more complex because the morphing is happening between two organic shapes is actually just a simple as the one would date between circle the triangle and the line. So don't panic. Good now then we have the sketches of my two main states. I'll keep them in different colors for clarity. I'm going to clean them up were a precise line. This is very important because if you start animating and droving in betweens without a clear line, your animation will turn out all wobbly and confused. So now that we have some clear lines for the two men states, it's time to animate the bulk of the action. The morphine between human and dog. Of course, if we had to animate all of the black outlines into one another, it would be complicated, and he would take ages so Instead, we're going to employ a little trick I learned from Sailor Moon, so I don't know if you ever watch that show. But if you were born sometime around 1919 you probably did. Anyway. There's a point in every episode where normal Girl was actually magically turns into a superhero Sailor Moon. And how did they make her change of clothes? Accessory, etcetera. As you can see in this video pull from Internet, they faded to white all of the details of her outfit and animated on Lee the Silhouette, therefore making their job way easier. We're going to do sort of the same thing that is a magical blue aura is going to light up and become brighter and brighter until he's completely covering the human figure living on Lee, a light blue shape. The shape is then going to morph into the shape of the dog. And then the order was not little enough showing the actual dog with all its details. Since, of course, this animation has to be looked. We're going to invert all of these friends when the dog turns into the girl again. I'm going to draw five transitional drawings in between the shapes of the girl and the dog . They should be enough for the animation to his move whilst keeping it short. So the breakdown of the transformation will be for the shape to get smaller and smaller until the dog shape sort of springs out of it, becoming bigger than the actual dog and then settling into the dock. They should make the animation kind of fun, you know, as if the dog is sort of exploding out of the human. I'm going toe identify the human shape Askey from one. The small breakdown shape as deferring to the big dog shape, is keeping three, and the final dog shape is key frame for the others are in between frames to make the transformation smoother off course. When I was drawing this, I didn't know that this would work exactly. But, you know, planning it before drawing is always a good strategy. And then you contested, As you can see in the demo toe workout, my break downs and in betweens, I lowered the opacity off the extreme poses human and dog and started sketching simplified fluid shapes for the transformation. Stay just once. I'm satisfied with the sketches I turned off the lawyers and start cleaning up each drove in one by one to speed up the process. I usually caller along the outline and then select the shape with the selection tool. Close this election top on the layer amusing and then tap on field layer. If you watch my class on regional portrait painting on procreate, you've seen this is the method I use for flood coloring as well. Okay, so now that I have all my morphing drawing on one on each layer, I'm going to explore them as p and G's to get them out of the way. I'm going to turn off the layers. I don't need the name banner in the background by I'm checking the layer box and then tap on the little branch share and select the PNG extension. This will save the image with a transparent background in your camera roll. I'm gonna quit. Repeat the same process for all the blue transformation that years. Now that the morphing animation is out of the way, I need to focus on the secondary animations. What are these? By secondary, I mean small details that contributed to the overall feeling of movement off the drawing, namely, I billings, hair moving smiles in the case of the dog, you know, the tail waving years teaching first I'm going to the care off the eyes, eyebrows and glasses. Off course the classes go on the run layer because they will have to replace in front of the eyes and the eyebrows for the eye blink. I'm gonna have three drawings like a showed you in the video about animated blinks. The type of bling is going to be a cheeky surprise bling, which the character is going to make just before initiating the transformation. So, along with the eyes, I'm gonna animate to the eyebrows and the mouth as well. And the mouth is going to curve a little into a broader smile to draw the different states of its animation. Here on procreate, I'm gonna lower the capacity of the layer with the open eyes, make a new layer and draw the closed eyes. Then I'm gonna lover capacitive that you're two and draw the in between. As for the eyebrows, I'm gonna duplicate the layer and then move the position of which brow using the selection tool so that I'm sure I'm maintaining the exact shape off the eyebrows. Next, I'm gonna animated the states over here, which is gonna gently wave as it moved by a light breeze. This means that the movement is going to be minimal like a showed you in the animating hair video. Next is the smile, which again is going to be very settled. The trick with these kind of animated illustrations is not to draw exaggerated movements, or it can become very apparent than only a few things are moving and that the main body is still so. It's better in this situation to add many small animations which again give a sense off other all movement without drawing attention onto one single element. Very well. I'm going to have to approach the coloring step in the next video because this one is already become super long. So see you there for coloring an expert in the drawings to Rough Animator by 9. 09. Colour and Export on Procreate: hi, guys, and welcome back in this video, we're going to color all of our elements on each separate layer, an export, each one of them as a PNG file with a transparent background. As you might know, if you watch my previous videos on creating digital portrait and illustrations, I always start by flat coloring that he's feeling in the element with a block color. Today's eye color the outline of the shape, then selected with the selection tool in the top. Bar off, procreate up on the specific layer and then tap on field layer, which will speed up the process. When I paint a portrait for work or fun, I usually add details shading lighting after the flood coloring step to make the illustration stand out. However, in this case, since we still have to animate everything, I prefer to keep it flat and simple. The only detail I like to add is a bit of blush on the cheeks to give the character a bit of life. I do this by locking the face skin layer, his wife two fingers left on the lawyer and then going over the cheeks with the noise brush , which you can find in the touch up section off the brushes to choose the right shade. For the blush, you can color pick the shade of the skin and move the colors lighter to more red and more saturated, which will keep a similar shade but make it more prominent. As with my usual coloring style, I like to keep the outline of the original drawing on Lee, where the colors are in contrasting enough. This means that I'll keep the outline on the character's hands to highlight the fingers or between their face and their neck, following the design of her jaw, as well as on her hair to identify the different strong's I Do. It is by modifying the blending sightings off the outline layer and setting them on soft light. Once I have each element on a different layer, including the different drawings for each element that are going to animate. So the eyes, eyebrows, hair and mouth. I'm going to turn off the background and any other layer that I don't need an export, each one of them as PNG one by one. The process is to top on the little French in the top bar share and select PMG. This will save all of your layers with a transparent background in your camera roll. Now that I'm done with all the layers, I remember that I need to add the effect states for when the magical aura is going to appear and disappear, which will allow us to use that little trick off animating the silhouette like we saw in Sailor Moon. So I'm going to select all of the layers that make up the full figure by swiping on them right with one finger and compile them into a group by tapping on the icon on the top. Then I'm gonna swipe left on that group and selected the option duplicate. Now that I have a duplicate off this group, I will merge it by simply tapping on it and selecting Flatten. Now lock this flood layer by swiping right with two fingers and select the large soft brush from the brush section, airbrushing and paint on it very gently. This will be the drawings that we're going to use to show the increasingly brighter aura. Now that I'm done with the human, I need to apply the same flat coloring process to the dog the dog shape is somewhat easier than the girl, since it's got fewer elements, however, once have painted it all, I'm going to select the years, detail the face in the main body from the original layer and top on duplicate contents so that I have everything on a separate layer, and I can animate them with the select tool in Rough animator. I'm going to quickly repeat the same process with a soft brush on the full dog shape to make the or a transition. And then I'm gonna export each element on a different layer, turning in the background off and saving it as a PNG. Now that we're that we're coloring and with the part of the process using appropriate, let's move on to Rough Animator and the last step of our Denver See you there 10. 10. Animate in Rough Animator: Hi, guys. Welcome back in this video I'll show you how to import the PNG images we say from procreate and assemble them using rough animator to make your illustration come to life. First of all, I'll create a new project with a resolution off 1000 and 80 per 1000 and 80 and then at a layer called Test Transformation. This is the layer where I'll place the morphing animation as we talked about in the appropriate overview video. To insert images you have to tap on the project options import image. This will open a window into the iPad camera roll and allow you to import their chance and drawing. I'm quickly gonna import all the drawings from the transformation sequence. I'm gonna change the exposure for the first and the last frames off the transformation to check. If it works, it looks good to me. I'm just gonna make some small adjustments to the in betweens frame length to give more bounds to the animation by reducing exposure time off the 1st 2 drawings. I'm adding to the feeling off dynamic movement towards the dog shape. Now that I'm satisfied with it, I'm gonna create more drawings and inserted the same images just in reverse order. In order to loop the action for further added to the robbery bounce off the animation, I'm going to apply another animation principle known as squash and stretch, which we haven't focused on in this course. But that is used often in very cartoon animations. To make things even more fun, I'm gonna duplicated the arrival parts of the dog and selected with the selection tool. Then I'm gonna vertically stretch it, making it thinner and taller. Then I'm gonna take the first frame at the start of the transformation back into human, and this time I'm gonna squash it, making a shorter and fatter. This is useful to build the anticipation to the action as if the dog shape is preparing to jump up and stretch into the girl. Fear I'm gonna do the same to the frames on the girls side of the transformation, adding his question right at the end. After the stretch, it goes like this. The transformation happens A stretches into the whole theme shape of the girl than rebounds into a short stack squash, then bounces back to the real girl shape as you can see the combined use office question stretch is really landing robbery flair to the transformation. I'm going to add the same extra squash to the dog shape, and we should be good to go. Good. So now that have taken care off the morphing animation, I'm gonna import the rest of the layers, starting with the hair layer which goes underneath everything else. Then I'm importing the main body. That he's all of the layers that are not affected by any secondary animation with this kind of animated illustration is always good to give a second or sort of the viewer to take in the full picture before starting with the maid action. So I'm changing the frames of the body, drawing to 24 so that the things will be still for at least one second before the main transformation happens for the hair. I have to create five drawings to insert the three states of their movement. Look backwards to go back to give him one, of course, Then I'll create a cycle so that the hair keeps waving throughout the animation. I'm gonna move the transformation take down by creating a new empty drawing before the first blue shape. And then I'm gonna create another drawing where I can insert the in between drawing where we can see the girl partially illuminated by light. It's not time to create a new layer for the eyes. You know the drill. I'm gonna create two more drawings for the health closed and closed eyes just before the transformation. So now let's add the layer for the classes which, luckily do know, animate on and then the one for the mouth, which is going only made roughly in sync with the eye blink. No. I'm gonna insert the dark body layers at the end of the transformation and create an entirely new layer for the main dog body. Which, of course, is gonna have an empty drawing at the start because we don't actually need to see it until after the transformation. I'm gonna do the same thing for the dog's head, tail and ears. Lastly, I'm gonna create a new layer for the name banner, which, of course, has to go in front of everything else to make the banner hover up and down. I'm simply gonna duplicated twice and translated vertically to set the lowest and highest position it can reach. Then I'll duplicated again and again and move it in between the two range positions to make the hovering smooth. When I have one second words off hovering, I'll make a cycle with the drawings I have made so that I know that whatever number of seconds this loop is going to become, the name Banner will always make a full cycle as long as I keep it on the multiples of one . So, you know, 1234 seconds It's all gonna be okay. Now I have to animate to the dog elements which I'm going to do, using the selection tool and using minimal squash and stretch to make the tail wag. I'm going to do the same thing to the years, selecting them individually and earth aging them slightly. I'm only gonna use to intermittent positions for the tail and the years as these aren't cyclical movements like the hair, but more like a sudden quirk to spark up the dark piles. Don't don't. Now I'm gonna increase the length off the whole loop. Because, of course, the action has to be looked back to the girl pose. So after I stay on the dog. I have to initiate a second transformation and go back to the human figure. Therefore, I'm gonna insert all of the drawings inserted before with exact the same timing, but inverted. - Now I have a slight issue, which is that the partially lit drawing shows the girl with their eyes open just after she's close them for the blink. And this looks kind of weird. So I'm gonna have to go back into pro great and export a new PNG file with the same exact drawing, but with her eyes closed back in a second, right? So now that I have created a new flood emerge with the blue aura and exported it in PNG, I can go back to Rough Animator and substituted with the other in between. Aura way are then. So I'm just gonna top on project options. Expert. More video. Well, you confined your looked movie in the iPod camera roll from where you can share it online or via email. As you can see in this video, we have gone through all of the animation principles will be so before. Plus this question stretch Indian. The trick with these animated do does is to carefully plan which elements are going to move , make sure that there's more things easily manageable on their own. Export the individual frames and then simply mix them up in rough Animator for maximum effect. Right? So I'll see you guys in the next and final video. The recap timeless. 11. 11. Recap Video Time-lapse : hi, guys. And welcome to the last video In this course, I want to show you a time lapse of the full process which took me around three hours in the house. In between the sketching figuring out all the in between animation cholera in importing it in rough animator and exporting them off. I really hope these cars was clear and provided you with some useful basic tips about to the animation. Please let me know in the discussion word. If you have any doubts or questions as usual, please create your project. As soon as you start watching the course and updated as you go along this way, you can get feedback and feel more motivated to keep going. I would love to feature your artwork on my instagram account. So when you publish your project, don't forget to include your handle and you'll get a sheltered from me. Lastly, don't forget to leave a review. I love to hear your thoughts and let me know in the comments what you think I should teach next. So see you soon, guys and keep practicing. - Theo . Theo