Getting Started in Adobe Character Animator CC

Articles, Blog

Getting Started in Adobe Character Animator CC

Getting Started in Adobe Character Animator CC

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.

100 thoughts on Getting Started in Adobe Character Animator CC

  1. am using cloe but everytime i do something like it doesn't follow all the time, do i need a better camera or something?

  2. Hello, I'm trying to animate two of my characters, when I try to control either one of them on the scenario, I see there heads moving and no longer being attached to their bodies… I don't know what I did wrong…

  3. You're fantastic with these tutorials, I thought Iwas being bad not using vector based stuff as it's realy not my thing yet but you seem to be happy in photoshop, does it make much difference?
    I think I'll be getting a tablet soon too! 😀

  4. Hi Dave,

    Has the staple tool been removed? I'm trying to get the head of my character to move independently from the body while still remaining connected to it. Is there another way to do this?

  5. I keep an old version of Photoshop (CS6) on my mac in case my Cloud ever expires and I can't afford to renew it for some reason, but when I open a project in Character Animator it opens CS6 instead of CC2018. Any idea how I can fix that?

  6. how can i swap the hands from front to back and then back to front? say she wants to take a flower from behind. she moves the left hand from front of the body to back and then takes a flower and then moves the hand with the flower from the back to the left side of the body and then again moves the hand to the front of the body? anyone know how to achieve this? please let me know?

  7. I'm a beginner…. A friend of mine created a character for me. He sent it to me, but I'm having challenges moving it to Character Animator. PLEASE HELP

  8. As I've been rigging a character, the yellow highlights are not showing up, along with the green highlights. All I've been able to see are the yellow points, and the lack of highlights is making it hard for me to rig different body parts together and see how they're connecting. How do I get the highlights to appear?

  9. Wow! Perfectly explained, I'm far better informed on CH then I was 16:23 minutes ago! Thanks a ton, DW, much appreciated!

  10. Hello. Parts of my character in Character Animator are transparent. I know that in Ai the parts are in full color. Can somebody please assist with this.

  11. Thank you for a great tutorial. Thanks for not acting affected for effect. Concise. Every sentence something I wanted to know. In fact, it's so dense, I was starting to have trouble keeping up, was going to suggest shorter clips, which is when I discovered your perfect length table of contents, lesson breakdown with timecode links. lol! Thanks!

  12. Holy Cow, please can someone answer this. I just spent two hours on the Adobe Chat and Phone support (yeah, that's a joke!). I can't believe how bad the customer service is. I just bought this suite and one day in I'm traumatized by the customer service (or lack of). I am trying desperately to play with one of the preset puppet characters in Character Animator (Ch). This tutorial says that if you open one of the puppets than the same puppet will open in Photoshop. Well…..this does not happen. I even press CNTRL E and that choice is not highlighted. It doesn't work. It doesn't open or do anything. I have explained this to the Adobe staff ad nauseam. I have used graphs, pie charts, and a seeing eye dog to explain my problem and I get completely and rudely brushed off! Is there anyone that can tell me how to open a preset puppet (Blank Face) and ALSO have that same file (puppet character) open simultaneaously in Photoshop? I would very very very much appreciate any info regarding this. Thank you.

  13. Hi Okay Samurai, I've been downloading Ch ver 1.1 for my computer. I chose a Blank face but it didnt show up on Rig part as your video clip. At the part of Pupper, it showed up (none) instead of Bank Face (Photoshop) as in your video clip. Should I install Adobe Photoshop as well or update newer version for my Ch? Looking forward to seeing your response. Thank you.

  14. Great video! Only I have a problem, I tried to connect the arms of my puppet to the body, but it does not want to connect. I tried it before and it worked, but I can't figure out why it is not working this time.. Could you help? Thanks!

  15. Wow i search since days to find how to easy animate cartoon with tracking and i just found this amazing video. It's so much time saving thank you so much !
    I have a question : is it possible to tracking the body part too ? Or the tracking is just for facial expression ?
    and i have an another question , is it work with illustrator or only photoshop ?

  16. Can you edit the pre-recorded audio in character animator… when I try to delete a viseme using pre recorded audio it does not delete it and there is not a right click option to silence it…

  17. Hey! i went into photoshop to edit my blank face, but after i returned to character animator the newly edited wont track my movements. any solutions?

  18. 良い動画☆翻訳だと確かな翻訳ではなくて、、こんなに丁寧な動画の是非日本語バージョンを制作して欲しい。

  19. i´m to bad i dont know i did all like u but it dosent work,

    I painted a hamster in AI but i cant animate him for the face cam only with the keyboard 🙁 if i wanna make him blink

    The eye becomes smaller until it disappears and the ayebrows just ignor my settings xD i wanna cry 🙁

  20. This is awesome, but would it be possible to use your webcam for a side view perspective to animate eyes and mouth movement, and can you import it to animate cc ?

  21. Yo, any idea why when I click "edit original" it does not take me immediately to Photoshop CC as it does on your tutorial? It's a huge stumbling block insofar as trying to edit the graphics for me and my puppet. Also, everything is installed as it should be, so I don't think there should be any miscommunication between the software.

  22. One of my cohorts has been asking me to animate his future podcasts… I still havnt even opened [Ch] from Adobe… This video is a great way to motivate me to have a look see…

  23. What if I want to use adobe character animator cc for tutoring ( 2D human character animation plus a library of furnitures as a background for the scene environment ) does this software provide me with such stuff?

  24. There's a problem with my character animator. As soon as I open Adobe Ch this problem shows up: datatemp.noindexcompilerbehaviorparambootstrap-adobe.fader.js error code: (require-synchronous.js:19) Do you/or anybody else know how to fix this?

  25. Ohhh I love your video!!!
    I just needed it. I'm creating some educative contents, but didn't know how to make simple animations
    Thank you sooooo much!!!

  26. if i'm using illustrator for my project does it means that i have the option to use any size of screen, or resize it later?

  27. I can't make the eyebrows do the angry pose. No matter how hard I try. What the heck am I doing wrong?

  28. I love Adobe Animate, but this could be good too. However, is there any way to animate a head turn in this?

  29. is there a way to preset animation cycles for individual body part groups? It would be awesome to add some gesturing with the hands as I speak. Also is there something like the frame picker from Animate?

  30. When I try to click "Blank Face (Photoshop)"->"Edit"->Edit Original" nothing happens.. I have photoshop open, but I cant get the photoshop version of Blank Face (with all its helpful folders!) to open. Please Help!

  31. does anyone know how to keep the character active while not actually in the adobe ch window? i click off to my 2nd screen to scroll a browser or move an object and the NDI feed just stops. Adobe Character still works, I can see the puppet moving. The NDI feed though, just nothing.

  32. I was looking for a lip sync video months ago and could not find a good one. You might increase your views by adding better keywords.

  33. Oye! Soy Jai Delgadillo, Animador Profesional y emprendedor digital, te doy la bienvenida al curso “Adobe Character Animator CC en Español ”. En este curso iras de la mano conmigo y aprenderás a usar las herramientas y opciones de esta aplicación para la animación profesional de personajes usando gestos de tu rostro gracias a la magia del motioncapture. A pesar de que se trata de un curso profesional, personalmente me he divertido mucho desarrollándolo, grabándolo y estoy má que seguro tú también te divertirás aprendiendo a usarlo. El curso inicia con una introducción dedicada a conceptos fundamentales de Adobe Character Animator para luego a preparar personajes creados con Illustrator o Photoshop. Posteriormente aprenderemos a editar y controlar nuestros Puppets o Marionetas en Adobe Character Animator así como a grabar la interacción de estos Puppets y exportar las escenas a una pieza final de animación. Regístrate ya y aprende a trabajar de forma profesional con ACA



  34. This is a great tutorial. I teach High School A/V Production and also teach and Intro course to our Animation Program. We are looking into expanding into Adobe Animate and Character Animator. This video will help us with the process. Thanks and great work on the channel!

  35. When I open ca caracter it automaticallly opens blender and it crashes. How can I change it to illustrator or photoshop?
    Please help!

  36. Bad news! Steve Lucas is leaving Adobe:

Leave a Reply

Your email address will not be published. Required fields are marked *