The head turner behavior and face
parallax settings are two ways that you can add
some additional dimensionality to your characters. So
in this tutorial I'm going to go through both of those techniques and show you
exactly how to apply them to a character like this. Now this is a character I made
in Adobe Illustrator... pretty simple, just some basic shapes and
some shadows and stuff like that. So if I add the head turner behavior to
this guy, when I turn to the left and right in the webcam,
he's going to turn his head as well. And I have variety over if I want a quarter view, profile view, front view, or I can move in
between them automatically and adjust the
sensitivity to match whatever i'm doing in the webcam. Alright,
so compare that to this technique which is using parallax
to move different elements around and give the character a little bit
smoother 360 movement. It's kind of a fake 3D / 2.5D look for the character
where it's hair, the nose, the ears - all of that stuff - the
shadow - all these things are moving in unison to kind of fake a 3d effect
even though this is all just 2d Illustrator artwork. So both of
these puppets are free for anyone to download the link is in the video
description below so check that out and feel free to take
them apart learn from them customize them, do whatever you want with them.
all right so let's start with the basic character
like this. he's just got this one head-on view. he's set up normally as
as any character would with a plus character
group and a head and body group inside of it and inside
the head i've got all the head contents and inside the body
i've got the body contents. so i could do this in photoshop or illustrator - today
i'm in adobe illustrator, that's what this character was made in.
and what i'm going to do first is make a new group
inside my head so i'm going to have my head selected here i'm going to click
this plus create new layer and let's just
call this plus frontal. and i'm going to drag that
plus frontal into my head so it's a layer inside the head and then
i'm going to select shift select all of these other contents
and drag them inside my frontal view. so now i have a
front view. this is going to be the first of five views that i'm going to create.
i'm going to create a left and right quarter views and left
and right profile views. now when you're thinking of doing head
turns you really want to think of everything as a bunch of
different parts. so the more that you can have you know these
separate pieces that you can move around and manipulate
and the less that they're kind of linked
together the better because then you can move
all these different things at different speeds at different scales
um and and you know skew things a little bit to work and have that sense of
dimensionality individually as opposed to trying to do
everything at the same time if everything is connected as one piece
of artwork or one layer that's going to make things a lot more
complicated so if i hide a bunch of these layers you'll see this is kind of
my base layer right this is everything um
everything is going to kind of work on top of this this part
is not going to move i'm going to keep this section exactly the way it is but
then as you see as i add these different
parts to it all of these are going to be the different pieces
that move around and give us that feeling that sensation
that the head is moving from side to side all i'm doing is i'm going to move
these different parts you know to the left or to the right
slightly to get that sense of movement all right so now that i've
got frontal all set i'm going to start making another view
and the way i'm going to do that is basically duplicate my already
established view that i have and then start manipulating the individual pieces
as best i can so i'm just going to hold down option on mac or alt
on windows and click and drag frontal until i see a blue line that appears
underneath it and then i'll let go and now i have a
copy of my original group so the first thing i'm going to do is
let's turn the visibility off on my main frontal group and
lock that i don't need that anymore and i'm going to change the name by double
clicking this new copy and call this instead left
quarter so this is kind of an in between we have front
quarter and profile views that you can go between and quarter is kind of
the middle uh route between those two so inside this left quarter view i have all
my working elements my eyebrows my eyes my nose all these should be set up the
exact same and should work the exact same as being
in the front view the only difference is now i want the character to kind of turn
uh this way it kind of turned to show their left cheek a little bit more when
you're saying left corner and left profile um it means
you're seeing more of that that side of the face so i'm going to
see more of the left side of the face which means the character is actually
going to turn this way to the left side of the screen
or this character's right it can get kind of confusing sometimes trying to
figure out all the left right stuff so don't worry if you have to look at some
references and and figure it out okay but the way that i normally start things
off is i'm going to take the main face
elements and the way i'm going to select them in illustrator
is using these circles over here on the side that's an easy way to select them
instead of trying to select everything individually on the canvas
these circles help a lot so i'm going to select
the eyebrows i'm going to hold down shift and select right eyebrow left
eyebrow my left eye and right eye my nose and my
mouth so now all of these elements are
selected and i'm going to move them all at basically the same rate to begin
with i might make a few adjustments later on
but for now i'm going to move them all by holding down shift and pressing an
arrow key and i'm going to press it about five times i think so i'm going to
press hold down shift and press left one two
three four five okay so all these elements now are moving to this side at
the basic same rate now a lot of times i like to move the
nose a little bit more give it a little bit more dimensionality
that's just the way that i'm doing things but you can kind of play around
with these and see what works best for you another
immediate step that i'll take is i don't want the eyes kind of
still staring straight on if i'm turning i probably want the pupils to be
looking more towards the side so i'm going to select both those pupils
and move them over so this is kind of their new
central location and and yeah i can fine-tune this a little bit later and
make you know specific eyeballs for for each one but
um for now kind of the quick and dirty method
this works well all right so what else do we have happening here well i
probably want the hair to move over as well so i'm going to
kind of move that over a few maybe not five maybe like three or four
or something like that uh shift and arrow keys just to move it
over slightly um and then i want this little tuft of
hair these little tufts of hair in the back
i think i want those to go the opposite direction number one because i'm kind of
running out of room over here right but number two i want to kind of give
this sense of dimensionality and if you had you know these tufts of
hair in the back um you you'd kind of it when you're
moving your head those are going to feel like
they're going in the opposite direction and we're going to do the same thing
with the ears in a little bit so i'm actually going to hold down shift
and tap the right arrow for this a few times to get it to move
like that i'm going to take these two ones in the
front and move these slightly to the left here something like that and then
the sideburns i'm going to kind of drag these and make this a little
skinnier because i don't want to see as much of it
and then this sideburn i'm going to drag out a little bit more and adjust it
slightly so i'm seeing a little bit more of that
as well now this ear is going to show up in front now i don't want it always
hiding behind the head so i'm going to bring this to the front
so let's see which ear this is this is uh this ear down here so i'm just going
to drag this group and make sure it's kind of in
front of the rest of the hair and then drag it over so it's kind of
moved now a skipped layer order it's kind of gone
in front and this is again going to give that illusion
of flipping around and then finally i'm going to take this ear
on the other side and just kind of move that to the side i'm still going to see
a little hint of it but i want to give that sense of it
moving um to the other side okay so a really quick way to kind of
judge how we're doing so far is to just turn the visibility on and
off with the frontal view so let's try that
so something like that so that's looking pretty good to me um
you know i'm getting that basic sense of turning i might make a few adjustments
based on what i'm seeing here um you know for example this feels like
it it's moving up a little bit more and i might want it
to you know rotate and be a little bit more down that feels
like it would turn a little more this feels like it's a little too close
i might move that up a little bit so just a little adjustments i just am
continually playing with this back and forth
to see how it looks and see if it's working the right way
and overall yeah this is looking this is looking all right to me this is a pretty
good pretty good start all right cool so now
i'm ready to move on to the next one so i'm going to hold down
option on left quarter uh or alt on pc click and drag that
and now i have a new one let's lock left quarter so that's out of the way
and let's call this plus left profile all right so now we have left quarter as
our starting point instead of frontal i'm going to move things over a little
bit more there so let's do the same thing we did before i'm going to shift
select all of these different elements and then
move them over one two three four five something like that and i'm going
to completely get rid of this ear i don't need that anymore i'm going to get
rid of the sideburn that's out of the way now that would be
out of the view i'm going to extend this a little bit more the sideburn make that
look a little bit better um drag that up select this drag it up a
little bit something like that move the ear over
one two three four five something like that now a certain point you've got to
decide if you want your hair to stay all in the same direction or eventually do a
flip in this case i do think i want it to
flip to the other side so i'm going to do something like this where i
hold down option or on mac or alt on pc while i drag this and change the
orientation and i'm just going to drag this and
basically flip it to the other side now i'm hoping that i'm going to do this
fast enough that that flip will seem smooth
um the biggest thing i have to say is you want to keep everything
on the same plane horizontal plane so if i move this and then i'm moving it you
know down and up and all of that it's going
to look really jarring um it's going to be very clear
to tell where that transition is so i like to keep everything on the same
horizontal plane at least these big pieces
and then small pieces like this hair that's on the contour uh in the front in
the back that's okay to move around a little bit but
um these big pieces i think you want to keep kind of keep it in definitely for
the facial features keep them on the same horizontal plane
now we've got that back tuft of hair as well so i'm going
to reverse flip that around and bring it over here so
that's also been part of this flip transition that's
going to appear over here something like that
and again i'm going to do the thing with the eyes where i'm going to move the
pupils so they're looking more towards the side
something like that now you know if you were really turning
your head the eyes are not going to keep this exact same shape and size the
entire time they're going to feel like they get
a little skinnier a little narrower right as they kind of go around the
contours of the face so a lot of times what i'll do is select
those elements so in this case the right eye and eyebrow and i'm just going to
take them and skew them slightly like this something like that
where they feel like they're kind of losing um their shape a little bit
they're kind of getting a little bit narrower and that's just going to help
sell that effect a lot better i'm going to do the same
thing for the mouth down here i'm holding down option or on mac or alt
on windows while i do this just to make
that a little bit skinnier as well it's a very subtle thing but
it's really going to help sell that effect
of the eye is kind of trying to go around the corner right
now what exactly is a quarter viewer profile view is completely up to you so
yeah this is not a true profile view if i really wanted to do that
let's just go ahead and get rid of this uh the right eye
and eyebrow and let's move the nose all the way to the edge
um let's take the mouth and do something like this i'd probably add a clipping
mask to it or something i'd bring my left eyes over like this
i'd move the hair so it's completely you know on the side here
maybe this tuft would completely disappear um
you know i could do all this manipulation but
it's really how extreme do you want your head views to be
and you know in a lot of cartoons we're not really seeing a full profile view a
lot of times it's more of a three-quarter view you want to see more
of the characters features to get that additional expressiveness so
this is certainly an option and you can definitely go this way
i would say for my characters um i usually don't do this i'm going to do
more of the three-quarters view and not make the head turns
so extreme um you know the changes between um the frontal and quarter views
for example now are it's a little more subtle it's not
as extreme as you know a pole like like this where it goes from you know
that to there you know that's quite a big leap from here to there and it might
look a little uh chunky and stilted and that's not what
i'm going for i want things to look a little bit smoother between the
different views so again completely up to you how you do it
but this is the way that i'm doing it so basically keep doing this until you have
all your different views and so you would do the exact same thing that i did
for the left for the right and so by the end of this
you're going to have a bunch of different views i like to put
them in the order of visibility where it's going from all
from one side to the next so i start with profile
quarter front quarter profile and that just lets me really easily move back
between my different views to see how they're all looking um and
and it's just an easier setup i feel like if you're
setting up triggers or setting up your artwork
to kind of you know guide between the different views all right so import my
character into character animator i should be able to see all the different
views here and if i've done them correctly when you select on
them you should see them tagged down here in this panel correctly
so let's just see profile right quarter frontal
left quarter left profile you want to make sure all of your things are tagged
correctly so you so the head turner behavior will
work if you do not see these lit up it's not going to work correctly so make
sure that's set up and then all i have to do is go up here to my main
top level character i'm going to click the plus button next to behaviors and
i'm just going to go down to the head turner behavior and click on
that and if i've done it correctly under head
turner each view should have a little one next to it of every view that you
have now you can also make up and down views
i did not do that for this character um i find that's a little strained to
you know straining to leave your head up and down and i i
don't like it as much as the horizontal views but you can totally do
that and there's some example puppets out there
if you want to see how that's done in real life but for me i'm just kind of
sticking with these five views i mean it's totally up to you how many
of these views you use we've seen puppets that only use you know
a frontal right corner and right profile view where they only turn in one
direction or they only have frontal and the left
quarter and right quarter or you know whatever combination of these you want
um it's just make sure whatever you're doing over here it has a one
next to each uh tagged element all right so this is all set up correctly
now when i turn my head in the webcam my character is going to turn
his head as well you can adjust the sensitivity
um by opening this up and changing the sensitivity so a lower sensitivity
like 25 that's not going to trigger the next few
until you really move your head to the side right
so that's going to be a little bit more chunky you probably don't want to do it
that way on the other you know side of things if
i change this to 300 percent then it's going to be really fluid and
it's almost you know too much let's do even 600 and move back and
forth and i'm not even seeing the in between
there's so little um you know movement there so play
around with this it's really going to depend on what you like and what what
works for you um typically i like a value around like
150 or something like that that's pretty good that's not going to
give me you know too many false movements back and forth but it gives me
enough speed that when i change from my different views
it looks nice and fast i feel like the number one
most amateur thing that we see with the head turner behavior is when you have a
character like this and it just kind of really slowly move
between the different views if you look in a typical traditional
animation that's not how head turns are done
they're typically done really quickly right they move between these different
views quickly and you don't really notice
those in between frames but they are there to give that sense
of a transition from moving to one side to the next
so play around with the values and see what works best for you
in terms of what's going to give you that nice fast
head movement and not really that you know really
chunky frame by frame look now another thing you could do is actually add
triggers to these so i've got this character set up in the example file you
can see this as well where all of these different views are
in a swap set trigger so if i turn head turner off entirely
and i just press buttons instead one two three four
five now i've got triggered control over the head turns
and this could make it a lot easier during the recording process
so let's say i you know press record here and i start the countdown
and then i'm going to you know do something like this where i press
two one and then i do two three four five
and then when i go back to the recording and let's
zoom into our timeline by pressing the plus button over here i can see
all of where those transitions are happening and if i want them to be a lot
faster i can adjust those you know however i
want so this might be the easiest way when
you're recording is instead of doing the webcam
based triggers uh the webcam based head turner is to just do it through triggers
and then you've got a lot more control even after recording
to decide how quickly those head turns are going to happen and where they're
going to happen all right so that was the head turner
approach now let's take an a look at the parallax approach and the first thing
you'll notice is i don't have a bunch of views inside my head group anymore i
don't have quarter profile front all of that stuff
it's just the same stuff as would normally be inside a head group it's
just i've made everything a bunch of
independent parts so i've got my spiky hair my back tuff
my front tops this shadow which i'm gonna add a clipping
mask to later clippy masks do not unfortunately carry over from
illustrator to character animators so i'm gonna do that manually
um in a later step that's why he's got this giant transparent uh
shape in front of him right now but what i basically want to do
is be able to move all of these elements separately inside character animator and
have full control over them so when they move around um i'm going to
be able to control the rate that they're moving and
really give that sense of parallax and that includes the shadow
and the ears and the hair and all of that stuff
so basically the more that you can separate your character into these
little parts uh independent parts the better
and i actually simplified the character design for this so
the original character had sideburns on the side and that felt like that was
gonna be a little bit tricky when the character turned their head
to kind of show and hide those sideburns moving in and out of the side of the
head now there's ways to do that you can play
around with clipping masks and some other things to
show or hide those i didn't want to get into that for this tutorial so
i just decided to let it be and simplify the character but
um just think about that as you're designing your character if this is the
direction that you want to go in all right so if i bring this character
in by default i'm not seeing any parallax at all happening and i'm still
seeing this black square on the side of his head as well
so what i'm going to do is start to play around with the parallax
behavior of parameter inside the face behavior over here
first thing i'm going to turn um head tilt head scale strength down to zero
um that's set to 25 i'm gonna change that to zero
the reason for that is if you have head tilt straight ahead scale strength up
you can run into parts that are moving back and forth as you move your head in
and out and that doesn't look really good particularly when you're trying to
make them all move at the same rate so i'm going
for everything that i add a face behavior to i'm going
to make sure that's set to zero if i'm dealing with parallax
next down here i've got parallax strength this is going to affect the
eyebrows the eyes the nose and the mouth by
default this is set to 100 it doesn't do a lot but if i crank this
up to something like you know 760 now look what happens when i move my
head left and right all of those elements are moving
at the same time with me and the nose is moving a little bit faster
than the eyes and the mouth to kind of give that sense of dimension
so this is just same automatically that you can do with any puppet
um but the problem is it's going to feel very floaty and tacked on right now
because the hair the ears everything the shadow
nothing else is moving at the same time and so it's just going
to feel like this is all you know floating over top of static
artwork in the background so to really sell the effect we have to
have all these different parts moving as well and okay the way
we're going to do that is kind of a hack you know it'd be great if there was
actually a parallax behavior to do all of this with and maybe we'll do
that eventually but for now this process seems to work pretty well
what i'm going to do is kind of brute force my way
into adding uh head tags and face behaviors to all of these different
parts so i have individual control over each of them so
just like you know this root level puppet here
gets all these behaviors added to it right eye gaze face
physics all of that so one of those is the face behavior and that's looking for
the thing that's tagged his head which in this case is this head
group and that gets tagged as a head here so what i'm actually
going to do is take all the things that aren't affected by parallax that i want
to move so that includes spike hair back tuft front tufts ear
ear 2 inside my background i've got shadow mask here
i'm going to select all of these and i'm going to do two things to them
number one i'm going to tag all of them as
extra heads so all of these so my character has one two three four
five six plus the original seven heads now he's a seven headed monster
and the second thing i'm going to do is with these still all selected
i'm going to go down to behaviors click the plus and
go to the face behavior to add a face behavior to all of them
and that's going to add this little icon to the side of them and you can select
each of these and adjust where their origin is that's where they're going to
kind of move and rotate from so typically
with the hair i probably want to do that where it's connected
to the to the body um with the ears i might move that
a little bit closer to the edges here and with the shadow
i think that's pretty good by itself why i'm here with the shadow i might as well
just do the clipping mask treatment so i've got my shadow mask
here i've got this shape of the head underneath it so all i
have to do is select my shadow mask go to puppet create clipping mask and
that is going to just mask that shape to only uh
when it overlays basically when it goes over top of the shape below it so now i
got rid of that annoying square on the side there and i
just will see the shadow here and that means i can move it
left and right um with the face to really sell that parallax effect
all right so coming back to record mode i can see that some things are starting
to move around the shadow the ears the hair up top there's
a little bit of movement it's not moving the right way all the
time and some things are curving in weird directions and tilting so we
need to do a little bit of surgery here to get this character working correctly
so you'll notice at the bottom here now i have all these different face
behaviors that have been added and luckily it says the name of what
each one is so i have a better sense of uh you know what i'm working with so
let's start with the spike hair at the top for example this
these three tufts of hair that are in the front here i'm gonna do
three things at the beginning here i'm going to change head scale strength
to zero i'm gonna change head tilt strength to zero
and i'm gonna change parallax strength to zero basically
the main thing i worry about with parallax when i'm doing this sort of
treatment is head position strength so right now
the you know the hair is moving like that now i could kind of
exaggerate this by moving that head position strength up
or i can make this smaller by moving that head position strength
down so you can kind of play around with each of these values
and see what works best for you 100 is looking
okay to me there's sometimes where it gets off like that and so i'd have to
kind of play around with that so maybe you know a 90 or something like that
might be a little bit better but basically when i'm rigging this
stuff i'm just moving my head left and right giving my neck a workout
here while i'm trying to see what looks what looks okay and the
reason i change tilt strength down to zero is because
when you add a lot of extra tilt it's going to add that tilt over top
of your head tilt that you're already doing and you probably only want
one thing tilting at a time you can add a little bit of tilt i guess if you want
the hair to sway a little bit but for me most of the time i'm going to set
that to zero and just worry about that position strength instead so let's
keep on going with each of these i'll go with the front tuffs here
i'm going to do the same thing 0 0 0 for the scale strength the tilt
strength and the parallax strength and let's move to head position strength
looks like this isn't moving a lot so i'm going to up this a little
bit so it does have a little bit more movement that i'm talking about these
little two triangles in the front here and that looks a little bit better okay
that's looking good all right now for the back tuft of hair let's do the same
thing of head scale to zero tilt to zero
parallax to zero and for this one i think i want that tough to actually
move the opposite direction right we were talking about this with the head
turner where you want to kind of get that sense
of dimensionality so what you can do with head position strength that's
pretty cool is you can do negative values so if i do
negative 100 see how that's kind of moving behind the
hair now there's a little bit i might have to move some stuff around because
i noticed you can kind of see it peeking behind that and
this is just something you have to play around with and position elements just
right so i might actually go back to the illustrator file
or move it in character animator so it aligns a little bit better
but that's going to really help sell that that sense of dimensionality if i
do negative 200 you'll see it just a little bit better where it's
going to be moving like that so play around with it these negative
values think about what's going to be moving what you want moving one way with
that face and what you want moving the other way
with the face okay so the shadow had that weird tilt thing going on that's
going to go away when i change a head tilt strength to
zero parallax to zero and that's going to
look a little bit better that shadow is moving a little bit too
much that feels a little bit too extreme to me
so i'm probably going to change that to something like i don't know 40.
let's see if that looks a little bit better yeah that looks okay
um i'm constantly going back and forth between these different behaviors so if
i change one thing i'm like oh you know the hair
now that's moving too fast or that's moving too slow um so it is a constant
back and forth with how these things work now the ears
are interesting because the ears you always kind of want them going the
opposite way of your face right so if i'm looking this way
this ear is going this way and this ear is going this way right they're always
going the opposite way that my face is looking so that means
for both of the ears let's change these values to zero again and what i'm
going to do is set both of them to negative values so let's do that
and then let's change the ear head position strength to something like
negative 300 let's see how that looks and negative 300 up here for this ear
so now as i move around the ears are moving in the opposite direction now
that looks a little bit too extended that's a little too much so let's try
saying like negative 150 for both of these you're going to want
them to both be the same value that looks a little bit better if i go
too extreme they're going to kind of go off the edge there
but overall that's looking alright so yeah after playing around with things a
little bit you get a pretty nice effect moving around now
character animator having to simultaneously run all these face
behaviors at the same time these seven or eight phase behaviors
that can run into some issues where you might run into performance problems so
like if you're going to do this for every individual strand of hair
and you have someone with long hair and you know there's like 20 face behaviors
it's going to run really really slow right so unless you have a beast of a
machine you might want to consider scaling
things back so that's why i have you know these three hair
things instead of in the front instead the spiky hair
instead of them being three individual face behaviors and tagged as heads
i just have them as one uh you know one piece
and so it's just something to help optimize if you see your character
running a little bit slow depending on the age of your machine you
may want to kind of optimize it and group things together if they're moving
at the exact same rate now yeah you can run into situations where when
you go too far outside the range of parallax you're gonna get you know
things floating off the side and you know weird weird things like that
that's okay as long as i feel like as long as this
this basic you know movement here is all right i think you're all right
and you can always scale things back by your main face behavior
if you turn down head position strength or head tilt strength
that's going to limit how much your head can tilt and move back and forth
and uh you know you so you can play around with that if you don't want
these floating elements off um personally i'm okay with it i know kind
of my range and all if i'm recording slime or doing same
live i know i'm not going to go too far in an extreme and even if i do
it's it's kind of funny when it happens anyway so it's it's okay
all right so which of these should you use for your own characters really it's
up to you and it's really a stylistic choice um some people like
the kind of frame by frame nature of the head turner on on the left here
more than the smoother uh feeling of parallax whereas
parallax some people prefer that as well so it's really uh dependent on
you and how much you're willing to dig into it right so
um you know i think head turner is probably the
uh the more inclusive one for more character designs
because um it's just easier to you you're drawing each view and you have
full control over what each view looks like um and
when you get into things like the triggers like i showed and stuff like
that you've got a lot of control over how fast or how slow that's
happening that being said parallax is really nice just adds you
know that that nice three-dimensional feel to a character
and feels a lot smoother and a lot of people
who do the head turner say hey how can i make this look smoother
and then they see parallax and they say oh wait i wish i had done that so
um don't just take my word for it though and and you know just these two examples
there are a ton of head turner and parallax examples out
there i wrote a list of them in the video description below with
links on how to check them all out so you can see how other artists and
some of our other example puppets have used these techniques to bring some
of their characters to life and hopefully that will help you make
your decision so hopefully that was a good quick look into the world of
head turning and parallax we would love to see
you use these techniques so please use character animator
when sharing on social media so myself and the rest of the team can check out
all of your great work and if you have any questions if anything here didn't
make sense or you're running into problems or
you know the views aren't triggering or the mouth isn't working in the left
profile view or your parallax eye is moving into another
dimension or whatever the best place to get help is the
official character animator forums that's it for today thank you so much
for watching and have fun
