Free Animated Graphics Website Image Text Bar

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

: Call to Action

: Unique

: Website Development

: Make Your Own Signature

: Picture Editors

: YouTube

| Home | Use of Cookies | Privacy Policy | FAQ | Affiliate Disclosure | Contact |

(Visited 218 times, 1 visits today)

Comments

Free Animated Graphics Website Image Text Bar — 8 Comments

Christine on October 14, 2018 at 2:32 pm said:

Hi Loes,

I’m a beginner at creating website. I thought it is so difficult to create a banner. Thanks for the tutorial. Love it. I know how to create a banner now 🙂

It looks complicated to create the banner, but following your instructions make it easier :).

I’m excited to learn more from your website, to create more banner with graphics.

Reply ↓
- Loes on October 14, 2018 at 2:50 pm said:
  
  Hi Christine, I have some other WordPress training about making banners here
  
  WP training for beginners
  
  Success with your website!
  
  Loes
  
  Reply ↓
Rika on October 14, 2018 at 10:48 am said:

Hi Loes,

What a great tool. I love it. I followed your instructions and tested it on my test website. It is really simple and quick. Thanks for sharing another great free tool.

I am not a big fan of GIF images, but if using sparingly and subtle, it can work. In your opinion, which website has the best free images without attribution?

Reply ↓
- Loes on October 14, 2018 at 10:55 am said:
  
  Hi Rika, you are right, subtle and not too noisy. My first to go website for images is Pxhere.com/ . I use that one most of the time. It’s totally free, and 90% of the images are to use without attribution.
  
  Loes
  
  Reply ↓
Steve Crozza on October 14, 2018 at 10:34 am said:

I absolutely love your training, mainly because, like you, I really appreciate the benefits and value of free software tools whether they be online or downloadable to your own PC.

I have actually followed the steps in your training to see how easy it was and then I felt I could honestly make a comment as to how good it is.

The steps are easy to follow, the hardest thing I find is that you do need to have an imagination or some creative talent to produce the quality you demonstrate. However, the steps are easy to do, with some practice I will be able to make something presentable for my presentations or web sites.

Reply ↓
- Loes on October 14, 2018 at 10:57 am said:
  
  Thanks Steve, it’s good to know that my training is understandable and easy to follow. I wish you a lot of success practicing this and create awesome presentations!
  
  Loes
  
  Reply ↓
Emma on October 6, 2018 at 5:02 pm said:

Hi Loes, I am completely amazed how simple the process seems and how I will be able to do this on my website without too much difficulty. I found this information to be very informative and clear. Which I find on sites of this topic is very rare nowadays. Keep up the good work. Just out of interest do you have any information on where I can get completely free images for my site. I would like to be able to use copyright free images without having to subscribe to anywhere or pay a fee. Thanks Emma

Reply ↓
- Loes on October 6, 2018 at 6:24 pm said:
  
  Thanks Emma, that´s a great compliment! I have a list of sites on my blog at Wealthy Affiliate, not on my website here. You may take a look there. If you are not a member there, you´ll get a popup to join, after 20 seconds, you can click that away (or join of course, it´s free:) Click here to get my list
  
  Reply ↓