How to Prepare an Illustration for Animation
A good animation demands good visuals. Most Motion Designers are very focused on animating that forget how to design the visuals of their animation. If your focus is to specialize in animation only and work with a team for a big company, that’s no problem. But, if you want to direct your own animations and be able to craft your motion graphics pieces by yourself, you should learn how to illustrate.
No matter if you won’t use your own illustrations in your animated crafts, learning how to do it, will help you to direct your team and communicate well with everyone involved in it.
Different from printing or the web, the visuals of animation have some restrictions and requirements that only someone who’s involved in creating it can learn. Is not something common in college, and an illustrator needs to be prepared before bringing movements to his designs.
What to keep in mind when illustrating
The most important thing to start illustrating is to know the animation you’re illustrating for. Like every design piece, you should know the purpose of it. When illustrating for animation there’s no difference.
What you need is to understand the movements each element will be required to do. An animation is made to be in movement, some things are in constant movement when others are more static. Different from printing illustrations, you need to keep an eye on what’s presented and what’s coming next. Sometimes you’ll need to illustrate something that wasn’t previous in the scene, but that will appear later.
A great tool to help illustrators understanding that is the Storyboard. A well-prepared Storyboard helps to understand the composition and the elements required for the scene, but also, showcase what will be the interactions of each element. The illustration phase, or the Style Frames, is generally the next phase after the Storyboard. A good understanding on the storyboard will help to develop the illustrations in the right direction.
Pay attention to details
Keep an eye on details that will require animation. Especially if you’re working with characters, you should pay good attention to every detail. If the character will remain in the same position most of the time and only do small movements, you won’t need to worry that much. But, if you have a character that will require different movements, body rotation, face rotation, etc, you will need to prepare for each moment, even if the Storyboard only highlight the main action of that scene.
That’s why it’s important to understand, beforehand, what are the details/elements needs. Not only focusing on the static result of a Style Frame, when illustrating for animation you may need to prepare more images to allow those movements to happen. When you’re the one illustrating an animating it can be easier if not, you should be in constant communication to make sure everything is well-built. Going back and forth on the illustration to add missing details is bad for the project workflow.
Possibilities and Restrictions
Besides the attention to the details, you should always look for what is hidden. On “normal” illustration, you can easily skip the information of hidden objects or elements that are not completely showing in the scene. In animation things occur differently. You should always illustrate the entire object, even if it’s something behind a character or behind another object.
Animation is something very dynamic. An object can be behind the main character in the initial composition, but as the character moves, the object is revealed. If you “miss” to complete that object illustration, this reveal won’t be very interesting.
A well-defined plan of the animation will help the illustration phase to predict that and make everything according.
Another thing that also creates doubt in some Designers is when you should expand or not a path if you’re working in Adobe Illustrator. Usually, when preparing something for printing, we tend to expand everything, including typography in order to prevent any surprise in the final result. In animation, it’s not a need. Depending on what’s planned for the animation, the Motion Designer can need the paths to remain as they are.
A great feature that came with After Effects CS6 was the ability to convert any vector file into a Shape Layer. This way, the animator can require a line path to remain that way so it would be easier to animate its vertex, or even adjust the stroke of it.
Something that always gave me headaches was the Clipping Masks. They are great tools in Illustrator, but not that great when you need to animate something inside that mask. After Effects works based on layers, when you have a Clipping Mask, the shape that creates the mask is in the same layer of what is in the background. In order to “fix” that, I always release the clipping mask, and leave the background objects “messed”. After that, inside After Effects, I get this mask and turn it as a Matte for the previous objects — we will be getting back to it sooner in our blog.
Preparing the Files
As I said, After Effects works based on layers. Each element goes in one layer in order to be animated individually. When preparing the files in Illustrator or Photoshop, you should understand the order of elements. Just like you would work in any layered file, organize it as things appear on the screen. On top, you should leave the layers in the Foreground of the scene and at the bottom, what’s in the background. This little thing saves lots of time when working inside After Effects, especially because a simple composition can have hundreds of elements and layers.
If you’re working in Photoshop you should be used to working with layers. The only thing you should take in mind when illustrating inside it is to let things separated. If you’re working on Illustrators, there’s no easy way. The most common thing to do is to select each element, cut it with Ctrl+X or Cmd+X, creating a new layer and using Ctrl+Shift+V or Cmd+Shit+V to paste it at the same position.
Separating Layers efficiently is the key for a good animation start.
Besides that manual task, there’s an easier way that I recommend only if you have few elements where everything will require animation as it usually is for logo animations.
- First, you need to ungroup everything you have.
- After that just select the layer by clicking on the target symbol (the circle on the right side of the layer name in the layer panel).
- Then click on the menu in the layer panel and select “Release to Layers (Sequence)”. This will make every element be in a separate layer, but still in the same “group”.
- Just drag and drop them to outside the main layer and you will have all the elements separated by layers.
As I said, it works well if you’re going to animate small scenes like logo animations. When working with lots of compositions, and elements that have lots of details, this method can be tricky and confuse you even more during the animation phase.
One last thing is learning how to import it correctly. There are different import options for files inside After Effects — we will prepare some exclusive content on it in the near future, but right now we’d like to show you a basic learning that works almost for everything.
- Open After Effects, then go to Files > Import, or just double-click in the Project Window.
- Select your file and hit Open. A dialogue box should appear, requesting you to select how you’d like to import it.
- Just click in Composition and select Retain Layer Size.
This way, you will import your illustrations as an After Effects composition with all the layers inside it separated, as you did inside Illustrator or Photoshop. With all set, now you’re ready to animate.
Final Thoughts
The Style Frames phase is crucial for the project. It usually takes the same time to produce as the animation itself. There are lots of requests and requirements that you should keep an eye on when preparing for animation. A well-prepared illustration saves a lot of time for the animator and also helps on the workflow of the project. If you’re an animator that also illustrates, you probably should have heard of things we mentioned here. If you’re an illustrator, keep in mind everything we told and always communicate with the Motion Designer to get the most understand possible of what’s planned for the animation.
Originally published at mowestudio.com on March 16, 2016.
Did you enjoy the article?
- Recommend it by clicking on the ♥︎ below so more people can read it.
- Subscribe to our newsletter and receive not only our articles but many other content before everyone else.
Do you have any question or opinion?
Share it! Let’s make this a starting point for more meaningful discussions.
