Creating my own animated logo

Michal Bodzianowski
3 min readSep 1, 2021

So, I’m in a few design classes this semester. In addition to my Object exploits, I’m also in a Motion (read animation) class. Our first assignment was to create a simple animation for our logo/brand in After Effects, but I may have gone a bit overboard here.

I won’t bore you with too many details, but in essence I took the logo I made for myself earlier this year in another class, traced over it in After Effects, and then used keyframes with paths I created to create a “smear frame” effect, which looks very satisfying, despite being time consuming. I made sure to overlap the animation of each letter/shape as well to make it fast and fluid.

Smear! Overlap!

I then made a bounce effect for the logo to bounce up in much the same way. Definitely something I feel did not need to be hand animated- as all these keyframes for each shape add up! I should have used more default effects.

Not even half of the keyframes used for an 11s animation. And it’s a simple one too!

Finally I used the typewriter effect to add my “tagline” if you can call it that. I was originally going to add a blinking cursor but unfortunately the code I was using did not work for me- and I had already spent enough time on this. Hand animating keyframes for each of the shapes is hard!

Ultimately however, I think I made a pretty cool animation- and in only about 1–2 hours of work. Well, maybe more. My one complaint is that the traced version- especially for “B” (looks more like a 3- but that’s also on purpose) is not accurate to the original logo. This is because I both traced it on my MacBook Air trackpad, and also because for some effects, like the “water spout” effect on the aforementioned “3/B”, required a stroke, and not a shape to execute. At least- that’s what my beginner intuition thought.

Comparison of Traced Logo (Top) and Actual Logo (Bottom)

Unfortunately, I wasn’t using the vectorized version of my logo so it was blurry, and my idea to ‘hide’ the traced version when not being animated ended up making the quality lower overall due to the rasterization. Since this was just an introductory assignment, I decided not to fix it. For now.

Overall, I’m pretty proud of this animation, and will definitely clean it up and use it on my website. Thanks for reading!

--

--