How to create a logo animation in just 5 steps

Logo animations technology are becoming more common nowadays. Due to smartphones and the overall technological advancements in the internet logos are being seen frequently on digital platforms and opens the way to visual effects like animation that would be impossible in physical products. Naturally; the growing popularity of logo animation indicates the more companies require it to remain in the game. Learning how to animate your logo is an important skill to increase the quality of your logo next stage.

However animation software has been made more widespread; efficient and easy to serve this increasing number of users. No matter how complex and complicate logo animations may be; anyone can are now able to make simple; yet efficient animations.

In this context I’ll explain the basics of animation of logos from start to the end. For an example I’ll be using the logo I design to promote my blog; Stories Mode. Although we’ll use Adobe After Effects in this tutorial; the majority of animate software offers similar functions and the basic concepts of how the software functions are applicable to all programs although the terms and the menu choices could be different.

How to create a logo animation using After Effects in 5 step

1. Create the logo file
2. The logo can be import in After Effects
3. Configure the composition
4. Animation using keyframes
5. Animation using shape layers

Step 1: Create the logo file

The logo will be animate in the beginning of our animation course using Adobe Illustrator (or the equivalent software for designing logos that you have). This is to ensure that our logo’s design file is properly set up to be animate.

While animation software is raster-base logo source files must have a the format of vectors. This permits modifications to be made without sacrificing quality (for instance; scaling the raster logo causes pixels) which can be beneficial later on when working using shape layers.

The logo should be laid out rather than being group into a single image. This lets you make more complex animations by animating distinct elements that comprise the logo. Create new layers by clicking on this add new layer button locate at in the lower right corner of the Layers Panel; later copying and pasting your logo’s elements into the layers.

Additionally; since animations are digital they also work using RGB color. When you’re Illustrator document is format to CMYK You can alter the color of your logo by clicking on it and then navigating into edit the Edit Colors tab. Modify Colors and then convert the color to RGB.

After you’re finish then export your logo in a fully layer vector file. Since After Effects files belong to the Adobe family of programs I will save the logo I create in the AI (Adobe Illustrator) file; however there are several distinct formats of vectors that you can choose from if you’re using a different program.

Step 2 Step 2: Import the logo to After Effects

Open up After Effects. The interface could appear complex at first ; but let’s take a look at the basics:

1. tool panel It is here that you can find the basic graphics making tools like pencil tool; the type tool; etc.
2. Project Panel The panel is where you organize and manage media files for your whole project.
3. Composition windows This is the window for previewing video where you can see the animation of the current composition (often called”comps”) which you’re working. Comps are basically scenes with separate timelines of animation. We’ll go over compositions in greater detail in the following section.
4. Timeline It is here that you’ll create your animation. It comprises of the actual timeline to the left (where you’ll create events for animation to trigger graphs that are base on time) along with the Comp area to the left (where you’ll modify and layer the characteristics for your multimedia assets).
5. Control Panel It is here that you will find a variety of options for support such as information about media as well as alignment and paragraph options; as well as the ready-made visual effects and animation libraries that are built into After Effects.

If you’re unsure of any button or tool you are unsure about; hovering over it using your mouse will give you a an explanation.

For import of your logo file just drag to drop the file in the Project panel; or go to the File and then import the the File. In the dialog box that appears; select to import the file as footage and merge layers.

Step 3: Establish composition

The term “composition” (comp) is an object that lets users to layer; edit and add motions onto media files. A bigger production; like the film; will include multiple comps which are arrange within the panel for project. You can consider comps as one scene within the film Each comp will have its distinct timeline. In our instance the case of a logo that is not more than five seconds long requires only a few comps.

Let’s begin with a basic background. Click right in the Comp Panel and select the option New >> Solid. Since the logo I create is white; I chose the black solid; however you are able to select any colour you like. In the next window; you need to name the color of your choice (“BG” for me in this instance) and then click on the “Make Comp Size” button, and then click the OK button. Then drag the logo file out of the panel for project to the timeline panel. After that; you will see your logo display in the Comp window. If not; ensure that you reorder your layers by moving the background solid beneath that logo.

Right click on the logo file within the panel for comps and select the option to create and then Convert it to Layer Comp. This will transform your logo into a different comp (you will notice the icon change). Double clicking on the logo file will open an entirely new tab; and will bring you to the new comp that contains all of the layers that you made in Illustrator. Now you can see the way comps function: they work basically folders that are nest.

If you want to; you can transform each of the layers into individual comps by right-clicking on them and choosing “Pre-compose”. This will provide that layer with an animation timeline that is nest within the comp before it. If you want to draw the entire logo in one go; you’d make use of the timeline in the original comp.

After getting this in mind now; let’s look at how these timelines function for animation.

Step 4: Create animation using keyframes

The way After Effects (and most animation software) functions is by using keyframes. Keyframes are basically markers can be set on the timeline to indicate the time when beginning and ending states for your animation must take place.

Let’s start with a simple animation; A fade-in. There are a variety of attributes that are attach to objects; and changing attributes in a certain amount of time is what an animation. To examine these attributes; simply click the expand icon beside the logo comp as well as the following transform property.

To create a fade animation; you should use an attribute that gauges the degree of visibility an object has such as Opacity. The opacity setting is 100% as the logo will be visible in default.

You can click the stopwatch button beside Opacity You will notice a diamond appearing where you playhead markers (the blue drabble that runs across the timeline) is place. Keyframes are which is basically a snapshot of present value of the attribute. You can move the keyframe by clicking it and drag it to 2-second mark in the timeline. Then drag the playhead back to the zero second mark. Then; create another keyframe; and change the Opacity to zero percent. The spacebar is use to preview the animation in the Comp window.

You’ll see that you’ve create an animate fade-in that is gradual by adjusting the Opacity from zero to 100 percent over 2 seconds; using only two keyframes. This is the way that all animation is create using After Effects. It is possible to create a start keyframe and a closing keyframe that is position at various intervals along the timeline. After Effects automatically calculates the require frame transitions need to move from point A to point B (traditionally known as betweens in the world of animation).

There are many attributes you can use within the Transform property which we’ll explain in detail here. Try your hand at keyframing and altering each of these attributes to discover their animation options:

• Position This attribute is use to describe the location of the logo’s X and Y space on the screen of the comp and allows you to create animations linear motion.
• Scale This attribute defines how big the logo (as in percentages in relation to the total size of the original file) and lets you create shrinking or growing animations.
• Rotation This attribute defines the direction in degrees and lets you create animations that spin.

Tips for the Pro When you’re dealing with logo animation it’s logical to reverse the process (as we did in the fade-in) because the animation should finish with the fully-form logo. This means that you’ll need make keyframes prior to changing any aspect so that you have snapshots of your attributes’ values in their original state. You can then move these keyframes to the desire final place on the timeline (however you’d like the animation to run) and create new keyframes for any changes in the beginning of your timeline.

Step 5: Animation your logo by using shape layers

We’ll now look at intriguing animation techniques with shape layers. Shape layers are objects that include details about their path, like connect lines, anchors and points (similar to the ones found that are use in vector programming) The manipulation of these can open the door to many animation options that go beyond that of transform property.

We’ll first transform the logo into an image layer. In the layer panel (the layers create by step 3) Choose each of your layers then right click and select to create the option to Create Shapes using the Vector Layer. The layers duplicate and the star beside it. This is an image layer. In the same layer, is an content property as well as that of the transform property. To right of the content property you’ll also be able to see an “Add” button, which allows users to choose even more attributes to animate.And checkout more in Colourist logo  and their pages called write for us UI/UX  design