Adobe Animate Logo Animation

Animating logos for yourself or a client is a breeze with these four techniques for custom animations in Adobe After Effects.

  1. Animate A Logo
  2. Adobe Animate Logo Animation Tutorial
  3. How To Animate In Adobe Animate
  4. Adobe Animate Logo Animation Free

Animate just about anything. Design interactive animations for games, TV shows, and the web. Bring cartoons and banner ads to life. Create animated doodles and avatars. Make your animated logo for free in minutes. Make a memorable impression with your clients and target audience with an animated logo. Start with Adobe Spark’s logo maker to help you bring your brand to life and then add in animation to take your logo to the next level. Create your animated logo now.

Whether you’re a graphic designer animating one of your logos or a motion graphic artist animating a client’s logo into a sequence, knowing how to add motion to a logo while preserving the original design is a very useful skill. Corporate clients may have rules about what you can and can’t do with the logo, based on their style guide. There may be guidelines for colors, dimensions, proportions, etc.

So when you’re animating a logo, it’s good to know all the different ways to approach the job. Josh Noel over at SonduckFilm recently released a handy guide to animating custom logos. Let’s dive in.

You could also create a Frame animation in Photoshop where you animate a logo over an image. You could then Use Export Save for web to save out an animated gif if there are not too many colors in the image and logo. Gif only supports 256 mapped colors. Animate a Logo in Adobe After Effects CC with Motion Graphics. Keep that idea of revealing in mind when you're doing your animation. Look at how I revealed the logo here. A lot of white bonds and some interesting little bouncy animation here we have maybe a little parallax and then this flies in. The texts was animated.

Separating the Layers in Illustrator

When you get the logo file from a client, they may send you a normal .jpg — if you’re dealing with someone unfamiliar with design work. Ask them to send you the original .AI file. Once you have the file open in Illustrator, go to Object > Ungroup to separate all of the layers. Now to set it up for animation in AE, isolate each layer, and place them into individual groups. If your client doesn’t have an .AI file, you can also separate the layers in Photoshop.

Scandium

Animating the Logo

Adobe Animate Logo Animation

Now that you have the layers separated, drag it into AE and import it as “Footage.” It will show up as one single layer, so to change that (Right Click > Create > Convert to Layered Comp). This will open up the composition with all the different layers. Drag all of those elements from that tab back to your main composition, and delete the original layer.

Now that all of the layers are separated, you can apply individual animations to each part of the layer. For this example, we’re going to spin them in from out of frame, scaling up to the perfect size in the middle. Select one element, and press S and R to bring up your scale and rotation adjustments. Create a keyframe for both, and slide it down your timeline. Now, create a keyframe at the beginning of the composition with a bit of rotation, and adjust the scale down to zero. Now when you play it, that part of the logo will scale up and rotate into its original size.

Animating the Title

If you want to animate your text separately, you’ll need to create a new text file in AE. You cannot edit Illustrator files with as many options as AE titles. To make your life easier, go to your logo in Illustrator and copy the text layer. Now, just create a new text layer in AE, and press Paste. Your text and font should import automatically.

One of the cool features of AE text customization is the animate tab in the timeline. In this example, Noel selected the Enable Per-Character 3D effect for his text. This allows you to animate each letter individually, opening up new ways to introduce your logo text. Using that same animate tab, you can add Scale, Rotation, and Value to your characters to bring out even more variation.

Using Transitions from RocketStock

Downloads

If you’re looking for interesting ways to wipe into your logo composition, try using one of our transition packs from RocketStock. These packs, like the Tidal Pack used in this video, are extremely easy to use. All you have to do is drop in the transition on your timeline, and then Alpha Matte your logo layer to the transition. For more information, click here.

Looking for more After Effects tips and tricks? Check these out.

Adobe Animate Logo Animation Tutorial

Sign In

How To Animate In Adobe Animate

Register

Adobe Animate Logo Animation Free

  • Access to orders in your account history
  • Ability to add projects to a Favorites list
  • Fast checkout with saved credit cards
  • Personalized order invoices

Create Account