Examples Animated Banners DIY

Loes Knetsch ^©

The best way to catch the eyes of your visitor is to make your banners eye-catching. In this training, I will show you how you can do this quick and easy, with free to use online programs.

The programs I have used to make the next animated banners:

Gifmaker.me (Great program, but not https, delete your images when you are finished)

BLINK Cliplets

1. Find a suitable image on Pxhere or create a banner on DesignWizard or Canva.

This one is found and made on DesignWizard

2. Upload your image to Pixlr.editor.

Cut the button
Make background transparent and save as PNG
Upload original image again
Erase the button
Add your saved button as a layer
Click on Free transformation and put the button back in place
Click on Free deformation and lower the upper side of the button a little bit
Save image 2

: Cut the button

: Transparent background

: Erase the button

: Add as layer

: Free transformation

: Free deformation

3. Go to Gifmaker.me.

Upload the 2 images
Set the timer
Create GIF Animation
Download the GIF

: Upload the 2 images

: Create and download

4. The result.

Only 2 images needed to create this gif

Here are more ideas and examples for moving banners.

Banner 1 The sky is the limit

For the moving seagull, I used 7 images and loaded them up 1,2,3,4,5,6,7,6,5,4,3,2

To get this movement you have to replace the free transformation every time a little bit and save the image.

*Note – You might have to deactivate the EWWW image optimizer plugin to let the gif files load full size.

Banner 2 Let your business grow

For this image, I used 18 images

Banner 3 Launch rocket your business

This gif is made of 23 images (17 from the previous gif and 5 extra)

Banner 4 Made on DesignWizard and transformed into a gif with Blink Cliplets

You can use ready-made templates for this banner on DesignWizard, fill in your own text and you are good to go:)

Banner 5 Video made on DesignWizard and transformed into a gif with Blink Cliplets

Now you are able to animate any banner you like:) Success!

Comments

Examples Animated Banners DIY — 4 Comments

Ioannis on August 15, 2018 at 5:03 pm said:

Very clever! And what a presentation it makes! Thank you for the idea and tutorial. I also like the Mickey Mouse courser. Pretty cool! Cheers!

Reply ↓
- Loes on August 15, 2018 at 5:17 pm said:
  
  Thanks Ioannis, you can add any image to your cursor, here is my training about how to change the mouse pointer image
  Loes
  
  Reply ↓
Deraj on August 15, 2018 at 11:17 am said:

Yes, I also like Pixlr. I’m also using that. I didn’t know about others but now I will try. Thanks for this article.

Reply ↓
- Loes on August 15, 2018 at 11:21 am said:
  
  Hi Deraj, these are all great programs to use, enjoy them, and success making your own animated banners:) Loes
  
  Reply ↓