Since layer hierarchy is so important when importing Adobe Photoshop documents into Adobe Character Animator, it is best to with either in old Photoshop document, or a brand new empty one with all the layers already organized and named. In this video, author Ian Robinson walks you through how create custom puppets in Photoshop.
- Since layer hierarchy is so important when importing Photoshop documents into Character Animator I often recommend that you start with either an old Photoshop document or a brand new empty one with all the layers already organized and named. Now for this video you may have noticed the 03_02.psd file and yes, that's correct, we are starting in Photoshop. The character that I created here, I named him Roger, he is actually created natively inside of Photoshop using some pretty straightforward tools.
But the most important thing that I was paying attention to when I was building this character was this over here, the Layers panel. Now if the interface of Photoshop doesn't look like this on your computer you want to go up under the Window menu, go to Workspace, and choose the Essentials workspace. You may need to Reset the Essentials workspace. Then notice my Layers panel is down here. So I'm going to click on this Layers panel and just drag it up to the left until I see this blue line, so when I let go now I can see all of the layers from top to bottom.
Now this character has a number of groups of layer, like this Right Profile, and I have a Left Profile, and then I have the Frontal area here. And the nomenclature for each one of these I figured out by actually looking at the template characters that are available in the start workspace inside of Character Animator, which we'll get to in a quick second. In order to actually create each of these different pieces of my character you may have noticed that I actually used circles.
And literally everything with this character was made using the circular lasso tool. So I'm just going to show you how I did that really quickly. I'll go up under my Marquee Tool, click and hold, and I'll choose my Elliptical Marquee. Now all of the circles were creating using the Elliptical Marquee Tool. So I'm going to go up to my Marquee Tools, click and hold, and switch to the Elliptical one. Now I'm going to go ahead and just create a new blank layer. Notice my Right Profile group is selected, I'll just come down and click the New Layer button, and that'll appear in the Right Profile section.
I want it to actually appear in the Front section, so I'm just going to move it down here into the Frontal group. Okay, now for this layer I'll go ahead and click and drag. Now if I want to sample a specific color I could press i to grab the eye dropper tool and click inside my little character, like so, and that'll sample his kind of lavender color. And now with this marquee set up if I just press opt + delete on the Mac you can fill from the foreground color.
So notice we've created the top of his head here. I'm going to go back up and I'll grab my Marquee Tool and I'll click and drag again and I'm going to hold shift as I drag and that'll make sure that the circle stays a perfect circle. So if I drag when I let go of both mice I can hover inside my ellipse here and reposition it, so it lines up, and then once it's relatively close to something I like I can go ahead and repeat the same process.
I can press Alt + Delete or Option + Delete to fill from the foreground color. Now I didn't get as much of a difference between the top part of the head and the bottom part, but if I go up under Select and choose Deselect now you can see I've got sort of this head started to be creating. Now, what if I want to create an arm? Well, I can use that same tool here, I'll just click and drag, but this time I'll make it longer, like this. And I'm going to create a new layer, so I'll just create a new layer, like this, and I'll call this one Arm.
And it'll end up being his left arm, so I'll say Left Arm. And I'll fill from the foreground color, Option + Delete. Now in order to get this curve all I did was I hovered my mouse over my Marquee Tool and I just moved it down slightly, like this, and now all I have to do is just press Delete and it'll delete any of the filled pixels. And notice that is giving me this nice curved shape to the arm.
If I want to add his hand I can just come down to the base of the arm and I can click and drag, like so, and if I hold down Shift it'll keep a perfect circle. So let's say I make a circle about that big, hover over the inside of the circle, and click and drag, and let's see, I'll line it up sort of like this, so now if I press Option + Delete, now you notice when I press Command + D or Control + D on Windows to deselect it looks a little bit more like an arm with a hand on the end of it.
And the fingers I repeated the same sort of process with making the elongated ellipse and then moving off to the side and pressing Delete. So seriously, everything in this character was created using the Marquee Tool, or the Ellipse Marquee Tool. Now the downside of this is this is a bitmapped image, meaning if I want to scale up the Left Arm I could make sure that layer's selected and press cmd + t or ctrl + t on Windows and then hover one of the corners, and if I hold Shift as I click and drag it will scale up in proportion, but notice, once it gets up to a larger percentage it's going to start having rough pixels or pixelating.
So if I press Return it's gone ahead and set that and I've got sort of smooth edges, but it's really kind of soft compared to the edges of our character. And so when you're dealing with a bitmapped image you can't scale it up like a vector image. The reason I'm telling you this is this, it's important to understand what size you're working in when you're creating your character. Now I'll go ahead and delete the Left Arm layer and Layer 1, so I'll click on Left Arm, I'll hold down Shift and click on Layer 1, and I'll just drag those down to the trash to delete them.
And I'll go up under Image and choose Image Size, so you can see the document was 2500 pixels tall by 2500 pixels wide at a Resolution of 72 pixels per inch. The reason I made it so large is I wanted to make sure that he could take up the entire screen of a 1920 by 1080 image. And I wanted his face to get up really nice and large in there. So that's why I made him that size. So I'll go ahead and click Cancel. Now the last thing you really want to pay attention to when you're creating these different elements inside of Photoshop is exactly how the layers are labeled and how they're organized.
So notice in the Frontal section under my Head I have my Eyebrows, and then I have my Eyes, and then I have a Nose, and I have Mouth. If we open up the Mouth notice there are a ton of different Mouth positions. Now I didn't create all the different Mouth positions from scratch, I actually had another Mouth to use as reference. And the way I found that was in the Templates section of Character Animator. So before we go I want to show you where you can get a blank Photoshop document with all the layers built in.
I'm going to go into Character Animator, and this is just a new blank project. And you want to go to the Start section. In here I can start with any one of these characters and then open that up in either Photoshop or Illustrator and delete the specific elements on each layer and recreate those elements. But if I just go to the See More section here and just click on our little monster notice the web browser opens and it's going to take me to Character Animator samples. And if I scroll down here notice I have a whole host of other samples.
And if I scroll down even further notice if you want to start from scratch making your own puppets we also have a Photoshop document as a simple Blank Template. So if I click on that it's going to go ahead and launch my login for my Creative Cloud account. And when I choose to save it to my Creative Cloud account it'll actually save it in the files within my Creative Cloud. Now to show you that I'm going to open up a Finder window and go to my Creative Cloud files area and notice, there's my TemplateBlank Photoshop document.
So if I double-click to open you notice it's already got all the layers set up and they're all completely blank. So if you were a talented artist and you just wanted to do everything from scratch without any reference this would work extraordinarily well. The only other thing you'd want to pay attention to is the actual size of the project. Now since it's empty I could go up under Image and choose Image Size and I could make this much larger if I wanted to and I wouldn't have to worry about losing any resolution, because I haven't painted any pixels yet.
So as long as you're paying attention to what object is on what layer and you maintain the proper hierarchy of these different layers when you go to import your project into Character Animator life will be much more simple, because it'll already have a whole bunch of these different layers in groups rigged and ready for animation.
- Using face tracking to drive animation
- Mapping keyboard keys to drive poses
- Driving poses with a mouse
- Adding physics to animation
- Creating lip-sync animation
- Creating custom characters