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.
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.
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.
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.
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.
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!
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
