Cartoon Animator 4 G3

& G3 360 Character

Creation White Paper
 Table of Contents
Chapter 1 Getting Started – Assets Introduction .................................................................................... 3
Chapter 2 Options for Importing PSD Assets ......................................................................................... 5
Chapter 3 Creating Standard G3 Characters ......................................................................................... 8
3.1 The Introduction of the Human Template ........................................................................................ 9
3.2 The Introduction of the Human Materials Template ...................................................................... 10
3.3 Human Body Creation .................................................................................................................... 11
3.4 Aligning Bones ............................................................................................................................... 14
3.5 Layer Order Rearrangements .......................................................................................................... 15
Chapter 4 Setting up Multi-pose Sprites for Body Parts ...................................................................... 19
4.1 Creating Hand Poses ....................................................................................................................... 20
Chapter 5 Creating Bone Hands ............................................................................................................. 27
5.1 Bone Hand Introduction ................................................................................................................. 28
5.2 Structuring the Bone Hand ............................................................................................................. 30
Chapter 6 Creating Talking Head – Assembling with Embedded Facial Feature Sprites ................ 43
6.1 Faces Puppeteer-able ...................................................................................................................... 44
6.2 Applying Embedded Facial Features .............................................................................................. 46
Chapter 7 Creating Talking Head – Loading Facial Features from PSD Image Resource .............. 52
7.1 About the Facial Features ............................................................................................................... 53
7.2 The Introduction of Template and Element Sourced PSD's ........................................................... 54
7.3 Setting Brows and Nose Sources .................................................................................................... 56
7.4 The Basics of Eyes.......................................................................................................................... 57
7.5 Setting and Creating Eyes ............................................................................................................... 58
7.6 Setting Mouth ................................................................................................................................. 61
Chapter 8 Advance_Creating 360 Talking Head .................................................................................. 71
8.1 Creating Multi-Angles Character .................................................................................................... 72
8.2 Creating Multi-Layers Facial ........................................................................................................... 78
8.3 Layering Talking Head Sprites with the Body in PSD .................................................................... 88
8.5 Launching PSD Files with Different Structures .............................................................................. 98
Chapter 9 Increasing the Resolution of Facial Features..................................................................... 102
9.1 The Structure of Talking Head PSD Template ............................................................................. 103
9.2 Using High-Resolution Pose Images ............................................................................................ 104
Chapter 10 Creating Free Bone Character .......................................................................................... 107
10.1Creating PSD Structure................................................................................................................. 108
10.2About the Bone Structure ............................................................................................................. 109
Chapter 11 PSD to CTA Scene Conversion ......................................................................................... 125
11.1PSD to CTA Scene Workflow ...................................................................................................... 125
11.2Correspondence between CTA Object and PSD Data Structure .................................................. 128
Chapter 12 Illustrator Pipeline to Cartoon Animator ........................................................................ 136
11.1The Introduction of Illustrator Pipeline ........................................................................................ 137
11.2Differences between the Illustrator and Photoshop Pipelines....................................................... 139
11.3Human Body Creation with Illustrator ......................................................................................... 141
11.4Exporting and Loading PSD File to Cartoon Animator ............................................................... 150
11.5Adding Additional Images to a Body Part .................................................................................... 154
Chapter 1 Getting Started – Assets Introduction

In this whitepaper, you will learn how to generate Cartoon

Animator 4 G3 Characters with your favorite PSD editor, including
Standard, or Free Bone characters. With this approach, you can create
unlimited G3 characters in a short time.
In addition to this whitepaper, you can view related tutorial videos
by clicking here.

3
 Before you start reading this document, make sure that you have downloaded the resource pack,
CTA_G3_Pipeline_PSD_Ai_Template_Sample_Project.zip, from the Official Reallusion Website.
In this pack, you will find the contents you need to practice throughout this whitepaper.

The structure of the contents in the pack are shown below:

There will be seven main folders:

• 00_Calibration_Motion: Contains one motion

for testing the hand gestures of a custom G3
character.

• 01_Templates: Contains different templates with

formal structures for creating human, four-legged
animals, spine, wings, and free bone characters.
Use them to avoid building G3 character
structures from scratch.

• 02_PSD_Image_Resources: Contains source

images for human body, head, and others in PSD
format. You may use them to practice how to
create a G3 character.

• 03_Sample_Projects: Contains PSD files where

all elements and poses are set. These files are
ready to be loaded into Cartoon Animator.

• 04_Ai_Templates: Contains different templates

with formal
structures for creating human, four-legged
animals, spine, and wings. Use them to avoid
building G3 character structures from scratch.
Along with source images for human body, and
others in Ai format. You may use them to practice
how to create a G3 character with Illustrator.

• 05_Xara: Contains special PSD templates for Xara users. There are different templates with
formal structures for creating human, four-legged animals, spine, and wings. Along with a
Readme file for instructions on building G3 character structures with Xara.

• 06_Tutorial: Contains quick access to an online tutorial “Creating a G3 Character in Illustrator”

and the link to the Cartoon Animator Learning Center.

4
Chapter 2 Options for Importing PSD Assets

Each loaded character created with a PSD file can be used to create
a G3 character. Once the character is created, you can adjust the parts in
the PSD source file and then update the created character by using the
Import PSD Assets feature in the Composer Mode of Cartoon
Animator. You are allowed to update the entire character or specific parts
of it with options.

5
 To import the PSD file, you need to switch to Composer Mode and then click the Import PSD
Assets button on the Toolbar.

6
 After the button is clicked, you need to first pick and load a PSD file and then choose the
importing method:

• Full Actor:
This is chosen when you wish to create a new character or update a created character
from a PSD file. You can determine whether to Maintain Current Actor Settings or not.

• Partial Update:
It only updates or adds pose images in accordance with the image layers in the PSD file.
You can pick one bone in order to update the images of this bone, or its sibling bones only.
When you wish to create a custom talking head, then you choose this radio button.

• Maintain Actor Settings:

◦ Bone Settings: Activate this box in order to maintain the bone's transformation when the
character is being updated.

◦ Sprite Transformation: Activate this box in order to keep the transformations for all sprites.

◦ Layer Order: Activate this box to keep the layer order you have set to the current character.

◦ Subdivision: Activate this box to keep the subdivision level for each body part.

7
Chapter 3 Creating Standard G3 Characters

This chapter describes the method to combine 6 simple and

prepared body parts, with the Human Template replacements technique, to
generate a Cartoon Animator animate-able character. The context will
focus on the Body Parts. For a talking head, please refer to Chapter 5
and 6.

8
3.1 The Introduction of the Human Template

File Utilized: CTA_G3_Pipeline_PSD_Template_Sample_Project\01_Templates\

When the human PSD template file, Human_Front_Full_Template.psd, is opened in your

favorite PSD editor, you will see four groups:

RL_Bone_Lable:
The contents in this group are not to be imported into Cartoon Animator. They are used for
placing the bones, the name of the bones, and other elements.

RL_Bone_Human:
This group is used for placing the Bone layers.

RL_TalkingHead:
This group is used for placing the data related to the head, such as the eyes, nose, mouth and any
other facial features (described in Chapter 5 and 6).
RL_Image:
This group is used for placing the image data related to the body.

9
3.2 The Introduction of the Human Materials Template

CTA_G3_Pipeline_PSD_Template_Sample_Project\03_Sample_Projects\01_Human\1_
File Utilized: Elastic_Folks_Simple_Front & Side

In order to create a basic character with 10 parts, you need to first open the
Elastic_Folks_Front_Simple.psd file, where the individual image groups and body part layers, for
creating a default front facing character, are prepared.

The data related to the body include:

1 Heads (without facial features), 1 Face (painted with facial features), 1 body, 1 left and 1
right arms, left and right hands, left and right legs and left and right shoes.

10
3.3 Human Body Creation

• CTA_G3_Pipeline_PSD_Template_Sample_Project\03_Sample_Projects\01_Hu
File Utilized: man\1_Elastic_Folks_Simple_Front & Side
• CTA_G3_Pipeline_PSD_Template_Sample_Project\01_Templates

To create the body of a G3 character, you simply need to insert images into certain layers and
slightly adjust these images.

1. Drag and drop the 10 body part layers from the Elastic_Folks_Front_Simple.psd
document into the RL_Image group of the Human_Front_Full_Template.psd
document.
2. Transform these layers together to fit to the approximate proportion of the dummy.
Please note that it is highly suggested that the Hip of the imported image layers is
aligned to the Hip of the dummy.

3. Move the body part images to specific bones by dragging them to corresponding folders.

11
For example:
• Hip image layer to the Hip group.
• LArm image layer to the LArm group.
• RArm image layer to the RArm group.
• 00_Relaxed left hand image layer to the Lhand group.
• 00_Relaxed right hand image layer to the RHand group.

12
4. Temporarily move the Face and Head image layers into the Head group under the
RL_Image group folder.

5. When the steps are finished. The white dummy image layer can be removed (deleted).

13
3.4 Aligning Bones
The bones are the rotating center of the body parts in Cartoon Animator. Therefore, it is
crucial to align the bones in the PSD template to their adequate positions. Once the individual body
image layers are correctly moved to the corresponding folders, then the bones can be used as references
when being moving the layered parts to their appropriate positions.

Take the example after the final step in the previous section, follow the steps below:
1. Turn on the Auto-select feature if your PSD editor (in this case, Photoshop) provides
one.

2. In accordance to the name next to the bones, drag and move these bones to their
appropriate body positions in the working area.

Before adjustments After adjustments

14
3.5 Layer Order Rearrangements

If you encounter any layer order issue, then adjust the order in the PSD template document
before it is loaded into Cartoon Animator. Cartoon Animator will list the body parts in accordance
with the order specified in the PSD file.
Take the example after the final step in the previous section, follow the steps below:
1. Drag and move the LHand group layer above the LArm group layer.

2. Repeat the same steps to the RLHand, Lfoot and Rfoot group layers.

15
3. Save the document (in PSD format) after the adjustments are finished.

16
3.6 Loading PSD Template to Cartoon Animator

After a PSD file with a custom character is prepared, you are able to load it into Cartoon
Animator to form a new G3 character.

1. Launch Cartoon Animator.

2. Click the Create G3 Free Bone Actor button on the Functional Toolbar (or alternatively drag
and drop the PSD file into the working area).

17
3. When the loading is done, the character will appear in the Composer Mode.

4. Click the Back Stage button to bring the character to the stage for applying motions.

18
Chapter 4 Setting up Multi-pose Sprites for Body Parts

In this chapter, the hands will be taken as an example to describe

how to set multiple element poses for sprites inside the PSD template file.

19
4.1 Creating Hand Poses

CTA_G3_Pipeline_PSD_Template_Sample_Project\02_PSD_Image_Resources\01_Hu
File Utilized:
man\Hand_Gesture.psd

The hand of the character created in the previous chapter only contains one pose, 00_Relaxed,
as the default pose.

Therefore, when the character's hand sprite is opened by the Sprite Editor, there is only one
element pose. In the following steps, the rest of the 29 hand poses will be shown.

20
1. Open the Hand_Gesture.psd file with the PSD editor. You will see 30 hand poses in the
RL_Image > LHand group folder.

* Please note that the sequence for each layer is unique in order for it to be identified by
Cartoon Animator. Therefore, you should NOT change the order sequence.

21
2. Select all pose layers of the left hand; drag and drop them into the LHand group folder of the
character PSD template document.

22
3. Transform each layer image to their appropriate position.

4. Repeat the same steps to the other hand and save the PSD template document.
5. In Cartoon Animator, select the character created in the end of the previous chapter and
switch to the Composer mode.

23
6. Click the Import PSD Assets button to open the PSD Loading Options panel.

7. Choose the Full Actor button and load the PSD template file created in Step 4.

24
8. Select one of the hands and open the Sprite Editor. The 30 blank poses are now filled up with
the corresponding images from the PSD file.

25
9. If you apply hand-gesture-changing motions to the character, then you will see different hand
pose performances.

26
Chapter 5 Creating Bone Hands

27
 5.1 Bone Hand Introduction

What are Bone Hands?

Bone Hands are skeleton driven hand rigs with the ability to control individual finger joints or
use ready-made motions for livelier hand gesture performances.

28
Bone Hands vs Sprite Hands
Compared to the Bone Hand, Sprite Hands’ specialty is its ability to switch out images to change
hand gestures, which is an arguably simpler method. Although Sprite Hands can flexibly change to any
conceivable gesture image, they are still limited in the range of possible dynamic performances.

Bone Hands emphasize the ability to control individual finger joints and palms as expressive
elements to achieve specific hand gestures. As in the following illustration, both hands of the character
can take on different states in the Hand Pose Editor. With the application of different gesture states,
smooth blending can be achieved within the Timeline.

29
 5.2 Structuring the Bone Hand
In this article you will learn how to use a PSD editor to switch out Sprite Hands for Bone Hands on a specific
character.

1. Find the embedded character: Philipp_F from the Content Manager and import him into the Stage (location:
Content Manager > Actor Template > Character > 1_G3 360 Human > Philipp_F).

30
2. Select the character and enter Composer mode.

31
 3. Apply the template Bone Hands to the character.

From the official asset directory, find the Human Bone Hand.ctBhand file and drag and drop it directly
onto the character (location: Composer > Content Manager > Body Template > Hands > G3 > Bone Hand >
G3 360 Human > Human Bone Hand). You’ll notice that the character’s Sprite Hands will be replaced by the
white template Bone Hands.

32
 4. Launch to PSD Editor

Click on Launch PSD Editor button in the Functional Toolbar to launch the PSD Option dialog window.
Click on the Launch button to bring the character into a PSD editor for modifications.

Note: You’ll notice that the beard is no longer masked by the shape of the face. For more information, see Section
8.4.

33
 5. About Bone Hand PSD Structure

Let’s first take a look at the colored nodes on the regions of the hand, which can be found under the
RL_Bone_Human folder within Photoshop. These node points will eventually dictate the ordering of the
hand joints in CTA.

34
 6. About Bone Hand PSD Structure

Let’s examine the assigned locations of the source images which are all located under the
RL_Image folder, illustrated by the following images. From this folder, you can inspect the assigned
locations for each finger joint, the palm, and the palm line. Take note of the names for each folder within
the hierarchy structure, and notice that each joint is a separate image.

35
 7. About Bone Hand Resource Images

File Utilized: CTA_G3_Pipeline_PSD_Template_Sample_Project\02_PSD_Image_Resources\01_

Human\Bone Hand.psd

Launch Bone Hand.psd in Photoshop. This file is used to simulate users making their own custom source
hand images. From the following illustration, you can see that image layers are divided between the left and right
hand sides. In later steps, we’ll need to take these images and replace the contents within the Philipp_F.psd file.

36
 8. Apply Resources to the Main Character

Drag and drop the Bone Hand.psd file into Philipp_F.psd.

37
 9. Adjust Images and Bone Positioning

Drag select the palm source image and drag it to match the wrist position of the template hand. Move each
bone node of the template hand to their appropriate positions based on the joint images of the replacement hand.

10. Delete the Template Images

Drag select all of the template images for both hands and delete. Make sure to only erase the image layers
and keep the folder structures intact.

Note: You can hide the RL_Bone_Human and Resource layers to make it easier to drag select the elements of the
white template hands.

38
 11. Drag Resources into the Template Finger Structure

Move the image layers of the left and right Bone Hands into their appropriate folders within the template
hand hierarchy (by name). When complete, delete the empty RHand_Bone_Resource and
LHand_Bone_Resource folders.

39
 12. Save the File and Import into CTA

When finished, you’ll have a character that resembles the following illustration. Save the file and the
character will automatically update in CTA.

40
 13. Preview the Final Result

Remember to check the results of the operation for errors, such as inspecting the Layer Manager to make
sure the layer ordering is correct.
Use the Preview utility to try out various rotations on the hand joints, and make sure they are in line with the
expected behavior.

41
 14. Apply Hand Poses for the Final Result

Go back to the Stage mode, select the character, launch the 2D Motion Key Editor, and notice that therein
contains a palm icon.
Click on this icon to launch the Hand Pose Editor.
At this step, one apply available hand gestures to the character.

42
Chapter 6 Creating Talking Head – Assembling with
Embedded Facial Feature Sprites

In this chapter, you will learn how to compose a perform-able

talking head with existing facial feature contents. These facial features can
be individually saved as re-usable templates for any other characters.

43
6.1 Faces Puppeteer-able

The character created in the previous chapter can not perform any facial expressions or rotate its
head when puppeteered with the Face Puppet panel. It is because the character head is simply an image
in the Head body part (as shown in the illustration below), but not in the Head sprite of the facial
features animate-able by the Face Puppet panel. All pose slots for every facial feature sprite (take the
eye sprite as an example) are empty:

44
 The facial feature sprites of a head that are animate-able by the Puppet Panel should be layered;
all pose slots of every facial feature sprite (take the eye sprite as an example) should be filled up as
shown below:

45
6.2 Applying Embedded Facial Features

File Utilized: Completed character PSD from Chapter 4

In this section, the G3 character PSD template will be used and modified so that the face sprite
is the only facial feature being loaded into Cartoon Animator. The rest of the facial features will be
composed by the embedded templates from the Content Manager.

1. Open the RLImage > Head folder. There are Face image layers painted with facial features,
and a Head layer containing just the face.

2. Delete the Face layer because although it has facial features, they cannot be puppeteered.

46
3. Drag and move the Head layer into the RL_TalkingHead > HeadImage > Face folder.

4. Save the PSD template document.

47
5. Go back to Cartoon Animator, select the character being created in the previous chapter and
switch to the Composer Mode.
6. Click the Import PSD Assets button and load the PSD template file adjusted after Step 4. You
will be asked the importing method.

7. Choose the Partial Actor button but do not check the boxes because you only need to update
the head and keep the settings for the other body parts. Click the Next button.
8. You will be asked to choose a bone for updating the sprites, and the sprites of the sibling bones.
Select the TalkingHead from the list. Click the OK button.

48
9. The character's face will be updated into an empty one without any facial features.

10. In the Content Manager, find the Head > Head Template folder and apply the G2+ facial
features.

49
11. Transform the facial features if necessary.

12. Return to the Stage mode. The facial features are now in different layers with depths.
And the poses of each facial feature sprite (take the eye as an example) are completely filled.

50
13. You can then use the Face Puppet panel to animate the face for creating facial expressions.

51
Chapter 7 Creating Talking Head – Loading Facial Features
from PSD Image Resource

In this chapter, you will learn how to create a perform-able talking

head by loading facial features from the PSD image resource file. Thus
you can create unlimited custom facial features instead of using the
templates from the Content Manager in Cartoon Animator.

52
7.1 About the Facial Features

• “Normal” pose in a sprite:

◦ The first pose found in brows, eyes, nose, and mouth, is
named 01_Normal. And the 01_Normal pose is the initial
pose for the sprite.
◦ The Smooth Facial technique in Cartoon Animator
generates expressions for facial features by deforming the
01_Normal pose.
◦ The template files include the Elastic_Folks_Front.psd
and Low-res_Talking_Head.psd, and they must be
under the Normal folders for brows, eyes, nose and
mouth groups.

• More required poses for a sprite:

◦ When the expressions cannot be done by deforming the
“Normal” pose, more pose images are required. You are
allowed to add more element poses to the Eyes and Mouth
sprites.

53
7.2 The Introduction of Template and Element Sourced PSD's

01_PSD_Templates / Human_Front_Full_Template.psd
File Utilized:
02_PSD_Image_Resources / 01_Human / Low-res_Talking_Head.psd

In the RL_TalkingHead group folder of the Human_Front_Full_Template.psd, there are

three sub-group folders:
• HeadBone_Label: The labels of names for each bone are stored in this group folder.
• HeadBone: The bones themselves are stored in this group folder.
• HeadImage: The facial feature images are stored in this group folder.

54
 As for the Low-res_Talking_Head.psd, you can see all the necessary source images for
forming the facial features and expressions. In this chapter, you will learn how to move the source
elements into the correct folder in the character PSD template file. The first facial feature to be taken as
an example is the brow.

55
7.3 Setting Brows and Nose Sources

1. Drag and drop the left and right brows from the HighResolutionHeadElement.psd into the
corresponding folder, HeadImage > LeftBrow > Normal and HeadImage > RightBrow >
Normal group folders in the human PSD template document.

2. Drag and drop the nose element to the HeadImage > Nose > Normal folder.

56
7.4 The Basics of Eyes

The procedure for creating an eye element is somewhat different from the other facial features;
you need to follow a specific workflow to generate one eye that is able to roll the eyeball in Cartoon
Animator.
• An eye basically consists of three parts: The white, the iris, and
the mask. Therefore, you will see three sub-folders in a pose
group folder.
◦ Mask: It is used to determine the range for displaying the
iris when the iris is rolling.
◦ EyeWhite: This folder stores the image layer of the eye
white.
◦ Iris: The Iris folder stores the iris image layer.
• The Mask and EyeWhite folders can be empty.
• If only the Iris and the Eyewhite are filled with an image, then
the one in the EyeWhite will automatically be taken as the
mask.
• To fill up the three groups is the standard, and the best policy.

Each of the eyes is composed of three layers

57
7.5 Setting and Creating Eyes

File Utilized: 02_PSD_Image_Resources / 01_Human / Low-res_Talking_Head.psd

Taking the Low-res_Talking_Head.psd as an example, there is only iris for the character's eyes.
Therefore, the creation is as shown in the steps below:

Select all these iris pose layers.

Horizontally align them to the center by using the feature provided in the image editor.

These layers will look as the illustration below.

58
 Drag and drop these layers individually, to their corresponding folders under the eye group
folder.

59
In this case, the right eye and the left eye all look the same, so the right eye data can be duplicated from
the left eye.
Delete the RightEye folder.
Duplicate the LeftEye group folder and rename it to RightEye.

Rename the newly generated folder into RightEye.

Transform the left and right eyes appropriately in accordance with the position of the eye bones.

60
7.6 Setting Mouth

The mouth-creating procedure is almost the same as the eye-creating one, all you need to do is
to align the source pose images and then put them into the adequate folders in the human PSD template
document.
1. Select all mouth pose layers in the Low-res_Talking_Head.psd.

• Default Mouth for Facial Expression

• Viseme for Lip-sync

61
2. In order to make mouth animations look smoother, kindly follow the below guidelines:
• Alignment Guidelines :
1. Draw a horizontal reference line for the alignment of the mouth position.

2. For all the mouth shapes that show teeth, align the lower limb of the upper teeth
with the reference line.
3. For the other mouth shapes that do not show the teeth, align the upper limb of
the upper lip with the reference line.
As shown below:

3. Horizontally align them to the center by using the feature provided in the image editor.

62
4. Drag and drop these layers into the Elastic_Folks_Front.psd document. Make sure that they
are individually moved into the corresponding folders.

• Reference of drawing viseme for lip-sync:

o There are two different mouth systems for facial expression performance in
Cartoon Animator. One set of 9 is the viseme mouth for lip-sync (Figure 1.)
Another set of 6 is the default mouth for facial expression (Figure 2.)

• Figure 1. Default Mouth for Facial Expression

63
 • Figure 2. Viseme for Lip-sync

o The facial expression will be applied to the mouth when enabling the face
expression function in Cartoon Animator. When drawing a mouth/viseme,
please note that you do not draw expressions for the mouths.

▪ Normal

64
▪ Ah_I

▪ Oh

65
▪ EE

▪ U

66
▪ WOO

▪ FV

67
▪ L_TH

▪ CDKNSTZ

68
5. Go back to Cartoon Animator, select the character created in Chapter 3 and then switch to the
Composer Mode.
6. Click the Import PSD Assets button and choose the Full Actor radio button to reload the PSD
template.

7. The character will instantly be updated.

69
8. Open the Sprite Editor and check the poses for each facial feature (in this case, the mouth).

70
 Chapter 8 Advance Creating 360 Talking Head

In Chapter 7, we taught you how to put a single angle image for the Talking Head in Photoshop.

Chapter 8 will start with learning how to place sprite maps for different angels.

Take the following illustration as an example: when the same figure turns, the image for the nose will
switch to three different pictures. Next, I will teach you how to put the corresponding textures into the
right folders.

71
8.1 Creating Multi-Angles Character
⚫ Open CTA_G3_Pipeline_PSD_Template_Sample_Project\03_Sample_Projects\
01_360_Human\Creating Multi-Angles Character\Philipp_F_Start.psd

⚫ Inside the RL_TalkingHead folder, you will see five additional folders for Center Left,
Center Right, Left, Right, and Center. These five folders correspond with the five angles
inside Composer’s Sprite Editor.

⚫ The new PSD workflow will address the five different angles and rename the “HeadImage” to
“Center” while maintaining equivalence.

⚫ Open the Center folder and we will see all of the images that make up the front-facing angle.

72
⚫ Open CTA_G3_Pipeline_PSD_Template_Sample_Project\03_Sample_Projects\
01_360_Human\Creating Multi-Angles Character\Philipp_F_Resource.psd

⚫ Open the Left and Right folder under the Face layer to access to the left and right nose angles.

⚫ Go back to Phillipp_F_Start_psd as we’ll need to add the nose hierarchy to the Left/Right
folders.

⚫ Note: We’ll only need to add a new layer structure for the five features; There is no need to
create a completely new structure.

Philipp_F_Start.psd

73
⚫ Copy Nose_L and Nose_R from Philipp_F_Resource.psd and paste into their corresponding folders
inside Philipp_F_Start.psd.

Philipp_F_Start.psd

Philipp_F_Resource.psd

74
⚫ Align the Nose_L and Nose_R images to the face according to the following illustration.

⚫ Save the file.

75
⚫ Creating Multi-angle Characters

⚫ Drag and drop the configured file into CTA.

⚫ Open 360 Head Creator tool while in Composer Mode.

⚫ Click on Load Profile to import pre-configured head turn data file: PhilippF.sad

• File location: CTA_G3_Pipeline_PSD_Template_Sample_Project\03_Sample_Projects\

• 01_360_Human\Creating Multi-Angles Character\PhilippF.sad
• This .sad file contains a pre-configured Mask, therefore, you will notice that the beard is partially
occluded by the shape of the face.
• For detailed steps, see section 8.4

76
⚫ Click on the center, left and right Angle Points to observe the switching of the nose image.

⚫ Press Preview to see the head turn in action.

⚫ The completed example is located here:

CTA_G3_Pipeline_PSD_Template_Sample_Project\03_Sample_Projects\01_360_Human\Creating
Multi-Angles Character\Philipp_F_Finish.psd

77
 8.2 Creating Multi-Layers Facial

This article will go over correlating the different Sprite layers inside Photoshop without having to use the manual
Attach method in CTA4 to quickly assemble and setup the head turn.

78
⚫ Open CTA_G3_Pipeline_PSD_Template_Sample_Project\03_Sample_Projects\
02_360_Animal\Creating Multi-Layers Character\Scrofa_Start.psd
◼ We will use this file for the following exercise.

⚫ Click the nose to assign it to the layer folder Bone_1 > RL_TalkingHead > Center > Nose > Nose.
⚫ This image just shows the position of the nose; Please delete this image.

79
⚫ Open CTA_G3_Pipeline_PSD_Template_Sample_Project\03_Sample_Projects\
02_360_Animal\Creating Multi-Layers Character\Scrofa_Resource.psd
◼ This is the source file for all the images of the nose.

⚫ Destination layer folder: Bone_1 > RL_TalkingHead > Center > Nose.
⚫ Inside the Nose folder you’ll find all of the source images for the nose.

80
⚫ Copy the 7 nose images from Scrofa_Resource.psd and paste them into Scrofa_Start.psd under Bone_1 >
Rl_TalkingHead > Center.

81
⚫ Next, we’ll need to build a dedicated folder for each image. Please name the folders according to the image
name because CTA names the Sprites by the folder name. All folders should be constructed under the Center
level.

◼ Nose image should be placed in the original Nose Folder.

◼ Create Nose_1 folder and drag Nose_1 image into it.
◼ Create Nose_2 folder and drag Drag Nose_2 image into it.
◼ Create Nose_3_1 folder and drag Nose_3_1 image into it.
◼ Create Nose_3_2 folder and drag Nose_3_2 image into it.
◼ Create Nose_4_1 folder and drag Nose_4_1 image into it.
◼ Create Nose_4_2 folder and drag Nose_4_2 image into it.

82
⚫ Add Head Bone for the new sprites.
⚫ The Head Bone pivot for the sprite is show with a yellow cross icon.
⚫ Head bone settings are as show in the following illustration.
⚫ Add the Head Bone underneath Bone_1 > RL_TalkingHead > Head Bone and name the file as the
corresponding sprite name.

83
⚫ Establish a hierarchical relationship within the PSD for the new Head Bone.

⚫ First of all, we’ll need to understand the hierarchical structure of the long nose as shown in the figure below.
◼ The top layer is the Nose, which is considered as Parent.
◼ The bottom layer is Nose_3_2, Nose_4_1 and Nose_4_2, which are all considered as Child.

84
⚫ After understanding the structure, we must rename structure of the diagram for the Head Bone inside
Photoshop to establish a hierarchical relationship.
⚫ The way to establish a hierarchical relationship is the same as that of FreeBone (see chapter 8.2 for details).
⚫ Example: If the layer name is NameA>Name B then NameA is the parent and NameB is the child.
⚫ Rename the Head Bone to the following table.
⚫ Save the file after completion.

⚫ Drag the saved file into CTA and CTA will automatically enter the Composer Mode.
85
⚫ Switch to the Scene Manager and if the hierarchy resembles the figure below then it means the recent settings
have been successful.

⚫ Activate the 360 Head Creator in Composer Mode.

86
⚫ Select Load Profile to import the officially pre-configured head turn data file: Scrofa.sad.
◼ File location: CTA_G3_Pipeline_PSD_Template_Sample_Project\
03_Sample_Projects\02_360_Animal\Creating Multi-Layers Character\Scrofa.sad.

⚫ Click on the Preview button to observe the multi-layered facial features in motion as the head turns.
⚫ The completed file location: CTA_G3_Pipeline_PSD_Template_Sample_Project\
03_Sample_Projects\02_360_Animal\Creating Multi-Layers Character\Samantha_Finish.psd.

87
 8.3 Layering Talking Head Sprites with the Body in PSD

Function and purpose description:

⚫ How to use Photoshop layer editor to pre-determine the sorting order between the Sprites and the
character’s body for the Talking Head after importing into CTA4.
⚫ The following figure is a description of the BackHair sprite.

88
⚫ Open the template file: CTA_G3_Pipeline_PSD_Template_Sample_Project\
03_Sample_Projects\01_360_Human\Layering Back Hair\Samantha_Start.psd.

⚫ Take a look at BackHair inside the layers: Head > RL_TalkingHead > Center > BackHair.

Common problem: Due to the BackHair being considered a part of the head, it should be placed within the
Talking Head group. Because of this, the BackHair image layer will appear in front of the body.

Goal: it would be best to configure the relation between the BackHair with other sprites within Photoshop before
importing into CTA.

89
⚫ Before configuration, the BackHair in the imported CTA file has layer order that resemble that of the
Photoshop file.

⚫ However, this is the not the effect we are going for because the BackHair has appeared before the body.

90
⚫ Prefix the layer folder with a caret (^) flag.
◼ Copy the layer name for the back hair or any other object that is meant to be layered behind the body.
◼ Add an empty folder inside Body Image and rename it as caret (^) plus the layer name.
◼ Drag the folder into the body group (RL_Image). The application will automatically determine that
these images are to belong and ordered among the facial features of the Talking Head.

91
⚫ After saving the file and importing it into CTA, one can see that the BackHair is ordered underneath the
Body_Layer.

⚫ Completed file location: CTA_G3_Pipeline_PSD_Template_Sample_Project\

03_Sample_Projects\01_360_Human\Layering Back Hair\Samantha_Finish.psd

92
8.4 Custom Masking Layer

Function and purpose description:

⚫ In view of the fact that G4 heads supports large angle turns, we sometimes desire the ability to mask the
facial features with the shape of the face when facing to the side.
⚫ Therefore, under these conditions, we will need to use the character’s face sprite as a image for masking
(as shown in the figure).

Common problem: If you set the face sprite as the mask before setting the Masking texture then problems may
arise from creating masks for characters with outlines.

Next, we’ll show you how to get the perfect result as show on the right.

Without Mask With Mask as Default With Mask as Advance

Setting

93
⚫ Open CTA_G3_Pipeline_PSD_Template_Sample_Project\03_Sample_Projects\
01_360_Human\Custom Masking Layer\Ted_S_Start.psd

⚫ Select the face to get to the target image layer (RL_TalkingHead > Center > Face > OutlineFace > Face)

94
⚫ Next, we have to select the region within the red outline of the icon and make a mask for the character.

⚫ Use the selection tool to select the region within the red outline of the icon (Do not select the black border).

⚫ Duplicate the selection into a new layer under the OutlineFace folder and rename it to “Mask” (hotkey:
Ctrl/Command + J).

Mask

Face Sprite

95
⚫ Drag the configured file into CTA.
⚫ Activate 360 Head Creator in Composer Mode.

⚫ Select Load Profile to import the official preset head file:

CTA_G3_Pipeline_PSD_Template_Sample_Project\03_Sample_Projects\01_360_Human\Custom
Masking Layer\TedS.sad

96
⚫ Click on Preview to observe the Mask in action.

⚫ You can see that the eyes and eyebrows are masked within the black outlines of the face.

⚫ The complete project is here: CTA_G3_Pipeline_PSD_Template_Sample_Project\

03_Sample_Projects\01_360_Human\Custom Masking Layer\Ted_S_Finish.psd

97
 8.5 Launching PSD Files with Different Structures

Functions and Goals:

⚫ CTA Composer provides the ability to Launch to External PSD Editor. The purpose is to allow the user to
adjust the color or structure of the character or prop in an external PSD editing software. After the
adjustments, settings in CTA will still be retained.

⚫ CTA4 has added a multi-angle structure to the PSD Pipeline to satisfy the specifications for multi-angle
images and head turn parameters.

⚫ Therefore, Launch to External PSD Editor provides two important options:

◼ Edit Current Angle: light-weight structure.
◼ Update Multi-angle: full fledged structure.

98
⚫ Import G3 360 character:
CTA_G3_Pipeline_PSD_Template_Sample_Project\03_Sample_Projects\02_360_Animal\ Launching
PSD Files with Different Structures\Scrofa.ctFBactor.

⚫ Enter Composer.

⚫ Click on Launch to External PSD Editor in the Functional Toolbar.

99
⚫ Choose Edit Current Angle for light weight export.

⚫ The application will only export the images kept in the Sprite Editor.

100
⚫ Select Update Multi-angle for full structure export.

⚫ The application will create a folder for every angle and export them all.

101
Chapter 9 Increasing the Resolution of Facial Features

In the previous chapter, the source images in the Low-

res_Talking_Head.psd are bitmap-based. However, if you resize the
image elements, there is a great chance for quality lose as shown in the
illustration below; in order to ensure visual quality for each element, you
need to take the High-res_Talking_Head.psd file as the element sources
because these element images are of high resolutions, their visual quality
will not be degraded when they are resized.

102
9.1 The Structure of Talking Head PSD Template

File Utilized: 01_PSD_Templates / Human_Talking_Head_Template.psd

Before increasing the resolution of the pose images, you need to understand the structure of the
head template. In the file, the main group folder is RL_TalkingHead, and it cannot be renamed or
deleted because Cartoon Animator uses it to identify the existence of the talking head. There are
three main sub-group folders in it:
• HeadBone_Label: The name labels
of each bone are stored in this
folder. Basically, you do not need to
touch them. Cartoon Animator
ignores them when loading this
template.
• HeadBone: This folder stores all
bones of the facial features. You are
allowed to move them to an ideal
position, but do not remove, resize,
or rotate them.
• HeadImage: This folder stores all
the facial pose images; you can
move your custom images into the
corresponding folders in this group when generating custom
facial sprites.

The settings of the facial pose images are identical to the steps described in the previous
chapters. After the settings are done, use the Import PSD Assets feature provided by CrazyTalk
Anmator 3 to update the head of the character.

103
9.2 Using High-Resolution Pose Images

• 01_PSD_Templates / Human_Talking_Head_Template.psd
File Utilized:
• 02_PSD_Image_Resources / 01_Human / High-res_Talking_Head.psd

Open the Human_Talking_Head_Template.psd and the High-res_Talking_Head.psd.

* If you want to use custom facial features, please make sure their original sizes are no less
than 100 pixels x 100 pixels.
Drag and drop the element images from the High-res_Talking_Head.psd document to the other
one (Please refer to the previous chapter for the work flow).

104
If the sizes of the elements are not ideal, then you can transform them (these elements are
made by Path, therefore they do not have the quality loss issue when being resized).

Make sure that the bones are correctly placed with the pose images, especially the Face bone
because it will be the connecting joint for the top of the neck in Cartoon Animator.

105
In Cartoon Animator, select the character created in the previous chapter and switch to the
Composer Mode.
Click the Import PSD Assets button and load the PSD file into Cartoon Animator.
Choose the Partial Update radio button and load the PSD template file to update the head of
the character.

Resize the head of the character and the quality loss issue is resolved.

106
Chapter 10 Creating Free Bone Character

By using the PSD template file, you can easily create custom
characters as described in the previous chapters. However, if you wish to
create a custom character, including the bone joints and the images from
scratch, then you can follow the steps in this chapter.

107
10.1 Creating PSD Structure

A standard structure for a character in a PSD file is composed of two main groups, Bone and
Image. In this section, you can create your custom PSD structure for the character in order to have
certain groups when inserting element images.
The two main groups and their names are as shown below (please remember that the names
must follow the convention in this illustration) :

The RL_Bone is for storing bone layers, while the RL_Image stores the images you want to use
for the custom character.

108
10.2 About the Bone Structure
For a PSD editor, such as Photoshop, the image layers do not have the ability to form tree
structures. Therefore, you need to rename the layers in certain formations to create a bone structure (or
you can form the bone structure later on in Cartoon Animator – section 8.5).
• The name of the bone root must be “Root>Bone1_1”.

• The naming convention for the other bones must be the parent bone name followed with a “>”
sign, and then the child bone name. In this case, “Bone_1>Bone_2”.

109
• The name of the final bone must be Parent Name>Parent Name_Nub.

110
10.3 About the Image Structure

After the bone structure is set up, you can add the image into the RL_Image folder.
• The name of the image layer must have an identical name as the bone to which it is attached.

• If you intend to attach a sprite with multiple pose images to a certain bone, then you can create a
folder under the RL_Image first, rename it to the name of the bone to which the sprite is
attached, and then store all pose images that you want to add in the sprite.

111
10.4 Creating Character Structures by Naming in PSD Editor

File Utilized: 02_PSD_Image_Resources / 05_Free_Bone / Scarecrow.png

In this section, the character's bone structure and images are created in the PSD editor (in this
case, Photoshop). The structure relationships of the bone and the image are designated by certain
naming rules. Once the editing is done, all you need to do is import the PSD file into Cartoon
Animator and the character will ready to be animated.
Start a new file in your favorite PSD file editor.
Create two group folders named RL_Bone and RL_Image.

Insert the character image into the RL_Image folder.

112
 Create several simple path-shape layers in the RL_Bone group folder. These shapes are taken as
the marks of the joints for the character when it is loaded into Cartoon Animator.

Place the path layers in the desired positions if necessary. They will be the bone joints in
Cartoon Animator.

113
Rename the path layers as shown below:

◦ The root bone should be named Root>Bone_1.

◦ The other sibling bones should be named in the form that the parent bone name follows with
a “>” sign and then the child bone name. For example, “Bone_1>Bone_2”.
◦ The name of the final bone must be Parent Name>Parent Name_Nub.
◦ Assign the character image to the bone to which it is about to be attached by renaming the
image to the name of the bone.

Save the document as a file in PSD format.

114
 Load the PSD file to form a new character in Cartoon Animator by drag and dropping the PSD
file onto the working area in Cartoon Animator ; or switch Cartoon Animator to Composer
Mode, and click the Import G3 Free Bone Actor button to load the PSD file.
You will then see the new character with a bone structure.

115
 Because the bone structure follows the naming rule for the G3 Spine character, the motion
templates for the character can be applied to this new character as well.

116
10.5 Building Character Structures in Cartoon Animator

File Utilized: 02_PSD_Image_Resources / 05_Free_Bone / Scarecrow.png

In the previous section, the structures for the bones and images of the character are created in the
PSD editor. However, If you do not want to remember the naming rules, then you can simply create
certain layers in a PSD document and then build up the specific structure set in Cartoon Animator.
1. Start a new file in your favorite PSD file editor.
2. Create two group folders named RL_Bone and RL_Image.

3. Insert the character image into the RL_Image folder.

117
4. Create several simple path-shape layers in the RL_Bone group folder. These shapes are taken as
the marks of the joints for the character when it is loaded into Cartoon Animator.

5. Place the path layers into desired positions if necessary. They will be the bone joints in
Cartoon Animator.

118
6. Rename the path and image layers as shown below:

7. Save the document as a file in PSD format.

8. Load the PSD file to form a new character in Cartoon Animator by drag and dropping the PSD file
onto the working area in Cartoon Animator; or switch Cartoon Animator to Composer Mode,
and click the Import G3 Free Bone Actor button to load the PSD file.

119
9. You will then see the new character with a bone structure, and that each bone is in the same
level of the tree view.

• The entire image is now controlled by Bone_1; therefore, only Bone_1 is in yellow.
• The image is attached to the Bone_1, which causes a red spot shown in the yellow bone.
• The other bones are not attached nor do they control any image, so they are all grayed out.

120
10. In the Composer Mode, open the Bone Editor. Press the Connect button in order to connect these
bones into a bone structure.

121
11. Click on the Bone_1 first, and then Bone_2 to connect them (always click the bone you want to
specify as a parent first, and then the child bone).

122
12. Repeat the same steps to connect all bones.

123
13. Because the bone structure follows the naming rule for the G3 Spine character, the motion
templates for the character can be applied to this new character as well.

124
Chapter 11 PSD to CTA Scene Conversion

PSD to Scene functionality allows you to create a layered data

inside CTA by importing a *.psd file right into CTA. Once imported the
Scene Manger will maintain the original layers and groups of the PSD file
making it convenient to perform subsequent editing in CTA, such as
animation production and 3D camera adjustments.

The following sections will describe the PSD to Scene workflow

and explain how the PSD data structure is interpreted inside CTA.

11.1 PSD to CTA Scene Workflow

125
There are two ways to import a CTA file (WhitePaper & Learning
Resource\CTA_G3_Pipeline_PSD_Ai_Template_Sample_Project\03_Sample_Projects\00_Scene\
Farm.psd)

Method 1: You can drag the PSD file directly into the stage.

Method 2: Open the PSD file by clicking on the Create Media button and select the Scene type.

Once the file is imported then the elements of the PSD file are deployed into the stage.

126
127
11.2 Correspondence between CTA Object and PSD Data Structure

Use any PSD tool to open the Farm.psd example file and examine the structure in the layer panel to the
right. The types that make up different structures can be divided into four categories: Scene Root, Single
Layer, Compound Prop, and Compound Prop with Pivot.

The following sections will compare the format conversions of these four structures corresponding to
CTA.

128
⚫ Main Folder
A standard structure of the Scene PSD file must have a Group: RL_Scene, all objects to be entered
into the CTA must be built under this group level.

◼ Open CTA's Scene Manager.

◼ Import type will be automatically designated to scene because we have been defined the PSD
file’s root as RL_Scene.

129
⚫ Individual Objects for Animation

◼ CTA will convert all the layers under the RL_Scene single layer (without folder) into
individual objects.
◼ Since this type of object does not define a pivot, the pivot point will be set to the center of the
image by default.

⚫ Compound Objects with Multiple Sprites

◼ Expand “House” folder in Photoshop and compare with “House” Object in CTA’s Stage.
◼ CTA will collect the folder under the RL_Scene as an object.

130
From the PSD layer, there are three objects in the House group; We can enter Composer to find these
three objects

Turning on the Scene Manager in Composer, one can be observe that CTA still has a layered object
structure under the folder. Therefore, you can define the size and position of individual objects in
Composer if needed.

131
⚫ Compound Prop with Pivot

CTA Scene Template provides a definition of a Compound Prop with Pivot in PSD.

◼ Expand RL_Pivot and RL_Image Group.

◼ RL_Pivot is the center point location of the object, so the name in RL_Image is the same as
the one in RL_Pivot

132
 ◼ A hierarchical relationship can be established on the RL_Pivot Layer, with the same rules as
Free Bone (see Chapter 8.2)
◼ Select the Windmill and enter the Composer mode.

In Composer, rotate the Vane and Tower and observe how they move differently. This is due to different
pivot positioning causing the rotation axis to differ.

133
 ◼ Vane can be observed under the Tower hierarchy in the Scene Manager in the Composer.
◼ Since Vane is built below the Tower's hierarchy, rotating or scaling the Tower reveals that
Vane will be driven by the rotation and scaling of the Tower.

Expand the Vane folder of the PSD file to see that there are two different types of blades, one of which is
hidden.

134
 ◼ Open the Sprite Editor in the CTA Composer and see the two images placed under the
RL_Image.
◼ Click on the Element in the Sprite Editor to switch between different blades

The picture below illustrates the relationship between the Photoshop hierarchy and the corresponding
CTA objects.

135
Chapter 12 Illustrator Pipeline to Cartoon Animator

In Cartoon Animator, not only can you create G3 Characters

with a PSD editor, but you can also prepare ones with Illustrator. This
chapter describes the differences between the PSD and Ai template
structures, and the methods to quickly generate an animate-able character
by replacing the body parts with the Ai template. Besides, you will also
learn how to add additional images onto a character's body parts.

136
12.1 The Introduction of Illustrator Pipeline

In the character pipeline with a PSD editor (in this case, Photoshop), you can create a G3
character by inserting images into specific layers, aligning bones, exporting PSD file, and finally load it
into Cartoon Animator.

The character pipeline for Illustrator is almost the same. Inserting images to specific layers,
aligning bones, exporting PSD file, and then loading it into Cartoon Animator.

137
Important Points before you Start

⚫ Do not regroup shapes images under an existing group, otherwise the file can not be saved as a PSD
template.

⚫ Certain Illustrator drawing techniques may influence the layer hierarchy.

◼ Failing to connect the anchor point of an image to its endpoint may cause errors when exported
to Photoshop.
◼ If the picture is a line, then fill color will not be supported.

138
12.2 Differences between the Illustrator and Photoshop Pipelines

WhitePaper & Learning

File Utilized: Resource\CTA_G3_Pipeline_PSD_Ai_Template_Sample_Project\04_Ai
Template\CS6\Spine_Template.ai

There are few differences between the Illustrator and Photoshop pipelines.
First, all image layers in Illustrator must be shown before exporting the PSD file; while it is not
necessary to show the layers in the Photoshop pipeline.
Second, check out the Spine template in Illustrator and Photoshop with the side by side
comparison. Although the two images look alike, the image in Illustrator (as shown on the left below)
is vector-based, composed of different color shapes under a group folder; the image in Photoshop (as
shown on the right below) is raster-based in a single piece of an image layer.

139
 In the Illustrator pipeline, in order for the PSD format to be identified by Cartoon Animator,
the vector-based color shapes must be grouped into a group folder (“Spine” in this case, as shown on the
left below).

Thus, after exporting the PSD file, these vector-based color shapes can be flattened into a single
raster-based image layer with that group folder named “Spine” like one in Photoshop (as shown on the
right below).

* Please note that the folder name in the template can NOT be changed, otherwise the
program will be unable to identify the image after you load the file into Cartoon Animator.

140
12.3 Human Body Creation with Illustrator

CTA_G3_Pipeline_PSD_Ai_Template_Sample_Project\04_Ai
File Utilized: Template\CC\G3_360_Character_Template\Human_G3_360_Full_Front_Templat
e.ai

The Introduction of the Human Template

When the human Ai template file, Human_Front_Template.ai, is opened in Illustrator, you
will see four groups:

RL_Bone_Lable:
The contents in this group are not to be imported into Cartoon Animator. They are used for
placing the bones, the name of the bones, and other elements.

RL_Bone_Human:
This group is used for placing the Bone layers.

RL_TalkingHead:
This group is used for placing the data related to the head, such as the eyes, nose, mouth and any
other facial features (described in Chapter 5).

141
RL_Image:

File Utilized: CTA_G3_Pipeline_PSD_Ai_Template_Sample_Project\04_Ai

Template\CS6\Resources\Elastic_Folks_Front_Resources.ai
This group is used for placing the image data related to the body.

The Introduction of the Human Materials Template

In order to create a basic character with 10 parts, you need to first open the
Elastic_Folks_Front_Resources.ai file, where the individual image groups and body part layers, for
creating a default front facing character, are prepared.

The data related to the body include:

1 Heads (without facial features), 1 Face (painted with facial features), 1 body, 1 left and 1
right arms, left and right hands, left and right legs and left and right shoes.

142
 File Utilized: 04_Ai Template\CS6\Human_Front_Template.ai
04_Ai Template\CS6\Resources\Elastic_Folks_Front_Resources.ai

Human Body Creation

To create the body of a G3 character, you simply need to insert images into certain layers and
slightly adjust these images.

1. Drag and drop the 10 body part layers from the Elastic_Folks_Front_Resources.ai
document into the RL_Image group of the Human_Front_Template.ai document.
2. Transform these layers together to fit to the approximate proportion of the dummy.
Please note that it is highly suggested that the Hip of the imported image layers is
aligned to the Hip of the dummy.

143
3. Move the body part images to specific bones by dragging them to corresponding folders.
* Please note that there are two different types of body parts, and therefore
their placing destination is NOT the same (as described below).
• If a body part is composed of multiple color shapes under a group folder (RFoot in
this case), drag the RFoot image group to the first layer of the RFoot group folder.

144
• If a body part is composed of a single color shape without a group folder (in this
case, RThigh), drag the RThigh image layer to the second layer of the RThigh group
folder, so that the RThigh image layer can inherit the group folder of the template.
(Please refer to the previous section)

145
Follow the rules described above, place all of the 10 body parts to the correct folders:
• Head image group to the Head group.
• LArm image group to the LArm group.
• RArm image group to the RArm group.
• 00_Relaxed left hand image group to the LHand group.
• 00_Relaxed right hand image group to the RHand group.
• LThigh image layer to the LThigh group.
• RThigh image layer to the RThigh group.
• LFoot image group to the LFoot group.
• RFoot image group to the RFoot group.
• Hip image group to the Hip group.

146
4. When the steps are finished. The white dummy image group or image layer can be
removed (deleted).

147
5. Copy the Head image layer and paste it to the RL_TalkingHead > HeadImage > Face
group folder.

* For creating a talking head, please refer to Chapter 5 and 6.

148
Aligning Bones

The bones are the rotating center of the body parts in Cartoon Animator. Therefore, it is crucial
to align the bones in the Ai template to their adequate positions. Once the individual body image layers
are correctly moved to the corresponding folders, then the bones can be used as references when moving
the layered parts to their appropriate positions.

Take the example after the final step in the previous section, in accordance to the name next to
the bones, drag and move these bones to their appropriate body positions in the working area.

Before adjustments After adjustments

149
12.4 Exporting and Loading PSD File to Cartoon Animator

After a custom character is prepared in Illustrator, you are able to export the PSD file and load
it into Cartoon Animator to form a new G3 character.

1. Display all the image layers you need before exporting. You can quickly show all image layers
at one time by clicking the Object >> Show All command on the Menu Bar.

150
2. Click File >> Export >> Export As... and choose to export in PSD format. Please make sure
that the Write Layers option is chosen in the following dialog.

151
3. Launch Cartoon Animator.

4. Click the Create G3 Free Bone Actor button on the Functional Toolbar.

Alternatively drag and drop the exported PSD file into the working area.

152
5. When the loading is done, the character will appear in the Composer Mode.

6. Click the Back Stage button to bring the character to the stage for applying motions.

153
12.5 Adding Additional Images to a Body Part

• 04_Ai Template\CS6\Elastic_Folks_Front.ai
File Utilized:
• 04_Ai Template\CS6\Resources\Flower_Resources.ai

In this section, the completed G3 character Ai template will be used and modified so that the
additional image group (in this case, Flower) can be combined into a body image layer (Hip in this
case) being loaded into Cartoon Animator.

Open the Elastic_Folks_Front.ai and Flower_Resources.ai.

154
 There are two methods to add the flower image to the character's Hip image layer.
A. Copy all of the vector-based color shapes of the flower, and paste them to the Hip group folder
(together with the color shapes of Hip).

With this method, after exporting the PSD file, the color shapes of Flower and Hip will be
combined into a single Hip image layer under the Hip group folder, as can be seen in Photoshop.

155
B. Copy the Flower image group, and paste it to the Hip group folder. Then, the Hip group folder
will be composed of two group layers - Flower and Hip.

156
 Rename the Hip group folder (the first layer). Add the symbol “+” before the name of the folder
so that Cartoon Animator is able to identify and automatically combine the image layers under the group
folders which start with the “+” prefix.

With this method, after exporting the PSD file, the color shapes of Flower and Hip will be
separately combined into their own image layer under the +Hip group folder, as can be observed in
Photoshop.

157
 Once adding the flower image to the character's body part (Hip) with the method A or B
described above, you can export the PSD file and load it to Cartoon Animator. (Please refer to the
previous section)

In the Composer Mode, select the character's Hip sprite and then open the Sprite Editor. You
will see the Hip thumbnail comes with the additional flower image on it.

* Similarly, in the Photoshop pipeline, you can add any additional image layers under a body
part's group folder, then follow the naming convention to prefix the group folder with a “+” symbol for
Cartoon Animator to combine image layers under this body part.

158