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.
Follow these 15 steps and you will transform your static image into a working animated puppet:
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).
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.
First step would be separating the character from the background.
To do so:
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.
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
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.
To be able to animate the different facial elements those should be separated from the full-face image and placed on their layers.
If the mouth shape you separated is not neutral then you should name the layer with the name of the matching phoneme.
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.
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.
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.
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.
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:
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.
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.
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.