Adobe Character Animator CC lets you animate any Photoshop or Illustrator file using your
face and voice with your computer’s webcam and microphone, making performance capture
animation fun and accessible.
In this tutorial, we’ll walk through the steps of getting a basic head set up.
When you first open up Character Animator CC, you’ll see the Start workspace.
You can always reach this screen by clicking Start in the workspace bar at the top.
Let’s start with the Blank Face template by clicking the picture on the left.
This does two things: imports this face into a Character Animator project, and also opens
up the master artwork in Photoshop.
We’ll start in Character Animator.
In your Project panel you’ll see two items listed: a puppet and a scene.
Think of puppets as your actors and scene as their stage.
If you double-click a puppet, you’ll switch to Rig mode.
This is where you can prepare your puppet for animation using tags, behaviors, triggers,
and other animation tools.
If you double-click the scene, you’ll enter Record mode, and see a live version of your
puppet reacting to your face and voice in the upper-right corner.
The webcam and microphone icons should be blue, meaning they’re active.
Your webcam video should show up automatically, but if it doesn’t, try clicking the menu
icon in the panel header and select Switch to Default or Next Camera.
When you talk, you should see a green audio meter show up.
If that doesn’t work by default, just go to Character Animator > Preferences on Mac
(or Edit > Preferences on Windows) and select a working microphone input.
To calibrate the webcam to your face, make sure you’re close to the camera and in a
well-lit area, relax your expression, look at the character in the scene panel, and click
the “Set Rest Pose” button.
This sets your current face position as the default starting point, and it’s a good
practice to do this every time before performing.
Now try moving your head left and right.
Look around with your eyes.
Blink.
Raise and lower your eyebrows.
Say something.
Your natural movements and speech translate into a real-time animated character.
Let’s start customizing this character a little bit by going over to Photoshop, which
should have the underlying PSD file already open.
You can always edit your master artwork from Character Animator by selecting a puppet in
the Project Panel and going to Edit > Edit Original.
Take a look at the layers panel.
The structure and naming in the Photoshop file is important.
You always want a top-level group with a + symbol and your character’s name, and a
group named Head inside it.
If you do this, any artwork inside this Head group will move with your own head movements
inside Character Animator.
We’ll cover the facial features in other videos, but for now, let’s give this puppet
a different background skin.
Currently, that’s the dashed line oval layer at the bottom called “face background.”
With face background selected, click the New Layer button below to add a new blank layer
above this one.
Then find the shape tool in your left toolbar - usually this is a rectangle by default - and
hold over it to reveal more choices.
Select the Ellipse tool, and make sure the type in the upper toolbar is set to Shape.
Click the fill swatch and feel free to pick any color as the background skin.
Then start in the upper left corner of your canvas, and click and drag to make a new oval
background layer.
You can use the move tool to adjust its position, and then delete the old face background layer
below.
Go to File > Save.
When you return to Character Animator, your edits will automatically sync up and appear.
This is the basic foundation for building custom characters.
You could add as many layers as you want with any kind of artwork inside your Head group,
and it will show up in Character Animator.
Feel free to experiment with your own style and have fun.
Eyes and eyebrows in Adobe Character Animator CC give your character a wide variety of expressive
possibilities.
When you look around, blink, or move your eyebrows, your animated character does the
same.
We’ll continue with the Blank Face photoshop template from Character Animator’s start
workspace.
In Photoshop, at the top of the head group, we see two layers, +Left Eyebrow and +Right
Eyebrow.
There are a few things to note here.
First, when we talk about left and right here, we’re talking about the character’s left
and right, not the left and right of the screen.
Second, when you add a + in front of a layer’s name, that’s a special code to Character
Animator to make that layer what we call “independent,” meaning it can move on its own without affecting
other layers.
If you were to take the + off of the eyebrow layers and return to Character Animator, notice
how the eyebrows are pulling and warping other layers as they move.
If the layer names start with + instead, they’ll move on their own.
A plus in Photoshop or Illustrator gets translated into this crown icon in Rig mode in Character
Animator, allowing you to easily toggle and experiment with making parts independent.
Because the layers were precisely named “Left Eyebrow” and “Right Eyebrow,” when the
artwork was imported those layers got automatically tagged as eyebrows.
You can check this in Rig mode by selecting the layer and looking at the Tags section
in the right properties panel.
You can toggle between a visual or text-based tags system.
So if I had just named this layer eyebrow or brow or Layer 472 Final, I can easily tag
it here.
The character is controlled by a set of rules called behaviors.
When you import a character, you get a standard behavior set automatically, which you can
see in Record mode in the properties panel on the right.
The eyebrow controls are in the Face behavior, so twirling that open reveals several options
to customize the eyebrows.
Eyebrow strength exaggerates or minimizes the amount of vertical eyebrow movement as
you move your own eyebrows in the webcam - high numbers move up and down a lot, while 0 means
no vertical movement at all.
Raised and lowered eyebrow tilt determines how much and in which directions the eyebrows
will pivot in their highest and lowest positions.
You can experiment with these parameters to customize the level of expressiveness that
you want.
Let’s take a closer look at the eyes back in Photoshop.
Each eye has its own group, Left Eye and Right Eye, each with three layers inside, an eyeball,
pupil, and blink layer.
The relationship is pretty simple: the pupil stays inside the shape of the eyeball, and
because we want it to move around without pulling on other layers, we add a + to make
it independent.
The blink layer only shows up when you blink, and doing so will hide the other layers in
its group - the eyeball and pupil.
If you return to your scene in Record mode in Character Animator, you can see that eyes
are controlled by the Eye Gaze behavior, which has several options.
A red dot means that something is armed for recording, so by default we can see that eye
gaze is looking for camera input, following your own eyes in the webcam.
If we also arm Mouse & Touch input, we can control the pupils by dragging a mouse or
fingers on a touch enabled screen.
Towards the bottom, Snap eye gaze is checked by default, meaning the eyes will dart around
to one of 9 different common positions depending on where you’re looking in the webcam, but
unchecking this will make the pupils more free-moving.
So, these eyebrows and eyes are a basic example, but you could customize them into whatever
size, shape, and color you want in your own unique style.
Once you save, any edits will automatically show up in Character Animator.
For more advanced users, there’s also the option of tracking your upper and lower eyelids,
or adding clipping masks to prevent the pupils from floating off of the eyeballs.
The eyes are one of the most expressive parts of a character, so it’s worth spending some
time tweaking the parameters until you get the effect that best fits your character.
When a puppet in Adobe Character Animator CC hears a voice, it analyzes the sound in
realtime, and picks a mouth shape that fits.
So as you talk, the mouth is constantly switching to match whatever syllable is heard, resulting
in automatic, instant lip sync.
Continuing with the Blank Face photoshop template from Character Animator’s start panel, you
can twirl open the Mouth group to see all the different potential mouth shapes.
There are 14 total here so let’s break them down.
3 of these - Neutral, Smile, and Surprised, are silent mouths, and only show up when nothing
is being said.
In these cases, the shape of your mouth in the webcam will control what shows up here.
Neutral is the default state and the one that any puppet with a mouth should have.
Smile and surprised are additional silent mouth shapes that will get triggered if you
smile - or open your mouth in surprise.
The other 11 are audio-based mouths, called visemes, and they’ll show up when something
is said.
These are Ah, D, Ee, F, L, M, Oh, R, S, Uh, and W-Oo.
By naming these mouth shapes exactly this way and putting them in a Mouth group, Character
Animator will know what to do with them once they’re imported.
Armed with this knowledge, you can create your own custom mouth sets, either by tweaking
a template mouth like the one provided in the blank face template, or creating your
own from scratch.
Making a responsive mouth set takes some time and experimentation, so the one included in
the blank face template is a great starting point - feel free to use it exactly as is
or just a guide for your own custom creations.
In Character Animator, if you double click the Blank Face scene in the Project Panel
on the left, it will automatically open up in Record Mode.
If the microphone icon is on and the Lip Sync behavior is armed, then you’re ready to
record audio.
For now, you could disarm all the other behaviors by clicking the red dots next to them.
If you click the red record button in the scene panel and start talking, Character Animator
will record data for the armed lip sync behavior.
Clicking the record button again to stop will create two things in the timeline: a waveform
of your audio and a lip sync take with all of the individual visemes below.
By dragging the left and right edges of any viseme, you can trim or expand how long it
appears.
You can also slow down playback by clicking the number next to the timeline controls and
selecting a slower speed, making timing edits a little easier.
You can also right-click any viseme to swap it out with any other one, with some accompanying
suggestions to help guide you for sounds that share the same viseme.
Tapping the first letter of a viseme on your keyboard will also do a switch.
You can remove a viseme by right-clicking and choosing Silence, and right-clicking on
an empty area of the viseme track will allow you to create a new viseme.
Audio doesn’t need to be recorded live - if you’re working with voice actors or recording
in another program, you can go to File > Import and bring in external audio files for your
voices.
You can then drag them into your scene, select the puppet you want to apply the lip sync
to, and go to Timeline > Compute Lip Sync From Scene Audio.
This will analyze the audio file and create the lip sync track from its contents.
Accurate looking lip sync is a critical part of a believable animated performance, so it’s
worth spending the time to make your mouth look as great as possible.
When setting up a body in Adobe Character Animator CC, you can add rigging information
to determine how a character moves and which parts you can control.
In the Start panel, let’s take a look at a simple human character by clicking Chloe,
which opens her up in Character Animator and Photoshop.
Because this version of Chloe already has body rigging associated with it, we can start
from scratch by making a new copy of her.
In Photoshop double-click the name of the top +Chloe group, and rename it to +Zoey.
Then we can go to File > Save As, and save her as a new file named Zoey.
Back to Character Animator, you can click File > Import, find Zoey and import her.
Double-clicking Zoey will open her up in Rig mode.
We’ll come back here in a minute, but for now let’s add her into a new scene by clicking
the clapboard icon in the bottom left corner of the Project Panel.
This adds the puppet to a new scene.
If you select the scene in the project panel by clicking it once, you’ll see the scene
properties on the right.
Here you can customize the scene’s parameters like the width, height, duration and framerate.
If you wanted to reposition your character, you could make sure it’s selected in the
timeline below, twirl open the Transform properties on the right, and adjust the X or Y position
values as needed.
Returning back to Rig mode, we can see that the top level Zoey group has two groups inside
- a Head group and a Body group.
Setting up a file like this ensures the body will always move along with the head as expected.
Note that neither of these groups are independent - if we made the Head independent by adding
a + in front of it in Photoshop or toggling on the crown icon in Rig mode in Character
Animator, it would move on its own, and look disconnected from the body.
So it’s best to keep both non-independent.
But if we look at Zoey’s scene, her feet are swaying back and forth with her head,
and not connected to the ground like we probably want.
We can fix this by returning to Rig mode and adding what we call handles, or invisible
data points that determine how the artwork behaves.
To add a handle that will pin the feet to the ground, make sure the Body group is selected,
click the handle circle in the lower toolbar, click a foot to place a new handle there,
and tag it as Fixed via the right hand properties panel.
Because Fixed handles are commonly used, there’s also a shortcut - the pushpin icon.
Clicking on the artwork with this, known as the Pin tool, will quickly create fixed handles,
so you can add several to keep her grounded.
Returning to the scene will confirm that feet are stationary as expected.
Back to Rig mode, we can see that Zoey has three items inside her Body group - a right
arm group, a left arm group, and a body background layer.
The arm groups are independent, marked with crown icons, because we want them to move
on their own without necessarily pulling the rest of the body.
By default, the independent group’s origin shows up right in the middle of the artwork,
and a dotted green line shows what’s controlling it - in this case, the origin of the group
it’s inside - the Body group.
But we want our arm to pivot from the shoulders, not the belly button - so we can use the select
tool from the bottom toolbar and drag the origin until it hits the shoulder.
As soon as the origin overlaps with other artwork it can connect to, the connecting
artwork turns green, and the origin gets a green circle around it.
Now that her Right Arm is properly connected, we can add another handle to let us move this
arm with our mouse or fingers on a touch-enabled device.
With the right arm group still selected, select the Dragger tool in the bottom toolbar, and
click on the hand to add a draggable handle.
Now when we return to our scene, if we click and drag, we can move and control the arm
group.
By default, it’s bending like a spaghetti noodle, and we may want to add some more structure
to it.
Back in Rig mode, still with the right arm group selected, you can click the Stick tool
and drag over top where the forearm and bicep would be to draw some simple scaffolding,
leaving a little room in the middle for the elbow.
Returning to the scene, now the arm bends more like we might expect from a human arm.
The Dragger behavior on the right determines how draggable handles work.
If “After Move” is set to “Return to Rest,” then when you let go of a dragger
handle, it will return to its initial position.
Changing the return duration value eases the handle back to that default position over
a period of time.
Changing “After Move” to “Hold in Place” will instead make dragger poses stick in place,
kind of like an action figure.
You can do the same with the left arm group.
Drag the origin to the shoulder.
Add a draggable handle to the hand.
And finally, draw two sticks for the forearm and bicep.
And with that, you’ve now got the foundation of a basic animated character.
Other characters might have a lot more bells and whistles, but most of them follow this
general Head and Body grouping structure.
In the Start Panel you’ll find several other example templates to learn from, and clicking
the “See More” link above takes you to a page where you can download even more.
Good luck creating - and have fun.