hey this is a video be character
animator team and this video is meant
for those of you who really want to
create an animated character but don't
have the experience in Photoshop or
character animator to bring it to life
yet so this is a great beginner tutorial
we're going to walk through everything
step by step we're going to use a bunch
of Photoshop templates you can download
to help give your character structure
and a nice lip-sync mouth so you don't
have to draw those mouths individually
and finding it a bit if you follow along
in Photoshop and do every step as we're
doing you should have a really basic
face for a certain sound ation for an
animated character so hopefully it's
helpful so let's get started okay so I'm
here in Adobe Photoshop and Photoshop or
illustrator files are going to work with
character animate or PSD or AI files
basically to start today though I'm
going to start from the template
actually that I downloaded and you will
have access to do this to you just click
open over here in the Start screen of
Photoshop and find your download a
template blank and again you can
download this for free in the video
description press open and that is going
to open up if you look at the layers
list over here a basic structure of a
very simple character so now you don't
have to worry about drawing things and
then renaming them you can just select
the appropriate layer or folder over
here and then draw your artwork inside
of it and I think this saved a lot of
time this is a great place to start
particularly if you're new to character
animator so I'm going to start by
selecting face background and just
making a basic circle shape to hold the
whole face that I'm making so let's do a
circle here the ellipse tool and it's
not showing up you can click and drag
and find it that way and then I will go
up here to fill and I can select any
color I want usually I don't use these
swatches here I click this little RGB
thing and we'll kind of move it around
to find the exact color I want that's a
pretty nice looking color so let's click
OK
and I'm going to click my circle and I'm
going to hold down shift while I click
and drag and that's going to give me a
nice perfect circle not an oval or
anything like that so that looks pretty
nice now what this is done
is created a circle in my face
background layer if I click the little
eyeball toggle here it disappears so I'm
going to save this right now I'm going
to go to file and save and that's going
to save template blank as its own thing
and even at this early stage let's
import this into character animator and
see how it looks okay so now I'm inside
adobe character animator
and what I'm going to do is go to file
import and select that blank template
that I save that simple circle in and
I'll click import so that's going to
import it and if you look over here in
your project panel you now see something
called template blank that has a little
pawn icon next to it and this just means
it's a puppet and we call puppets
anything that you can any kind of
character that you bring in any
Photoshop or illustrator file so if I
double click on this it's going to open
it up in what we call rig mode and if I
go up here you see start rig record
stream these are my different modes and
I can click on these to move between
different parts of the workflow right
now I'm rigging the character I'm
getting it ready for animation so I can
see that I've got my full layer
structure here just like my Photoshop
file character head all that stuff and
in my face background if I toggle that I
can see if I can turn that on and off so
with my puppet selected I'm going to go
down here and click add to new scene so
you can think of puppets as kind of your
actors actresses and you're seen as the
stage that they perform on so let's
click add to new scene and now you
should see the circle showing up now the
cool thing is immediately you can notice
that as I move my head the circle is
also moving and following my movements
why is this happening well let's go into
rig mode again and I've named a layer
here in the template called head and
anything that shows up in this head
group anything is going to move with
your own head as you move and this thing
although I called it head in the
Photoshop file notice over here in the
tags panel there is this illuminated
thing called head if I click this it
would turn off and now it wouldn't be
tagged his head and now it wouldn't work
so I definitely want to keep that tagged
and I can see if I click on this little
a here
see a text-based version of all the
potential things I can tag with so it's
up to you if you're more of a visual or
a text-based learner so that's already
working pretty well if I go into record
mode here I can see that I've already
got head tracking enabled another
important thing to know about is this
set rest pose button so basically set
rest pose recalibrates your character
and recalibrates your webcam to be the
zero position of where the character is
so for example if I want to start
recording then I move over here well now
my head is off-center and it's not
looking that great but if this is where
I want to start recording from if I just
press set rest pose that's going to
restart it and reset it into a center
position and then I can move around so
anytime before you're kind of acting or
moving around with your character just
click set res pose to Center it in a
correct position you can do the same
thing by double-clicking on the face as
well now if you're not seeing your
camera show up here you've got some
options you can click on this and go to
switch to default camera or switch to
next camera um if it's not showing up
you're getting errors or stuff sometimes
other programs like Skype or FaceTime or
other video things that use video or
your camera might be in conflict with
character animator so you probably want
to close down any external apps same
with the audio microphone will show up
here and these little icons just mean if
the webcam is on or off and if the
microphone is on or off as well now
another thing scene properties so you'll
notice right now I've got this certain
size rectangle but why is it this size
why is it working this way well if I
just click once on my scene here it's a
little clapboard icon you'll see all my
Steam properties showing up over here
and so I've got my frame rate my
duration my width and my height so right
now it's guided to 1920 by 1080 but I
could drag this you know just over and
make this a little bit smaller if I
wanted so it split up to you I'm going
to stick with the standard 1080 because
I think that gives me enough room for my
character to work with you never want
your character to get cut off by the
edges because then if you later export
in the movie or bring it in to premiere
or After Effects or other programs it's
going to show that clipping it look
your head will head will get clipped off
which probably don't want framerate
usually I stick with 24 you can
experiment with that 12 FPS is used a
lot for animation you can even bring it
up you know bump it up to 60 if you want
really really fluid fast animation but
it's up to you this design you can
experiment with so things are working
pretty good so let's add a few more
features back in Photoshop and see how
they translate to character animator
okay we're back in Photoshop and now I'm
going to work on the eyes I think so
I've got these folders right eye and
left eye when we talk about right and
left with the character we're talking
about the right and left side for the
character not the right and left side of
the screen so the characters right eye
is actually going to be on this side of
the character so my left the characters
right so let's start by clicking on
right eyeball and we'll click on this
circle again and this time I'm going to
change the fill color to white probably
for the eyeball and I'm going to do the
same thing as before I'm just going to
drag hold down shift as I drag and I'm
going to make this eyeball then I'm
going to click on plus right pupil and
let's pick a good pupil color maybe you
know just a blackest is fine and let's
do the same thing shift and drag and
create a pupil I mean it's the move tool
up here to just move it into the exact
position I want usually Center is going
to give you the best results but you can
play around with that
now finally right blink so what do I
want to show up when my character blinks
for me I just kind of want a straight
black line to show up so I'm just going
to go here go to the rectangle tool and
I'm just going to drag and do something
like that so and I did that in my bright
blink layer so let's turn all of these
off and just make sure I've got
everything right my right eyeball is
just a white circle my right pupil is a
black dot that's inside the eyeball and
my blink is a line or something that's
going to show up whenever I blink in the
webcam
all right so that's looking pretty good
so what I'm going to do is do pretty
much the same thing in the left side for
me just to save a little bit of time I'm
going to select all these shift select
and press Delete to delete those and
then I'm going to just copy these over
on Mac that's going to be option drag on
PC i believe that's alt drag and so
these exact same things are going to
show up now into my left eye folder and
if i move those over and if I hold shift
that will constrain it to be exactly
straight across now I've got the exact
same eyeball over here now the problem
is I can't keep them named right blink
copy plus right pupil because then
character animator will only recognize
the first one that shows up so I'm going
to have to change name these again to
left blink plus left pupil and left
eyeball okay so now I've got these two
eyes I'm going to just turn the blink
layers off because I don't really need
to see them right now and let's press
I'm pressing command s to save that
that's ctrl s on Windows and let's go
back to character animator and see how
this is looking so as soon as I come
back into character animator and click
on anything you're going to see this
thing that says incorporating external
edits and there we go now I've got my
character with the eyes and as I look
around the character will also look
around with their eyes now you're going
to get the best best face tracking if
you are in a well-lit environment so I'm
wearing a hat right now probably not the
best idea and the closer you get in the
more well-lit your faces the better
results you will have with the face
tracker accurately picking up where
you're looking so this is looking pretty
good I can you know can look to one side
or the other side or whatever I want and
it seems to be tracking my eye movements
now over here on the right hand side you
see these things called behaviors
behaviors are the rules for how your
characters react so for example my eye
gaze if I twirl this down I can see all
the different things I can do for I gaze
and in fact anything that's red
it means it's armed and ready for
recording so right now I gaze and camera
input or both on but check this out if I
click on mouse and touch input as well
then when I drag with the mouse that's
going to drag where the eyes go as well
so it's an alternative way to control I
could just do mouse and turn camera
input off if I wanted to for now I'm
just going to keep camera input on now
you also notice as I blink the blink
layers are showing up and the other
things in the eye group are disappearing
so let's explain this really quickly
what I called left eyeball and right
eyeball those are the confines of where
the pupils can go around in so setting
up things normally the eye the pupils
are going to stay within the confines of
those eyeballs they shouldn't go out of
the whites of the eyes and then pupils
you know will move around independently
on their own as you look around and
that's why we added a plus symbol to
them in the Photoshop file that makes
them independent and so if I go back to
rig mode here notice that if I twirl
down the right either at the left side
notice that right pupil unless people
don't have that little plus symbol next
to them but they do have this little
crown icon and the crown icon just means
you can move independently so even
though the face is moving and generally
controlling where things go the pupils
are also able to move on their own and
this is a really important concept that
we'll touch on a few more times but
basically when you want something to
move on its own and not get warped or
pushed or pulled by the rest of the face
or body or movement you want to make it
independent now for blink
what blink is going to do is make
everything else disappear in its same
group whenever it happens so I've got
only the pupil and I've all showing up
in my left eye group but if I had other
things in here like glasses or a monocle
or an eyepatch or something like that
those would also disappear so if you
don't want things to disappear when you
blink you want to put it outside of the
group the blink is in so that's why I
have my eyebrows outside of my eyes
because I don't want them to disappear
so now let's work on some eyebrows so
I'm going to click the plus right
eyebrow and that's independent because
I do the eyebrow I don't want it to move
and warp the rest of the body in the
face so I'll click on right eyebrow and
go to my little rectangle tool over here
the fill is black that looks good I'm
just going to drag one eyebrow for the
right eyebrow and another one for the
left eyebrow okay so let's move on to
the nose and to make that I'm just going
to make more of a free-form triangle so
I'm actually going to go over here to
the polygamy lasso tool and click that
and with no selected I'm just going to
draw and click click click and then
connect it right here and let's go to
the paint bucket tool over here and I'm
going to select a color the foreground
color right here which is currently kind
of disoriented color in cinema change
that to black click OK and then paint by
clicking inside that that little
triangle so that's looking pretty good
and I might move them use the move tool
up here to kind of move it into a
different place if I want that can be
selected by pressing command D on mac or
control-d on Windows so ok we're
starting to get there now the mouth if I
open up the mouth I'll see I've got all
these different blank possibilities for
the mouth the way that lip sync works in
character animator is as I'm talking
character animators listening for
60-plus different sounds ah all that
stuff and it's going to translate it
into a particular mouth shape so when
character animator here is an ah sound
it's going to show the AH mouth shape
when it hears a mmm sound it'll show em
and because it's a blank I'm not seeing
anything obviously now if it doesn't
hear anything it's going to look at the
webcam and it's going to look for a
neutral face so if nothing is happening
and you're not doing anything neutral is
what and 99% of the time neutral is what
you'll see if you include things called
smile and surprise then when you smile
you'll see this layer and when you look
surprised when you open your mouth wide
you will see a surprise thing and note
these only show up if there's no other
sound happening so these 3 or webcam
based sounds of mouth shapes and the red
our microphone based sound shapes now
creating a compelling mouth is a pretty
difficult thing to do it can be very
time-consuming to line everything up
correctly and get everything right and
it's going to take a lot of time to make
sure you know I don't know what it s
mouth shape looks like I mean it's if I
do that myself I kind of have biting my
lower lip but if I'm not that good at
you know drawing that and lining it up
with everything else that can be
problematic
so actually the best way to get started
with the mouth is to borrow a mouth from
another example character and I think
that's what I'm going to do today okay
so let's go to file open and then
there's another file you can download
called template mouth PSD and this is a
just basic you know pretty good-looking
mouth that you can use for your own
character so I'm just going to click
open here and so I've got my whole mouth
here and all the different shapes and
all I have to do is notice I've got my
two tabs open here my template mouth and
my template blank so with template mouth
I'm just going to select the mouth group
and I'm just going to drag it all the
way over to this tab over here until
that opens up template blank on the drag
down to right about where I want the
mouth to be and I'm going to let go and
now I've got a mouth now it's a little
big and it's also in the wrong place
because I have a mouth inside my mouth
folder so I'm going to take this mouth
and drag it out until I see the line
right under the nose and now I've got my
my imported mouth folder so let's select
mouth the other the second map that I
already had and delete that because I
don't need that anymore and now I've got
all my different mouths so if I want to
see when a mouth looks like I can tap
toggle that now this is way too big so
actually I'm going to turn on a few of
these just to get a general sense of
what they look like and I'm going to use
the Move tool over here to just move
them into place and then I'm going to
use free transform so the best way to do
that is go to edit free transform and
that brings up these little bounding
boxes that you can track so I'm going to
hold down shift again to constrain the
dragging and dude right about there is
probably
good size and then I will click a little
check up here to say yes that's exactly
what I want
and now let's toggle all these off
except neutral and yeah that's looking
pretty good right there
so I'll kind of put all of them on just
to make sure none of them are going to
go off of the face but this is looking
pretty good right now so I've added the
eyebrows the nose and the mouth that's
enough I think to warn to save and go
back to character animator so when I go
back to character animator all my edits
have synced up and everything looks at
all the new stuff that I've added and as
you can see the character now has
eyebrows that move and a nose and a
mouth that is actually updating as I'm
talking and so it also does the smile
when I smile and also does a surprised
face
so this is looking pretty good now this
is really the basics of an expressive
face I've got eyebrows eyes nose mouth
and now we can add more details on top
of this to give it a little bit more
character and personality all right so
let's add a few more details just to add
a little bit more character to this face
on with the body group selected with the
body layer selected I should say I'm
going to go to my shapes and rounded
rectangle tool I'm going to change the
radius to sound like 50 pixels something
like that and then I'm going to click
and drag and get kind of a torso or
shirt I'll do the move tool again just
to move it in place to something like
that so now I've got artwork in every
single blank layer that the template
came with which is great so now I've
kind of filled in all the blanks and I
can add some additional details now if I
wanted to so for example I want to give
this guy some ears so I'm going to click
on face background I'm going to create a
new layer by click on this new layer
icon down here in the bottom right now
it's going to call this ear and let's go
to our circle our ellipse tool and just
draw out a little circle ear type thing
by dragging and I don't want it to be
black so let's go to our fill color and
to get it to be the same color as the
face I'm going to click on the
little color thing here and then just
bring the eyedropper tool over to and
click on the color that you want to
change to your so if I want to be black
I could do that but I'm going to click
on the face instead and click OK and
that's going to change it to that sort
of thing now I want my ear to be a
little bit darker actually to give it a
little more depth so let's just drag
this down something like that and there
will be a slightly different color and
then I can move it behind just by
dragging it behind the face background
to make it appear like it's showing up
behind the face now I'm going to press
command J that's controlled J on Windows
and that'll make a copy and I can just
drag this ear over on the other side
just to duplicate it and save myself
from having to draw it again ok so now
let's give this guy some hair and I'm
going to use this as an example to show
how physics can work to add secondary
animations to your character within
character animator so let's do kind of
the same technique that we used for the
nose to create kind of this free-form
triangle shape for the hair so I'm going
to select the face background click on a
new layer that I want to show up on top
of the face go back to the Polly gonna
lasso tool here and I'm just going to
click and do a little hair strand so
click click click and close it up and
now I've got the little marching ants
that this dotted line thing that's
showing up and I'll go over to my hair
let's give this guy kind of a reddish
hair I'll do this kind of color and
again I just got here by clicking this
little square the foreground color right
here I'm going to go to my paint bucket
tool and I'm going to click into there
to give him some red hair and I'll press
command D to deselect it or control D on
Windows so let's just call this hair I
just pressed enter on the name and just
call it hair and so I'm going to
duplicate this a few different times to
give him a few different strands of hair
but to make something with physics we
want to make it independent just like we
did with the pupils and the eyebrows so
I'm going to click on this and make sure
to name it plus hair and that's going to
give it that crown icon when it's
imported into character animator so now
this duplicate
a few times by pressing command J on
Macs s ctrl J on Windows and I'll put in
a few different places here something
like that I'll just kind of line them up
a little bit so something like that so
these are my three strands of hair that
I want to animate and have physics that
work with them and by the way I'm just
right-clicking to find when I'm overtop
of something I'll right-click it to see
what exactly I'm going for to select a
particular layer you could of course
select them here or this auto select
thing up here which you might have
enabled will automatically select things
as you click them so it all depends on
how you want I learned before auto
select was what's the thing so this is I
typically use the right
right-click thing that it's totally up
to you so now it's got these three hair
strands but I'm actually going to add
some additional hair around the rest of
it by creating another new layer going
back to the polygamy lasso tool and just
adding kind of a background hair and so
this hair is not going to have physics
associated with it but I'm just doing
this behind the the other hair and just
kind of dragging and clicking to where I
think the hair would would show up and
I'll do the same thing take the paint
bucket tool and fill it in and there you
go
so it's a little blocky not as good as I
would want if I spend a lot of time on
this but it's it's okay
so I'm just going to call that hair BG
and we've got a basic character now so
all right I'm just going to move a few
things around here but overall I'm
liking how this is looking so let's save
this command s on Mac ctrl s on Windows
and go back into character animator okay
so back in character animator I can see
my guy talking to moving but a couple
things to note number one I can't see a
shirt because the shirt is black and the
background is black so I can change the
background actually by clicking on this
little square down here for background
color and changing that to something
like white I've also got transparency
options as well but okay this guy's
looking pretty good but notice as I turn
his whole body is turning as opposed to
just the head turning and the body
seemed more stationary which is probably
what I want and also the hair isn't
doesn't have any physics associated with
it yet so let's go back to rig mode and
try to fix some of these issues so the
first thing with the body selected I'm
going to add these things called handles
handles are invisible data points to
teach character animator about what to
do with a particular part so with body
selected I'll go down to the pin tool
down here in this by selecting that and
then click in one corner and click in
the other corner that's going to pin
down the body and keep it fixed in place
a fixed handle means basically like
putting a nail in it just keep it down
in this particular position so going
back to record mode now you'll notice as
I move and turn just the head is moving
and the body is kind of morphing a
little bit to match it but overall it's
if staying in place so this looks more
like what I would want now for the hair
go back to rig mode and remember I had
Plus hair and then I made two copies of
it and because I called it plus it added
the little crown icons over here next to
it now there's a few things we want to
do with with the hair and I'm going to
show the head as an example to start
with this so the head you'll notice it
has the thing in the middle called head
and ssible dotted lines circle and this
is the origin point basically this is
where character animator is saying where
this thing begins and where it's going
to rotate around
typically though you don't want a head
to rotate from the middle you actually
want it to pivot and rotate from the
neck so I'm going to drag it all the way
down here to the bottom where the neck
is and I'm going to do the same thing
for the hair because I would not want
the hair to rotate from the middle I
wanted to rotate from you know being
rooted into the head so I'm gonna do the
same thing select every hair group and
drag that origin point down to where
where it would be connected to the head
and that's looking pretty good and then
to add the actual physics I have to add
this thing called a dangle handle so I'm
going to go down here to this little
pendulum looking thing and I'm going to
add a Dingle handle right at where the
tip of the hair is so the way I think
about this the most is
imagine if you're adding a little metal
ball to where you want gravity to be
affecting a particular piece so imagine
this is really what gravity is going to
be pushing and pulling and affecting the
most and so for the hair I want that to
be the tips of where the hair would be
so I'm going to do the same thing for
each piece of hair my three pieces and
that's looking pretty good
so let's go back to record mode and now
as I move around the hair is going to
move a little bit now it's not swaying
as much as I'd like so what I'm going to
do is go to dangle twirl that down in
the behaviors and I'm going to change
spring stiffness to something like 25
and now as I move notice it's really
starting to sway and have a little
bounce to it
25 might be too much maybe 50 is a
little bit better so you get the idea
you could add earrings or a necklace or
hoodie strings or other things to your
character to give them a little bit of
extra life a little bit of extra physics
to them and this is just an easy way to
do it make it an independent piece with
the plus symbol or the crown icon and
then add change where the origin point
is and then add the dangle handle to it
one other thing you probably want to do
with your character is change some of
the face parameters to make it match the
you know the personality of your
character and how you want your
performance to go so if I go down to my
behaviors and twirl down face down here
I'll see a bunch of different parameters
so one thing I always do is head scale
strength this is how much the head can
go back and forth as you move your head
I usually will change this to zero and
that'll just keep it flat on kind of a
flat plane and that's kind of nice
secondly I will you know I can affect
kind of the tilt so that might be too
much tilt so I might bring that down to
something less so as I told it doesn't
tilt as much and same with head position
if I want you know not to move as far
left to right so you can make the
character feel less warp II you know
moving and morphing all over the place
if you really tweak these parameters to
your particular character and artwork
all right so we're going to stop there
for today of course there's so much more
you can do in character animator but
this is the basic foundation making a
simple face you can build on top of this
and add things like keyboard triggers
cycle layers drag
people hands the walk behavior all sorts
of things that you'll see in other video
tutorials on this channel so now that
you've got that foundation you can check
out some of those other tutorials and
build on top of this basic character but
hopefully this has been helpful and if
you have any questions or run into any
issues throughout this process your
characters not looking right or
something went wrong or I said something
that didn't make any sense the best
place to get a get help from that is the
official character animator forums here
where myself or other people from the
team will be able to help you out and
answer your questions and get you up and
running but that's it for today so thank
you so much for watching and have fun