Launchpad Background Design

Overview

We created a launch complex to teach middle school students Newton’s Third Law of Motion. At this launch complex, students can adjust thrust and gravity values to see if they’re able to launch their rocket into space.

I created the background for this set piece, as well as helped to design it alongside our Art Director and fellow Illustrator.

My Role: Background Artist/Illustrator
Team: Art Director, Content Experts, Illustrators, Animator

The Challenge

The Art Director handed me an initial concept of the launch complex along with three scenarios it needed to fit:

  1. A still that would be paired with text introducing the student to Newton’s Third Law of Motion.

  2. A simulation where students could test launching a rocket by manipulating thrust and gravity values.

  3. A zoomed out view of the launch simulation.

Additional requirements for the background included:

  • The design of the launch complex needs to be based on a real-life launchpad.

  • The style should match our UI’s sci-fi aesthetic.

  • The illustration needs to facilitate the rocket launch animations needed for our simulation.

Design Direction

Our Art team decided to set the scene at night so that the user’s attention could stay on the rocket, as well as reducing the number of assets we would need to depict in the scene. I was handed a lighting concept by my fellow Illustrator and Art Director to base the scene’s lighting and color on.

I also pulled visual research from photos of real launches to get a sense of how the spotlights and thrusters would impact the lighting scenario.

For the design of the launch pad itself, I looked to the sci-fi designs our team was developing for the look of the rocket and the UI.

Color Concepts: Joel Rosenburg and Hilary Pierce
Rocket Design: Joel Rosenburg
UI Design: Brandy Anninos

Designing a Launchpad Layout

To solve for what structures were typical at a launch complex, as well as how those structures were positioned, I researched the layout of Cape Canaveral’s Launch Complex 39B.

So that our background wasn’t overly complex for our middle school audience, I simplified the designs of the structures. These simpler designs also allowed for the background to be clearly legible for our zoomed out launch view. We consulted with an Astrodynamics and ML/AI specialist to ensure our designs still contained the necessary features for a rocket launch.

Other concepts I explored were:

  • Silhouettes for how we could style match the launch pad and lightning towers to our sci-fi aesthetic.

  • Various compositions to best focus our attention on the rocket and match our Florida landscape.

Solving for an Accurate Launch Animation

To ensure our launchpad design could facilitate an accurate launch, we again consulted with the Astrodynamics and ML/AI specialist. They helped to bring clarity on questions related to the launch pad and animation, such as the mechanics of the platform arm, how the design of the platform helps to control the rocket exhaust, and other details.

Designing the Color Shifts During Launch

Because our scene is 2D, we didn’t have access to dynamic lighting. To work around this, the animator and I planned to create a sequence of rocket images, each with a different stage in lighting. I also created a lit and unlit version of each layer in the scene that the animator could fade between as the rocket left the platform. Lastly, I directed the animator as to what colors within the light of the exhaust would be to ensure that the exhaust fit seamlessly with the environment.

Preparing the Illustration for Animation

The background needed to facilitate these animations:

  • Arm rotates back via hydraulics

  • Umbilical cord detaches from rocket when arm rotates back

  • Animator will create rocket exhaust, which needs to appear as though it is being funneled through the flame trench

  • Lighting will shift as the rocket thrusters turn on, and as the rocket lifts away from the launch pad

  • Entire animation reflected in water

To ensure that the animation process went as smoothly as possibly for the animator, I planned out what layers would need to be separate alongside the animator, as well as any additional layers that would be needed to allow for color shifts. This resulted in a handoff .psd file with each necessary layer separated as expected that the animator could directly animate from.

Results

The final illustration succeeded in:

  • Depicting a believable launch complex that was visually age-appropriate for our middle school audience.

  • Matching the style of our launchpad to our existing rocket design and our sci-fi UI aesthetic.

  • Facilitating a night-time rocket launch animation whose source file was setup with the animator’s workflow in mind.

Students were able to watch their rocket launch into space while the various components of the environment remained stylistically seamless.

Key Takeaways

  • Consulting with field experts and researching real-world locations strengthens the accuracy of our environment’s design.

  • Consulting with the animator on how the illustration needs to facilitate the animation helps to make the animation process more streamline.

  • Unifying the environment design with other motifs seen throughout the product helps facilitate a visually seamless experience.

  • If a desired outcome is difficult to achieve on the animator’s side, the illustrator can help problem-solve a solution on their end to help the animator achieve the desired outcome.

See the Design in Action!

See how the launchpad background was used in the STEM Case Study: Save a Satellite.

Next

Lunar Landscape