Adobe Creative Cloud

February 8, 2016 /Customer Focus /

Territory Studio & The Martian: The Creative Process with Adobe After Effects CC

Having worked together with Director Ridley Scott and Production Designer Arthur Max on Prometheus, Territory, a design studio that works on a range of motion projects including feature films, brand work, and popular video games, was asked to create the screen graphics for The Martian, recently nominated for an Oscar® for Best Achievement in Visual Effects. Although both films are set in space, The Martian is predicated on real science, and ‘authenticity’ was key to the creative.

DF-07969_Giles-Keyte_sizedCredit: Courtesy of Giles Keyte

When Territory’s team, led by Creative Director David Sheldon-Hicks and Ar Director Marti Romances, broke down the script, they realized that story-led motion graphics would be a constant presence in every scene, helping to explain, clarify, or direct the dialogue and the action.

Here, Marti takes us behind the scenes, sharing the creative process so we can understand how Creative Cloud and After Effects CC helped the team achieve the stunning graphics that feature in the film.

Project overview
There were 8 key sets, including Mission Control, the Hermes spaceship, NASA Jet Propulsion Laboratory (JPL), Mars Ascent Vehicle (M.A.V.), HABitat facility on Mars, Mars Rovers, NASA offices, Pathfinder, and smaller projects for the Space Suit Arm Computers and Crew personal laptops.

Each set featured hundreds of screens, most of which needed to be animated, and I created visual design languages to help differentiate each set. From there, my team of designers, animators, and 3D artists began to create content.

Adobe Creative Cloud was with us every step of the way, with Illustrator CC, Photoshop CC and After Effects forming the backbone of our creative tools, helping us to bring our concepts to life and make our time more effective.

Overcoming challenges
The biggest challenge we faced was to find the best ways to combined real science, stunning design, and dramatic storytelling. Our graphics had to represent complex scientific information very clearly so that the audience could understand and keep up with plot twists. At the same time, we had to make sure that the science was still credible and met with NASA’s approval.

My approach to a project of this scale is to create all the user interfaces in Adobe Illustrator first, and then animate all the windows and widgets in After Effects. Building the graphics in a non-destructible mode (being able to scale it up and down without losing pixel quality) was key, as we knew we were going to be repurposing lots of the graphics in different aspect ratios.


CREDIT: Territory Studio

We also knew that many of the screens required interactions or animations to tie into story points, so we designed the graphics with movement in mind. We looked carefully at the UX of the interfaces that we ‘reimagined’ for the story to make sure that the choreography felt right in terms of ease of use and expected function.


CREDIT: Courtesy Twentieth Century Fox

An authentic Mission Control
Mission Control was the biggest set and featured around 100 screens, including a bank of LED monitors 18m x 6m. Ridley and Arthur were very clear that the Mission Control screens (NASA and JPL) needed to look real and work authentically.


CREDIT: Courtesy Twentieth Century Fox

One of the film’s key scenes plays out in Mission Control so it was essential that we got the balance right between factual screen content and visual design. Each screen has a real purpose in that context and we needed to make sure that our work reflected that. And it was important to give a unique identity to the set, which features a lot of information, including realistic video feeds and telemetry data for the actors to react to and interact with.

Creating a visual language
To be able to create a visual language to wrap those realistic elements in, I researched NASA’s current data and interface conventions, and how data was prioritised and when, how that was organized and depicted on screen and in the Mission Control space, how crew interacted with it, what commands were given, and how that changed the data display. We also talked to NASA about how they think that will evolve over the next 20 years.

I then began to visualize how to bring all that data, which in real life is displayed in a mix of styles, formats and screens, together. I applied information architecture principles to the interface designs, and thought about data priorities and the user experience. I wanted to achieve a consistent UI design that could work for NASA in real life.


CREDIT: Territory Studio

Out of the possible routes we suggested, Arthur chose the combination that was very true to the data requirements and the spirit of NASA’s current Mission Control, and yet pushed 20 years forward.


CREDIT: Territory Studio

The backgrounds were black and dark blue with white fonts and light blue indicators. Red was used to highlight mission critical data and indicate warning status. The overall look of the interface is serious and authoritarian, but the hierarchy of information is clearly readable to tie in with story points.

Animation ref: Martian NASA Mission Control 02

With hundreds of animations playing concurrently, After Effects played a key role in bringing the UI to life within the context of the action. I would say the best thing was the ability to export every single layer from Illustrator to After Effects and animate them as we wanted to. They were couple designs and having everything organised was key.

Martian_Sc153-154-155-160-165_NMC_IrisProbe-ALL_03_MR_141114-copy_sizedCREDIT: Territory Studio

The 2D graphs on the right hand side were also Illustrator paths transformed into After Effects paths so we could animate the bezier points in After Effects. The “Numbers” native effect was very useful when replicating timecodes like the countdown for the missions or (again) for the amount of running numbers in the left hand side.

Designing for The Hermes spaceship
The Hermes space ship was another key set. For the Hermes screens, UI Art Director Felicity Hickson wanted a twist on the typical spacecraft avionic designs. Again, NASA’s reference material for the relevant technology and science led the design of the console screens, but as we were designing for a ‘near future’ spaceship, we also looked at what SpaceX are doing to push the designs a bit further.

We ended up with a good set using different dark tones on the backgrounds (dark blues, purples and greens) and very vivid and bright colours (mainly whites and bright screens) for the data and buttons on those screens.

Martian HERMES Purnell Orbits 01

Again, the Hermes screens were all displaying mission critical status information, be that engineering schematics of the Hermes itself, or of operations performed by its equipment.


CREDIT: Territory Studio

After Effects really stood out for its ability to help us achieve the simplicity of the main graphs for the orbits, such as the ones in the top left corner of the above screen, plus all the rest of the running numbers animated using the “Numbers” effect native from After Effects. The Posterise Time effects helped a lot too when trying to replicate a slightly delayed update of information from the satellites, receiving information not instantly but a bit phased (by 15 or 20 frames per second). So we could animate everything smoothly and later on apply the Posterise Time effect to down the time of the refresh on the animation by the same values for the rest of animations on that screen (i.e., numbers, graphs etc.).


CREDIT: Territory Studio

Insights from Designer and Animator Daniel Højlund
Expressions offer a great way to establish a lot of extra animation control in After Effects, and we used it occasionally to help drive certain animation like number values and relationship between different layer properties. Building a rig with Expression controls linked up to multiple layer properties, also help us ensure certain animation patterns and feel to stay consistent across screens. It was a very time efficient way to generate some of the more generic animation elements for quick turnarounds with the use of fairly simple expressions.

Also, the pipeline between Illustrator and After Effects is much improved and very useful. Designing the graphic elements in Illustrator and importing them into After Effects, made it easy to go back into Illustrator to make design adjustments, and then have those elements live update in After Effects. It is a much faster and sufficient way of working with Illustrator layers, which was very handy for us on more than a few occasions.

The fact the screens were not just set dressing but ‘mission critical’ and necessary to both story and credibility added to the pressure, but ultimately the satisfaction. And once the screens were programmed by Compuhire, our on-set playback partners, they really brought the sets to life and it was great to see the actors performing with live screens on-set.


Customer Focus

Join the discussion

  • By Bijutoha - 11:25 PM on February 16, 2016  

    Very interesting and nice to me. Feel better with AE. 🙂