Tutorial: HFOE Logo
To celebrate the launch of my newsletter, I decided to provide a quick run-down on how it’s animated logo was created. To be clear, I’m talking about this:
With the title of my newsletter and this site being Happy Faces on Everything, it’s quite clear where the idea came from. I’ve always had a strange compulsion to give everything I draw a grinning face so why not let myself get a bit carried away and include that in the branding.
Putting smiles on stuff
I knew I wanted somewhere around 20 different icons to cycle in this animation. So, I set the target at about 100 concepts. You can see those here:
What was really cool about narrowing down the concepts is that since I wanted a single colour design for each one I really had to focus on shapes that had a distinguishable silhouette. While I loved the idea of including a hamburger or toaster, they just didn’t read as clearly as others. My hope is that in the final set you can tell what each one is.
From my initial 108 concepts I produced these final 21:
Woah, that’s a lot of smiles…
Making it move
The animation of the logo was done in After Effects. And while I’m not going to give a crash course on the program here, I will provide a synopsis of the steps I took to achieve the final look.
First, I created the icon loop. After running some tests I found that by running my animation at 12 fps I could have the icons switch out every 4 frames and achieve pacing that I liked. I chose 12 fps for two reasons; it’s pretty standard for frame-by-frame animation and it gives me a smaller file size than 24 fps. Some quick math tells us that 21 icons at 4 frames each gives us an 84 frame animation—nice and small :)
I would like to mention at this point that using After Effect’s Toggle Hold Keyframe made it easier to quickly toggle between one icon having 100% opacity and the one preceding it having 0%. Without this I would have had to make a lot more keyframes.
Once I had my loop, I got to making it bob up and down. To make life easier, I pre-composed the rotating icons so that any additional animation only needed to be done to a single layer.
Knowing that this would be a looping animation I had to make sure that if it started with the icon at the peak of it’s float on frame 1, it also had to end there on frame 84. Some trial and error brought me to having the animation alternate between it’s highest and lowest point every 21 seconds (or 84/4).
Once I had the timing down I went ahead and added those keyframes to the position property. I then smoothed things out by easing the keyframes and increasing their velocity from it’s default of 33% to 50% to put more emphasis on the peaks of the animation. A quick preview showed me that it looped just as I wanted :)
At this point I added in the shadow. All I did was bring in the shape I wanted, position it where I wanted and animate it’s widening and contracting at the same rate the icons rose and lowered.
The Scribbled Effect
The final touch I gave the animation comes courtesy of Jake Bartlett and his fantastic course on Skillshare. By using his Scribbled technique (which he does a much better job of teaching than I), I was able to add a lot more life to the final. Here is the comparison:
Thanks Jake for helping me make things more ‘wiggly’
That’s it! I hope you learned a lot from this tutorial and if you have any questions or comments please do reach out!