Converting Images to Cut-Out Characters

We get a lot of questions about how to convert clip art into a cut-out character, or how to create proper cut-out joints, so for this article that’s exactly what we’ve done. Using these techniques, it is possible to cut up one still image and make it into a cut-out character, or use your skills to create a brand new character from scratch.

The example that we will use is Marina. Marina comes with Toon Boom Studio v3.5, but she isn’t a cut-out character. Her template consists of just one image. We’ll show you how we divided her pieces, and give you some pointers on how to use the Z depth to help set up your character.

Cutting up a Drawing

To begin with, you’ll have one image that you want to cut up. You’ll always want to have one intact and unedited copy of this image. Use this element to copy and paste sections of it into new elements to start building up the cut-out pieces of your character. You’ll most likely have to do a bit of drawing when converting a still image to a cut-out character, mainly to enable the rotation of joints, but also to “finish” any part of the drawing that was incomplete or covered by another body part. The static light table is a very good tool to use when cutting up your pieces. Put the original on the static light table and use it as a reference for which parts to add or remove. Work on one joint at a time and you’ll have all your pieces separate in no time. The real test will be when you set pivot points and test rotation. There’s always the possibility you’ll have to make corrections as you go, but the more characters you set up, the more tricks you’ll learn to help to do it faster, and make less mistakes. (See image of Marina Pieces)

Z-Depth

Remember you can move elements back and forth along the Z-axis to place certain elements on top of others, even if they are under them in the timeline. This trick is indispensable when dealing with cut-out characters. For example, if you look at the finished Marina template you‘ll notice that we’ve put her head and hair on separate elements, and redrew the neck so that it would be more suited to cut-out rotation. For Marina our challenge was to keep her hair behind everything, but we also wanted her face on top. This is where the Z-depth really comes in handy. We’ve made the head a parent of the back of Marina’s hair, so when we move the head the hair will follow. But then we played with the Z depth of these elements and made the hair go behind the neck, and her head on top. This is a neat little trick that works well for hats, sleeves, and just about anything you can think of. Also, with the neck and head drawn and layered this way, you can easily get a very full range of rotation.

• Remember that if you put something on a separate element, you’ll have to remove it from the original in order for the rotation to work
• Use the keyboard shortcuts [Alt] + [up and down arrow keys] in Camera view to bump your elements back and forth on the Z-Axis
• Make sure you have the Select tool active so that you aren’t setting keyframes on your elements.
• Keep in mind that when you move an element in Z-space that it will appear larger (or smaller) in relation to the other elements. You may have to make adjustments
• Notice the Z-value change in the drawing tab of the Properties window.

Patches

The idea of a patch is similar to the example of Marina’s head, where the head controls the back section of Marina’s hair. A patch, however, is a separate element that is created solely to cover up overlapping lines, and make a very simple, fool proof joint for your cut-out character. There are several of these patches in the Marina cut-out character, but as an example we’ll look quickly at Marina’s right arm. Her arm consists of three pieces; the shoulder, the arm and the hand. These pieces have been drawn and layered in a particular way so that when we add a patch the rotation will be easy. First, we set up the hierarchy and pivot points for the pieces of the arm. Then we copied only the fill section of Marina’s right arm, and pasted it into a brand new element. We’ve added this piece to the arm hierarchy so that whenever the arm moves, that patch will move along with it. Then we bumped the patch just ahead of the other pieces of the arm in Z space, so that it hides some of the lines on the joints of the arm. Take a look at the other patches in the Marina character and play around to test the rotation.

• You should lock the patches you create so that you are unable to select them via the Camera View as you animate. Make sure to remember to lock the patches of your character when you start animating, as this information will not be saved from scene to scene.
• When adding drawings to an element, such as more hands, make sure that the new one is in the same spot as the old one so that you can use the cell substitution window without having to worry about your pivot points.
• Don’t worry about making the joints perfect. Look at what is a realistic rotation of a joint, and make sure the joint looks good for that.
• When setting the rotation pivots for your cut-out character, use the Rotate tool so that your pivot will be kept.

Try experimenting with these techniques and see how it can help you create cut-out characters easily in Toon Boom Studio.

Downloads

• Sample Material (ZIP)

From TOONBOOM: http://www.toonboom.com/products/eLearning/articles/cut_out.php?WT.mc_id=e_ea_004_0126