Cartoon Workflow Tips (Adobe Character Animator and After Effects Tutorial)

Hey everyone this is Dave from the Adobe character  animator team and for a while I've been working on an animated cartoon series called consoles  and when the first one came out I did a huge two-hour tutorial called the complete cartoon  workflow which I highly recommend checking out if you haven't already it goes through my  whole process of making rigging multiple characters recording them bringing them all into  after effects to composite them all together but now I've made a few more of tho

se and with  everyone I've made uh comments come in like asking how I did a specific technique or are  there additional things I've learned as I've done this more and more more efficient ways  to to get through things or better workflow or tips and tricks that might help with other  Productions and so that's what I've done I've compiled a top 10 list of the things that I think  I've learned over the past couple of cartoons using character animator and after effects and  um that's what I'm going

to share today so if that sounds good to you let's get started adding  little interactions between your characters and the environments they're in will help them feel  more like they're actually inhabiting the world so for example in the beginning of consoles  episode 3 when PlayStation is opening this drawer he kind of motions his hands in front of  it and it kind of flips open like this this is a really simple six frame animation but it sells the  effect and it goes quickly enough that it feel

s like he really is opening the door and this was  really easy to set up in the original Photoshop file I just had this door that shows up above the  snacks and then I would duplicate it and then say go up to uh edit transform skew and then that's  going to give you this little bounding box but the nice thing is you can really just take the  edges and skew this however you want and so I might make this come a little bit more in and out  as if it were you know kind of coming towards me and there

you go that's one extra frame that I  would probably call that two and then it would keep going uh so on and so forth so I've got one  two three at a certain point I flip over to four five six for it to be open and then in After  Effects I just give one frame for each part of the animation and because this happens so  quickly it just looks like a door very quickly opening it gives the scene a little bit of depth  it connects the character to the background it makes this world feel a little bit m

ore lived in  sometimes you can find shortcuts for the way that your characters are behaving so for example when  PlayStation first comes in in this intro scene he's kind of walking in and then opens up that  door but in character animator you could add a walk animation to a character to allow them to  do that but I felt like I really didn't need that for just this really simple you know two or  three second walk so all I did was instead uh make keyframes in After Effects of the character just 

going up and down so you see I've connected this care character to a null layer those are one of  those invisible layers that I talk about in other tutorials and all I'm doing with this is moving it  up and down so I have it moved down a little bit and up and down and up all I'm doing is keyframes  where I'm changing the position slightly and moving it back and forth and then I'm just kind of  moving him to the to the side as well I actually have this null connected to another null that is  can

doing the left to right movement so this null layer is taking care of the up and down movement  so it's going you know up and down and then this one is connected to null 4 and because of that  this one is moving left to right at the same time so this allows me to kind of focus on these  two individual things and just move my character with a nice little hop side to side without having  to do the full rigging of a walk animation when I find little shortcuts like this that you know save  me a litt

le bit of time and not having the reg a character for one space specific purpose because  this character's legs are hidden behind the counter I don't need to show that and I do this  several times with other close-up shots for the other characters as well it's just a nice little  thing that saves me a little bit of extra time in character animator we call our characters  puppets and yeah all the characters in this cartoon are individual puppets Xbox PlayStation  and switch but the snack division

wizard machine which is kind of uh the whole point of the plot  of the third episode is actually a puppet too now it's not a traditional puppet I'm not doing  any head tracking or eye movements or anything like that but it does have the blinking light  treatment and a few other things so if I go into rig mode here I can see actually I removed all the  behaviors from this uh thing so if I click on plus there's this remove all behaviors thing down here  I ended up doing that this started as a Pho

toshop I will actually started in Adobe Fresco I drew it  and I brought into Photoshop did a little bit more organizing and the only thing that I really had  to interact here are the lights so I have a group called lights and in here I have three different  groups of lights that I've added in here so the first group here lights up like this and I've set  it a linear Dodge add blending mode to make those look like they're glowing and then it Cycles to  the next one and the next one the only thing

I did here in the lights uh the main group that holds  all three of these layers is I added down here the cycle layers behavior and that is going to  allow me to determine how fast these lights move so I'm just going to turn them all on and here I  can see that I start immediately I'm moving from top to bottom and I'm advancing every 47 frames  why 47 I don't know I just picked it out of thin air and just tried it and see you know saw what  it looked like and all the robots actually have differ

ent things so you know one might move at 32  frames every 32 frames another might be 62 frames something like that to make the lights always  feel like they're flashing on and off this is something I do for um also the lights in the city  and the intro and the ending a lot of different parts like that and it's happening continuously  so this is just something to think about are there elements that you could kind of automate in  your animation instead of having to keyframe this in After Effects o

r you know anything like that I  just have this kind of running on its own time and it's just an extra element that I can add into my  scene when I'm starting a story it can feel really overwhelming to add extra characters into the mix  if it's a artender or a background pedestrian or something like that making a new character just  feels very overwhelming particularly for something that's only going to be seen for a few seconds so  when I'm creating extra characters I try to come up with some s

hortcuts thinking about how they're  going to be used and the parts that I need and I don't need so this Knight type character that's  meant to represent from software video games like Elden ring shows up at the end for like five  seconds he has basically one throwaway line and that's it so I probably spend a total of maybe two  three hours on this character it really wasn't a lot I drew him out in Fresco um just quick sketch  uh broke things into layers as much as I possibly could so I could ha

ve a little bit more control  when I wanted it later and then when I brought it into character animator I basically did the bare  minimum I needed to make the character work this arm for example holding the sword it's gonna stay  still it is not going to move I didn't need to add any rigging for that I did know that I wanted the  character to put its arm up and show this Rune and this separate finger for the joke at the end so in  that one I did have to rig this and do lanaike and all of that no

rmal stuff for the mouth I just  added a jaw and just had that move up and down instead of doing a whole lip sync set or anything  like that and that I also added a little bit of dangle to some of the hair in the background so  hopefully this character still feels Lively and dynamic enough that it's interesting to show up at  the end you know I've got some hair movement I've got the jaw movement and I have the arm that can  move back and forth and when I press the one key for the trigger that's

how the uh the Rune and the  severed fingers show up so these are like three or four things that I'm adding to the character  oh and the lights of course blinking like I just showed as well to to add some stuff there this  is not perfect there's a bunch more I could do I mean imagine if I added some head turns or uh some  additional arm movement over here or glimmering of the sword I don't have time for that I don't want  to do that for a five second throwaway gag at the end of the the episode t

he landlord character  was another character that I did pretty quickly sketched it out in Fresco kept all the layers and  uh separate and then just did some really basic stuff for expressiveness so I have a standard  Mouse set that I got from the CH resources a website where you can get free mouth sets and  blank templates and all of that and because of that if I press one I can have her be happy now  I ended up not even using this she's not happy in the entire thing so she's only has the sad mo

uth  set and then I did a bunch of different eyebrow positions so we have her being uh you know a  little bit angrier and having kind of these slightly raised eyebrows and then both raised  up at the same time that's it those are the only additional triggers I had and then I really turned  down the head movement um to be pretty pretty uh subtle as she moved back and forth because she's  a big arcade machine I didn't want it to move that much so the bottom line is think about your script  think a

bout what you need and know what you can cut back on I know this character doesn't need  a torso you know below the Torso it doesn't need legs I know I don't need this arm to be rigged  I know I don't need a full mouth set or eyes for this character think about what you can get away  with and save yourself a little bit of time in the complete cartoon workflow video I talked about  how adding Shadows behind your characters will help add make them feel like they're actually  living in this world i

n this scene and add a little more depth to your compositions so this is  you know this is nice and easy as the characters are moving around these Shadows appear behind  them basically I just duplicate the dynamic linked file I put it behind the character offset a  little bit change the color to be black and add a little bit of blur to it and this adds that lace  little thing but notice here uh the character is sitting on the couch and I want the wall to feel  like it's farther behind the charac

ter and so in this case notice PlayStation's head he's got a  shadow behind him here on the couch but not on the wall so so how do you do something like this well  let's do it for Xbox over here so here's Xbox is a shadow layer I have that selected I'm going to  go up here to the pin tool and I'm just going to add a really simple mask where I want it to show  up so let's just do shape like this really crude and now notice what's happened now the shadow is  only showing up and inside the masked a

rea and not showing up behind the character and so now  as I go through this scene it's going to feel like the character is on this couch but that the  wall is going to be a little bit further behind it really subtle detail that probably you don't  notice but it's a nice little effect that helps sell the world a little bit more you might notice  that when you're trying to do a multi-character cartoon and you're bringing all these characters  in from character animator and dynamic linking them in

to After Effects performance can sometimes  take a hit when I move down here you know to see things several scenes later it takes a few seconds  for after effects to think about what's happened and where that next step is and then finally it's  going to shift to that frame when I'm trying to do this over and over again and edit that five or  six seconds may be too long of a performance Hit And depending on your machine if it's an older  machine this can take even longer so right now I've got fiv

e characters in the scene switch  is kind of hidden behind here and they all have shadows as well so basically I have 10 character  animator files that are being linked in Dynamic linked into this after effects file and that is  why this is taking so long if you're running into these kind of performance issues you may find you  have better success and faster performance if you do a ping sequence and wave instead so one of your  export options in a scene is to go to file export ping sequence and

wave and this is basically going  to make a folder that is going to include every frame of your animation as a transparent PNG file  so if you're doing a three or four minute cartoon this is going to take a decent amount of time to  export all these frames out so here we go I've got this PNG sequence of all the different parts  that this character has if I look at the stats for this I is about five gigs worth of data and uh it  is actually 5231 files so that's a decent amount however now I don't

have to wait around for After  Effects and character animator to communicate I know exactly what each frame is going to look like  and this may save me a little bit of time when I'm in the world of After Effects all right so back in  After Effects let's go to file import file we're going to find the first thing in my PNG sequence  here and I'm going to go down here and make sure it's set to PNG sequence it should recognize that  there's a sequence of them here and I'm also going to do create co

mposition as well click OK and now  I've got my character in this sequence and it's going to play back really nice and smoothly and  I know that everything is exactly the frame that I want it to be you're probably going to want to  check your composition settings as well by default it's going to the last I had here 1920x1080 but  you might want to give yourself a little bit more height so your character doesn't get cut off again  this is a scene a composition that we're going to be dragging into

other compositions to kind of  put everything together I also definitely don't want this frame rate to default to the 30. this  cartoon was done in 24 frames per second so refer back to how your character how you did things  in character animator and the frame rate you use there and make sure it's the same here for  everything to match up correctly so that looks good I'll hit OK and I probably also want my  audio for my character so let's import that as well file import file find all the way at

  the bottom of your ping sequence you'll find this WAV file I don't want to create a composition  for this I just want my WAV file open it up here it shows up let's drag it into our scene and now  I've got the audio matching with everything else so is this going to make your character easier to  manipulate and play around with and not have a lot of waiting for the dynamic link from character  emitter to after effects to work out now the problem is if I make a change if I wanted this  character

for example to Blink at a different time and I go back to character animator I'm going  to have to re-render that entire ping sequence um but I should just if I save over where the  original position of all those original Pink sequence ping showed up then after effects should  automatically realize that that's a change and it should automatically update so it's one additional  export step I have to do in character animator but it might save me a lot of extra time later in  After Effects remember

that in cartoons it's okay to exaggerate things a little bit so in this case  switch is walking in and he runs into this plant and basically there's this crash and he kind of  Falls over it's kind of just a what is going on moment he's just being silly and he kind of yells  as it happens there's a lot of different things that are going on at the same time to make this  kind of over the top so he walks into it there's this poof animation it's a PNG sequence that I  found from uh game design basi

cally is Sprites that they had for a poof animation a PNG sequence  I also found a royalty-free crash sound effect that I play over top of it this actually sounds  like a car crash and glass shattering but that's okay it just add it feels like there's an impact  and it felt funny and then the characters and the character of switch and the plant I rotate them  in After Effects I take the characters and I just kind of Bounce them out of the way there's a more  subtle bounce for the uh the plant bu

t then switch kind of bounces away and almost off the screen  a little bit um so when you do things like that when there's an impact or kind of a visual gag or  something like this I think it's okay to kind of go over the top and add a bunch of different  things at the same time the sound effect the bounce the poof here of smoke that's showing up  all these things come together to create kind of a funny moment so just think about those types of  instances in your cartoons and uh see where you ca

n add these sorts of things when you're setting  up the environment and world where your show begins or you are transitioning between different  scenes think about those Transitions and those uh establishing shots and how they might work so in  consoles we slowly zoom in at the beginning to this city there's some clouds kind of moving and  notice that there's just kind of this slow zoom in this would be a lot more boring if this was just  a static shot and uh just the clouds were moving but havi

ng a little bit of forward Zoom is going  to make it a little more interesting and then look what happens this kind of slides out of view it  kind of has some motion blur to it and slides out and now we are moving into the first scene and  it's zooming in to start to establish a shot again none of this is static this is not static and this  isn't static I even have this blurred um flower pot in front that's kind of moving out of the way  and I recorded that separately that's just this separate e

lement that I'm just kind of moving at  a pace that I feel looks good there's no like 3D tracking or anything I just moved it scaled it up  and moved it out of the frame and then I'm slowly zooming into my scene here to make it look uh like  it's starting to zoom in like we're just starting to zoom in and see what is actually happening here  the same thing is true later on when we move from the apartment to uh the landlord's office and so  there's several shots that happen here where we start fr

om the apartment then it kind of flips out  of the side I actually have a sound effect like a whoosh sound effect as this moves out of the way  and now the landlord actually starts talking right here so I don't wait to get into the office but  she says okay let me get this straight this is also slowly zooming in just like everything  else and then eventually you get to here and again there's a little bit of a slow zoom out  here as we establish where this new scene is so this is just something t

o think about as you  are transitioning between your different scenes and moving between them think about when the audio  comes in think about zooming in and out this is a really quick thing this probably took me you know  15-20 minutes to draw but that's all it takes to kind of set the scene for where we're going next  and then it transitions in just a simple Zoom is going to help get us into this next scene and  transition us smoothly if you have characters with traditional lip sync like the l

andlord  character the switch in in this cartoon with the mouse shapes changing all the time like this  the new feature compute lip sync from transcript and audio is extremely helpful there's a whole  video tutorial about how to do this but basically um just to show you what's happening behind the  scenes here if I have this wave file selected of her audio and I look over here I have a full  transcript of everything that she's saying and I did this in Premiere Pro it's easy it's free  it's quick

I just broadened the audio file did the transcript and then export out that SRT file  and brought it in here and it's got all my time information and it's looking uh looking great so  then when I'm ready to do my actual lip sync all I have to do is select the character and go to  timeline compute lip sync take from audio and transcript and that's going to make the audio the  lip sync look a lot more connected because now we're not just listening to the audio information  we also know the words

that you actually want the character to say and we can use those to make the  lip sync look even more accurate and that's going to save you a lot of time later on I feel like I  barely had to edit any of the mouse shapes because of this transcript space audio thing so to me it's  a huge Time Saver now sometimes the lip sync and the transcript aren't matching up correctly  character emitter starts to freak out and it gives you this little error message here that says  compute lip sync failed chec

k that the transcript matches the audio well it looks like everything  was working as I thought it would and instead of going in and you know trying to make sure like  what did someone say or where did it mess up um the best thing that I find the easiest way  around this is to go where that Mark is I'm going to press command shift d on Mac or Ctrl shift d  on Windows to duplicate this audio I'm going to move over into where it started picking up again  and I'm going to press command shift d agai

n and now I've just got this audio right here that's  the isolated version of where I don't have my lip sync I still have some audio here but it's not  quite working the way I wanted it to so now I'm just going to turn off the audio of the tracks I'm  not using and now let's just do this section right here I know the transcript isn't going to work so  I'm just going to go back to the old method that's okay because I only have like 10 seconds here that  I'm working with I can work with that I can

edit that if I want to and I'm going to go to timeline  compute lip sync take from scene audio and what did that do it took that section and gave me the  corresponding lip sync below and now I've kind of fixed that 10 second section and I'm ready to move  on so if you do run into errors which might happen particularly for longer stretches of cartoons  where there's these little bumps in the road don't let that get you down just do that quick  duplicate thing uh isolate the section the 5 10 seco

nds whatever it is that's messed up do that uh  repair and you should be ready to go and finally let's end with one of the most common questions  I get which is how big should I make my character or background or scene or whatever and the way  I like to think about it is going backwards so think about what your final resolution is going  to be so so for me I'm working on a 1920 by 1080 standard HD video that's what I'm working with so  I might have certain shots that show you know that are wide

shots that show a lot of this area maybe  it shows both robots in the snack division wizard but then I might also want ones that are close-up  shots and the problem is I don't want to zoom in too far scale up these characters too big to where  they go above 100 scale so for example let's look at Xbox right now he is currently set at 100  scale but as I start to go above 100 percent you're going to start to see little artifacts are  blurring it's not going to look as crisp as it would before and

as I get bigger all these little  details and things it's not looking the way I want it to and that's going to be really apparent in  your video If You scale things up too much so the way around this is I make what we call what I like  to call a magazine so this composition is called magazine and this is just a huge composition  that has everything in it my different props foreground elements characters uh things in front  of them behind them all of that stuff so if I go to my composition settin

gs over here this scene  is 10 000 pixels wide by 5000 pixels tall now that's way bigger than the 1920x1080 video I you  know that I'm eventually going to make but this base is laying this all out now gives me something  that I can work with no matter what scene I want so something I'll try to do is think about what  is my biggest close-up shot what is the biggest that I'm going to want characters and that's what  I'm going to build everything around so I know if this character if Xbox is at a h

undred percent  then I know I want him to be everything else to work around him it's okay if it got smaller if I'm  doing a uh like a wide shot or something like that it's okay if he's like 90 or 80 but I don't want  him to be 110 120 zooming in on him and it's just gonna look a little worse so one thing I'll do  is I will go to layer new solid and make a solid for the size of my eventual uh video so 1920 by  1080. let's do this and let's just call it guide and that's going to create this purple

rectangle  I'm going to move it to the top of everything press t for transparency opacity and change that  to 50. okay so now what I've got is this purple window basically that I can use as a guide to  think about some of my shots so that looks like a pretty good close-up for what Xbox might look  like and that looks like a pretty good close-up for what PlayStation might look like now if I  think he's maybe a little too big I could go to PlayStation and kind of size him down a little bit  more

if I feel like he's going to fit in the frame a little bit better so now I've got this one scene  that I know is going to fit everything that I need for when the characters are in the apartment so  when I need to make a close-up shot for example I'm just going to go find my magazine I'm going  to drag it over top of the other uh composition to create a new composition it's called Mega  scene 2 here but let's call this Xbox close up now it's called Xbox close up I have severals  that I've done be

fore but let's call this one you know Xbox close up three for example and then  let's go to composition composition settings and instead of this huge number I'm going to do my  1920 by 1080. what that is going to do is take this scene so this scene is unchanged below here  I'm just changing what kind of view I have of it and now I have my close stuff a close-up  of Xbox here and I know that it's going to work exactly like I wanted to and meanwhile  behind the scenes my mega scene is still doing

everything and so now if I want another scene  let's say I want a close-up of um you know uh Playstation instead I could just duplicate  this scene and let's call it now uh PS close up and now let's go to uh where that is PS close up  double click that just move it over here boom now I've got another scene and that can either export  each of these out as their own videos and then edit them in something like Premiere Pro or if  you're crazy like me you could actually do some of your editing in Af

ter Effects itself so I  probably don't recommend this I just kind of like keeping everything in one place but it is  a little messy you're going to get just a ton of layers and I just go from you know okay here's  this one scene this close up here to this other scene I always have you know this one underneath  and then it moves to this different composition and all I'm doing is bringing these compositions  in they're all starting at zero zero and then I just trim to where one takes over and the

other  one ends or begins and all of that so that's the main takeaway make a scene that's big enough  for whatever your eventual closest shot would be create this little temporary guide to show what  your close-ups will look like and you'll know what that is and then create your scene clean  and just keep creating comps and everything will look great when it's at a hundred percent and  you're gonna get a really nice looking end product helpful to you uh every time I do a new cartoon  I'm always

learning new things uh I'm watching a lot of video tutorials myself learning how to  do different tips and tricks and techniques and hopefully every cartoon just gets a little bit  better not just better in the overall quality and end product but I've become more efficient in  my workflow and I find those shortcuts that help me save a little bit of time while still getting  a great end result so if you make anything using this tutorial or anything with character anime  we would love to see it s

o please use hashtag character animator on social media when you're  sharing it so myself and the rest of the team can check it out and if you run into any troubles  with anything that I've shown here or any other questions that you might have about character  animator After Effects Photoshop Fresco all the different parts of the ecosystem the best  place to get help is the official character animator forums alright that's it for today  thanks so much for watching and have fun