The Best Way to Learn The Processes is Animating It!
How I Designed and Animated a High Detailed Set of Icons
These 3 animated icons were made back when I was working less than 2 months in Igloo Creative House – The place where I started my motion graphics and animation career. So I am pretty much amazed by the quality of the final product.
The challenge was to design 8 icons of the same language to represent the animation process. Showing A long and complex process in a fun and appealing way. To encourage our clients to trust our professional pipeline. We knew from early stages that these 3 icons are the essence, and wanted to present them in the homepage. And what better way of showing the process of animation rather than animating it?
So…I would like to go through how I addressed such a brief.
- Where to start from?
- How to divide the process to stages of research, design and animation?
- What design driven decisions should I go through?
- And what animated driven decisions should I go through?
The final set of icons presented on igloocreative.co.il
The Concept and Design of an Icon Set
How did I approach the design: from concept and reference to final design
As I said, these icons are presented on a homepage of a motion-design studio. Igloo creative house specializes in making short, fun and appealing explainer and promotion videos, combining some characters in it. Most of our clients are Hi-tech companies and startups. Their target audiences are not always in the same level of knowledge as they are – so we need to help them engage.
That’s why, while keeping it serious and informative, it’s important to add some humor and cuteness to their brand. For these reasons we wanted the icons to be well designed and very clear, but also fun and appealing. We needed a good concept, vibrant colors and fun and inspiring animations – like our videos have.
When I got the brief from my creative director He already had in mind that the icon of screenwriting would be a type writer. I tried to come up with other ideas, but eventually I said “Yeah! Why not?” – A type writer for writing scripts and screen-plays feels good.
The main concept I found in the typewriter was that no one uses it anymore. It’s an antiq. Its vintage. It’s the almost the opposite of working on the computer – It’s OLD-SCHOOL! And old school touches places in the brain of longing and nostalgia. That’s why people like it and engage with it easily.
Now I had to think what makes the same engagement of old-schoolness and nostalgia in the fields of design and animation? I came up with the idea of using pencil and ruler for old-school design. And for animation I thought a of drawing a walking man flip-book, which I believed many of us remember doing back at school (during a r-e-a-l-l-y boring lesson).
From here things started to go easier as we got the concept.
Now it’s time to use up my skills and start sketching, cleaning, coloring and shading, But first – references.
At that time of the studio we were all about Dribdbling. We took lots of inspiration from Dribbble’s most popular GIF artists. We knew the style should be inspired from there – Combining our ideas with the flat and vibrant design that was popular back then, and is also a very strong characteristic of our videos designs. Here are some of the references I used:
We agreed on some graphic guide lines based on these references that would make it work as a family:
- The circle as a base background
- The vibrant colors of a narrow color pallet
- Using the fun and tactile flat design while keeping it very clear illustrated
- Finding one place to break out of the circle boundaries
Some sketching and coloring from my design process
Preparing the Files for Animating
Understanding the way things are about to move and how to achieve it
The first thing you should do before you go to After Effects, is not breaking down the illustrator file. The first thing you should do is imagine.
You’ve got to manifest yourself how is it going to work. What is the flow of the animation? what style of animation am I doing here? and decide and understand how would you like this specific design to move. Ask yourself “what is the story that I am telling?” even though you work on a small and very short GIF as this one. Only then will you understand how to breakdown your design to layers plug-ins and effects.
Now here’s my example:
I sketched and designed the book in the middle of the motion – with its papers paused on their way down. I gave some thinking to the way I wish to animate them and even got into After Effects for some tests, to see if it’s going to work with a CC Page turn effect for example. This led me to the understanding that I am going to make the papers traditionally animated with shape layers. So I left the papers as they are in one layer as a reference layer only.
Same I did with the walk cycle. I understood I want to animate the character completely with paths animation. So to keep the design of the static icon same as the animated icon I decided to design and animate the walk in AE. Then I placed one frame of it in my final Illustrator file for the static version of the icon.
The second thing I try to think of when I breakdown the design is do I need any specific masks? And if I do, I personally prefer making my matte layers in Illustrator as I find it more accurate than After Effects. In this particular case I decided to use the Preserve Underlying Transparency checkbox (the T checkbox) for masking the cover of the flip-book to the circle.
Animating the Walk Cycle
And now the moment we’ve all been waiting for (drums…) The Groovy Walk Cycle! (whoot! whoot!)
I realy like walk cycles cause you give your full attention, and quite a lot of time for about 1 second of animation. I admit there is something exhausting about it. But then you find out you can actually practice the whole study of animation on this one small daily action. And if you did it well, then you win the honored prize of enjoying this 1 second loop for an eternity.
I always start with the Blocking stage:
For walk cycles I like the method that Richard Williams shows in his awesome book The Animator Survival Kit (a must read for every animator and motion graphic designer):
First of all I set down the Extreme Poses. In a walk cycle that is the contact poses where the front foot contacts the ground for the first time.
Then I set the Breakdown Poses. The main breakdown of a walk is the cross legs pose where the back leg crosses the front leg. Usually I would put another two poses of the legs for the moment before contact, and for the moment after the back leg lift from ground and the front leg takes all the weight.
First I tween the body – cause it gives me the flow the rhythm and the weight of the character. I pay attention to its keyfreames timing and spacing (easing) to see it gives me the right feel of weight.
For the legs and the arms I usually Tween one side first. when it seems perfect I duplicate and offset the other side. Of course I would do few revision on it after duplicating, to fix the little things that no one actually see – but I believe they do feel it.
Finally adding some Follow Through and Overlapping Actions:
Not much to say here – this is the oldest trick in the book. Making some offsets that creates the Follow Through and Overlapping Action. The only problem in this particular character is that I made the arms from one single path (oh stupid me ^-^) so I couldn’t use parenting and IK mode and I had to actually draw the path the right way. Follow Through and overlap It’s all about weight and forces that comes from the pushing & pulling of the legs, torso and arms. The head gets a small bounce every time the legs push the torso up, then gets some overshoot at the top before the body stars pulling it down. Same with the palms that are inert, and thus rotate in an overlap according to the arms rhythm.
When i’m done I try to think of the weight and the rhythm of my character and fix its walk characteristics according to it. This guy for example is unusually happy and feels so good that his walking is almost a skipping. That’s why I tried to give the feeling that he pushes the ground very harder then usual – almost jumping, and so when he is in the air he feels very light. That is also why his palms and elbows has such strong overlap that gives the feeling of freedom – of relaxed muscles.
Actually, understanding the weight and the rhythm of your character should be on your mind the whole time. Since you start staging your Extreme poses and Breakdowns, though the Tweening stage and finally while offsetting.
That’s it folks!
Hope this was helpful, inspiring and maybe gave you some things to think about the next time you design and animate a small GIF