How to Prepare an Illustration for Animation

Reading Time: 7 minutes

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 specialise 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.
Preparing files for animation inside Adobe Illustrator

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.
Importing files corretly from Illustrator to After Effects

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.

Have you ever worked with illustrators that delivered messed up files?
Do you illustrate you own animations?
What are the struggles you have with illustration?

Share with us – in the comments section below – your experience or any other kind of input about the subject

Telling stories and sharing experiences

About us

MOWE is a Design Studio that works crafting unique experiences for brands. We create not only for our clients, but for ourselves and the community.

We want to tell our stories and teach people about the challenges we have to deal on a daily basis when you work in the creative field. Telling stories is what fascinates us, so why wouldn’t we share those with you? ;)

33 responses

  1. When you release layers to sequence the names all become generic.
    Is there a way to avoid having to rename all the elements while prepping for animation.
    This becomes extremely tedious when working with UI wire frames for animation prototyping.

  2. Nice blog! Is your theme custom made or did you download it from somewhere? A design like yours with a few simple tweeks would really make my blog jump out. Please let me know where you got your theme. Cheers

  3. Wonderful beat ! I wish to apprentice while you amend your web site, how could i subscribe for a blog web site? The account helped me a acceptable deal. I had been tiny bit acquainted of this your broadcast provided bright clear concept

  4. Hello there! This is my first reply on your site so I simply wanted to say a quick hello and tell you I truly enjoy reading through your articles. Can you recommend any other sites which deal with Arvind Pandit Kansas? I’m also very intrigued by this! Many thanks!

  5. Thanks a lot for sharing this, I saved this page. I’m additionally in search of info on new marketing ideas, have you any idea the place where I might come across one thing like this? I will come back in a little while!

  6. I came over here via some other web address about firestarter app download and imagined I may as well look at this. I adore the things I see thus I am just following you. Getting excited about looking over the site back again.

  7. Howdy I’m truly excited I found out your web page, I really found you by mistake, when I was looking on Bing for active instagram followers. Nonetheless I am here right now and would just like to say thank you for a wonderful post and the all round entertaining blog (I likewise enjoy the design), I don’t have enough time to look over it all at the moment but I have book-marked it and also included your RSS feed, so when I have enough time I will be back to browse a great deal more. Make sure you do maintain the awesome job.

  8. Our LGV (Large Goods Vehicle) HGV training is based in East London, and our LGV/ HGV courses are taught by qualified DVSA LGV & HGV trainers. LGV was formerly known as HGV, where it used to be referred to as HGV Class 2 (now called LGV Category C) and HGV class 1 (Now called LGV Category C+E).

  9. I am actually loving the theme of your blog. Do you encounter any internet browser compatibility problems? A number of my blog readers have complained concerning my tv shows online blog not operating correctly in Explorer but appears very good in Chrome. Do you have any tips to aid fix the matter?

  10. Howdy! This is my first comment here so I really wanted to say a fast hello and tell you I truly enjoy reading through your blog posts. Can you recommend any other blogs which deal with small lawn mower? I’m as well quite fascinated by this thing! Thank you!

  11. I like the valuable info you provide in your articles. I’ll bookmark your blog and check again here regularly. I’m quite sure I’ll learn many new stuff right here! Good luck for the next!

  12. Hey, I’m so thrilled I found your webpage, I actually discovered you by accident, while I was researching on Google for free games to play. Regardless I’m here right now and would simply love to say thank you for a marvelous write-up and the all-round impressive website (I furthermore adore the theme), I don’t have enough time to go through it completely at the minute yet I have book-marked it and moreover included the RSS feeds, so once I have enough time I’ll be back to browse much more. Make sure you do keep up the great job.

  13. Hey there! This is kind of off topic but I need some advice from an established blog. Is it hard to set up your own blog? I’m not very techincal but I can figure things out pretty quick. I’m thinking about creating my own but I’m not sure where to begin. Do you have any tips or suggestions? With thanks

  14. My partner and I absolutely adore your site and find a lot of the articles to be just what I’m in need of. Do you offer other people to write content material for you? I would not mind producing a post relating to stream movies or possibly on many of the things you’re posting about on this site. Cool blog!

  15. I have been surfing online more than three hours today, yet I never found any interesting article like yours. It’s pretty worth enough for me. Personally, if all site owners and bloggers made good content as you did, the web will be a lot more useful than ever before.

  16. I’m seriously loving the design of your internet site. Do you ever come across any kind of internet browser interface troubles? Quite a few of my own site audience have lamented concerning my movies website not operating properly in Internet Explorer but looks fantastic in Opera. Are there any tips to aid fix that issue?

  17. I discovered your blog web-site on google and check some of one’s early posts. Continue to maintain up the very beneficial operate. I just additional up your RSS feed to my MSN News Reader. Seeking forward to reading additional from you later on!

Leave a Reply