Awesome advertisement diy

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.

ABC icon

In this tutorial, I will give you the steps on how to create a non-spammy but a nice looking flashy banner.

A live bootcamp education

Find a suitable banner image

First, you have to find a great image for your banner, I often use 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 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.”

  1. Upload your newly created image with the text on it
  2. Click on the drawing tool
  3. Click on the rectangle, or if you prefer ellipse tool, choose for that one
  4. The settings for opacity should be around the 50%
  5. Check the box before “Fill”
  6. And choose your favorite color you want to add on the image
  7. Place your cursor on the image and draw the rectangle or the ellipse
  8. Click on “Add text” the A in the menu
  9. And add the second text on the image
  10. Save the image

You have now 2 images, one with the first text, and one with the bar on it

Bootcamp advertisement Wealthy Affiliate

“Make it simple. Make it memorable. Make it inviting to look at” – Leo Burnett Click To Tweet

A live bootcamp education

Now you can create a moving GIF image

I use to make all my GIF’s. It’s a very easy online to use program and it’s free. I love free programs:)

  1. Upload the image with the first text
  2. Upload the image with the bar a couple of times
  3. Set the animation speed on 4000ms to 6000ms
  4. Keep the repeat time on zero
  5. 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%

A live bootcamp training

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.

A Platform Designed For all levels


Rectangle Affiliate marketing - make it your business


Success in creating your own animations! More down below!

Other interesting Picture Editors


(Visited 62 times, 1 visits today)

Hey, nice to meet you. I am Loes and I love to work, create and make money on the internet. My vision for the future is promising because the activities and sales go to triple over the next few years. You can take advantage of it too. Step into the world of affiliate marketing today, and work towards financial freedom for you and for your family. If you would like to learn how to build your own Wordpress website, click here to open your free account today!

  1. Christine says:

    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.

  2. Rika says:

    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?

    • Loes says:

      Hi Rika, you are right, subtle and not too noisy. My first to go website for images is . I use that one most of the time. It’s totally free, and 90% of the images are to use without attribution. 


  3. Steve Crozza says:

    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.

    • Loes says:

      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!


  4. Emma says:

    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

    • Loes says:

      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

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>