Beginners Guide to Adobe Character Animator

Beginners Guide to Adobe Character Animator

Adobe Character Animator is a fabulous addition to the Adobe Creative Cloud. Your own controllable cartoon character, leading your presentations, explaining issues to your class, starring in your video conferencing, teaching in your online lesson, presenting your vlog, explaining your latest gaming techniques, making advertising campaigns… the list goes on. A quick, easy, and incredibly powerful tool to add interest and engagement, fun and fascination, and professional-looking presentation skills to help you stand out in your field. Read on.

In this article:
1. What is Adobe Character Animator
1.1. Download Adobe Character Animator
2.2. Adobe Character Animator’s Interface
2. Getting an Animated Puppet
2.1. Premade puppet template
2.2. Create your own puppet
3. Get a Background
4. Start Animating
4.1. Setup a Scene
4.2. Record Yourself
5. Explore features in Adobe Character Animator
5.1. Triggers in Character Animator
5.2. Draggers in Character Animator
5.3. More cool features to try

 

1. What is Adobe Character Animator

Adobe Character Animator is a new animation software developed by Adobe. Its primary feature is that it can sync your movements and voice through the camera and microphone. The idea behind this software is to make it possible for anybody and everybody to create animation without specialized skills and complicated tools. It’s basically a great solution to start and create your first animation videos in minutes. But it’s fair to say that the software is not only for beginners and fun videos, but it can also be used for high-quality professional videos too. Do you know What You Can Do With Adobe Character Animator? Check out these Amazing Examples.

1.1. Download Adobe Character Animator

First of all, you need the software. As with any of Adobe’s software, it is a part of Creative Cloud, for which the subscription plan is $52.99/mo covering all Adobe CC Apps. Although, you can test Adobe Character Animator with a fully-functioning 7-day trial.

After you install the software, it is extremely easy to get into it, and following our simple tutorial to create your first animation in Adobe Character Animator will help you even more.

 

2.2. Adobe Character Animator’s Interface

Adobe Character Animator Interface

The Software’s interface is really friendly and at this stage, you need to understand a few basic things:

There are three modes – Rig, Record, and Stream. When you click on Rig you can edit the puppet settings. Record mode is, well… recording animations. And Stream mode is when you stream (or make a video call). When streaming, viewers can see your puppet instead of you – which is amazing, because it lipsyncs your voice, and mimics your expressions and movements in real-time.

Triggers and Draggers – Character Animator has some options, to help you create premade movements and actions. There are different hand gestures that can be changed with a simple click on the keyboard, for example, you can click, and it can automatically make your puppet give a thumbs up. These are the triggers, draggers on the other hand are points, which you can control – when you put a dragger on your puppet’s hand, you can move the hand wherever you like by clicking on the hand with the cursor. With this feature, you can point at something, or basically make any other movements that you want.

Lipsync and expressions – These features are automated. The only things you need are a microphone, web camera, and a properly named puppet file. When you record your scene it will add the lipsync, movements, and expressions to the video timeline. You can modify the recording and prerecorded parts of it until you’ve got exactly what you want. Also, on the right side of the software, you will find a “Properties” panel, in which you can select which specific elements (lipsync, movement, expressions, eyes movement, etc) should be recorded and which properties can be modified.

Timeline – The timeline of your animation is very powerful and easy to use. In it you can modify your recordings without the need to record them again. You can even choose which part of the whole animation you want to export. You can use it to choose which of your puppets you want to control (yeah, you can make animations with different characters communicating), or to make more smooth animations. Using the timeline you can modify everything in the animation such as the duration of triggers, draggers, modify the lipsync, the character position, zooming the camera, and much much more.

 

2. Getting an Animated Puppet

First of all, you need a character to follow your movements and lip sync your voice to. In Character Animator this is called a “Puppet”. This is a cartoon character, that is prepared for Adobe Character Animator and the structure of the puppet is made to integrate perfectly with the software, so the puppet can talk, move, and express different emotions. You can either get a premade puppet template or create your own puppet. Let’s explore the two options:

 

2.1. Premade puppet template

There are different places where you can get a premade puppet, and even some free puppets such as Okay Samurai, or from GraphicMama Character Animator Puppets Library which includes over 100 premade puppets in a variety of styles and with different features depending on your needs. If you decide to use a premade puppet, just download it and extract the .zip.  Run Adobe Character Animator and create a “New project“. Then go to menu > import and select the .puppet file. Select the puppet from

adobe character animator starting project

Adobe Character Animator Starting Scene

And this is what your puppet should look like now:

Adobe Character Animator Imported Puppet

 

Free Puppet Templates

Why not check out some of these free puppets to try in your first animation:

free character animator puppet businessman

Free Businessman Character Animator Puppet

This free puppet has everything you need to make a professional-looking animation for free. It has some amazing features such as:

  • 14 Mouth presets
  • Holding objects
  • Making gestures
  • Head turn
  • Walking
FREE DOWNLOAD

free character animator puppet man

Free Male Character Animator Puppet

This free male businessman is made in the modern flat style, which is very fashionable at the moment. It has lots of amazing features included for free, like:

  • 14 Mouth presets
  • Making gestures
  • Holding objects
  • Head turn
  • Walking
FREE DOWNLOAD

free character animator puppet fun businessman

Free Fun Business Character Animator Puppet

This charming man puppet template is great for presentations, it’s professionally designed, and has:

  • 14 Mouth presets
  • Making Gestures
  • Holding Objects
FREE DOWNLOAD

free character animator puppet woman

Free Female Character Animator Puppet

This female character animator puppet template comes with everything you need to start animating. Here are some of her features:

  • 14 mouth presets
  • Making gestures
  • Holding objects
  • Head turn
  • Walking
FREE DOWNLOAD
Browse more Character Animator Puppets

 

2.2. Create your own puppet

Another option, instead of using premade puppets is to create your own. For this option, you’ll need character illustration software, plus some additional assets. First, let’s talk about some of the technical stuff – Adobe Character Animator works with puppets made in Adobe Illustrator or Adobe Photoshop, so you’ll need to prepare your cartoon character in one of these software options. After the illustration is made, you’ll need to prepare the file according to Character Animator requirements, so the puppet can work properly.

 

How to structure your puppet file in Adobe Illustrator or Adobe Photoshop?

+CharacterName – It should have a plus sign, and the name of your puppet  (In Illustrator your whole layer should be named that way.)

Inside this group (layer in Illustrator) you should have two different groups:

Head – In the head group you should have the following groups named exactly as follows:

  • Mouth
  • Left eye
  • Right eye
  • +Left eyebrow
  • +Right eyebrow

You could also have hair, face, hat, or anything else, that is located on your head, but their names are not important for the software.

Body – In the body group you should locate these groups:

  • +left arm
  • +right arm
  • torso and legs

You can add other groups and elements if needed. The names of your body groups are not important for the software, but it will be better for you to animate the hands and body if structured this way.

 

How about the mouths?
Adobe Illustrator needs 14 basic mouth shapes to operate lipsync correctly. They should be named in a strongly specific way, and they should all be inside the mouth folder.
There are three emotional mouths: neutral, smile, and surprised. There are also 11 more mouths for lipsyncing your voice – Uh, R, Oh, W-Oo, S, F, L, Ee, Ah, D, and M.

As an example, you could check out and get GraphicMama’s free mouth shapes for Character Animator.

Free Standard Mouth Shapes for Adobe Character Animator

 

Puppet in Adobe Illustrator examples:

Layer structure

Adobe Character Animator Puppet structure in Adobe Illustrator

Example of Adobe Character Animator Puppet Structure in Adobe Illustrator

Mouth naming and structure

Adobe Character Animator Mouths Structure and Naming

Example of Puppet Mouth Structure in Adobe Character Animator

adobe character animator puppet structure example

Example of puppet structure in Adobe Character Animator

Structure Principles:
  • Grouping – your cartoon puppet should be grouped in a strongly defined way. Your whole puppet should be in one group in Photoshop (layer in Illustrator) with a “+” sign and the name of the puppet. After that, you should have separate head and body groups. Inside them, you should prepare each individual element in different groups. For example, the puppet won’t work properly if you make your left eye left eyebrow in one group called “left eye”
  • Naming – you should use strongly specified naming for all groups, that the program needs to understand such as; head, body, mouth(uh, r, oh, w-oo, s, f, l, ee, ah, d, m, smile. surprised, neutral), +left eyebrow, + right eyebrow, left eye, + left pupil, left blink, and so on. In addition to these essential elements, you can make your own names for elements such as hair, nose, left ear, etc.
  • Left and Right – you should group some of the elements with “left” and “right” in the title. This is important for the correct movement of the eyes, pupils, and eyebrows.
  • + for dynamic elements – you should put “+” in front of the name of the elements that should be dynamic. For example, to make eye pupils move according to your eyes, you should name it “+ left pupil”. Well, you can adapt this to your needs – you can make hair in front of your character’s face, which also should be marked with “+ ” in the hair’s name.

 

3. Get a Background

Of course, you will need some kind of background for your animation. There are many places all over the internet where you can find free or paid background images and illustrations for your animation. To add it to your project, you just have to import it using menu > import.

 

4. Start Animating

After you’ve imported your puppet and background, let’s start with the fun part! Go to Record mode(at the top of the software).

 

4.1. Setup a Scene

Select the puppet you’ve imported to your project and click on the “Add Scene” button in the bottom left corner of your project panel.

Adobe Character Animator Creating a Scene

To add the background to your scene, just drag and drop it to the “Timeline” panel.

 

4.2. Record Yourself

To start animating, just select your puppet on the timeline and click on the Record button(Crtl + R).

Start Recording in Adobe Character Animator

 

 

5. Explore features in Adobe Character Animator

5.1. Triggers in Character Animator

Triggers are automated animations and actions. You can use this feature to make the puppet give a thumbs up, or to make him angry, running, sitting, or whatever else. To use them, on the left side, you should see a panel called” Triggers“. It will show you the available triggers your puppet has and the button you need to click to activate each one. If you use some of GraphicMama’s puppets you’ll see many premade triggers that you can use right away. If you are using some other templates or making a puppet on your own, you” need to create triggers from scratch. In the example below, we’ve added some elements to our puppets file – in the source .ai file we’ve made groups inside both left and right eyebrows. We’ve modified the eyebrows and prepared them as different groups called Normal, Angry, Happy, Sad, and Down all inside the eyebrow group. It is very important to make these groups non-visible, except for the normal state. Now, let’s see how we’ve made our character angry:

 

To make triggers you should go to Rig mode and select your puppet. I the top corner on the right of the Triggers panel, you should see an options menu. Click on it and select “Create Swap Set”.

Create swap set in Character Animator

Then with the selected new swap set you should click again on that menu and click on “Create Trigger”. Now you should have one trigger in your Swap set – right-click on that Trigger and rename it to “Normal”. Create another trigger to your Swap set and name it “Angry”. Then select the “Normal” Trigger in your Swap Set and click on the hand to mark it as a default state.

default state in swap set

 

To make him Angry we will select the “Uh” mouth and the “Angry” eyebrows groups that we’ve prepared for our character. Then, drag and drop the selected groups into the Angry trigger in the Swap Set.

Adding elements to triggers in Character Animator

 

Now when you click on the Angry trigger, you should see the elements that are activating with this trigger.

Swap set trigger content character animator

 

Next, we will put the default states of our eyebrows inside the Normal trigger (you don’t have to do it for the mouth because it’s dynamic and it changes while you talk). Now, because we’ve marked this trigger as default, the elements inside it will be visible, and the others inside the swap set won’t be unless you activate the trigger.

Now it’s time for the most simple step. Click on the left box by the Angry trigger and write down the key you want to activate this trigger. In our example, we will use the letter “A” to activate the trigger. Then, when you record your animation and press A, the elements in the Angry trigger will be activated, and the elements inside the Normal trigger will disappear.

Activate trigger with key

 

You can also choose the behavior of the trigger – do you want to be active only while you hold the activation key, or do you want to stay active until you press it again? This function is called Latch, and in some cases, it can be very useful! You can activate latch when selecting the trigger and check the box for Latch. When checked, the trigger will be active until you press the trigger key again, if it’s unchecked the trigger will be active only while you are holding it.

Latch trigger in adobe character animator

 

5.2. Draggers in Character Animator

“Dragger” is a great feature in Adobe Character Animator. It allows you to drag an element and move it with your hand – mostly used for moving hands. But that’s not all, you can make all kinds of automation using draggers.  For example, you can add some hair movement to your character, or play with some elements by adding wind or gravity.

To make dragger you should first go to Rig mode. Then, select the puppet which you want to edit and click on the puppet’s arm.

making dragger to hand Puppet Character Animator

Then below your puppet, you should see a few tools. Select the Dragger tool and place a dragger on the hand (Mark the point where you want to drag the hand from).

Select dragger tool in Character Animator

 

To make this whole thing work, we should add bones and a point on which your hand is connected to the body. First, let’s connect the arm to the body. Select the Handle tool and mark the shoulder where the arm and the body are overlapping. It should be marked green. After that, next to the handle point you’ve made you will see a plus sign, click on it, and a popup with body structure will appear. Click on the shoulder to make the software understand that this point is the shoulder of your puppet.

Handle tool making shoulder Adobe Character Animator

Now we have to repeat the same step, this time with the elbow. Just use the Handle tool to make a point where the elbow is located. Then mark the elbow in the body structure.

Well, this should be completely working right now! You can go to the Record mode and test it… When you drag and drop the hand with the cursor, your hand should be moving… but how about improving it even more? Let’s add some bones and make it more realistic.

To add bones, we need to select the stick tool and mark the arm between our shoulder, elbow, and wrist. It should look something like this:

Stick tool making bones Character Animator

 

5.3. More cool features to try

Adobe Character Animator is new software and there are frequently massive updates that introduce new features and update the usability. You can have full control of your puppet and animation. You can make many more useful things such as:

  • Replays – this feature saves the movements, triggers, and others into premade animation, which you can then use more and more with just a few clicks.
  • Keyframes – you can use keyframes to soften some rough animation. There is an amazing feature that is well known from After Effects and it is the key part of a professional-looking animation. To soften movements and animation, just enable the keyframes for the selected slides and click on ease-in and ease-out with a selected keyframe.
  • Behaviors – behaviors are a very useful feature that allows you to make cycle elements, auto blink, breath, magnets, wiggler, and much more. Behaviors can be set up in the rig mode. with the selected group, you want to add behavior to. Behaviors can also be used for modifying the walking style, draggers behavior, triggers, etc. So you should really check them out and play with them.

 

Final Words

This is a great guide to get up and running and show you that animations are nothing to be scared of these days. When all around us are moving forward with various techniques for catching and keeping the attention of an increasingly flick happy audience, animations are an exciting, newly accessible dynamic way of grabbing that essential attention.

You may also be interested in some of these articles:

Enjoyed this article?

Don’t forget to share!

Lyudmil Enchev

Lyudmil is an avid movie fan which influences his passion for video editing. You will often see him making animations and video tutorials for GraphicMama. Lyudmil is also passionate for photography, video making, and writing scripts.

ADVERTISEMENT
Take a look at GraphicMama's premium puppets for Adobe Character Animator:

Hey! You made it all the way to the bottom!

Here are some other articles we think you may like:

Looking for Design Bundles or Cartoon Characters?

A source of high-quality vector graphics offering a huge variety of premade character designs, graphic design bundles, Adobe Character Animator puppets, and more.

Browse our graphics