Creating An Illustrator Puppet (Adobe Character Animator Tutorial)

Hey everyone this is Dave from the Adobe character animator team and in today's tutorial we're going to walk through creating a character animator puppet using Adobe Illustrator we're gonna start with a blank template character that has a lot of layers that are called replace and we're gonna replace that artwork with our own custom artwork to come up with something unique now I'm creating a human female style character but I'll talk about you know creating a robot or animal or whatever type of character you want along the way so my hope is that by the end of this if you walk through this step-by-step with your own copy of illustrator and character animator open by the end of the hour so that this takes you will have your own custom created puppet if that sounds good to you keep watching let's get started all right let's get started so when you first open up character animator the first screen you should see is this start workspace if you don't see this you can go to your top workspace bar and just click start and that will take you back here now we've got a lot of template puppets you can play around with but for today we're gonna start with a blank template character and that's found by clicking see more over here in the upper right so go ahead and click on that and that's going to open up our additional free example puppets page this is also available at Adobe comm slash go slash CH examples you'll scroll down a little bit until you find this character called blank and this is a very simple character a human character with Photoshop and illustrator versions so we're just gonna click download here that's going to take us to a Creative Cloud file link just click the download icon up here and it will start your download and now once you click that you should see a zip file that has two things inside it blink illustrator puppet and blank Photoshop puppet puppet file is basically a glorified zip file that has two things in it first the master art works or your master illustrator or Photoshop or whatever type of art file you're using and then the additional character animator rigging on top of that so it's basically combining the animation and the drawing portions of your character and putting them together in one file so all I'm gonna do is double click this puppet and that is going to import them into character animator so a immediately I should be able to see my webcam and my microphone working up here if I double-click on my face or click set rest pose that will get the face tracking working and then I can move around and look around with my eyes talk move my eyebrows blink and I can drag the hands with my mouse or fingers on a touch enable device so here's the thing we're starting with a blank template style character and I prefer starting with this method as opposed to just starting from scratch the problem is starting from scratch is you're gonna run into undoubtedly run into some problems right you're gonna forget to put your pupil inside your eye group or your head is going to be inside your body or someplace the structure and the file names and all that stuff there's a lot the character animator has very specific with naming and organization and if you're off by just one small thing sometimes it can throw your whole character off so for me I prefer to have a basic working skeleton that I see ok this is working this you know has all the parts and then I can add on build on top of this now if this is your first time in character animator just to get to lay the lands a little bit I'm going to click this little color icon that will change the background so I think a white background it's going to look best for this character let us see all the features of them you can also zoom in and out with this little zoom tool down here I usually just set it as fit and that should be fine if you want your scene to be a different size just single click the scene over here and then that will bring up the scene properties and so you could change your frame rate your width your height to whatever you want the default is 24 frames per second 1920 by 1080 and then instead of selecting your scene if you select your character down here in the timeline that's going to show all of their properties and that includes the transform behavior so if I want my character to be bigger or smaller or change their you know position somewhere change the rotation all of these you can do here as well just by dragging over these or typing in a number of value when you've changed something from the initial default it's going to get illuminated a little bit and show this little X next to it if I click that X again it's going to go back to whatever the default value for this puppet is so you can experiment and play around with it and if you don't like how things are looking just click that X and there go back to normal so right now by default we are in record mode and what we're seeing is what we call a scene a scene is basically a stage with one or more puppets inside of it so here in my project panel I see two things that were added when I double clicked on that dot puppet file I have my initial character blank so that's this character right here and then the scene that they're in which is basically this rectangle this world that they're living inside so but right now I'm in record mode and this is where everybody record a performance or you know do some other things in here but right now I want to go to rig mode and this is how I set up my character to prepare for animation the way I would do that is to double click on my main character up here this little thing with a pawn icon and that takes me into rig mode now that this is opened I can go back and forth in the workspace bar - between record and rig mode up here so rig mode is essentially in the x-ray view into our character it is showing us all the layers over here but then you also get some additional information like right elbow in these these weird lines and these green circles and all this stuff we're gonna go over this a little bit later but all you need to know is this is the extra information that character animator needs to know to animate things so for example everything is inside a group called head right here now because this is called head this is named HEA D that is getting tagged as a head over here which means when I go to record mode and move my head around anything inside this group is also going to move with my head so this is why it's helpful to have this structure already set up everything should be tagged and set up in a great way and then what we're going to do is go into each of these and wherever there's a layer that's called replace we can replace that with our own custom artwork so we're kind of using this as some scaffolding and we're going to build our own custom style on top of it okay so let's dig into Illustrator and start customizing this guy a little bit so I'm going to select blank illustrator here single click it and then go to edit edit original and that's going to open up our character in Adobe Illustrator so this is the actual master artwork file that we're going to be customizing and doing things with now depending on your layout your verse of Illustrator might look a little different from mine that's okay I am currently using the essentials classic workspace so if you want to try some of these different ones feel free yours might look a little different but for the purposes of this tutorial on this stay in essentials classic alright so I think the best way to go through this is just lets go top to bottom through this character and all the different parts and we'll talk about each section and how to customize it number one you always want your character the artwork inside this this layer called plus and then your character's name so plus Charlie Plus banana pants plus blank whatever you want and then you will put your other layers inside of this so in this case I ninety percent the time you see a character it's gonna look exactly like this plus the character's name and then a head and body inside of it now the order is important right so if the head is in front of the body when I drag the hands around they're gonna go behind the head because in the layer order that's the way that this works if I wanted it to be different I could drag the body on top of the head and have it work that way and then the arms if I move them would show up in front of the face as well now here I've got the neck that's supposed to be hiding behind the head so that doesn't work very well so I'm just gonna undo that but you have some options there but the basic idea 90% of the time I see it in exactly this order head and body so let's twirl open the head and I see that I just have a bunch of parts my mouth eyebrows eyes nose background face all of that stuff so let's take a look at the first part here at the mouth the mouth is a set of several different mouth shapes that are gonna automatically show up when I say certain words so for example when I say ah that's the mouth that's gonna show up when I say mmm that's the mouth that's gonna show up and when I say this is the mouth that's gonna show up I could change this all to whatever I want so if I want my own mouth to be you know slightly bigger or have a green tongue or anything like that I could do that now you can go in here if you know what you're doing you can go into these shapes and customize them however you want so if I go into my mouth here and say okay you know what I want to make this I'm just double clicking this a few times I'm gonna make the tongue a green shape and green color instead so let's just do that this telling it looks like it's two different parts so I'm gonna select this one and do something like that um you know if you know your way around illustrator and you know your way around making custom mouth shapes I would say go for it but for a lot of us when I was first getting started with character animator I had no idea what I was doing right and creating eleven mouth shapes or so right from the get-go that's a really big task and I want to focus more on the other parts of my character my other parts of style I can always come back and add my own style to the mouse but I feel like starting out go with a template Mouse set like this or one you found from another puppet or something like that because creating a really good mouth set is gonna take you know um several hours at least to get everything lining up and looking good so for now I'm just gonna undo these steps I'm gonna keep the mouth as is and I think we're gonna stay like that now the cool thing about this character is not only does he have a regular mouth but he also has a sad mouth and the sad mouth let's get rid of our main mouth here the sad mouth is basically everything from above the same mouth shapes but it now also has upside-down versions of everything so you know it's looking a little bit a little bit sadder overall so the US and the Oz and stuff like that have a little more of a downward turn this is gonna give your character a little more expressiveness and dynamic range so by default I think it's nice to have a happy mouth and a sad mouth you know you never know what situations your character is gonna get into right so having a couple of options they are good now you'll notice this mouth actually has two states to it it has you know this initial state and then a second state this is what we call a cycle layers animation an inside character animator this is a two frame animation so whenever I trigger an uh sound is going to show this first and then it's going to drop down and open the mouth a little bit more you've got several of these I think the mouth and the Wu mouth actually has three different cycles and then the AH mouth as well has these so the reason for this is just to add a little bit of additional fluidity to the mouth it's going to have them feel like they're the jaw is dropping a little bit or the mouth is puckering out for the whoosh ape it just adds to the animation quality a little bit more don't have to do this in fact most of these are just you know one layer the M shape is just a single line and that's okay you know if you look at different puppets you'll see some people do this for every single mouth shape and some people don't do it at all so it's a personal stylistic decision but if you're gonna go with these default mouths just know that some of these have a few different States in them all right so enough about the stuff that's already preset we want to start customizing our character and we're gonna start doing that with the eyebrow by the way when I'm moving around here in Illustrator all I'm doing is holding down the spacebar and clicking and dragging to remove around and then I can use my option plus scroll wheel on my mouse to kind of zoom in and out so I can get exactly the view I want you can also use this little zoom tool over here in the corner if you want to okay so if I twirl down my right eyebrow I can see I have a layer here called replace so the right eyebrow is actually this eyebrow right here it's not the right side of the screen it's the character's right size so this character is facing us and this would be his right eyebrow his right pupil his right eye all of that stuff so you know I could manipulate this if I wanted to see these little handles that are over here I could you know drag over top of one of these and then if I go to a corner I get a rotation control and I could rotate it so I can customize this just by kind of dragging and refining the existing shape now I could also go and say you know what I'm going to use this rectangle tool over here and let's change that to be a fill color of black and a stroke of nothing's so so when you're talking that illustrator when you make a shape here when I just drag and make a shape it's looking for what a fill color is and what the stroke is so if I double click on either of these I'm going to get some options and in this case I'm going to make a you know let's say a blue square with a red stroke if I wanted that stroke to be bigger I could go over to my stroke tab over here and change the stroke width to whatever I want a lot of times you don't want a stroke though and in the case of this eyebrow I don't want a stroke so I'm gonna make sure my stroke is selected is the one showing up here first and I'm going to click the none down here when it has to slash through it that means it's not going to have a stroke at all all right so let's go back to our layers over here and make sure I'm inside my right eyebrow that looks good and I see my rectangle is inside here if it wasn't if it was like you know out here or something like that all I have to do is drag it over top of my eyebrow and it's going to show up in there and then let's resize this square to be something like this and then I would you know maybe make this double click this make this black something like that I could delete this other eyebrow and do something along those lines so you can customize this to whatever type of shape you want for me um because I'm making a this is going to be a female character and I'm pretty happy with how it was looking originally I'm just gonna undo through a bunch of steps and make this just a little bit longer and up here a little bit and I think that looks pretty good for these purposes I'm gonna do the same thing for the left eyebrow I'm just gonna go into there bring it out a little bit rotate it up a little bit and make sure they're about the same you can always press command C command F or that's control C control F on Windows and then that would allow you to copy it in place and then you could move this around you know you could manipulate and bring it the other way so you've got a few different options for moving different things around but for me this was a quick fix this works pretty well so take a little time and play around with what you want your eyebrows to look like when you're done they should look like this your replace layers should be you know containing whatever artwork you want your left one should be the one on this side and your right one should be the one over on this side alright so now that that's done let's twirl these up and move on to the eyes aka the thing that people break the most in character animator I would say at least 50% to 75% of the time the questions that I see people having are about their pupils going outside their eyeballs so something like that there you know they blink and their whole head disappears so that's one of the benefits of having this template character is that these eyes are set up in a way that is working is is going to look okay so I can go as detailed or as simple as I want if I like how these eyes are looking I could just you know click them double click here say okay I want them to be you know a dark green instead and do the same for this this other one so let's do like a in a dark green so that's one way to do it now I'm guess a lot of you are gonna want to kind of create your own eyes so let's go ahead and do that I'm actually gonna select each of these elements and delete them and by doing that I'm gonna have all the parts all the layers named correctly but they're not gonna have any artwork inside them you'll notice there's one more thing in each of these group called left blink and right blink um these are hidden by default these are the blink States so I'm just gonna select these as well and press Delete on each of them okay so if you've done that your left eye and you're right I should both be completely blank but they should have the correct structure left blink lid left pupil and eyeball all right so let's start with the eyeball layer this should be pretty self-explanatory we're just gonna make a circle so I'm going to select the ellipse tool I'm gonna make it probably want it to be white in the middle and I'm going to just click and drag and do something like let's say fat okay so now my eyeball layer should have this ellipse inside of it and that is looking pretty good to me in fact it's looking so good I'm going to copy and put it on my other eyeball so I'm just gonna select this I'm gonna press command C to copy it and then I'm gonna go selected my right eye eyeball layer I'm gonna press command shift V that is going to and that's control shift V on Windows that's gonna paste it basically in place and now I'm just gonna hold down shift and the left arrow key to move it over to this side so all I did was copy the eyeball from up here and paste it into my right eye down here because I probably want my eyes to be basically the same all right next up let's go for the pupil so I'm gonna select the pupil layer over here I'm gonna do the same thing select my ellipse tool this time I think I don't want to stroke for this but I do want him to have a certain colored eyes so let's make it like a dark green something like that click OK and then let's just drag and create a pupil something like that I'm gonna by default I usually put this in the middle of the eye you can't put the more offset like that and that's a stylistic decision but for the purposes of making this as simple as possible I'm going to keep them just staring straight at everybody I'm going to click the layers tab to make sure I put that in the right place yes I did so let's do the exact same thing as we did last time select our ellipse over here press command-c and then go down to the pupil down here layer down here in the right eye and command shift V or that's control shift V on Windows and then shift and left arrow to bring it over to the other side and put it in the middle like that okay so far so good now this next step is not critical you do not need this next part but I feel like it's an extra step that's going to add just like the sad mouth a little bit of extra expressiveness to your character so what I'm going to do is create a slightly lowered eyelid up here that's going to allow me to have both a lowered eyelid look and then a wide-eyed look with a trigger in character animator and we're going to talk about all this in a little bit so I could do this a few different ways I could use the pin tool in Illustrator to try to do the contours of the eye exactly right but for these purposes what I'm going to do is actually select my eyeball and press command-c again to copy it go back to my lid layer and press command shift V control shift V on Windows and that's going to add the eyeball into the ellipse layer so I'm gonna actually create basically cut out part of this eye to only show the top part so to do that I'm just gonna go up here to my rectangle tool on the same selected layer I'm just gonna drag and do it to something like this so it's covering the part that I want to cut out of the eye then holding down shift I'm going to select both of these at the same time so I should have both my ellipse and my rectangle selected then I'm going to go to the Pathfinder tab over here and click this second one - front so this rectangle is in the front so as expected I click this and it's going to get rid of that rectangle and leave me with just this lidded shape so if I go back to my layers now I should see my lid only has this one individual shape inside it not the rectangle not the original circle but this modified shape that I created by subtract a square from this circle so this is a chance for me to think about skin colors so what I can do is select this and if I use the eyedropper tool and select the face it's going to be the exact same color and Stroke actually as the outer ring I don't think I want that actually I think I want a color that might be a little bit maybe a little bit darker so let's try something like this and yeah that looks that looks a little bit better to me so actually I'm going to do that for a bunch of different things right now I'm gonna select the face background use the eyedropper tool and select that to change it to that color as well I'm gonna do the same thing for the ears select an ear use the eyedropper tool and do that your eyedropper tool change the color if I wanted to I could start doing this for the whole character but I'm gonna get to the arms and some of that stuff later so I'll just do the neck right now but you get the idea you can very easily in Illustrator change colors that's one of the strengths of doing it this way is it's really easy to change the stroke or the color or the width or height just by moving things around and things are never going to get pixelated or look bad because it's all vector based it's all just basic numbers behind the scenes when you stretch things it's just making the same stuff a little bit bigger or smaller okay so let's do the same thing we've done every single time take my lid here on select it press command-c to copy it go down to my lid in the right eye command shift V to paste it in place and then shift and the left arrow key to move it over imma try to line it up as best I can and I think that looks pretty good so that leaves us with the final part of the eye which is the blink the blink is what's going to show up whenever you blink your own eyes and what it's actually gonna do is hide everything else that's in the same level acid so when a blink happens it's gonna hide the lid the pupil and the eyeball because these are all at the same hierarchy level as the right blink if the right blink was out here in the body then it would make the whole body disappear so that's why you always want your blink inside your you know your eye layer basically now I have a few different options for what I could do so for a blink a really simple blink I could just rectangles so let's make this a black rectangle let's make the stroke go away let's go back to layers and I could just make a left blink that's something like that what that means is when this blink is going to happen let's troll these up if this blink showed up then it would look like this those other parts would be hidden and this would show up so that's one way to show a closed eye um the way that I normally would do it for a cartoony I like this though is I'm going to take my eyeball yet again I'm gonna come and see it on Mac ctrl C on Windows to copy and then select my left blink layer command shift V to paste it in place use the eyedropper tool and eyedropper it so it's going to be exactly that same color and then all I'm going to do is create a line that goes across so this tool right here the line segment tool and I'm going to hold down shift as I drag and drag it across like that and I can manipulate the stroke by clicking the stroke going up to the stroke and changing it to whatever weight I want but by this 8 pixels looks like I'm keeping that pretty consistent throughout the puppet so I think that looks like a pretty good blink state so the blink actually has two parts to it now it has the line and the ellipse together so what I'm gonna have to do to paste it to the right side is select one hold down shift and select the other and that's going to select both of them at the same time once I do that I'll press command C to copy it command make sure I'm on my right blink now and command shift V to paste it into there and then let's move this over so it covers the whole eye as best we can okay so usually I just turn the visibility off on the blink States so I can see my eyes it doesn't mean they're not gonna show up in the final artwork it just means they're kind of out of my way and I can focus on how my you know whole character looks without their eyes being closed I think this is a pretty good stopping point to check out how things are looking and character animators so take a quick look make sure that your eyes are looking exactly like this and your eyebrows you know are looking however you customize them and then let's save this and go back to character animator so I was last in rig modes who had immediately opened up rig mode and I can see that all my changes have automatically synced in character animator anytime you make a change in Photoshop or illustrator or your original artwork file it's gonna automatically come over and show up in character animator so let's take a look at how this is looking in record mode it's gonna say preparing scene is gonna do the changes and here's my character well overall he's looking pretty good he's got you know some movement in the eyebrows and when I blink he's blinking but I am noticing and the mouse actually looking good as well but I am noticing that my pupils do not seem to be moving around so it looks like when I change something in the artwork this happens sometimes in character emitters sometimes it's stuff we can explain and sometimes there's gremlins in the code and something weird happens and you don't know why exactly something was working and it stopped working we're relatively new products we haven't been around as well along as you know Photoshop and illustrator and all those so give us some time give us a few years we'll get there but for now let's learn how to fix these problems because undoubtedly when you're creating the character you're gonna run into some of these issues and be like well why aren't my pupils moving and have no idea how to solve the problem so let's go back to rig mode and now is a good time to kind of talk about these crown icons over here when something has a crown next to it it means it's independent and what that means is it's going to move on its own without influencing anything else in the puppet so just as an example if I took the independence off of the right eyebrow and left eyebrow let's go back to record mode and see what that looks like not that great as you can see when I move my eyebrows now because they're not independent they are influencing other pieces of the artwork right so this is probably not a look you want I feel bad for this guy's face is kind of deflating and collapsing on itself so instead let's go back to rig mode and turn those back on to make them independent anytime you see that weird warping happening to the face or different parts of your character it probably means that something is influencing something else and it's not independent so you can play around with these and see what works best so I realized I was having problems with the eyes so let's dig into the eye here and I can immediately see that my pupils do not have independence on them and I do want them to be able to move on their own so that's the first thing so a great way to troubleshoot when things aren't working is to select your main character up here so this kind of top-level thing this is your character's name and you'll see all the behaviors associated with the character over here on the right this is basically the brains of your character these are the rules that your character is going to face and how their eyes move how their face moves how their lip sync happens this is kind of the master controls for everything within your character so let's look at I gaze here and twirl it open and I can see you know some different parameters but right here but let's go to handles and twirl that open and one thing I can immediately see is that okay it found a head if found a left I found a right eye but it did not find a left pupil and a right pupil it looks like for some reason those got lost in translation when I change something in the artwork or some like that they somehow got untagged as pupils and that is why there's a zero showing up here on the side so anytime you're not sure about why something is happening you can always twirl it open look in this little handle section and make sure there's a 1 next to everything that you expect to have you know be showing up so if I go back and select my left pupil actually I can see what's happening now so the problem is for some reason it got missed tagged only as left pupil size it also needs to be tagged as a pupil not just the size so actually I'm going to click the X here to remove this tag I'm gonna do the same thing on this other pupil I'm just gonna retag them basically so let's select my left pupil artwork here go over to this little stick figure figure dude over here you can change to text based tags if you wanted to but I'm a more of a visual learner so I like this a little better and I'm gonna select the pupil right here in the middle and you'll notice now this has been tagged as left pupil and left pupil size so these are two tags that are very helpful for the pupil movement let's do the exact same thing to the right pupil select that select tag it as a right pupil and right pupil size and now I'm guessing if I go back to this mode and look around with my pupils now it looks like they are following my own eye movements and if I went back to rig mode and looked in that I gazed behavior let's select my top character here looking I gaze now I see a 1 next to left pupil and right pupil all right so now I actually have the basics of a you know moving talking character right his eyes are looking around or her eyes it's gonna eventually be a female character trust me you know the eyebrows are moving up and down the eye movement and all of these are parameters that you can adjust so actually if I dig into the face behavior down here I can change like how much the eyebrows tilt so if I made it go up a little more I could do that make it a little bit more of a worried look I liked it better the first way if I wanted to be slanted down and make them angrier when they go down I could do that I could change the eyebrows strength so what I recommend is play around with some of these see what looks best for the fluidity of your character how much you want the head to tilt the eyes to move all of this stuff you can play around with all of these parameters and see what looks best for your character all right now I probably do not want to keep my character bald I'd probably want to add some hair or a hat or something like that on top so let's go back into illustrator and try to add some additional details so you always have the option of adding additional details to your character don't feel like you have to fall into all of these sections and if it doesn't fit one of these then you're in trouble no I can with my nose selected I could click create a new layer that's gonna create a new layer above it and then I'm gonna use this as my hair group so let's call this I'm just double clicking it to rename it call it hair and press Enter now when I think of creating a hair asset and character animator on that create kind of a base layer something that's gonna say static behind the scenes and I'm gonna create several strands of hair that come out of that then I'm gonna be able to actually move and sway around and have some physics to them so the more I can separate things into parts the better if you ever want to get serious with illustrator one of the things you just have to learn is the pin tool and so I'm going to kind of create a free-form shape with this let's change this to be a black fill shape and a no stroke is fine and I'm just gonna like click around here and I'm gonna click and drag I'm going to hold down option on this Bezier handle to move it up like this and then let's move it down here all I'm really doing is clicking different things and I'm adjusting where the next curve is going to be by holding an option on Mac or alt on PC and then dragging this handle to kind of move in different directions so let's do something like this that looks like a pretty good curve and actually I'm just gonna go something like over here click and drag move it over a little bit let's move up like this and let's bring it down like this feel free to practice with the pin tool there is a lot of exploration you can do with it but overall this is a you know decent start to how my character is going to look all right so let's create another sub layer inside here and I just click this new create new sub layer so that's gonna create a layer inside this other layer and now I'm gonna start creating some strands of hair for this female character so right now she kind of looks more like a guy right but when I add the longer hair I think it's gonna look a little bit better so again with my pin tool selected and my new sub layer selected I'm just going to click and make me something like this click and then I'm gonna click again and basically close the loop but I'm gonna drag this a little bit to give it a little more volume so something like that looks pretty good so now I have a strand of hair I'm gonna move it in a little bit so I can see the ears a little bit more and I want it to kind of overlap with my base hair up here and then have a little bit of dangle down here this is the part that's gonna swish back and forth a little bit so that's a good first strand let's make another layer by clicking the new layer icon and I'll make a strand on the other side so let's do the exact same thing I'm gonna click here click down here to about the same height as the other and then click to close the loop and drag it out a little bit to create a little bit of volume and I can of course manipulate the shape a little bit if I want it to be thicker or longer or whatever if I wanted the hair to be really long I could select both of them and move it down like that but for this character I like how this is looking I think I'm also gonna give her a few bangs in the front so I'm just going to click a new layer three more times and to create three more shapes again with the pin tool so little triangles so with my top one here selected I'm gonna do click click click and then close the loop like that let's select my next layer and go to click click click and close it there and then my final one I'm gonna make this a little bit smaller click click click then I might go to my selection tool and kind of move these a little bit closer together so they feel like they're all in the same general area let's move them all kind of over to the right a little bit more again I want them to overlap with my base layer a little bit so I have an anchor point for them and you'll see why that's important when we start adding physics to each of these elements so to help me identify my layers that I want to add physics to in character animator I'm gonna call each of these strand so then I'll know anything with strand in the title when I go back to character animator is something I want to add physics to so call it whatever you want it doesn't matter just call it something that you will recognize when you bring it back into character animator all right now for this character I think I want some hair that's going to show up behind her as well behind her face basically and happened in the background so I'm just going to let's just create a new layer here and it's gonna show up over top of her right now but that's ok I'm just going to use the pin tool again select down here made me make it come up a little bit and curve and down here click click and click so now she has this hair that's showing up in front of her face but that's not what I want I'm actually going to drag it so it shows up underneath the face background and then this looks a little bit better so now I've got this element that's behind everything and I can of course widen it or do whatever I want with it you know I've got a few different options there I'm going to also call this a strand of hair because I want physics to affect this one as well and I could keep going on you know I've seen characters that have you know 30 different strands of hair they're basically their whole hair is a bunch of different elements and then they all move in unison so this is a really simple start um for a character but feel free to experiment and try adding as many of these as you want but for now I like how this one's looking for our particular character so I'm going to just press command s to save or ctrl s on Windows and go back to character animator alright so by default we're looking pretty good it looks like all the hair changes have come forward but you'll notice by default it's just stayin static it's like they put 200 gallons of hairspray in here it's not moving at all so to add a little physics we're gonna have to do some additional rigging in rig mode so let's go over to rig and anything you want physics to effect you're gonna want to make independent so I'm just gonna troll up these eyes here I'm going to make sure that the hair group and the Strand down here are all independent and then inside my hair group all of these different strands everything except that base layer I'm going to want to be independent as well okay I'm gonna get a closer look here so when you're moving around in character animator you can click the little hand tool down here that's gonna allow you to pan around you can also shortcut to this by holding down the spacebar key and that's gonna allow you to do the same when you want to zoom in you can hold down option or alt option on Mac alt on PC and then use your scroll wheel to zoom in and out you can also click the scroll wheel down if you have that functionality to be able to drag around and move as well and you've got a zoom tool over here in the lower right as well so let's just get here and drag to our character so we can see them a little bit better with all their different hair pieces all right so let's just select a strand of hair here and you'll notice that some weird stuff is happening here right we've got a yellow pizza-pie piece here a blue rectangle around it and then this green dotted line that seems to be doing something so what the heck is going on here well you don't have to worry too much about this basically blue is the overall you know kind of width and height of the artwork itself yellow is the contour going around the edges of the artwork and then this circle this little dotted line is the origin this is where the basically the rotation boy at the anchor point where this thing originates from for physics elements we actually want the origin to be where it's anchored so in this case when you think of hair hair is anchored at kind of the root so as I click and drag this notice when it goes over top of the hair over here that is going to turn green and there's this base layer and that means it's found a valid attach point it's found some artwork for me to attach to so I'm gonna let go and now this is going to be attached so I'm going to repeat this process for each of these different strands drag this up here do this strand I'm dragging them all to where I think the root would be so in this case it's probably up here and in this case it's up here and for the back hair I think it would be all the way up here alright so let's start adding some physics to these so I'm gonna select my first strand of hair I'm gonna go down here to the dangle tool see this little pendulum looking thing if I click on that and with my strands selected click on the opposite end of where the origin is so let's say imagine a little this being a little metal ball this is where you want gravity to be pulling down on this element so I'm gonna do the exact same thing for this strand of hair and this one and this one and this one and the final strand down here now you can actually add multiple dangle points if you wanted to normally I just do one but in some cases you might want a couple of them alright so now we finally have a little bit of movement right so as I'm moving my head back and forth I can see the bangs are moving back the little strands on the side and even the hair in the back is kind of rotating and moving around a little bit so this is looking exactly like I want now I want the hair to be maybe a little bit longer so if I go into my own physics behavior let's twirl that open throw open Dingle I can play around with stiffness so if I bring the stiffness really far down you'll see the hair is going all sorts of crazy and this looks terrible because the hair in the back is kind of showing up in front of the body I would probably want it to be behind the body in the case of wanting you know a more fully realized character but for now I'm just gonna keep it like this that's okay so let's bring the stiffness up a little bit maybe to something like I don't know 75 or something like that that's looking pretty good that's got a little bit of movement you never want to have too much movement to be distracting but never you know too little so it looks too stiff so I like it when it's a little bit subtle and it helps give a little bit of extra personality to your character so you can play around with this you can play around with gravity direction you know if you want here to move in a you know certain direction you can play with that play we grab these strengths if you want to kind of have an underwater style look there's a ton of parameters in here you can play with but the stiffness one is the main one that I focus on when particularly when I'm dealing with hair I actually feel like I want the hair to be a little bit fuller so I'm going to go back to illustrator so I'm gonna make some adjustments you know I feel like this kind of Cleopatra back of the the hair thing isn't working so I'm gonna get rid of that and instead I'm just going to you know just to leave that and make some little spikes coming down like this I think that's gonna look a little bit better for this character so this is a constant thing I do is I'll try something I think it looks okay in Illustrator and then I come back into character animator and when I play around with it it's you know there's something wrong with it so I feel like you know you'll have a little bit of this back and forth trying to get things looking exactly as best you can so you can see this is a very iterative process right I am going back and forth with character animator seen how things work and then deciding you know what I'm going to add a few more details some freckles a hair clip make the pupils slightly bigger and blue eyelashes on the side you know you can keep adding small details and then coming back to character animator and seeing how everything feels when it's all put together now unfortunately every once in a while you run into a situation where things are going to not sync up correctly because of some you know obscure change you made or smoothing something around you come back to character animator and for some reason your pupils look like this so sometimes you know with with certain changes and behaviors and things character mater can't quite reconcile everything that's happening but luckily it's pretty easy to fix so if I run into a situation like this where my pupils are out of my eyeballs for some reason I could just right-click on any layer and go to reset layer and that's going to try to reset it back to its original position so I can do that for both of these pupils and then it should be okay you also have the options up here you can either drag it around the canvas or I prefer to have a little more precision with the X&Y controls over here so if I had to manually move it back to a particular position I could do it up there so unfortunately it's something that sometimes Vin's but i don't want you to be lost and wonder exactly how to fix it either do that right click reset and or do XY positioning to get it back into place now notice the reset also got rid of independence for these layers so I want to make sure that I add that back on as well alright so with that I am pretty happy with how my character is looking overall I feel like she's got the dangle she's got her mouth her eyebrows are looking good or pupils are moving around good blink state the face is honestly the most important part of a character so I would say spend the most time on this section you want your care to be as expressive and feel as inviting as possible so spend the time that's necessary here and then when you finally feel like you've you've done it and and you can't go any further and you've added all the freckles or details or whatever then you can move on to the body and by the way I've shown a human character here but I don't want you to feel like you're constrained to this style and this kind of shape of a character there's no reason why I can't just start you know deleting things here and say you know I want this shape to be a robot head so I'm gonna make a giant robot head here and let's make it kind of gray something like that and make sure that's in my face background I'm not even gonna have a nose I don't want to nose for this character let's make the eyes actually not even have pupils and let's just make them you know something like this move it over have this one move it over here and I can just keep adding little details here and there a little antennae and maybe I don't even want a traditional mouth like this so for a robot you know a lot of times you might expect like a little hinge or something like that appearing so there's actually a way to do that called The Nutcracker jaw so I'm just gonna really quickly do that to show you an example of how something like that would work so let's make another draw piece like this and we can have it start here and then it'll kind of move up and down basically like this to simulate talking and that's looking okay so I'm gonna go ahead to this new rectangle layer that I created and call it jaw and let's just go and see what this looks like alright coming back to character animator I have my jaw layer here if it didn't get tagged in the auto tagging process you can just tag it here on the little picture let's make that independent because I do want it to move up and down on its own and now by default actually if I go to record mode you should see as I talk the jaws moving a little bit up and down like that so you can see there's a little bit of movement if I go to lip-sync and adjust the jaw movement here in that behavior I'm gonna get more of an up-and-down based on what I'm saying but I can get a smoother version of that if instead I add a new behavior here so let's go to our behaviors column with jaws selected click plus and then go to nutcracker jaw that is going to add a special behavior specifically for this jaw movement and now you'll notice as I'm talking as I'm moving my jaw up and down the jaw is doing the same thing I probably want to actually reduce this jaw movement and lip-sync to 0 so the only jaw movement I've getting is now done by this Nutcracker jaw behavior down here and I've got control over the camera flabbiness and auto flabbiness basically how sensitive this is to my own a camera jaw movements as well as the audio how how loud things are and how much that influences it so this is a really quick and dumb example but I just wanted to show that this same template is extremely versatile it doesn't matter what you put into it you know it's still going to work you're still get the eyebrows and blinks and mouth movements whatever you want I could add dangle to that antenna and have it kind of moving around so the possibilities are kind of endless whatever type of creature or character whatever sort of animal whatever you want to make there's a way to do it and if you just follow this basic guide and setup you should get pretty great results alright so I feel like I'm done with the head now I'm going to twirl that up and let's move on to the body so we see my body's divided into a few parts I'm going to start actually with the torso and pants area the the right arm and the left arm each have different hand positions and there's a little more complication there so let's just start with you know the basic structure so I think for this character I'm probably going to leave just her her lower half and I'm going to get rid of the top torso and I might make that on my own so you notice right now the torso just has this little neck part here so all I did was make a little you know with the pin tool a little circle or something like that that will show up behind the head and kind of serve as a connection point from the head to the body I usually keep a little bit of extra you know space up here so the head has a has a nice pivot point right here on the body but you can you know kind of do that however you want maybe your character doesn't have a neck it all depends on how you set it up all right but for me inside the torso let's create a sub layer inside there I'm going to move this layer below the neck and let's go to the pin tool let's do a purple color that looks pretty good and I'm just going to kind of drag it like this and create something like this for my torso that didn't look too good that's a little bit better okay and I can always manipulate these points a lot of times I'll go into this direct selection tool and kind of move these in and out to make you know just to just think so in this case I want to be a little bit thinner so I'm just gonna move these in slightly well in here I might as well get the sleeves to look the same so I'm just gonna shift and select both of these use the eyedropper tool over here and just touch the the the torso and that's gonna change them to the same color now I could of course later on delete these sleeves and make them completely different but for now I'm gonna keep it like this they can add a few extra details to the shoes down here too so I'm just creating these little rectangles and rotating them down here in my pants group just to give a little bit of more personality to them and I even changed their color actually too I have to go into isolation mode here because these were created as a group in this original artwork so again if I just go in here you'll see these question marks and like well it doesn't know what color it is because it's a bunch of different colors inside this group so if I double click on here you'll see now I get to the actual artwork I'm now in isolation mode and now I can pick whatever one missile let's do like a darker purple something along those lines that looks okay let's try that yeah that looks okay all right so I'm happy with how the body is looking I'm going to twirl these up and let's focus on the arms now so each arm let's look at the left arm here to start off with so the arm has a few different parts first we have our general arm and in the arm this includes this sleeve and this main arm section here and then I've got a group for a hand and uh notice the hand has several positions inside it default flip and point so a lot of times in cartoons you know characters will have a lot of different hand positions maybe they do a thumbs up or a peace sign or pointing at something or they swap their thumb position based on where their arm is in any given time it's really common for a character to have you know you know 10 15 20 different hand positions depending on how expressive you want them to be so starting with the arm right now this arm is kind of overlapping part of the body and that's where it's going to a pivot from and move around from right now in this new body type that I made I don't really like how the the arms are the sleeve is going directly over top of everything so I'm gonna take my direct selection tool I'm gonna find this part right here at the end of the sleeve and I'm just gonna drag it out a little bit so it doesn't cover up as much while I'm at it I'll just do it with the other one as well so just you you've got manipulation over you know how deep you want this to go I like leaving a little bit of wiggle room because you will run into situations where this is going to start to feel like it peels off of the rest of the body and we're actually gonna fix that later on it's probably gonna happen when we go back to character animator but you don't have to have it you know overlapping so far I can kind of bring things in a little bit here okay so for our hand positions you know basically all I did was create these different hands at with the pin tool and then I just put them below the arm here to make them line up and you can do this you know however you want in various positions but for this character let's say I wanted to add an extra or actually let me just adjust one of these so let's change flip instead of just flipping the the thumb to the other side which all I did was you know copy and paste it and then just manipulate it you know something like that to move it around the correct way but instead let's do something like a thumbs up for this this particular thing so instead of flip I'm gonna call this thumbs up and let's actually delete this layer okay so now let's go back to the pin tool over here and I'm just gonna make actually one of the do is bring a point and I'm just going to make this a little bit less bring down the opacity and this way I have a guide that's gonna allow me to kind of see the the height of the other hands and so I can use that as as a sizing guide as I'm creating this new hand so I'm in my thumbs up category I'm going to use this this tool here the pin tool and I'm just going to do something like this and bring it around here and then bring it back around and up like that maybe okay so let's move this whole thing over a little bit and try to line it up so it looks okay I'm gonna go back to my regular selection tool here tilt it a little bit and bring it out like that so that looks pretty well lined up now to show the fingers here I'm also gonna add let's add an extra sub layer and let's just add some ellipses here dragged out and I'll make a few of these I forget how many fingers she has for I think cartoon characters always have weird sizing but let's see how this looks so command C command F to duplicate that and command C command F yet again to duplicate that and made me resize it a little bit to be smaller and yeah now we've got a thumbs up sign as well now overall this is looking a little bit too big so I'm going to select everything and I'm just gonna bring it down in size a little bit so it fits with it looks a little bit more in line with what the other hands were looking like alright so that's how you would create a custom hand and of course I could add more right I could I can make another layer here and make another hand position you know an open palm fist whatever you want you can keep creating as many of these and I'll show you in a little bit how to trigger them and you know show different ones for now though I'm just gonna keep default as my only hand that's showing up and as usual you can save yourself some time if you're only working with one of these arms you know and you get everything right you can just kind of copy and paste it into the other so if I had this sleeve over here and the right I delete it I press command-c to copy this this part of the arm go back to my right arm command F to paste in this new one and then just I'm gonna hold down option on Mac or alt on PC while I kind of reverse it and get it right about the same size there and let's move that it looks like it went back into the left arm so I'll drag it on top of the right arm and position that exactly like I want so you can save yourself a lot of time just by doing one of these and getting them exactly right and then just reversing it to the other side so coming back to character animator I can see that it looks like the art changes synced up correctly all the colors and shapes and custom stuff I added look like it's coming through there are a few issues though I noticed as I'm dragging the arm the whole arm is kind of swinging around and there's there's this break right there right so I'm gonna want to fix that for sure and there's a few other adjustments I'm gonna want to do including the triggers for the hands so let's go into rig mode and try to figure that stuff out alright so first there's a chance that your body might be floating around if you change the height of the character so let's say I did something like I you know made the character shorter or taller or something like that and then I went to record mode and suddenly I'm seeing something like this where the whole character is floating around up and down so what I would want to do is make sure I add fixed handles down here so with the body selected I'm just gonna go to this little pin tool down here click it once and just add a few pins on the shoes down here now make sure to do it on the body layer and not the pants layer or anything like that just keep it here as these as fixed the way I was doing it before I was just using this thing this dick tool so that's this one right here next to the blank handle and I'm just gonna drag and tag this stick as fixed a stick is just a way to add one kind of solid bone in an area and so that's another way to do it these are both basically doing the same thing but you'll notice now when I go back to record mode the character should not be floating around there now stuck on the ground so in case your characters floating around that's a quick fix alright so let's take a look at one of these arms so let's select the left arm down here and I'll notice there is a lot going on with this let's just rig it from scratch imagine if you were coming in from you know just created a PSD or AI file and this is what it came in and it looked like it would probably look something like this by default so with the arm first again I want it to be independent I want it to be able to move on its own so I'm just gonna select the crown icon here toggle that on and we're going to drag this just like we did with the hair but instead this time I'm dragging it to connect with the body over here now the next thing I'm going to want to do is tell character animator where the different joints are essentially for for this arm so I'm going to use the blank handle tool down here at the bottom and I'm going to click right around where I think the elbow would be probably somewhere like that and then over here in this picture of the character I'm gonna click the left elbow tag over here you can also do it in that mode but I prefer seeing the little picture because it does line up one to one with the the orientation of the character then for the arm for the hand over here I'm going to make another handle there and let's drag let's call a tag this is two things left wrist and draggable because I want to be able to drag this around with my mouse or fingers on a touch enabled device the last thing I would do is go to the body group and tag a left shoulder this was already left in here from before but you should see a little green it's really tiny but you see this little origin handle that is where the things are connected to this layer so what that's telling me is this body group has this little green thing is connect did and in fact that's this origin point of the left arm so I know that's the exact connection point and so I'm going to make that the exact shoulder joint by making a new handle dare and calling it left shoulder now but it go back to record mode just to show how we're looking so far it's not perfect but at least you have a little bit of joint action happening now that the arm is a little bit more um springy and noodle ish so I want to be able to fix that as well but look it looks like um that origin moving the origin point and and and attaching like I did that peeling thing is not happening anymore to this arm I think it's still gonna be happening this one cuz I haven't touched it yet but this arm is not the sleeve isn't peeling off from the edge there's a little bit appeal but I can fix that so anytime you see that little peeling off thing a quick way to fix it would be to select your arm and I'm just gonna create use the stick tool here I'm just gonna drag a stick across this edge here and call that fixed and that should solve the problem that's gonna kind of glue it and keep it in place so I'm actually going to keep with the stick tool and I'm going to add a little bit of bone structure here so I'm going to drag where the bicep is and leave a little room for the elbow and then drag where the forearm is and while I'm here I'm just going to try to fix the right arm as well so let's connect that and add a fixed stick right here and let's see how this looks all right so now my arms are looking a lot better they're not peeling off of the edge the joints are happening as I would expect the elbow is bending up and down things are looking pretty good now the reason the elbows are bending like this is this behavior called arm I K this is not added to a character by default so this is the only extra behavior that I've added to this character so if I go to rig mode here and you'll notice up here selected at the beginning when I first this this template puppet comes with this but if you want it to add it you just click + and go to arm I K and that's going to add it to your character over here so all our my K does is it says at a certain point I'm going to bend the elbow another way and you can change where that elbow bent happens with this elbow Bend threshold so I can adjust this and say okay maybe this is where I want it instead and try that see if that looks any better and you know make make little adjustments until you get the the bend into quality that you want you also have some smoothness and stretchiness and a few other options there so play around with these until you get the arm looking exactly right so overall I'm liking the look and feel of this character but I do want to add some extra options for expressiveness I want when the character gets sad or wants to do those different hand positions I want to be able to trigger those and that's where the triggers panel comes into play over here so you'll notice some of these are orange right now there's a few things missing I see these fingers what is going on here let's go into rig mode and figure out how triggers work alright so in the process of changing this character I have undoubtedly broken some of these triggers and that's expected you know as you're deleting things and moving them around triggers are going to potentially mess up so the default triggers this character had or don't seem to be working anymore but let's see let's just show a quick example of what happens with triggers so if I'm gonna make a head into a trigger I'm just gonna drag my head into this area I could just drop it here or I'm just gonna go over create trigger and that's gonna create a trigger called head and let's set this to the a key I'm gonna press ENTER and I'm gonna go back to record mode what is that going to do well it means I don't have a head by default but when I press the a key it's going to show up and when I let go that's going to disappear so that's all that a trigger is by default a trigger is just a way to show or hide artwork if you have set artwork to a trigger by default it's not going to show up but when as soon as you press a key it will alright so the head trigger is probably not what I want so let's move into the hand triggers here so the hands are a slightly different type of trigger and these are called swap sets and you see when I was dragging the head one of the options was to create a swap set I can also create a blank swap set was honestly as what I normally do by clicking this little plus icon and going to create swap set all a swap set is is a way to only one trigger at a time so for the hand for example you don't want the default and the flip and the point all showing up ahead once you write you only want one of these showing up at a time so let's see what my default hand is here okay so if I select this and I look down here in my layers and replays I can see that left arm default is the hand that is currently selected if I click on this it's actually gonna twirl it open and show that to me up here let's move on to the next one flip now this one is the one that I change to thumbs up so this one actually broke and now it's been taken out of the layers and replays so all I have to do to reach rigor this is take thumbs up drag it over on top of flip and now it's going to show up in the layers and replays down below meaning when I press the 1 key flip or now thumbs up I'm actually gonna rename this by pressing enter and call this thumbs is going to show up instead and finally point this looks good point is all hooked up as well so a few things about this whichever one has the illuminated finger in front of it is going to be the first one that shows up so that's your default you can either click on the finger here or check default down here in the little settings for a default I usually do not have a key set for it because if you press one for example for thumbs and then when I press it again it's going to just go back to the default so so it's just to me it feels like an unnecessary step I don't feel like I need a key to go to the default it's just when I turn thumbs or point off it's gonna automatically go back to the default another thing is thumbs and point both have latch checked and this is just a personal preference it means am I for example if thumbs is triggered by the one key over here so if this is not latched it just means when I press one as long as one is held down thumbs is going to show up and as soon as I release the key it's going to go back to the default but if I have this latched it's kind of like an on-off switch when I press one when I just tap one it's gonna switch to the thumbs view and when I tap one again it's gonna go back to default so a lot of times I will use latch for things I'm to hold on to for a longer time and then I'll turn unlatch stuff for things that are very quick or short or I'm just you know pressing for a second something like that all right that was a crash course in triggers but let's see how it's looking when I go back to record mode over here so hopefully my head shows back up okay now when I press one I'm gonna be doing that thumbs up and when I press one again it's gonna go back to my default and when I press two it's gonna go to the point and I've got full control over all of these now I think the other hand I didn't mess around with so I think three and four are gonna work with that so these are just showing all my different hand at trigger positions so again this is a great way to add some extra expressiveness to your character now because it didn't manipulate the mouth either I can see that when I press five I'm getting a more upset mouth instead so this was you remember in the beginning I had the happy met the regular mouth and then the sad mouth set so this allows me to do that just by pressing five I'll go to kind of a sadder version of the mouth so this is a really common thing I want my character to have sometimes where they're not a hundred percent happy like this where you know someone asks them a question or they're not feeling too great about something and they move more into the sad mode so so this is a nice touch and if I look at my triggers panel over here I can see the mouth I've got my default set which is just that original mouth and then my sad mouth all I did was drag that sad mouth group in rig mode over top of this and added a key to it and this last group lives is completely messed up and that makes sense because I completely changed the eyes you know built them kind of from scratch so whatever was existing here is now gone but that's an easy fix so let's start with the lids I want to make sure my lids are shown by default so what I'm going to do is select this lid and select this lid I'm just holding down command on Mac or ctrl on Windows I'm gonna drag both of these at the same time into this default lid and you'll notice both of them now are showing up here at the bottom a trigger can have as many layers as you want so in this case I don't have to create like a right lid and left lid trigger I could just have them both trigger the same the time so now when I want them to be wide open how would I trigger that am I gonna do the eyeball or the pupil or send like that actually I can leave this blank I'm not gonna add anything and that's just going to allow it to not show the lids and have the eyes be wide open so sometimes you can just you know create a new trigger and just have a blank trigger to get rid of something that is there by default that's just a little silly trick that works okay and finally my blinks so for blink again I don't need to do a right and a left I'm just gonna select both the right and the left blink drag it back into this blink trigger and now that should work okay so theoretically this should all be working now so let's go to record mode and see what happens so we just figured out that by default her lids are not you know art like they are they're showing up but when I press six her eyes are gonna be wide open instead and that's that blink trigger that I added so I love having just these subtle eyelid positions I think kind of closing and opening the eyes and mixing that with the sad and happy Mouse gives you just a lot of inherent expressiveness to a character so I would definitely recommend that and then of course when it blink I'm automatically gonna do this blink state but I can also press seven to do the blink as well and that's kind of kind of you know sometimes you maybe are singing a song and you want your eyes to be closed or something along those lines so you have that as an option as well alright so there you go now I have a character that I feel I have kind of added my own custom style and look to using that blank character as a template so feel free to experiment have fun we would love to see what you create with this so please use hash tag character animator for sharing things on social media that's what the team looks at on Instagram Facebook Twitter all of that stuff and if you got stuck at any point in this or something didn't work out right or you know your eyeballs are falling out your heads falling off your arms are disappearing whatever the best place to get help is on the official character animator forums where you can post your puppet screenshots of what's happening and most likely someone would be able to help you and walk you through whatever the fix is so that's it thank you so much for watching and have fun creating your own characters

Channel: Okay Samurai

Views: 292,024

Keywords: Adobe Character Animator, Character Animator, character animation, okay samurai, tutorial, Adobe Illustrator, vector

Id: JL024_E1AUk

Length: 68min 48sec (4128 seconds)

Published: Thu May 16 2019