NLT1: Snap.je: Animated Logo

Creating an animated advert/logo for Snap.je

Posted by Callum McMurray

Final Outcome

The final outcome for this project was a 12 second animation, that represented an 'out of this world' feel that the client wanted. Featuring a 'cosmic' theme, and including the company's tag-line and services that they offer.


Brief

This project was part of my Negotiated Learning Task 1, in which I had to find a placement or a client to work for. Download the updated assessment sheet for NLT1 here.

Visit my blog about my time at Snap.je by clicking here.

In the lead up to an event that was being hosted by Snap.je (One of my placements), Sam (Co-managing director) wanted an 10-20 second animated logo advert that they could play at the event to represent the business and their services. Sam asked specifically for a 'space' or 'cosmic' theme for this animation.

Research

After receiving the brief from Sam, we looked at examples of animated logos through Pinterest and Dribbble for inspiration on what to create for the Snap.je animated logo. The 'Rokket' animation below was good inspiration toward the animated logo concept, with use of the spaceship which fits with the space theme Sam wanted. Also, Sam liked the idea using the trail that the spaceship had in the gif to fly past the logo.

Rokket logo animation on Dribble - Click image to open in new tab.

The 'Cub Studio Website Gif' was inspiring towards the animated logo because, I liked how the object revolved with one side being a bear to link with 'Cub' and the other side being the companies logo. I thought this would link well with a planet or celestial object orbiting in the logo animation, so it could fit with Sam's theme.

Cub Studio Website Gif on Dribbble - Click image to open in new tab.

Sketching Storyboard Concepts

After researching, I started to sketch storyboard concepts for the animated logo that I would be able to show to Sam for feedback on which one he would want me to pursue.

The concept of storyboard 1, was a planet being eclipsed by a sun which is then zoomed in on. The planet revolves around to reveal the Snap.je logo, which was inspired by by the 'Cub Studio Website Gif.' After the logo was revealed, the services would be revealed around the website in orbit of it.

Sketched Storyboard Concept 1

The concept of storyboard 2, was to have a close up of a rocket with the Snap.je logo, which then zooms out to reveal it in spaces as it blasts through the composition. As the rocket flies, shooting starts appear parallel to it which displays text of the services that the business offers and then fades to black with the Snap.je's name.

Sketched Storyboard Concept 2

The concept of storyboard 3, was to have a revolving planet in space that revealed the Snap.je logo. A rocket then flies by, it's trail expanding which covers the composition and then transitions. The logo then reappears, being placed down like a sticker as the services of the business offers pop up.

Sketched Storyboard Concept 3

The concept of storyboard 4, was an asteroid/meteor with the Snap.je logo, crashing down on a planet. The camera then pans around and down on the crater, which reveals the logo in the center and text of the services the business offers smoldering around the logo.

Sketched Storyboard Concept 4

After presenting the storyboard to Sam, he decided on 'storyboard 3' because he felt it best represented the idea he wanted and it was the clearest for displaying the services Snap.je offers.

Illustrator

Before starting the project in Adobe After Effects, I looked up how to achieve a revolving sphere effect. This involved using the 3D revolve effect in After Effects, which required a texture to map to a sphere. To do this, I created the texture of a planet in Illustrator with Snap.je brand colours and with their logo in the center.

Illustrator document of planet texture.

After Effects

Using the Illustrator texture, I applied the 3D revolve effect to it to create the sphere and then key-framed it so it slowly span around, with Easy Ease so it moves smoothly. Using the object tool, I created circles of different sizes scattered around a solid in the background to create the impression of stars, this was then further improved by adding the outer glow effect to each object and the flicker effect which helped it replicate stars in the night sky.

Initial composition of animated logo with Snap.je planet and stars in the background.

Using a vector of a rocket ship I mapped a path using key-frames for it to fly across the screen. Using an orange shape as it's trail which transformed as it flew across the screen to expand and cover the whole composition. After that, I transitioned it to a new orange solid as the background.

Rocket vector with expanding trail covering the comp.

On top of the new solid, I added in the Snap.je logo with the company name underneath. To achieve the sticker effect I applied CC Page Turn effect to the logo and the title, and timed them with key-frames to appear consecutively.

CC Page Turn effect being used on the Snap.je logo.

To add the services popping up like in the storyboard, I created a new solid in navy and positioned it off the composition. I added key-frames for the position to change after the logo appeared on the orange solid. Using Easy Ease I made the solid move up and down once it had appeared to achieve a bounce effect and give it a sense of motion. I then added text objects for each service Sam wanted displayed that Snap.je offers, and then copied the effects the navy solid had to each text.

Applying a pop up like effect to the navy solid and services.

Changes

After a break from the project, Sam informed me he had changes for me to make to the After Effects project. This was due to poster he had created himself for Snap.je, with a similar theme to my animated logo, but he had written up the services in specific styles and shapes and wanted me to add this to the end of the animated logo. Also, he had created a tag-line for Snap.je, "Take your business to the next level." He wanted this tag-line with the font he had used on his poster at the beginning of the animation and he wanted it to flicker on like a light-bulb.

Sam's poster he made for Snap.je, and use element from in my animation.

Further After Effects

To the first composition of the animation I added the new tag-line as a text element. To make it flicker on like a light bulb. I duplicated the layer and applied an outer glow with an opacity expression of "wiggle(15,100)" which made it flicker and I key-framed it so it 'turned on' as the planet revolved around.

Light-bulb flicker tag-line text.

For the last composition, I saved Sam's layout for Snap.je's services in his poster as a vector and added it to the project. I copied the position key-frames from the previous services object, and applied it to the new services vector so it pops up like the previous objects.

New services vector with pop up key-frames being applied.

After I completed the changes, I presented the animation to Sam and he was happy with it, so I packaged up the project and uploaded it to the Snap.je Google Drive.


The final outcome can be seen back at the top of the page