I wanted to do some experimenting in animation with the UniGroup logo. First off, I needed to get the logo. Thankfully the UniGroup website displays the logo as embedded SVG vectors so I don’t have to recreate everything from scratch. Next I had to inspect the logo for peculiarities that might only show up after I’ve imported it into other software. The initial logo I grabbed actually had bitmap content in the SVG, but subsequent versions were all vector and it was all fairly clean for animating.
The idea here was how I could deconstruct the logo and I need to play a bit and see what shakes out. This phase is often done through a combination of dragging elements around in the software and sketching on my notebook and frankly getting away from the screen for a time. In hindsight everything I write created here seems totally obvious and simple but it really did take some thinking and deciding to get to where I had a good plan. The major takeaway is you want your animation kept in the spirit of the brand. For example just because you could explode the logo into particles and it looks super cool and trendy, that doesn’t mean you do it. Start with what the logo might mean.
Without having been in the discussions about how the logo came to be, it was quite fun to try to understand it. One of the things I like about the logo and I’m not sure if it’s intentional, but the way the nested U shapes are folded, they create the dimension of a box. So while I don’t see a tractor trailer, there’s a hint of the same proportion there. Intentional? Happy Accident?
I see the series of inset U shapes as a representation of group of companies under one umbrella. It’s easy enough to make a logo come in from fade or fly in from an outside position to the center. But what about breaking it apart. In breaking apart the pieces of the logo, I saw a couple ways that it could be animated, so the Inset U mark would get some extra attention in say a stacking assembly.
Something I wanted to point out is a quick way to help with tracking and direction. Really simple but you can add a few lines to help you align things. The reason why this is helpful is sometimes you’re aligning an object and keyframing while that object is actually invisible or things are happening off screen. in this case I needed to know some relative distances and direction so I drew a few red line shapes and just hid them for the final animation.
Seems like every project I design, at least 60% of it ends up on the cutting room floor. This is a good thing though as ideas will come and go. Some of them are abandoned due to being impractical for the time allotted. For example, I was actually interested to see what it would take to try to recreate the logo in 3D. And while it’s not hard to generate the pieces of it, the problem is matching the forced perspective of the 2D Unigroup logo and then deciding how to animate it. It turns out, that the logo shape isn’t as easy to create in 3D to match it’s 2D perspective at all, even with all sorts of manipulations to the virtual camera. The inset U shapes in 3D do not bend at a 90 degree angle. And I realized a challenge for a later time is to see if I can mimic the gradient color the way 3D light sources will bounce off the corners, whether I can achieve it with real lighting.
Some other ideas in 2D or 3D would be to hover the logo over a white surface on a white background but seeing how soft shadows look with the logo hovering in space and making the top part of the U start straight but animate the mesh folding in half as it appears. Nailing that start and end point with correct lighting is out of spec for now, though it could all be done in 2D of course too, more ideas are available once the 3D version is correct.
Never let a good screenshot go to waste
I’m just adding some extra technical information here in case somebody runs across this with interest in using AfterEffects. Because you need to import the content, wherever you created it into After Effects and there are sometimes multiple ways to import something to your best advantage.