Step-by-Step Guide: How to Turn Your Photo Into an Animated Cartoon Puppet

Transform a static image into a cartoon looking animated puppet for Adobe Character Animator. Animate it with your head movements, voice and facial expressions.

In this tutorial post, I will show you how you can turn your photo into a cartoon-looking animated puppet for Adobe Character Animator *. The puppet we will create will be able to automatically lip-sync to any audio and can be controlled by our head movements and facial expressions. We will get a reusable animated character that can be added to videos and presentations.

The Main Idea

We will use Adobe Photoshop * to separate the different facial elements, apply the necessary filters to create the cartoon effect, and finally structure the layers in a way Adobe Character Animator will recognize them.

In the end, we will import the .psd file we created into Adobe Character Animator. Then with a few simple clicks, we will turn our static layered cartoon image into an animated puppet full of life.

Step 1: Gather Images

You will need a few images of yourself or the person you want to turn into a cartoon character. The first image will be used as a base for our puppet. The face on the base image should be with a neutral expression, open eyes looking forward, and a straight head (no tilts).

For this tutorial we used images of female character created by Robin Higgins from Pixabay.

We will also need an image of the same character but with closed eyes. And a few other images with different mouth shapes.

Ideally, you would have images of the full set of phonemes: Aa, Oh, Uh, Ee, R, L, F, M, W-oo, S, and D. As well as an image with a smile and surprised mouth expression.

It is possible to build a puppet by using photographs with just 4 facial elements: the neutral face, closed eyes, and opened mouth face. However, the more visemes you will include, the more expressive puppet you will get at the end.

Step 2: Start with the Base Image and Separate the Background

First step would be separating the character from the background.

To do so:

Step 3 : Separate the Head from the Rest of the Body

Now select the head and paste it to a new layer as well. Once it is done, turn the head into a smart object and bring it to a new document.

Step 4: Create the Cartoon Effect In Photoshop

The next step would be applying some Photoshop filters and adjustment layers to achieve the cartoony look of the character.

4.1 Lets Add the Filters

Use the same settings as before.

4.2 Time for the Blur Layer

4.3 Next: Adjustment Layers

Step 5: Group the Effect for Later Use

The first thing we will do once the cartoon effect is created is to group all the related layers into one folder. It is important to keep our project organized to be able to create the required puppet structure. Group all the layers we created so far and call the group “cartoon effect”.

To flatten the group into a flat image, right-click on the group with the mouse and select “Merge Group”. We will use the newly created layer as a base for our facial elements.

Step 6: Separate the Facial Elements

To be able to animate the different facial elements those should be separated from the full-face image and placed on their layers.

1: Eyebrows

2: Hair

3: Mouth

If the mouth shape you separated is not neutral then you should name the layer with the name of the matching phoneme.

4: Eyes

It is time to create the structure for the eyes. Eyes are a more complex facial element as those should not only be separated from the base face but have several individual elements on their own.

If the isolated pupil is not a full circle, you will need to complete the missing parts. You can just use the regular brush and draw in the details or you can work with a clone stamp tool/patch tool to sample the missing area from the existing pupil. Alternatively, you can use a photograph with wide open eyes and separate the pupil from it.

5: Face Base

Once all the main facial elements were separated it is time to fill those with skin color on the face. You can select the area of each previously separated facial element and use content aware-fill on it. Alternatively, you can use the patch or clone stamp tool to achieve similar results. You should end up with a flat blank face.

Name the Layer Face.

Step 7: Structure the Elements that were created so far

Step 8: Apply Cartoon Effect on the Additional Images

Now we will need to apply the same cartoon effect to the additional images we prepared for the closed eyes and the different mouth shapes.

We can separate the new facial elements from the images using the lasso tool and apply the cartoon effect just on them.

Alternatively, we can apply the cartoon effect on the full-size images and do the separation on each image with the effect applied.

Since we saved the image we applied the cartoon effect as the smart object we just need to replace the image inside the smart object file and save it.

If we activate the cartoon effect group folder now, we will see that the effect is now applied to a new image. We need to make sure that we also update the smart object file that is in the blur adjustment folder.

We will start by adding the effect to the image with closed eyes. It also has an additional mouth shape.

In our example, the blink image also has an additional mouth shape.

Step 9: Bring in the Body

Do the same thing we did for the images and facial elements for the extracted body. Bring it into the smart object and create a flattened body image with the cartoon effect on it. Once it is created put it inside the body folder.

Step 10: Structure the .psd Document and Name the Layers According to Puppet Rules

The final .psd file must have a very specific layer structure and layer names for Adobe character automatically apply the expected facial behavior on it.

This is the structure we should currently have:

Step 11: Resize the Head / The body

Next, you might want to do some size changes to make the character look more cartoonish. That can be accomplished by making the head larger (or the body smaller). If you decide to change the head size make sure you apply the transformation to the entire head folder so all the facial elements will be adjusted.

Step 12: Remove unnecasary layers

Now the photoshop file is almost ready to be imported into Adobe Character Animator. We need to clean it up from all the unnecessary folders and layers. The cartoon effect folder is no longer needed so just delete it. The clean .psd file should have one main folder called puppet and 2 folders (head and body) inside it.

You might want to keep a backup version of .psd with the cartoon effect folder so you can get back and easily add additional facial elements in case you need them.

Step 13: Import the document into Adobe Character Animator

Step 14: Make Few Adjustments

Step 15: Go to Record Mode and Test Your Puppet

Now What?

Now your character is ready for animations. You can record external audio and automate the lip-sync for the new puppet. You can also record the audio inside the Adobe Character Animator itself. You can also add additional behaviors (like a body behavior for example), tags, or elements to make the puppet more expressive and fun to work with.

Stay tuned for new tutorials.