503 - Collab: Monotype - Animating the Illustrations

The next step involved focusing on the smaller aspects within each illustration to animate them efficiently, this in turn will be what brings them to life for the digital aspect of the campaign.

I started with the swallow, that being the easy one..

As I've learnt from my past projects smaller animations which only require small amounts of warping can be completed with the puppet tool in After Effects.

However when a whole structure has to completely change position/shape it is better to just storyboard each stage of the movement individually and then bring the layers together in After Effects to create a smoother transition.





However the ship was more complicated, it required 3 separate elements of the animation to be moving out of sync with eachother, to appear randomly like it would in reality. 

So as my first experiment here shows, I could not create the separate layers of the waves, flag and birds all changing at once, as it then appears to structured and unrealistic.

Instead I removed the flag and birds from the composition, and focused only on the way the waves would move and how the ship would move in response to that.

I found it challenging making the waves appear to be consistently rolling across the curved bottom edge, but after a good amount of trial and error, I managed to get it to appear consistently enough - through the use of 3 individual layers.

This meant that I could then approach the shape of the flag moving in the wind separately and then attach it to the shifting mast on After Effects afterwards. The same applied for the birds flying around too.

Same approach used with the PinUp girl, creating 3 individual layers which focused on the movement in the kicking legs, and then the arm lifting the glass with the droplets coming out.











Now I was ready to get onto After Effects and create the looped animations ready to be mocked up..

For each of the animations, to emphasise the scene and add realism, I used a custom recorded soundtrack suitable for each of them - the audios actually came from videos I have stocked up from holidays and memories! So it was easy not to infringe copyright, it may become harder to do this way when I approach the other animations for everyone elses illustrations, but for now I was able to provide audio from a windy day out on a walk for the swallow, a beach scene with waves in the background and ships creaking for the ship animation, and then a noisy bar scene for the pinup girl!

Here is the swallow loop:




In terms of introducing typography to go with this one, I started to think about how it work on the body. "Free to Fly" was perfect for our desired tone of voice for the project, obviously reflecting the flying bird.

I planned how the swallow could fly across the composition and then an eccentric swirly banner could appear afterwards with the typography on there. 

I initially designed the shape of the banner on Illustrator, baring in mind how the two lines "Free to" & then "Fly" in larger lettering can fit on the front facing banner sections.


By separating the layers of each section and then applying very well timed clipping masks over the top, I was able to gradually reveal each bit of the banner so it appeared to slide into visibility (as shown in the screenshots)

It was then a matter of lining the type up to transition in on-top as it appeared.

I made use of the Monotype typeface 'Mercurius Script' for this, as the old-style serif chipped away form felt appropriate for the banner. Bringing a nice traditional bit of character to match the old American swallow it will be paired with.

Here is the animation:



Next, I finished off the ship animation:



This involved lining up the flag as previously discussed, and then using the puppet tool to warp the birds to appear to be flying. 


At this stage I acquired some feedback off some classmates regarding touching the ship up. They picked out a mistake I had made filling in the mask which I corrected and they also commented on how the birds appeared a bit too random and almost 'drunk'! I did finely adjust this aswell as I could however it was clear to me that once mocked up on the skin it was not going to be what attention was most drawn to with the type and waves crashing, especially in relation to the short time it will actually be visible on the adverts/showreel, so I made a justified decision not to stress too much about this!

Lastly it was introducing the typography. I knew I wanted it to fit around the curved bottom like in the Sailor Jerry's illustration so it looked fitting as a collated tattoo design. From all my experimented typefaces I chose to use ITC Edwardian Script (another Monotype typeface!) whose calligraphy styled swirls fitted the old American style perfectly. "Sail Your Own Ship" again was the perfect accompaniment - invokes the audience to be their own person and to be proud of that.

And finally, the PinUp girl, which did not require any further editing:



I did separately animate how the type would transition in for with this one. A simple, well timed transition felt punchy and assertive along with the ideal of the old-style pinup girl. Leaving a slight gap in time between the second line transitioning adds emphasis to the strong statement 'My Skin, My Story!" eliciting that story-telling nature to the tattoo which was so popular with the Old Sailors.

For the typography for this one, I had been working on a bit of a custom Old American tattoo styled typeface of my own. I'd based it off a free version online and then worked ontop of it to get my form and style, this then allowed me to add my own accents in and develop a wider contrasting line weight version for the bottom line, adding that extra bit of emphasis!



I took these clips to our next group meeting to get some feedback and ensure everyone was happy with the direction we were heading in and I got nothing but positive responses! The initial animations went down very well and it encouraged everyone to get their designs touched up so I could start animating those aswell!!