How to create an animated logo in Photoshop

Hi there. My Name is Tuly from Media Group Marketing, and I will show you how to make a professional GIF animation for a logo.

Let’s get started.

Here is our customer’s logo, it has been made for a chimney sweep company in Seattle. The logo has been created in Corel Draw.

You are probably wondering: “Tuly, how will you even make a professional GIF in CorelDraw?”

So Corel Draw is excellent software, especially for vector files, but when you want to create a GIF file, Photoshop is your best and easiest option, but now let’s bring it over to Photoshop.

From Corel Draw to Photoshop

The logo layers now are grouped to ungroup all layers, let’s click the “Ungroup all layers” button. All the objects of the logo will appear on the right side Objects bar. 

Tip! If the object bar is hidden – 

Go to the Windows menu > Dockers > Then click on the Object docker. 

When everything is separated, we can choose and export any Object we need. Let’s take the Gooses and the Chimney and export it to Photoshop.

So let’s jump right into Photoshop. 

Use the timeline window

Please note! This tutorial fits all photoshop versions for the last ten years.

We will start by cutting out the right Goose with the pen tool.

Click on the pen tool icon, then start clicking around the right Goose. Make sure to cut it carefully where the Goose’s legs are. 

Once the path point touches the starting point, you will notice that the pen icon has been changed, and a little circle appears next to it. The last click will close the path and then click on the mouse to bring up the menu and then click on Make Selection.

Right-click on the mouse again and click on Layer via cut; now the right Goose is on Layer 02.

Now let’s do the same process to the left Goose. (Fast forward)

Now that we have cut out both gooses in separate layers, we can start planning the animation.

To do that, we will duplicate each Goose 5 times until we have 6 layers from each Goose. 

After duplicating, we want to use a tool called “Puppet Wrap,” which can help us move the Object around with ease. When you click on the “Puppet Wrap” button, the image will be covered by a triangle grid. Now you can place “PinPoints”; these pinpoints will allow you to move the Object around as you would like.

Go to Edit > Puppet Wrap > click on the Puppet Wrap.

All I want is to animate is the Gooses moving up and down.

First, I have to “pinpoint” the bottom of the Goose to avoid unnatural floating. Then, click on the head area and move each Layer slightly more than the previous one.

(7:18)

Okay, let’s do that real quick (speed time). Now that I am thinking about it, we could use just 4 layers. So each Goose now has 4 layers. Now let’s animate the left Goose (fast forward) 

(09:03)

Delete the background by left double click on the background layer > click Enter > hit the Delete button.

Now I’ll prepare my logo before placing the Gooses and the Chimney layers on top, and I’ll erase the Gooses with the brush tool (shortcut B), using the same color as the background. (09:23) To do that, hold the alt button and Left-click with your mouse to get the color sample.

I’ll decrease the brush size by holding the alt key and hold and drag the brush inside the image using your Right-click mouse button. Drag right – left for changing the brush size and drag up and down for the brush softness level. 

(9:54)

Now I will take all the layers of the gooses and drag them to the logo.

While all the layers are selected, I’ll click ctrl-T to decrease the image and make it fit our logo’s Gooses size.

As you can see, there are different color tones between the two chimneys. That is an easy fix to do with the eraser. Let’s go to Layer 4,  and by using a soft eraser, i’ll delete the bottom part of the chimney to fade between the colors. 

Now we should be ready to do the frame-by-frame animation. We will need both gooses on every frame for the frame-by-frame animation.

Click on the Windows menu and then click on Timeline to view the timeline. Now click on the Creat Frame Animation button. I’ll turn off all the unnecessary layers and leave only the layers for Frame 1.

(11:24)

Now click on the Plus icon on the timeline window to add another frame.

Whenever you add a frame, hide the previous layers and reveal the next ones. Fast forward to 11:57

To make the Gif animation look infinite, I will add more frames, but now I will hide the current frames and reveal the previous ones until we are back to the same position.

 (12:31)

It seems a bit too fast for my liking, so we can fix that by changing the time on the frames. 

Please select the first frame (hold shift button) and click on the last frame to choose them all. Click at the bottom of the first frame, and changing the frame duration will affect all frames at once. Make it look smooth. Click on the start animation (play button) on the timeline window to view the animation.

The problem with gif images is that you cannot have a transparent shape without getting rough edges after uploading it to your website.

13:46

I’ll show you an example: 

Click ctrl + alt + shift + S to save the file as a gif. Under the preset menu, open the drop-down menu and choose GIF. You can hit the play button to view the animation. 

I want to make it 250×250 pixels with the max colors for a GIF, 256 colors, as higher the number, the file size output will be larger. 

15:57

Now let’s go to implement the logo at the landing page footer. 

Edit the page with Elementor > Click on the image you want to switch > Click Upload files > Select Files > choose the Gif animation and click insert media.

Now you can see the circle edges; the edge is rough because we used transparency. I’ll increase the size so you can watch it more clearly.

To fix it, we will add a background color to the gif animation. Let’s reveal layer 2 > choose a darker tone, and with the bucket tool (shortcut G), we will color the Layer. 17:45

By mistake, I revealed layer 2 when the timeline frame indicates on frame 2. In order to implement the background on all the layers, we need to reveal layer 2 when Frame 1 is selected. 18:05

Now hit ctrl + alt + shift + S again to save the file as a gif. Change the file size to 250*250, save it as animated-logo01.gif

Go back to Elementor and click on the image you want to change, upload the new file and click the insert media button. And here is the final result. You can check it out live on HuntsChimineySweepAndRepairServices.com.

My name is Tuly from Media Group Marketing, and dont forget to subscribe and leave a like to see more.