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
