I really enjoy creating short animations. Really short. I’m not sure I would have the patience for anything over 15 seconds, much less feature length. But ask me to create animation as an added touch to something else, such as animated icons, and I’m all over it. Animated icons are a great way to teach student who are new to the process and principles of animation. These small vignettes work well as a first project and get the students up to speed quickly. It never fails that students are astounded at how the principles of animation turn stiff robotic animation into something that has dynamic life. It’s the potion in the motion.
Project: Animated Icons
The tool set above was the demo for a project involving animated icons. Each one was created to showcase principles of animation in motion design. In addition, I demonstrate some of the basic functionality of Adobe After Effects. The hammer icon was used to show key framing, tweening, and straight ahead animation. Likewise, the screwdriver added masking ability using masks and track mattes. The animated hinged ruler showed students how to use a null object and parent layer to each other. Another requirement is that the animation stays in a continual loop.
It’s Not All About the Tutorial
I try not to just demonstrate software in class (although it is fun) so, on top of simply seeing how After Effects works, I put the principles, such as anticipation or follow through, that I’m covering in the first week of class to use. We also cover points specific to icon design as it relates to a brand. The students see how to connect the icons visually, thematically, and harmoniously, etc., by the end of the demonstration.
Student Examples
Below are a few student examples from the animated icons project. During this semester, they had both Motion Design and Advertising 1 with me, so I used that as an opportunity to do some cross pollination with their work. So while they were working on advertising for two specific brands in one class they would animate for those same brands in Motion Design. Below you can see animated icons for Burt’s Bees, Scrubbing Bubbles, Kat Von D Makeup, Subway, Meals on the Fly and Dawn. The purpose was for web/app use as either a small interactive icon or interface feedback. Hence, each icon had to speak with the voice of the brand, but not necessarily feature the brand name or logo. In other words it was a small part of a greater whole. I think they did well for the very first animation project.
