How to make an animated logo with free software only?

Learn how to make an animated logo with free software only! Want to create a simple GIF, for example, to enhance your company logo? It's really not that difficult, simply follow these 5 easy steps!


   Essential         
    Professional         
   Enterprise         
   ReportR   

Animated logo example

This guide will teach you:

  1. Useful sites 
  2. Getting GIMP ready
  3. Adding and editing an object
  4. Making the object move
  5. Exporting your image

1. Useful sites

To start off, if you already have a video file of the GIF you want to make, there are a few sites that will take care of the work for you. We like MakeAGif, Imageflip, VEED or Giphy.


Creating a GIF from scratch

What if you want to create an animation from scratch? In this case, you will need other software, we suggest GIMP, it’s completely free to use. Here’s a guide on how to install it.


note
NOTE


You can undo an action by pressing Ctrl + Z when you make a mistake.



2. Getting GIMP ready

Alright, so you installed GIMP and fired it up, it will probably look similar to this.

install GIMP

To open GIMP in one window, you go to Windows -> Single-Window Mode 

GIMP window

Now open the image you want to animate. To open an image go to File -> Open and then select your file. Alternatively, you can press CTRL + O

Animated logo - open file GIMP

2. Adding and editing an object

What differentiates GIMP and Photoshop from Paint and similar programs is the ability to create layers. 


Each layer can be edited individually, so you can edit parts of your image without having to touch the other one. This may sound a bit complicated but once we’re working with it, it will all become clear. 


Save the image. Now go to File -> Open as Layers (or press Ctrl + Alt + O) and select the image. 


If you choose to copy-paste it from your browser, a Floating Selection will appear. Make it editable by adding it to a new layer

Animated logo - add new layer

The flower will have a white square around it. To erase this we will use the Select By Color Tool


Use it by pressing Shift + O or by going to Tools -> Selection Tools -> By Color Select. Make sure the layer with your flower is selected and click anywhere in the white space around the flower. A moving dotted line should appear around the flower, press delete to remove the white space.

Animated logo - color select

If the flower is too big or too small, you can alter its size with Tools -> Transform Tools -> Scale or press Shift + T


This is what you have now: 

GIF company logo example

3. Making the object move

Remember how I was talking about layers in the previous step? GIMP will see each layer as one frame of your GIF. We will be making the flower move to the right, so on each frame, we will move the flower a little bit.


The first thing we do is make sure the flower is attached to the same layer as the logo, this can be done by merging the layers. Make sure the 2 layers are on top of each other and right-click the upper one. Next select ‘Merge Down’. 

Animated logo - merge down

Now that you only have one layer (if you still have a Background layer you can merge that one as well) it’s time to make the flower move! 


Duplicate the layer by right-clicking it and select Duplicate Layer. Select your newly created layer. Press R or go to Tools -> Selection Tools -> Rectangle Select and select the area around the flower. To move the flower press Ctrl + Alt and drag it to the left with your mouse. 

GIF company logo example

You’ll see a Floating Selection appear. Add it to your duplicated layer by right-clicking and pick Anchor Layer. You will be left with 2 flowers on your image. 

Animated logo - anchor layer

To remove the previous one press R and use the Rectangle Select Tool to make a selection around the flower you want to remove. Now you can simply paint over it with the Paintbrush Tool. Make sure your color is white (or the color you want to paint in). You now have your logo with one flower. 


Again a GIF for the more visual:

Animated logo - paintbrush

To add more frames to your GIF, simply rinse and repeat. 

4. Exporting your image

To export your file, go to File -> Export As. Give your file the name you want and add .gif (very important!) at the end. Press ‘Export’. You may get a warning telling you several layers are bigger than the image’s boundaries, then select ‘Crop’.-

Animated logo - export

Animated logo - export as GIF

Next, you will get a window titled ‘Export Image as GIF’. Make sure ‘As animation’ is checked, otherwise you will get a static image. You can also adjust the time you want between frames, its default values are at 100 milliseconds. 


Now press ‘Export’ one more time and you are done! I added 2 more frames to mine and this is the result: 

Animated logo - completed example

What's next?

  • Learn how to Avoid your Emails being Marked as Spam! Since the beginning of the internet, we have been fighting spam. In fact, almost 86% of global email traffic is unsolicited junk mail (with approximately 400 billion spam messages sent every single day).
  • Learn how to Create an Animated Background in Photoshop. A GIF can be a handy tool to get people interested in a picture. If you get very creative, moving images can capture the viewer’s attention very quickly. So it’s worth the time and effort to experiment with animated images to enhance the pictures on your website and social media platforms.
  • Learn how to make a logo with transparent background using GIMP or Photoshop. Want to add a logo to your picture, but can’t get rid of the background? Then this guide will solve that with just a few easy steps! You don’t need special software.
S
Support is the author of this solution article.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.