Disclaimer: I do not own this graphic, I did not design the original, I do not make any claims to ownership of any materials created by or associated with Respawn Entertainment, EA, or Disney. This blog and the associated exercise and tutorial are for educational purposes only.
Everyone in the world is a content consumer, but for those of us who are also content creators, in the back of our minds there’s often a little voice subtly critiquing and picking apart every billboard we drive by, every video on our social feed, every podcast we throw on. For animators specifically, that means that sometimes in our off-time, a motion graphic that we see over and over again will just get stuck in our heads. Enter Jedi: Survivor, the new video game from Respawn Entertainment and EA. After about a week of playing every night after work I could not stop thinking about how I would build the loading screen logo inside of After Effects if I was to build it.
…So I built it.
For me this was obviously not an exercise in art direction or design, but sometimes working on a project where your only goal is to match something pre-existing gives you an opportunity to think about the basics. Better said, it frees up some headspace to think about what to think about. Here are some of my tips and takeaways from reproducing this motion graphic I’ve now spent so much of my free time staring at.
For an even more in-depth look at how I built this and my process, check out my tutorial on YouTube
Tip #1: Build it right behind the scenes
You could design the prettiest thing in the universe faster than anyone else, but unless your animation is really simple, the moment your boss or your client (or you) wants some changes made you’re going to wish you’d spent some time thinking about how to make it editable just as quickly.
Expressions controls are a really good way to do this. Before you dive in, think about the two or three aspects of your motion graphic that you’ll want to spend the most time dialing in, and then think about the two or three aspects that your client is most likely to want to see done a few different ways. In the case of our Jedi: Survivor bug this was the thickness and spacing of the main ring, but it could be as simple as a color fill that you’ve copied to a million different places, or the amplitude of a wiggle operator that you need applied to multiple layers.
Taking the extra time to link whatever you want easily accessible to a control layer the first time you set it up is well worth the one extra layer, and twenty seconds you spend pick-whipping your hero property to that slider. That way you won’t want to pull your hair out when it comes time to dial in your look, or do your first revision.
Which brings us to…
Tip #2: Procedural workflows are your friend
As much as I am a fan of organization, simplification, and limiting the amount of pre-comps in my project, I’m more a fan of not having to do work twice.
When I built the main ring in my Jedi: Survivor project I made sure to build the outline pieces once, pre-compose them, and make the outlines themselves off of that pre-comp. Why? Well I already had something that would work perfectly as my main matte, and by pre-composing it, any change I made to that matte would affect the outlined bits and vice versa.
The other place I did this was on the color step. If you’re ever working on a motion graphic that’s monochromatic, this is another place to save a little bit of time. By designing in black and white and then pre-composing the entire animation, I was able to color it in tint effects and retain the ability to go back and tweak the motion as needed. I could have removed or added all the layers in the world and it wouldn’t have changed whatever look I wanted it to have in full color.
Tip #3: Your background matters
Think about the world that your motion graphic is going to sit in. What mood should it evoke? Is it bright and cheerful? Are you building it for a large corporation? A small one? A financial institution? A travel company? Whatever it is, the background should reinforce the vibe you’re trying to achieve.
In the case of the Jedi: Survivor logo, the motion graphic needed to evoke mystery, the idea of forces (no pun intended) at play but out of sight, and be decently abstract. The moody cloud thing works here because it gives the viewer the feeling that they can’t see everything happening just behind the curtain. The subtle movement inside the clouds helps make things feel like there are plans in motion we’re not privy to just yet. In terms of color, the dark cyan and low contrast set off the bright shining symbol of the old jedi by being complementary in its color palette. It lets the main logo shine through without being distracting – and does the animator’s hard work far more justice than putting it on a solid background.
Tip #4: Design your Motion Graphics for your audience
Before you can even think about firing up After Effects you should be thinking about where your content is going to be viewed, who is going to view it, and why. Is it an explainer video where you’ll be asking the audience to think critically about a concept? Is it a brand video designed to attach a certain feeling to a particular company?
With the “Survivor” bug it’s a loading screen. The target audience is a gamer whose adrenaline is still pumping after that last boss fight, and they’re trying to get to the other side of the map as quickly as possible via fast travel. Or they’re anxious to get going on their first quest of the day. In either case, they want reassurance that even though nothing else is happening on screen, their gaming system is still working. For that reason the pacing of the logo animation is slow and deliberate, and never stops moving. The cyclical rotating of the rings conveys the idea that the computer is still thinking and nothing’s wrong.
One could write an entire series of blog posts on designing for your audience, and this is only one of many vectors that we can be thinking about here. Some other things to consider might be what platform will it live on? TikTok? Vertical is the way to go. LinkedIn? Sticking to 16x9 is okay. Is it a concept-heavy explainer or a brand sizzle? If it’s an explainer, leave time in your animation for the audience to process what they just heard, but if it’s a sizzle reel, keep it moving.
Summary
These are takeaways that should apply to all motion graphics and hopefully they provide a framework for how to approach any project. But note that the broader point of none of them is anything particularly technical. As creatives we sometimes get caught up in our visions for how to do a project and what it’ll look like, but as professionals we need to keep one eye (at least) on how to do it in the most efficient way possible. As both it's incumbent upon us to think about what specifically we’re doing in the first place. And all of that has more to do with the whys of the project than the hows.
Comments