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 .
