With so many infographics (opens in new tab) out there right now, how do you get your work noticed? Well, first you need a good idea - preferably one that will appeal to the design and tech community and go viral. You also need perfect execution of that idea. And a healthy dollop of humour doesn't harm your chances either.
- Read our 8 pro tips for creating interactive infographics here
Killer Infographics ticked all these boxes with its hilarious Seth Godin vs. Guy Kawasaki infographic (opens in new tab), which pits these two well-known speakers in the design world against each other in comic fashion. The data visualization proved such a success that they quickly moved to create the motion graphics version shown above.
Not only we loved it so much, we tracked down the animator behind it, Graham Cox, to find out how they did it...
Software techniques
Software-wise, the animation was entirely done in After Effects CS6, Cox explains. "The art was done in Illustrator (opens in new tab) while utilizing some textures from Photoshop (opens in new tab) as well. The design was completed by one of our designers at the time, Hannah Templer."
We love the flickering/out of focus visual effects - which bring to mind ageing film stock, and wondered how difficult they were to achieve. "I went into this video not knowing how to do that effect at all actually," Cox responds. "Basically, I had to look at a ton of old footage to get a general idea of how film was shot with these cameras and then search for any kind of tutorials since it was overwhelming at first.
"Once you get the basic understanding of how this effect is achieved, it's all about layering each detail your eye catches from old films and then combining them. A lot of sepia gradients, blue and pinkish hues, lowering the videos frame rate to about 16fps, splitting up the video into red, green, blue layers and offsetting them, adding in manual directional blur that loops every so often, spots, lines, fractal noises... a bunch of layers! So yeah, it was super-difficult at first, until I planned it out and did it piece by piece."
Rising to the challenge
And that wasn't the only challenge in creating the animation, which took about a month to complete in between other projects, including sound design, says Cox. "I honestly didn't know how to do 80% of this video," he admits.
"The thing with this animation, and any animation really, is to always try new things. You'll never expand your skills or talent if you just keep doing the same things over and over. I used to only do type, and basically fancy slide shows before.
"With this video I wanted to try out character animation, that film effect, adding in real life footage with illustrations that wasn't jarring, sound design, sudo 3D... the list goes on! My advice is to jump into a project, tweak it so everything moves 'butter' smooth, and let it flow organically."
Main takeaways
So what did Cox learn from this project? "Keeping everything organized is key," he replies. "Name every single layer you make in After Effects. I was still somewhat new to the program and when I look back at this project I just cringe on how big of a mess I made! I feel now that if I organized this well, I could do this video much faster than before.
"Also - again, because this is important, just jump into a project even if you have no idea how to create it. There are many great communities out there to help inspire or give you technical assistance if you search for it. If you think a transition is going to look cool, but have no idea how to set it up, just do it frame by frame! Study videos frame by frame! Take a whole day to animate 4 seconds! You'll learn from it, and become much better and faster in the future.
"I'm lucky to be working for a company that lets us invest this kind of time to learn. We wanted to be able to provide this level of quality for a client, so we decided to start testing things out on our own internal projects. It helped me grow and has helped other members of our animation team grow as well, ensuring that Killer Infographics can also provide killer motion graphics."
Liked this? Read these!
- Download the best free fonts (opens in new tab)
- Brilliant Wordpress tutorial (opens in new tab) selection
- Free Photoshop actions (opens in new tab) to create stunning effects
- Create a perfect mood board (opens in new tab) with these pro tips
Have you seen a great example of a great infographic? Let us know about it in the comments below!
