We’ve just completed a job for our long-time clients, TIGI (now part of Unilever), designing an walk-through video for a new mobile phone app which has recently launched. The 3 minute video is a combination of a how-to, with an educational edge, topped off with some good old fashioned infographics.

It’s actually been an incredibly complex project – despite appearing to be a relatively simple walkthrough – which saw us utilise almost the full range of Adobe’s CC (Creative Cloud) video production apps, with very heavy use of the invaluable Dynamic Link features. In fact, the project likely wouldn’t have been possible in any other software package, especially considering that we didn’t have to generate a single rendered file until the very last moment when we created the master output for the client!

With the app already available for free via the Apple app store, we loaded it onto a 5th Generation iPod Touch (it also runs on iPhones, with Android and iPad/iPad Mini support coming soon), and got to work in analysing how all the various graphical elements moved and coordinated with each other through each and every stage of the app. In other words, we had to completely reverse-engineer the app’s entire graphical user interface, breaking down every element within the app into its basic graphical building blocks, sort of like disassembling a computer game!

With this mammoth task completed, we worked with TIGI to put together a storyboard and script which would lead us through the app’s key features, and so determine how we could reconstruct the app entirely within Photoshop CC, After Effects CC and Premier Pro CC, to give us our unique guided tour.

 

TIGI CC Photoshop

 

After around a week’s work solely in Photoshop, we’d built all the graphical user interface elements, including some from the Apple UI itself, and were ready to jump in to After Effects to animate them. Our remit was to make the production completely photo-realistic, akin to the Apple TV ads, albeit minus any ‘stunt hands’, which were to be replaced by graphical overlays to represent swipes, pinches and clicks. Once in After Effects, and faced with over 400 layers of graphical elements, as well as several items of video content to integrate, the size of the task became apparent…this was going to be one hell of a composite!

 

TIGI CC After Effects

 

With 27 separate composites built – with up to 70 layers in each – and 3 master composites for controlling and aligning the pre-composed layers, we were ready to build the project. However, due to script revisions – despite multiple guide voice-overs being laid down – the one great unknown we had was the project’s duration and more specifically, what the voice-over’s pacing would be, which would of course determine when we saw relevant content on the simulated screen. At that point, we struck upon a eureka moment; by clever nesting and pro-composing in After Effects, we could essentially treat each and every animated sequence as a video clip in itself, allowing us to ‘play’ or ‘pause’ a graphics sequence to accommodate the final voice-over. Dynamically linking that content live into Premiere Pro would mean we would essentially then edit in After Effects and preview in Premiere Pro. Boom!

 

TIGI CC Premiere Pro

 

With a punchy, fresh and youthful voice-over laid down by Sophie Roberts in our sound booth, we set to work editing her delivery, whilst working in tandem in both Premiere Pro and After Effects – updating all the timelines and graphics timings as we went – to ensure her delivery kept pace with the graphics and vice versa. Astonishingly, with Bridge, Photoshop, Audition, After Effects and Premiere Pro all open simultaneously – combined with their ability to update each other ‘live’ as we worked through the project – at no point did we have to hit ‘render’ to see if we were on course. In fact, although we’ve leveraged Adobe’s Dynamic Link technology between applications on numerous projects before, this one really blew us away with how seamless the integration was, and what an incredibly powerful way of working the suite gives us.

With the graphics, animations and timing’s nailed, we set about adding the overlaid gesture graphics to indicate where to click, swipe and pinch within the app. Again, there were simply After Effects composites dynamically linked into Premiere Pro, allowing us to quickly and easily place them and even alter timings, directions, etc. Much easier than dealing with multiple video clips!

 

TIGI CC Audition

 

With the visual elements of the video built, we turned our attention to the audio, to create a final audio mix. Even here, it was straightforward to export our rough audio mix sequence directly to an Audition mix session, where we could control envelopes, crossfades and other effects in greater detail, allowing us to rapidly generate our audio master to accompany the video.

 

TIGI CC Bridge & AME

 

Marrying the two in Premiere Pro, the production was now complete, and for the first time in the entire project, we hit ‘render’ (via one of our custom presets in Adobe Media Encoder), to generate our final client master deliverables (and with a watch folder set up, the MP4 viewing/web copies were created all in one go too).

Once again, it’s been great to be able to turn a complex project into a seamless workflow through the powerful integration been Adobe’s applications, and the immense creativity they allow.