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)
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!
Other interesting posts:
- Unique
- Website Development
- Website Development
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!
Thanks Ioannis, you can add any image to your cursor, here is my training about how to change the mouse pointer image
Loes
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.
Hi Deraj, these are all great programs to use, enjoy them, and success making your own animated banners:) Loes