The process of creating a puppet in Adobe Illustrator is very similar to creating one in Adobe Photoshop *. The main difference would be using layers and sub-layers instead of folders.
The first step would be getting your character ready in terms of all the required elements. You need to create all the artwork that you will later use.
A puppet you will build for Adobe Character Animator can vary in its complexity. A very basic character can only have a front view for the head and the body while a more complex one will have 7 head views, gestures, expressions, and customizable accessories. If you would like your character to be able to walk, you will need to prepare left and right body profiles for it as well.
Once you have all the artwork prepared, it is time to stack everything in the right hierarchy and assign correct naming to different elements.
A puppet in Illustrator will have one main layer with the puppet’s name on it and all the body parts will be sub-layers below it.
Basic Character Structure
Complex Character Structure
Each of the sub-layers head and body should also follow a specific structure. You can decide on how complex your structure should be based on the required functionality.
Does your character need to walk? Will it stand still? Will it turn its head? What gestures do you want it to perform?
The number of head views you create will determine if your puppet be able to turn its head and how smooth will the movement be. It is possible to only have a front head view and you can have all 7 of them: front, 3/4 left, left, 3/4 right, right, top, bottom. Anything in between is acceptable as well.
Basic Head Structure
Complex Head Structure
Each of the head views you decide to create needs to have different facial parts stacked on properly named sub-layers below it.
You don’t have to include all possible facial parts in your design, the software recognizes the parts with the right naming and ignores the ones that are ‘missing’. The more facial elements you include the more expressive your puppet will feel.
Facial parts Character Animator recognizes are:
In Adobe Character Animator you can assign a tag manually to each of the facial parts, but the software will do that automatically if you name them properly in your design software. That can be a major time saver.
The software is able to automatically lip-sync your character according to your voice or external audio. For it to work properly the character must come with premade and correctly named mouth shapes-phonemes.
You should also include mouth shapes for the smile, surprise and neutral position as those are recognized by the camera.
Each mouth shape should be on its own sub-layer and all of them must be placed below another sub-layer called +Mouth.
Basic Mouth Structure:
Complex Mouth Structure:
The eyes of the character should also be built in a proper hierarchy.
The eyeball of the character should be labeled as right/left pupil range. It is still important to create such a layer even for characters (such as Nelson above) who don’t have an obvious eyeball in their design. The pupil of your puppet will follow your pupil movements as recognized by your video camera and therefore it is important to limit them into a specific area.
You should follow the same steps to create all the head views (frontal, left quarter, left profile, right quarter, etc.) you need. Once you are happy with the result it is time to duplicate the head with all of its views to the left and right profiles.
Unlike with facial elements, in most cases, we will need to create the body rig for our characters manually and there is no need to include all the recognizable body tags in our design.
Body parts Character Animator recognizes are:
The important part is to make the arms separated and independent (+Left Arm, +Right Arm).
If we want the character to have different hand gestures we will create each hand gesture on a different sub-layer and place them all as part of the arms.
Body structure Front:
Body structure Front:
Once the character design in Adobe Illustrators follows a proper hierarchy and naming conventions it can be imported into Adobe Character Animator.
Now it is time to import your character into Adobe Character Animator. You will see that the puppet will already react to your facial movement and audio. With some simple rigging, it will be able to move its hands, perform gestures, walk and more. We will have the rigging process covered in the next tutorial. Stay tuned!