ICM 504: Module 5 Project - Motion for Promotion

ICM 504: Module 5 Project - Motion for Promotion

The Project

After doing some reading and researching on the subjects of animated storytelling/techniques and the 12 Principles of Animation, we were tasked with creating a logo stinger/bumper of our own:

  • Start with an Illustrator logo file.
    • You can use your own logo.
    • or, you can start with a free logo template and customize it.
  • Use After Effects to animate the different elements of the logo.
    • Use appropriate animations for the "feel" and goal of the logo.

The Logo

C0deysseus Logo - 2018

I recently rebranded the logo for my art portfolio/website, c0deysseus.com. I also replaced the introductory "typewriter" animation [filed under After Effects] with a sick animated text "transmission" that Matthew Wagerfield has blessed the internet with (which can be found over at CodePen). C0deysseus is my art persona and personal brand, and the theme/idea of this persona is to portray my digital/online presence and skill set, since I pride myself on being a web and digital designer in additional to being a digital artist. A brief explanation of the new logo: the anonymous female is modeled after me (hair is exactly the same) with a sort of "power button" graphic over where her left eye would be. However, this graphic has been turned clockwise 90° to look more like a "C" than a "0".

C0deysseus Logo - 2018

The Logo Stinger(s)

C0deysseus - Glitched Out

Given that my art portfolio brand and website are stylized after the "vaporwave/outrun" aesthetic (look it up; you won't be disappointed), I wanted to continue with this technologic theme for the logo stinger—but I wanted to also incorporate the decoded-style animation from the landing screen on my portfolio. So, naturally, I searched YouTube for a fitting "glitch-effect" After Effects introduction tutorial—and stumbled upon this amazing lesson (which, yes, contains usable stock footage; thanks FootageIsland!).
I had originally created the shorter one first (shown below), but felt that it was a bit...too short. I enjoyed the simplicity of the logo, but I wanted to do more with it. I began to search around YouTube for different After Effects tutorials (specifically for logo/shape/text animations—and I also ended up creating a playlist solely to compile all of the tutorials I will one day step through) and stumbled upon this tutorial about animating polygons. I decided to use the "Radio Waves" effect with circular shapes (instead of the polygonal shapes from the tutorial) in order to emphasize and draw attention to the power-symbol graphic in the logo. Andrew's demonstration of the Mask feature in After Effects combined with the "Power Up" sound effects from my [purchased] Lesser Vibes pack gave me the idea to also have the logo go through a physical loading/boot-up sequence.
I'm extremely satisfied with both results, although I can't exactly pick one over the other. I think each has its own purpose.

[Royalty‑free] Credits:
"TOP10 GLITCH Sound Effect", Sound Effects
"Lesser Vibes - High Tech Interface Sounds", Sergey Eybog (purchased via Sonniss.com)

Related Reading: