Loes Knetsch ©
How to capture the eye of your reader with a banner? Not too flashy or too spammy. But just with a little accent on it? With these free programs, you can make animated graphics from an ordinary website image by adding a transparent text bar to them. And turn them into a moving GIF.
In this tutorial, I will give you the steps on how to create a non-spammy but a nice looking flashy banner.
Find a suitable banner image
First, you have to find a great image for your banner, I often use Pxhere.com for copyright free images. When you fill in “banner” in the search bar, you get mostly rectangle images.
When you found the perfect banner image, you save it to your computer. After saving, you load the banner image up to Pixlr.com/editor and you add the first upper text. In my case “A Live Bootcamp Education.” I also added the Wealthy Affiliate logo as a layer image and the text “Wealthy Affiliate.” Save this image!
Time to add the transparent bar
Start from scratch, otherwise, you get the warning “The layer must first be rasterized to be editable.”
- Upload your newly created image with the text on it
- Click on the drawing tool
- Click on the rectangle, or if you prefer ellipse tool, choose for that one
- The settings for opacity should be around the 50%
- Check the box before “Fill”
- And choose your favorite color you want to add on the image
- Place your cursor on the image and draw the rectangle or the ellipse
- Click on “Add text” the A in the menu
- And add the second text on the image
- Save the image
You have now 2 images, one with the first text, and one with the bar on it
“Make it simple. Make it memorable. Make it inviting to look at” – Leo Burnett Click To Tweet
Now you can create a moving GIF image
I use Gifmaker.me to make all my GIF’s. It’s a very easy online to use program and it’s free. I love free programs:)
- Upload the image with the first text
- Upload the image with the bar a couple of times
- Set the animation speed on 4000ms to 6000ms
- Keep the repeat time on zero
- If you want to, you can resize the image
This is the second result, this time I used the ellipse drawing tool and I reduced to size to 50%
Here is a video, when you rather watch a video about this process
Free editor programs
~ Click here ~ If you are interested in other free online to use programs.
I hope you liked my training about adding a transparent text bar to your images and animate the text on the image.
Advertise on your website
You can make your own advertisements for your website or for social media. Here are two examples of ads with a transparent layer.
Success in creating your own animations! More down below!
Other interesting Picture Editors