Video Transcript

Welcome to the tutorial How to Build a Cut-out Character. In this tutorial, I'm going to teach you about the different style of animation called Cut-out and show you how to prepare your character to use within that style. In case you don't know what Cut-out is, let me explain it to you. What we did in the previous tutorials was called traditional or frame-by-frame animation. That's when you draw many, many versions of the same character with only slight differences, that when played in succession, give the illusion of movement. With Cut-out on the other hand, there's a lot less drawing involved. What we would do is take a solid drawing like this, cut it up into its major parts, rotate its parts to create key frame poses and then allow the software to create the in-between drawings between those key frame poses. Between the last tutorial and this one, I cleaned up the Timeline quite a bit. I deleted our Rough layer and our Clean layer because both of those layers had to do with the traditional animation style. I also took our Superhero layer and renamed it Line Art. If we take a look at that quickly, it's just the outlines that were created using the Pencil Tool. Then I took the background elements that were imported in the last tutorial and I grouped them. You can see that they're all there but disabled from view. I also took these two layers, the Colour and Line Art and scaled them so that they're larger and centered within the camera frame.

The first thing we need to do is create a bunch of new layers for each individual body part of our hero character. However before we start doing this, we need to disable something in our Preferences panel. If you're using Mac, go to Stage > Preferences. If you're using Windows, go to Edit > Preferences to bring up the Preferences panel. Then go to the Advanced tab. Then what we're going to disable is Element Module Animate Using Animation Tools Default Value. I'm going to un-click that and then click on the OK button. Now what we've essentially done is now when we create a new drawing layer, the drawing layer will be created without these little [+] signs that you see here beside the Colour and Art Layer. If we click on this [+] sign, you'll see that there's a bunch of sub-layers that say things like Position, Rotation, Scale, Skew and what this means is that we can animate this drawing layer because these values exist. However we don't want to animate our drawing layer. We're going to use something called Pegs that we will attach to our drawing layers in order to animate those drawings. We want to separate our drawing layer from all its position information so that we can manipulate the drawing separately without affecting the position and vice versa, position and element without affecting the drawing. This'll become more clear as we rig our character, but for now just know that's why we disabled that option.

Now let's continue to create all of those layers that we need for the individual body parts of our superhero character. We can do that once again by clicking on this icon here in the Timeline, the Add Drawing Layer button or we could use the keyboard shortcut [Ctrl] + [R] on Windows or [Command] + [R] on Mac. This brings up the Add Drawing Layer dialogue box. I'm just going to create a couple layers so you can see how the naming convention is done. Normally we write the name of our characters, so in this case I'll name mine Hero_ and then the name of the body parts, so in this case, we could write Arm and then underscore again and whether it's the right or left arm. In terms of right and left, we usually use our write, so the animator's right or left side, not the character's right or left. If you find this confusing, what you could use is the number #1 or #2 and because we read from left to right, #1 would be the arm closest to our left and #2 would be the arm closest to our right. I'm going to use a big "R" to represent Right. Then if you click on the Apply button, you can see that it's created here in your Timeline View and you could continue creating other names without having to open and close the Add Drawing Layer dialogue box. I'll just create few more.

Those are just a few to start with. You may have noticed that I only created a single layer for the right arm and then the left arm, and the right leg and the left leg. But in fact we will be breaking down each limb into three parts, that being, in the case of the arm, the upper arm, the lower arm and the hand, and in the case of the leg, the thigh, the leg and the foot. We don't ever break down the individual fingers of a hand. That's way too detailed, so once again, we're only going to break down the arm into three parts. As you may have noticed, the place of breakdown is always at the joints, so the shoulder, the elbow, the wrist, the hip, the knee, the ankle, so logical places of rotation and movement. I'm only going to trace a few of the body parts, probably just the neck and the torso to let you see how that's done and I just realized that I didn't create a layer for the neck, so let's do that quickly.

I'm going to disable everything from view in the Timeline and I did that by clicking on these little eyeballs here, well I first enabled everything and then disabled. Then I'm just going to enable our Hero_Neck layer and the Line Art layer because we're going to make our trace from our model and it's easiest at this point to use the Line Art rather than the Colour Art. I'm going to select my frame and actually I think this is best done in the Drawing View, so we'll move to the Drawing View and turn on the Light Table so we can see our character. We have our black swatch selected from our Superhero palette. I'm going to select the Pencil Tool. I think 5 might still be a little thick, maybe I'll change this to 2. We'll see how that looks. Then I'm going to zoom in, rotate my canvas slightly and trace the neck. Okay, 2 might be a bit thin. As you may notice here, I've completed this line in order to complete the body part and it's going to hide behind the head, so you won't see it anyway. But then in order to complete this section of the neck, and if I turn off the Light Table you might better understand what I mean, I could do one of two things. I could choose the Stroke Tool again from here which creates invisible lines or I could keep my Pencil line and then just change the maximum size to 0, which would then allow me to essentially draw an invisible line. Once again, I'm getting the Error message that you won't be able to see that line unless I enable Show Strokes and then once again, you can do that by using the keyboard shortcut [K]. So we can see it right there and I might just fix it up a little bit, so something like that. If we turn on the Light Table again, we'll see that it might overlap a bit with the collarbone, so I'll just lift this up a bit to avoid that. You can continue drawing all of your body parts and then colour them in or you can colour them in right away.

The first thing I'm going to do is merge my Pencil lines. I can do that by selecting them all with the Select Tool and clicking on this button right here, the Merge Pencil Lines button. But I just forgot that I don't want to merge these two that intersect so I just really want to merge these two lines and that extra line here, so that's better to give it a smoother look. You can also flatten everything, but I'll colour them in first. The reason that I kept the Colour model is because I want to be able to sample from it in order to get the proper colours. This skin colour is this one right here, so I can use that to paint the neck. There must be a gap somewhere here, which is why it filled the entire shape. So I'm going to undo that and select Close Large Gaps, and then paint just the neck part and not the collar of the shirt. Then if I toggle back to the Colour View, I can do the same thing. I can use the Colour Picker to choose the colour of the triangular section of the hero's uniform, go back to the Neck layer, use [Alt] or [Option] + [I] to bring up the Paint Tool and then paint the collar of the shirt. The other thing I'd like to add is that there is a shadow right here underneath the chin, so I'm going to add that to my neck as well. This time I'm going to use the Stroke Tool, so maybe something like that because if you notice here, it's really close to the collar of the shirt, the shadow. So we know the head is going to fall about there. Then I can, while I'm here, sample the colour of the shadow, go back to the neck, select the Paint Tool and then colour in the shadow. That's our first piece, our neck piece. I'll select [K] to disable Show Strokes and I just realized that I'd also like to merge these two lines.

That's our first traced cut-out piece. Let's also draw the torso so you can see how this neck would connect to the piece below it. Let's look for the torso here in the Timeline. Let's deselect the neck and let's select the frame where we'd like to draw the torso. Let's turn on our Light Table so we can see the torso. I'm going to zoom out. Let's select our black line again, along with our Pencil. I think we changed our maximum size to 0, so let's change it back to 3, and let's begin our trace. Another thing we can choose as we're tracing our lines to avoid things like this is we can click on this button here, the Line-Building Mode and that'll automatically merge the lines as I'm tracing. You can see that as I drew this section of the line, it automatically became joined or connected to the line before it. I'm going to speed up this section of the video, as tracing and colouring body parts is somewhat of a repetitive process, but of course I will slow down the video again if there's anything I feel needs explaining.

Now that we're done tracing and colouring the torso, let's take a look at what it looks like with the neck. To do that, let's go to the Camera View. Let's disable both the Colour layer, as well as the Line Art layer, but let's enable the Hero_Neck. As you can see, it blends very well with the torso, especially around the bottom edge. The two pieces look like a single drawing, but because they are each on their own layer, they can be moved, manipulated and animated separately. I'm going to continue tracing the various body parts of our hero character, but I'm going to do this off-camera. But you will of course have the sample material to take a look at all the various layers that I will have created, as well as what the traces look like on those layers.

Now that I've completed tracing all the various body parts onto different layers, let's take a look at what I've done. If we scroll in the Timeline, you can see all the various layers and you can also notice that I've made a few changes. I re-coloured the costume a little bit, making the gold a bit darker. I also repositioned the character so that the wings are spread out and not collapsed, and that the character is in a more neutral position, which will make it easier to rig. On the business of rigging, let's proceed with the first step and that's to add a peg to all the layers. To do this, I'm going to select them all in the Timeline by clicking, then [Shift] clicking all the layers that I want to add a peg to and you'll notice that I'm excluding the Line Art, Colour Art and the Background group. Then all we need to do is click on this icon right here, which is the Add Peg button. Now every single layer has its own peg and in fact the peg has the same name as the layer, except that there's a –P at the end and a different symbol to distinguish it from its drawing layer. Then what I'm going to do is right-click and select Collapse/Expand > Collapse All or you could use the keyboard shortcut [0]. Now all we see in the Timeline are the pegs with their drawing layer hidden beneath.

Let me show you quickly how to create a hierarchy by parenting in the Timeline. It's as easy as taking a layer, and dragging and dropping it on top of the layer that you would like to parent it to. Let's take an example like the legs. If I scroll down, we see here that we have the right thigh, leg and foot. I'd like to parent my leg to my thigh, and my foot to my leg. If you think about it, that makes a lot of sense because then if we move the thigh, then the leg and the foot will have to follow, and if we move just the leg, which is this part here, the shin, then the foot will have to follow. The foot itself can move independently. To do this, you just have to click on the Leg layer, drag and drop it over the thigh and now if we un-collapse the Thigh layer, you'll see that there's the leg peg and a leg drawing beneath. We have the thigh peg, the leg peg, the leg drawing and the thigh drawing. If we collapse the leg peg, we can take the foot, the right foot here, and drag it over the leg and drop it. Now if we un-collapse the leg, we see that we have the thigh peg, the leg peg, the foot peg, the foot drawing, the leg drawing and the thigh drawing. That's how you would create a hierarchy in the Timeline. The other thing that you may notice is that unlike the drawing layers here, their peg layers still contain the [+] icon, so the [+] signs that we deleted at the start of this tutorial. If I click on one, you'll see that all the position information still remains within the peg. We see the Velocity Angles, Scale, Skew, etc. What this means is that with every peg that house the drawings, this is the drawing here, and if we'd like to see the drawing for 60 frames we would extend that drawing here, we can create movement or we can animate this drawing through its peg. If we want to create a key frame for this leg and then have it rotate 90° between frame #1 and frame #10, those key frames would appear here on the peg layer and only the drawing would appear on the drawing layer. In some programs, you might notice that they create the key frame directly on the drawing, so that's not what we're going to do in this case. All of this to say that even though I'm showing you that you can parent in a hierarchy in the Timeline, we're actually going to do it through the Network View.

I'm going to undo everything I just did and now let's take a look at the Network View. It's hidden here behind the Colour View and I'm actually going to expand it, and then also drag this window a bit so that it takes up about half the size of our screen. In case your Network View does not look like this and all of these little blue boxes are bunched up somewhere, you can actually select them all and then click on one of these two buttons, either the Order Network Up or Order Network Down. It doesn't matter which one. The Order Networks settings dialogue box will open. Don't worry about the values inside. Just click on the OK button and it should fan out your Network View like this. The Network View functions similarly in a lot of ways to the Timeline View. You can do a lot of what you can do in the Timeline View in the Network View, except for the timing of your animation. However, the two are not directly connected and do not function exactly the same, and in fact, the Network View is more powerful than the Timeline View in that it is not a slave to this layer stack. For example, the helmet will always appear in front of the eyebrows because it sits higher in the Timeline View layer stack. However, in the Network View that doesn't have to be so. You can often drag a second wire from a specific module and have it exist both behind or in front of other drawing modules. Like I just showed you, can have two instances of the same module appear in your Camera View with it only existing as a single module in the Network View by using things like that, by dragging several wires from the box. A good example of that would be when you create a shadow. If you did it in the Timeline, you would have to reproduce the exact element twice and add a shadow effect to it because it would become transparent and disappear. You would have your solid object and your shadow object with the shadow effect on it. However in the Network View, you don't need to create two layers or two modules. You can just pull a second wire from your module and then attach to the shadow effect. In that way, you can work more dynamically. You're not restricted to this layer stack.

In case you haven't figured it out yet, each of these blue boxes, what we call modules, is analogous to a layer in the Timeline. But when you're working in the Timeline View and you've created things in a certain way like, for example, when we created our background group here, it may translate differently in the Network View and vice versa. They don't look exactly the same like, for example, our background group that we created here. It's not locked but it is disabled. And if we move over here and we zoom in using the keyboard shortcut [2], you'll see that our background group here is red, which says that it's disabled. That might be confusing to you because here, it appears in white and here, it appears in red, although it is the same function. It just means that they're disabled. But it's little things like that that could be a bit confusing, so just be aware that you shouldn't necessarily expect to see identical results in both. In saying that, it's better if you start working in one to mainly continue working in either the Network View or the Timeline, but not to jump back and forth a lot between the two. In saying that, I think we should get started on creating our hierarchy in the Network View.

I'm going to use [Shift] + [M] to reset our view. But I'll zoom out a bit so we can see all of our network. Just as I did in the Timeline View, I'm going to select all the modules that I want to add a peg to, so it's everything up to this blue box, so nothing in red. Then I'm going to go to the Network View Menu here at the top left corner and select Insert > Parent Peg. Now as you can see, a green peg module appears on top and attached to every blue, what we call, read module, which is really just like a drawing layer in the Timeline View. If we zoom in closer, you can see that just like in the Timeline, they each bear the name of the drawing layer that they are a parent of and they also retain that –P to indicate that they are a peg. Now let's look for our legs. Here we have the right foot, the right thigh and the right leg. Actually let me just move that over a little bit more. You might be wondering why I have the foot in front of the thigh and leg instead of vice versa. That's because I want the foot to be covering the right leg. What we're looking at is this right here. We want our foot to be covering the leg, but I actually want the thigh to be covering the leg as well. That's because if we take a look at this leg, and I can do that be grabbing the Transform Tool, selecting this leg, clicking this button here in the Timeline, Sentron Selection, so this is what we're going to _____ in the Drawing View because it's selected, go to the Drawing View and then turn on the Light Table so we can see the whole body, you can see right here that this leg has a solid black line, that the right thigh above it actually has a section where the black line is missing. Then when we rotate the knee, it won't look like two cut-out pieces, but it'll look like a seamless fill between thigh and leg.

There are three different things I could have done here. I could have removed the solid black line on the leg. So if we take a look at that, so this part of the leg, and then kept the solid black line on the thigh so that when this leg was on top of the thigh, it would give the same effect. As long as part of the black border edge is missing on one of these two pieces, when a rotation is made, it'll look seamless. If I wanted to actually have the ordering be foot, leg, thigh, so the foot is covering the leg and the leg is covering the thigh, that's one thing I could have done. Another thing I could have done is reorder in that order, so foot, leg, thigh and then even though we wouldn't see a black circle on top of the thigh, what I could have then done is taken this leg, selected it and then nudged it backwards along the Z-axis. If you think of the X-axis as from left to right, the Y is up and down, the Z is backwards or forwards into space, so towards us or back into the camera. I could nudge this backwards, so it'll still appear behind the thigh even though it will appear in front of the thigh in the Timeline View. Or we could do is what I have here, is we could have the foot covering both the thigh and the leg. If we passed this drawing in front of these two, it would appear in front, but that when I do the parenting of hierarchy, even though the foot will appear in front of the leg, the leg will still be able to control it. I'll show you what I mean. We're going to take another wire from the peg of the thigh and connect it to the leg. This means that every time I move the thigh, the leg will have to follow because all the position information of the thigh is controlled here and it controls this drawing and now it also controls all the position information of this peg and this peg's drawing. Then what I could do is connect the leg to this foot. It would look something like this. Then every time I move the leg, the foot would have to follow and then the foot, of course, would move independently. But then if we follow these wires down into the composite, which is down here, you can see that the foot still exists in front of the thigh and the leg, and if you actually hover over this node, you can see that it says Foot in the little tool tip. This one says Thigh and this one says Leg. Like I said, rigging is a really creative process and there's no one right way of doing it.

I' m going to do what I did for the right leg now for the left leg. It's just right here. I'm just moving a few things around so you can see the hierarchical structure a bit better. Now if we take a look in the Timeline, like I said, they aren't analogous to each other because here we see Thigh, Leg, Foot as we would expect to see and along with the drawings going in reverse order, Foot, Leg Thigh. But if you think about it, this is the hierarchy we created, but here it looks like the thigh and the leg appear in front of the foot when really we know that the foot is in front of the leg and the thigh. Because in case I didn't explain it properly, in the Composite Module, the modules that are attached closest to the left here or closest to this light blue aqua node appear in front of those at the end, which means that this foot should appear in front of this thigh and this thigh should appear in front of this leg. That's what I mean about them not being exactly equal to one another. In addition to creating that hierarchy for the legs, what I'm going to do is group a few of the modules together and I might speed through this process, but I'll explain it all to you afterwards.

I just regrouped all of the facial features, so the eyes, nose, mouth, as well as anything that belongs to the head, so the ear, the helmet, the hair, etc. into a single group. I attached them to a composite so that we can get rid of all these ports that you see in the multi-port out. I'll show you what I mean in a minute. First, we're just going to go into the properties of the composite, and make it Pass Through, which means that nothing will be flattened and you can see that by the shape changing of the composite. Then if we click on this top button and we get rid of all the little connections from the group here, we can then just connect in a single port and let's rename our group by clicking on this little yellow button there. Let's call it HeadG for Head Group. Let's go back in and we're going to do some more grouping. Now I'm going to group everything but the helmet, which is actually in two pieces, the head and the ear. We're going to do the same thing and you need only to select one of these nodes and then just drag it away and it automatically pops out of the composite. Let's attach our group and let's rename it to Facial Features_G. Then within that, let's also group just the eyes and each eye individually. In this case, we're going to parent the pupil, which is actually the iris, the iris and the pupil to the eye, and the eye being the white of the eye. So the white of the eye, if we move it, will take the pupil with it. But the pupil itself can move individually within the white of the eye. It doesn't really matter if one eye set, so the whites of the eye, as well as the pupil and iris, exist in front of another because they never overlap or cross over each other, so if you place one further along the composite than the other, it's really not a big deal. In this case, because there's only two, you might just want to put them back in without a composite. It doesn't really matter. We can go back to the facial features group and like I said, it doesn't matter if the left eye appears before the right eye or the right before the left eye. Let's group these ones as well and I'm using [Command] + [G] to group in the Network, but you can use [Ctrl] + [G] in Windows. We're going to do the same thing. We're going to let the whites of the eye control the movement of the pupil, so they move together, but the pupil can move separately if it needs to. We're going to exit out to the facial features group and it's already plugged in and let's just name both our groups, so we don't get confused as to what they contain. So that's the right eye group. I like to write all my group names in capital letters so that not only by the paler colour, the pale blue colour, but also by the capital letters, I'm able to recognize this as a group. Let's do the same thing here. And of course, a –G to indicate Group.

In addition to this, I want to add a few more pegs to control major sections of the body. If we go back to the Camera View, I'd like a peg to control all of the upper body, which includes both arms, the torso, the wings plus the wing backpack and the head with all of its helmets and facial features. And another one to control the lower body, which would be the hips and both legs. You can add a peg by dragging it here from the Module Library, which is hidden behind the Timeline tab, or you could use the keyboard shortcut [Command] + [P] on Mac or [Ctrl] + [P] on Windows. We need two pegs, which is perfect. I'm going to go into the properties of this one by clicking on the little yellow box. I'm going to rename this one Upper-Body-P for Upper Body and do the same for the other one, Lower-Body-P. I will attach the upper body peg to the neck, the hand, the forearm, the upper arm, the torso, as well as the other arm, which is over here somewhere. There we go. We have the three pieces for the wing, as well as the other arm. And bring them over here. You might be wondering why I did not order it, the arms, as a hierarchy as I did with the legs and that's because we're going to rig them in a different tutorial using deformers. So that's why I haven't touched those yet, but I just wanted to show you the basics of rigging a cut-out puppet and you can, if you don't want to use deformers, rig the arms in a similar manner. I'll refer you to the Harmony User Guide if you want a really detailed look into how to rig an entire cut-out character. As you can see, as I attach the pegs to the various pieces of the upper body, we see them being selected here in the Camera View, so that's always a good indicator. We see that we're missing the entire head still. If I go over here, we have the head group, but I'd like to add a peg to the head group to move the entire group. Let's name this Head G Peg, so Head Group Peg and we'll attach that as well to the upper body.

Now let's take a look at the lower body peg. So that's one of the legs. Here's another leg minus the peg, which is just over here, as well as the hips, which we still need, which I saw over here as well. Let's attach all these things to the lower body peg and to all of this, so to both the lower and upper body peg, we're going to attach something called a master peg. Let me create one more peg and let's attach it to both the upper body and the lower body, and let's rename it Hero Master Peg. The reason I'm putting the Hero there is because if you have multiple characters and you see the peg collapse, the main peg collapse in the Timeline View and you see Master, you won't know if that's for this hero character or say, another character in the Timeline. So it's always good, as often as possible, to have the name of your character mentioned in the name of the layer or the module. So we'll do that. As you can see, the entire character has now been highlighted in the Camera View. What the master peg will control is everything. If I want to have this entire character be scaled down, so all of the body parts, and moved to the, let's say, lower left corner of the Camera View, I would do all of those transformations on this peg. Or if we go up here and collapse it, this layer here in the Timeline View, and then if I need individual body parts rotated, such as, let's just say, we want to bend the character forward, we would key frame those movements on the upper body peg. And then if we want an arm to move out, then we would key frame those movements on the individual pegs of these pieces. So that's how that would work. I'm going to show you how to animate a cut-out character in a different video tutorial. For now, that's it for the tutorial How To Build a Cut-out Character. Stay tuned for the next tutorial How To Use the Bone Deformation.