16_JPMorgan_hero

FUNDAMENTALS LONDON

JP Morgan HTML5
Ad Campaign

CREATIVE
DESIGN
VFX
MOTION
CODE

CONCEPT • DESIGN • MOTION • CODE

Fundamentals needed to transform two print ads into Rich Motion HTML5 Banners. The print banners were – static, and it soon became certain that a lot of work would be involved.

Ice and Splashes

There were two main routes - ICE and SPLASH. For the ice route we created an icy environment with some effects and used code to animate some assets.

For the Splash route, the challenge was to have a realistic alpha effect. That took a lot of work. 

Understanding that the campaign needed some wow-factor, we created a short but effective animation that would attract potential customers - online and in public spaces. 

ICE ROUTE

Combining motion and code

The main assets was a huge grid of ice cubes. By cropping each, I guaranteed uniqueness to all. By setting up the photoshop file nicely, it was really easy to start animating in After Effects.

The row and the reflection were made in AfterEffects. But I needed individual cubes to give them a bit of random movement like they were bumping.

16_jpm_ice
16_jpm_icetext

SPLASH ROUTE

Advanced After Effect Skills

This was a big challenge. I needed a water splash stock video that I could work with. So I did a few tests with stills, cropping them on photoshop until I found one that i knew it would work, but would take a lot of it.

16_jpm_water
16_jpm_water

Video Tech

The video is beautifully shot and has a few splashes for uniqueness, and furthermore, was shot in 100fps, so a lot of frames. The problem was the background. Too similar to the – transparent water. So I had to take advantage of Rotoscoping tools, and basically retouched all frames one by one.

Motion plus HTML5

To create a “transparent” effect I used some blending modes and alpha mask, and added a few extra drops to the text.

Selected Works

Devil May CryFull Digital Campaign

Project Cars 3Display Ads Campaign

Pokemon Trading CardsSocial Media Ads

Poker StarsHTML5 Campaign

Pokemon GoSocial Media Ads

FidelityAnimated Infographic Videos

SWRHTML5 Campaign

Virgin MediaDigital Campaign

Sainsbury'sHTML5 Ads

NetflixHTML5 Ads

FSI InvestmentHTML5 Ads

HondaHTML5 Ads

Tesco MobileHTML5 Ads

Old El PasoDigital Campaign

VaselineHTML5 Ads

Magic FMDigital Campaign

Tesco and SamsungSocial Media Videos

Baywatch FilmSocial Media Videos

ALWAYS AVAILABLE

ALWAYS
AVAILABLE

Get in touch and tell us about your project.

Get in touch and tell us about your project.

PROPER BANNERS

ATL CREATIVE PRODUCTION LTD
CN: 08060382
VAT: GB211558923

(+44) 0203 633 4390

LONDON

St Louis Offices
Kellett 56


+44 7575 042349

BARCELONA

BetaHaus
Vilafranca 7


+34 650 296 992

ALL RIGHTS RESERVED