Business Benefits
Increase brand recognition in videos, ads, and digital assets.
Open an AI or SVG version of your logo in vector editing software.
SVG files store images as vectors or sets of mathematical values. The advantages are:
- Scalable — the resolution doesn’t change when shrinking or enlarging images.
- Integrate well with JavaScript and CSS, and they are easy to apply effects to.
- It’s easier to manipulate individual parts of a logo.
AI files are vector files that integrate best with Adobe Illustrator. If you’re working with a workflow that includes Illustrator and After Effects, use an AI file.
Select all elements of your logo and ungroup them, then save the file.
To select the elements, click and drag over the entire logo to highlight all the different parts. Then, ungroup it. In most software, ungrouping can be done with the CTRL+G or CMD+G key combination. This separates the logo into individual parts.
Choose a motion graphics editing software like Adobe After Effects, BlackMagic Fusion, or Blender.
Motion graphics are pieces of animations that feature simple shapes and designs. These pieces center on logos, brand elements, or some other non-story-driven information.
Import the SVG or AI version of your logo into the editing software.
If prompted, import the file as footage. This will turn your logo into a composition.
Right-click the composition and select convert into layered composition. This will separate the layers by converting the composition into a layered composition.
Although ungrouped previously, the logo will still import as one composition.
Arrange your logo in the final positioning and set a keyframe. In the timeline, move this frame ahead to the end.
To set a keyframe, hit the keyframe button next to your composition layer, which will either look like a diamond or stopwatch. Moving this frame to the end will provide space for integrating animations.
Select your beginning frame, apply a transformation, and then set another keyframe. Repeat this process until the final frame is completed.
Transformations include any way you change the size, shape, and orientation of your composition. The primary transformations are translation, rotation, and scaling. Choose each frame where you want a transformation to begin, transform the elements you want to change, and then keyframe it. The software will smoothly transition from one transformation to the next.
For example, keyframe your whole logo at the right of the screen on frame 1, then select frame 10, move the logo to the left, and keyframe again. The frames between 1 and 10 will automatically show the logo moving from right to left. You can do this for each individual piece and conduct multiple transformations to create a set of complex animations. Other types of transformations are recolors and masks, which you can use to cover and uncover elements of your logo at different times.
Adjust the curves of your transformations to create smooth transitions. Select your composition and then select ease in/ease out.
This will smooth the beginning and end of a transformation. You can fine-tune this by navigating to the graph editor, easing, or curves tab of your software. There, you’ll see graphs that represent the speed of the movement. You can click and drag certain sections to adjust when an item speeds up or slows down.
By default, your transformations will be linear. This means that transformations will occur at a constant speed, which can result in unnatural-looking graphics. Remember that organic movement is never linear — things accelerate before reaching a constant speed and decelerate before stopping.
When your animation is complete, navigate to File > Export as… and save it as a GIF in your file explorer. Your animated logo is now ready to be shared.
Last edited by @hesh_fekry 2023-11-14T12:20:43Z