fbpx
Skip to content
Brand Evolution Logo Chicago Website Design
  • Home
  • About
    • Careers
  • Services
    • Website Design
    • Logo Design
    • Search Engine Optimization
    • Social Media Marketing
    • Content Writing
    • Data Analytics
    • Email Marketing
    • Photo Editing
  • Portfolio
    • Website Designs
    • Logo Designs
  • Blog
  • Contact
Menu
  • Home
  • About
    • Careers
  • Services
    • Website Design
    • Logo Design
    • Search Engine Optimization
    • Social Media Marketing
    • Content Writing
    • Data Analytics
    • Email Marketing
    • Photo Editing
  • Portfolio
    • Website Designs
    • Logo Designs
  • Blog
  • Contact
  • Article, Tutorial

Animate Your Logo In Minutes

Tutorial on how to animate a logo in one minute brand evolution logo being drawn and filled

Animating Your Logo

Animating your logo is a great way to stand out and impress viewers. Take a few of these logos for example. Click the “Play Animation” button below.

brand-evolution-1logo-blue-gradient
fox-valley-construction-logo
Play Animation

I will be going over a couple of different ways to do this. The easiest and fastest way will take you about 60 seconds and it is free, but the recommended way requires a little more time.

How to animate your logo in under 60 seconds:

If you want a super easy quick answer, here’s how to have it done in under 60 seconds:

  • First, open the animator by clicking here.
  • Next, click “Select Image”
  • Choose your image and click Export.
  • Type in your email and click “Receive Image“

That’s it, your logo is animated! This is only recommended for simple logos or images that don’t need to be incredibly accurate, although if you want to just want to make animated images for your website, this will be a great tool for you.

I recommend you try the animator out before anything either way because it takes under a minute on average and you will get an idea of what the logo will look like before you spend the time to create the final product

Now for the recommended solution for a high-quality animated logo…

Step 1) convert your logo to SVG format:

The best way to do this is to use Adobe Illustrator. You can get a free trial of Adobe Illustrator here. There are plenty of alternatives that you can find online, but I’ll be focusing on Adobe Illustrator for this tutorial.

Open With Illustrator

First, open a high-quality file of your logo in Illustrator. If you have a non-rasterized version of your logo, use that.

Note: Non-rasterized would include a photoshop file or any other editor that you can scale infinitely and it will not lose quality. In this case, skip to the Export step.

Trace The Image

Second, with your logo selected, click “Object > Image Trace > Make and Expand”.  Your image is going to turn solid black.

how to animate your logo Select object image trace then make and expand in adobe illustrator to convert the image to svg

Delete White Space

Third, delete the white space in your image that you want to be transparent. Select each layer you wish to delete (you can select multiple by holding down shift) Then press “delete” on your keyboard.

how to animate a logo delete white space paths in adobe illustrator to make areas transparent

Color Your Image

Fourth, you’ll need to color your logo. Select “Window > Color” to pull up the color panel. Then click the three small lines on the top right and select “RGB”

Select each part you want to color using the layer panel. In this case, I’m color my entire logo the same color so I am selecting the entire group. Then use the color panel to select the color you want.

how to animate a logo switch from grayscale to rgb in adobe illustrator when you convert to svg
how to animate a logo select layers and choose color in adobe illustrator after tracing image

Optional: Using Gradients

Select the parts of the logo that you want to put a gradient on, then open the gradients panel by selecting “Window > Gradeint”

Click inside the gradient slider to activate the gradient, then double click the each color bubble to edit the color. Select the three small lines in the top right and change the color setting to RGB.

how to animate a logo select gradient from window in adobe illustrator while converting picture to svg format
how to animate a logo adobe illustrator gradient grayscale to rgb

You can add more colors by clicking just below the slider. You can also change the angle, location and type of gradient using the options in this panel

Finally, Export The logo as an SVG by selecting “File > Export > Export As”. When the option pops up to name the file, you will be given the option to select a format. Click on the dropdown and select “SVG” and click Save.

When you get the “SVG Options” Leave the defaults as follows:

  • Styling: Internal CSS
  • Font: SVG
  • Images: Preserve
  • Object IDs: Layer Names
  • Decimal: 2
  • Minify: not selected
  • Responsive: selected

Click save, and you are now ready to animate your SVG Logo!

Step 2) add the animation

After you’ve converted your logo to SVG format, all you have to do is go to our animator here, select the SVG file, click export and you’re done!

brand evolution logo animator

Your logo file may default to open on Notepad or a code editor, in which case you can view the logo by right clicking on the file, select “open with” and choose your preferred internet browser.

Adding the logo to your website

To run the animation, the logo has to be on your website in <svg> tags, not an <img> tag. I’ll go over a couple ways to do this, the second way is for WordPress websites.

Option 1: Inserting into HTML

First, open the animated logo file in Notepad or your code editor.

Open up the page that you want to display it on and paste it into the code just like you would paste an <img> code in there. If you are not comfortable editing the HTML, contact your developer and ask him or her to insert the logo for you.

Option 2: Using WordPress Media Library

For WordPress website, you can download a plugin called SVG Support by clicking here. After you activate the plugin by following the instructions, upload the file to your media library, add the class “style-svg” to your logo, and you’re good to go.

Conclusion

That’s it! If you are stuck or have any questions, you can reach out to me by filling out a form on the contact page or by calling me/texting my cell phone. Here’s my information:

Andrew Evers
Web Developer/Owner
224-567-3928
aevers@brandevolutionco.com

Please support us by liking us on Facebook!

Newsletter

Recent Posts

MFM Industries Case Study

MFM Industries

Read More »

Select Roofing & Gutter

Read More »

Profit Management Solutions

Read More »

Follow Us

Sign up for our Newsletter

Recieve updates when we release new helpful articles and content! 

Andrew Evers Brand Evolution LLC Owner and Founder

Contact owner and founder, Andrew Evers.

I personally build relationships with all of my customers. This allows me to deeply understand your needs and goals so Brand Evolution can build you a powerful website and market your content in the most effective way possible.

CONTACT ANDREW
Brand Evolution LLC Logo
Let's Work Together

Questions on your next project? We are here to help.

Contact Us
Get Connected
  • 224-567-3928
  • aevers@brandevolutionco.com
Follow us on social media
Facebook-f Twitter Linkedin Youtube
Stay in touch

Join our email list to stay up to date on the latest trends

Copyright © 2020 | Brand Evolution | All Rights Reserved
Custom Animations | Premade Templates

ThemeShark for Elementor

FREE DOWNLOAD