Quote Codes Diaries 4: Animating in After Effects.

Hi Everyone,

Hope the holiday season is going well. Welcome to Quote Codes Diaries 4. Picking up from the previous blog, today we look into the process of animating your Animographies using After Effects.

Quote Codes Diaries 4: Animating in After Effects.
Today we look at some basic practices that will help you avoid silly mistakes in your After Effects animations

As I mentioned before, prior to this project we didn’t really have much experience in animation so everything had a learning curve. The entire project of animating the Primitive Font lasted just over 2 months, out of which a lot of time was actually spent on errors we encountered due to lack of experience.  Hence, I would like to take this as an opportunity to list down some common practices that you should follow for your projects so you can avoid silly mistakes.

Setting up your designs for import in After Effects.

This is the most basic but the most crucial part. In order to keep your animations scalable and customizable, it is really important to set up your designs well before you import them in AE (After Effects).

AE supports import of AI (Adobe Illustrator) files really well. Though it does support PSD files as well, it is much easier and efficient to import AI (explaining this below). Additionally, since vectors are completely scalable, I would definitely recommend designing your font’s in AI from the start itself.

Now, after you finish your designs, it is time to set up your AI file for import in After Effects.

Set up each character in separate AI files and break the  character design in different layers. It goes without saying that you should have a fairly basic idea of your animation before doing this. The point is to separate each part of the design you want to animate as a separate layer. So, if you don’t have a basic storyboard ready for your animation, I would recommend separating the design in as many layers as possible so you have the freedom later when you begin in After Effects.

Here is how we did it.

Quote Codes Diaries 4: Animating in After Effects.
This is our animation
Quote Codes Diaries 4: Animating in After Effects.
Notice how we separated each shape we planned to animate into separate layers

Importing in After Effects

Create a new project and go to file –> import –> file.

Quote Codes Diaries 4: Animating in After Effects.
Go to File –> Import –> File to import your AI file

Select your file and under Import –> Composition – Retain Layers. This will retain the layers we made in AI.

Quote Codes Diaries 4: Animating in After Effects.
Select Composition – Retain Layers, so your AI layers remain intact.

Now, here comes the advantage of using AI. Select the layers –> right click and select –> Create Shapes from Vector Layer.

Quote Codes Diaries 4: Animating in After Effects.
Right click on a layer and select Create Shapes from Vector Layer

Viola! your AI layer now becomes a shape layer in AE. Expand, scale, use it in any way, your design will not loose quality ever!

Quote Codes Diaries 4: Animating in After Effects.
Shape Layers created from vectors are completely scalable and customizable in AE

And that’s it! You are now ready to animate! Maintain a different composition for each character.

Quote Codes Diaries 4: Animating in After Effects.
Keep your AE project organized. Maintain different compositions for each character.

The separation of layers we did in AI ensures your animation is always customizable and converting them to vectors in AE ensures they are always scalable!

Plan out your animation on paper first before implementing in AE and go crazy with it. Animation is all about timing and once you start getting momentum it is a lot of fun.

Next time I will show you the final outcomes of our animations and also most importantly how to directly create sprite sheets for your games/apps, from After Effects itself – Yes it is possible!

Quote Codes Diaries 4: Animating in After Effects.

Till then don’t forget to Pre-order Quote Codes on the Appstore here, it comes out on Jan 18, 2018. Pre ordering ensures that the app automatically downloads onto your device on Jan 18

Quote Codes Diaries 3: Animation + Typography = Animography

Welcome to blog 3 of the Quote Codes Diaries. A quick recap –  Till now we saw the Origins and Making of the Primitive Font: How, at its core the Primitive Font is made up of only four basic shapes, Circle + Rectangle + Triangle + Line. All the characters then are a combination of these shapes with minor adjustments. The font gained popularity online on Behance and Typography Served.

Today, as promised we divulge into the fun bits, Animations!

Animation + Typography = Animography.

Quote Codes Diaries 3: Animation + Typography = Animography

Fast forward a few months after we finished the design of the font. One fine magical afternoon I was browsing through the internet and came across Animography – A webshop/typefoundry that provides motion designers, video-editors and others in the field of the moving image with animated typefaces.

Quote Codes Diaries 3: Animation + Typography = Animography

Quote Codes Diaries 3: Animation + Typography = Animography
Animography means animated typeface

Animography (animation+typography) at the time was new but gaining immense momentum. Imagine the possibilities here. You can use the animated typefaces in apps, trailers, games, videos, etc. It could instantly spruce up a project and make it more fun.

We wanted to do this, and we wanted to do this with our beloved Primitive Font. At the time we hadn’t even thought of making a game out this. We just wanted to animate and make it cool.

Animating The Primitive Font.

If you notice, most of the typefaces in Animography follow a very defined approach towards the animations of characters. Take Amelie By Shabello for example. All the characters come as drops from the top and then open up to their shapes.

Quote Codes Diaries 3: Animation + Typography = Animography
Amelie follows a defined animation process where all the characters start as drops and then expand to their shapes

Though this looks absolutely awesome, we wanted to create unique animations for each characters of our font. The design of the Primitive font is very structured and tight, through animations we wanted to break this and create a little bit of chaos.

But that being said, certain rules were still needed to be defined to maintain focus.

1. We wanted to follow the grid system used in design and constrain the animations within it.

Quote Codes Diaries 3: Animation + Typography = Animography
Animation of each character is to be constrained within their grids

2. We did not want to add more color in animations

Quote Codes Diaries 3: Animation + Typography = Animography
No extra color will be added in animation except the 2 above

3. We wanted to play with the basic shapes as much as possible.

Quote Codes Diaries 3: Animation + Typography = Animography
Focus to play with the basic shapes in characters

And, so we began the quest to animate the Primitive Font. This was our first proper animation project, so everything had a learning curve. Next time I will dive deep into the process and journey: failure and success. I will even explain the basics of setting up After Effects for your animographies, so that your project is scalable and customizable. Stay Tuned!

Quote Codes Diaries 3: Animation + Typography = Animography

Till then don’t forget to Pre-order Quote Codes on the Appstore here, it comes out on Jan 18, 2018. Pre ordering ensures that the app automatically downloads onto your device on Jan 18.