YC's Business Card

(Logo Animation)

Description

I created a logo animation using the morphing technique. It is a motion graphics trend that I want to learn on my own. In addition, the logo animation will be placed on a business card. The logo will animate whenever someone has Eyejack app.

Challenge(s)

I want to turn my static logo into a logo animation. In addition, the animation will be on a business card.

Solution(s)

Using one of the motion graphics trends that are called morphing and I’m going to apply on my logo animation. Furthermore, I want to add something that could be innovative. So I’m going to use augmented reality to the business card. It is not something that we often see on a business card.

Benefits

The animation of the logo will help the target audience to understand more of the brand identity because it can bring the brand’s personality into motion. A static logo can be a little bit more difficult to understand the personality of the brand.

Target Audience

The target audience can be for any companies or anyone who is looking for logo animation. Also, it can be also for new companies who want to create a brand and need something different that can attract customers or clients.

Steps to complete the project

Sketch phase: Come up with an idea for the logo animation. I want my animation to represents why I want to be a motion designer. I find that creating videos can change the mood of other people.

Sketch for the logo animation

Build my assets in Adobe Illustrator.

Scene #1: Person in a bad mood
Scene #2: Watch the video
Scene #3: Baseball bat is having difficult time to hit the ball
Scene #4: Person feels more happy because he is laughing
Scene #5: Ligature shows up

I did some researches on how to create morphing on shapes. I watched a few Youtube videos because there are many ways to achieve the same result. Once I get to know how to create the technique, I imported my Illustrator files into After Effects.

Start creating the logo animation on After Effects.

I need to create a demo of how it would look on a business card. I went back to Illustrator and create a business card and a phone. It will basically show how they would interact between the logo animation and the business card. When you hover your phone on the ligature, the logo will animate itself on the business card.

To add augmented reality into my project, I need to export the logo animation into JPEG/PNG sequence. Afterward, I downloaded Eyejack Creator and follow the steps. In the end, it will give a QR code and you can scan the QR code with Eyejack app on your phone. Since my phone doesn’t have the requirements to download the app, I couldn’t preview my work. I did some researches and most of the augmented reality app that I look into requires iOS 11+ or iPhone 8 or higher.

Problem(s) encountered

The first obstacle is not setting up my Illustrator files correctly at the beginning. I didn’t think of separating my layers so it was difficult to animate scenes.

The second obstacle is the morphing technique. Sometimes, it will create some funkiness to the shapes.

How I solve it?

The first problem is easy to solve. I just had to go back on my Illustrator files and create more layers.

The second problem was kind of difficult to solve. I watched a lot of Youtube videos and there are a few ways to solve it. The first way of solving is using First Vortex on some points of the shape. However, it didn’t work in my case. So, the other way around is to re-create the graphic illustration with the pen tool on After Effects. You basically place the original graphic illustration at the back and add some opacity to see the one that I’m going to outline with a pen tool. I just traced the shape and add a few points if there are enough points to outline the shape.

Final Video

Since I wasn’t able to preview my artwork on my phone, I’m only going to send a demo of how it would interact between the logo animation and the business card.