How to create an animated logo
A while ago I designed this animated, spinning globe logo for an import/export company to highlight the global character of the services their offer.
Since then I was asked several times how I designed the logo: what tools did I use and if it was difficult to execute. For this reason, I decided to make a tutorial and show you guys step-by-step how to do it.
This is the final result of the animated logo, but let’s go back in time and design it from scratch. I’m not going to explain in details on how to use Illustrator thou— I assume that you have some basic understanding.
You will need Adobe Illustrator to design the logo and Photoshop to animate it.
Creating a static version of the globe.
In order to make this 3d-looking-like-logo I used 3d revolve effect from Illustrator. Then I animated it frame-by-frame in Photoshop.
1. Create a hemisphere
Create a new document (letterhead size), select ellipse tool (L) and double-click to open up a dialog box with the dimensions, make it 95px by 95px in size and divide the circle into half by removing left anchor point and closing the shape.
2. Create a symbol
Create a stack of stripes by using the rectangle tool (U). Duplicated it few times by holding alt key and dragging. Once you got a pattern of few stripes, group them and add to the symbol panel in order to create a symbol.
3. Use 3d Revolve tool
First, remove the fill color of the hemisphere and delete the stripes (they are saved in Symbol panel) select the hemisphere and go to Effects>3D>Revolve. Use setting as shown on the screenshot. Copy the sphere onto a new art board and add some name if needed.
4. Create 18 frames
That’s why I made these bars rainbow. It will let you see how the sphere rotates. Keep rotating by 20° and creating new art boards. You will need 18 of instances. Why? 360° divided by 20° equals 18 (enough to make smooth animation).
5. Stylize your logo
Now since you have all the frames needed, you can vectorize the 3d revolve effect by using “expand appearances” and further stylize it by changing colors and applying gradients. Repeat this step 18 times (I know — its tedious).
6. Export frames to PNG
By now, you should have art boards as shown on the left. Important! Make sure you didn’t change the position of the logo. That’s the whole point — the logo must stay in the same place and only rotate around itself. Export all art boards to separate files (PNG)
7. Testing the animation
It’s time to test the animation. Assuming that you have all your files exported, change the view to list, hit spacebar to use preview mode and use key arrows to asses the validity of your animation.
8. Import files to Photoshop
Create a new document in Photoshop of the size you need. Then import each frame on new lawyer. Use the timeline panel and set duration to 0.07 sec then create frame by frame animation by turning on and off visibility of the layers.
9. Export to GIF
Export the animation to a GIF file and that’s it— You’ve made it! (I hope so).
Since you have it all in vector format, you can always go back and change the colors, gradients, strokes, or make other adjustments.
I hope you enjoyed this tutorial on how to create a spinning logo. You can see the full project on my portfolio here.