Articles, Blog

Getting Started in Adobe Character Animator

January 25, 2020


Adobe Character Animator 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,
you’ll see the Home screen. You can always reach this screen by clicking
the home icon in the header bar at the top. Let’s start with the simple face template
Chad. Chad has Photoshop and Illustrator versions
available, but today we’ll use the Photoshop version by either clicking the picture or
the top text link. This imports this face into a Character Animator
project. In your Project panel you’ll see two items
listed: a puppet and a scene. Think of puppets as your actors and scenes
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 the appropriate
camera there. 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. Select your puppet in the Project panel and
click the Photoshop icon that appears at the bottom. This will open up the artwork in Photoshop. 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
sections, but for now, let’s give this puppet a different background. Select the last layer in the Layers panel
called “face background,” then click the New Layer button below to add a new blank
layer above this one. Find the shape tool in your left toolbar – usually
this is a rectangle by default – and click and hold on 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. When you’re done, select and delete the
old face background layer below. Go to File>Save to save your edits. 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
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 Photoshop template
Chad from Character Animator’s home screen. 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. First, when we talk about left and right here,
we’re talking about the character’s left and right, not the left and right sides 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 took the + off of the eyebrow layers,
saved, and returned to Character Animator, you would notice how the eyebrows would be
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 final for real this time, 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 disarm Camera input we have two other
options we could arm. Mouse & Touch input lets us control the pupils
by dragging a mouse or fingers on a touch enabled screen. Keyboard input lets us control the pupils
with the keyboard arrow keys. Any of these methods work – arm the one
that gets the results you’re looking for. 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
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 Photoshop template Chad
from Character Animator’s home screen, inside Photoshop 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, optional
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 Aa, 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
Chad, or creating your own from scratch. Making a responsive mouth set takes some time
and experimentation, so Chad’s mouth set 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 Chad (Photoshop) 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. A shortcut to disarm everything at once is
holding down command on Mac or control on Windows while clicking an arming dot. You can do this and then arm Lip Sync to ensure
it’s the only behavior looking for input. 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 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
Take 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, you can add rigging information to determine how a character moves and which
parts you can control. In the Home screen, let’s take a look at
a simple human character by clicking the example puppet named Chloe,and then click the Photoshop
icon to open the original artwork. 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 the Zoey photoshop file, and import her. Double-clicking the Zoey puppet 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. In the default 1920 x 1080 scene, Zoey is
a little too big. To resize and reposition her, select the Zoey
track in the timeline below, and under the Transform properties on the right, click and
drag over the Scale, Position X, or Position Y parameters to make her fit in the scene. 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 her
feet are stationary as expected. Back to Rig mode, we can see that Zoey has
several items inside her Body group – a right arm group, a left arm group, a torso group,
and pants 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. 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 Home screen 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. So good luck creating your own animated characters
and stories – and have fun.

20 Comments

  • Reply Voiceunheard8 January 23, 2020 at 4:26 pm

    Love your videos!

  • Reply KHMER ZOON January 23, 2020 at 4:27 pm

    I love all your clearly tutoring

  • Reply Political Puppet Theatre January 23, 2020 at 4:33 pm

    I need to get off my lazy bum and make more puppets and videos. Just here to thumbs up since kind of beyond the basics these days.

  • Reply Nimish Rai January 23, 2020 at 4:34 pm

    How can I talk to you, sir??

  • Reply Random Robo January 23, 2020 at 4:35 pm

    Very Informative. Love his videos

  • Reply котомяшки January 23, 2020 at 4:45 pm

    Привет из России! Только у тебя годные уроки по Character!

  • Reply Explainer Videos January 23, 2020 at 5:37 pm

    thank you for doing these tutorials.

  • Reply Sharp Design January 23, 2020 at 6:09 pm

    Probably answered this already but When you edit a template to make a new puppet how do you save it as a new puppet?

  • Reply Eddie - E11World January 23, 2020 at 6:14 pm

    This is so spot on in terms of coming back to show people just how to get started. Really well done as usual.

  • Reply SNS TV January 23, 2020 at 6:32 pm

    Wow
    your tutorial is informative.
    Thanks a lot! For making this video

  • Reply Elnur Hacıyev January 23, 2020 at 7:03 pm

    I wonder, is there any disadvantage of using Adobe ChAn instead of Adobe An when doing character animation? I see some cartoon animators prefer using An or even Ae, do not really understand why they make things more complicated.

  • Reply נעמה רודריגז גארסיא January 23, 2020 at 7:16 pm

    Dude, I love your tutorials! I really wish you'd do more advanced ones though.

  • Reply Nick fitz January 23, 2020 at 8:13 pm

    Is it possible to slice audio in this programme like Adobe Animate? I'm starting a cartoon soon and id like to be able to use different camera angles when recording ie over the shoulder then cut to a reaction shot then back to over the shoulder. Instead of recording each shot individually and trying to sync up the audio and scenes in a video editor later.

  • Reply Neon Lotus January 23, 2020 at 9:16 pm

    Finally a decent tutorial

  • Reply Kamran Jawaid January 24, 2020 at 3:46 am

    Excellent and to the point. Will be of help to new users.

    Suggestion: would love to see advanced workarounds (character turns, multiple angles/multi views, smooth/fluid body movements, production quality squash and stretch etc.).

    I see a great future for CA (perhaps better than Animate), but it is still miles away from competing with other mainstream products. Yet, for some reason, seeing the rapid progress, like keyframes, physics, magnets, I believe the software can easily give it's competitors a run for their money in a few years time.

  • Reply Kekako Media January 24, 2020 at 1:57 pm

    Hello there, I am diving deeper into CH Anim and am looking to build a show around it. I have a number of characters (around 10-12), all of them children. How can I copy a rig from one character to another? I know it won't be perfect, but at least it is a starting point, instead of rigging everyone from scratch.

  • Reply Z the Wolf Dog January 24, 2020 at 4:03 pm

    THANK YOU OMG! THANK YOU OKAY SAMURAIII <3

  • Reply Maicol Benitez January 24, 2020 at 4:56 pm

    besides the 14 mouth shapes for talking, can i create more, to make it more detailed when character talks?

  • Reply Renee Crystal January 24, 2020 at 9:51 pm

    Dave this is perfect for what I need for my high school class starting next week! Thank you!

  • Reply THE GAME SEEKERS January 24, 2020 at 11:48 pm

    Thank you for your wonderful videos. I'm improving little by little😌↓I made this
    https://youtu.be/Zp97CtlplM8

  • Leave a Reply