Adobe Magazine for Creative Professionals
Copyright © Adobe Systems Incorporated. All Rights Reserved
Adobe
“When a client wants your creative thinking—
not just execution—they get great work.”
 —Michael Lebowitz, CEO, Big Spaceship

Creative Convergence
“The thing that excites me most about this site is that it’s truly convergent,” says Lebowitz. “We used all our skills.” Broadcast design, illustration, photography and interactive design all come together on Nikeair.com. And the final piece is built to work across multiple delivery platforms— from on-air broadcasts to web video spots.

In the end, of course, all this is transparent and it’s not about design elements or delivery platforms. It’s about the experience. It’s about a good run that leaves you high on endorphins for hours. It’s about a game of hoops that feels so right it’s almost mind expanding. And ultimately, it’s about a brand of running shoes that just might transform you—if only for a moment.


Kimberly Grob has worked as a magazine and marketing writer for more than 15 years.

How Did They Do That?

To create the Run on Air/Ball on Air experience, Big Spaceship used a whole host of technologies and tools—and they dipped in and out of almost every commercial art genre, doing the majority of the work in-house. Here’s how they pulled it off:

1. Live action video shoot. Working with a production company, Big Spaceship directed a live action shoot to capture footage of a female runner and a male basketball player. Using a greenscreen complete with a green treadmill, the female model ran, while the male model had a tougher challenge: running and dribbling a basketball on the treadmill. Developers then “keyed out” the green background in Adobe® After Effects® to create an effect where the runner and basketball player appeared to be floating on air.

2. Still photography shoot. Using their in-house team, Big Spaceship shot all the “real world” images that are used in the urban environments where the athletes start their journeys. The digital images were edited in Adobe® Photoshop®.

3. Video and photography compositing. To create a surreal environment that looks part dream, part reality, Big Spaceship composited the still images and live action video using Adobe® After Effects.
Learn how to integrate Adobe Photoshop CS2 and Adobe After Effects 7.

4. Illustrations. Everyone on staff generated ideas for the “More World” animations—and all of them were created in-house. A combination of hand-drawn and digital images were created using Adobe® Illustrator®.

5. Scripted animations. All Big Spaceship developers were encouraged to create their own short scripted animations. These light animations load instantly on the site while other heavier animations are loading in the background. Using Flash ActionScript 2.0, developers created many of the keystroke effects, including the glowing points of light on the runner and the halo effects on the basketball player.
Learn how to create scripted animations.

6. Animation mapping. Using Flash® Professional 8, Big Spaceship mapped the 60 different animations to 60 possible keystrokes for each interactive environment.

7. Sound design and music composition. Big Spaceship composed all the music in-house and designed the sound using Pro Tools Studio. They imported it into Adobe After Effects, where they fine-tuned the audio levels.

8. Flash® Professional 8 delivery platform. Big Spaceship used Flash Professional 8 to import all the assets and deliver the final site.