How to make a simple banner ad!
Note: this tutorial is a complimentary lesson from my internet program for all of you staying home today during the Corona Virus stay at home order .
Being stuck inside is a drag but now is the perfect time to get some great banner ads created.
The following is a simple tutorial on how to make an extremely easy banner ad, and it’s made using the same visual editor that you use for creating posts on your Word Press blog. Don’t have a Word Press blog yet? Where have you been! Go get signed up for one right now at WordPress.com
This ad is not going to require any artist blending or layering skills on your part. So if you know nothing about photo editing, this is a wonderful option.
If you’ve ever wished your blog could display banner ads or that you could present a banner ad to a website to advertise your product, service, or affilate item, then this is a very good starter tutorial.
Take the very best photos you can for your ad. If you use a picture from the internet, be sure you have permission before you copy it.
Select the first photo and insert it into your post.
As you can see, the photo I’ve uploaded is very large, so it needs to be resized to about a third of the document’s width (I’ll explain more in a moment). Take your first photo, and resize it. Here’s how: After you upload your photo and insert it into your post, left click on the corner of the photo. You should see this: (this is a screen shot of the photo above, and its surrounding text).
As you can see, on the top of the photo are some white boxes. This tutorial was actually created on a Word Press post, as well as the example of the ad (the white boxes you see are what displayed on this original post. If you are using the classic editor, you should have similar alignment icons you can click on). These icons determine which side of the post your photo will display on. We will get to that shortly.
Drag and Resize Your Photo
For now, observe the four squares on each corner of the photo. Left click on the upper left square and then drag it diagonally toward the lower right square. This will resize your photo. As long as you left click on the corner and drag it diagonally, you can minimize your picture to any size you need without distorting the proportions of your image. Remember, for your ad, you want your photo to be about one third the width of your document, at least when you begin creating it.
Align your Image
Even if your photo automatically displays on the left, you still want to click the “align left” icon. Your photo will align left by default (that’s called “no alignment”), but you don’t want to click the white box that is “no alignment” you want the icon that is “left alignment”. They look almost identical, but if you hover your mouse over them, text will appear saying which is which. So resize your photo to about a third of the page, and then click on the “left-align” box.
Now, to make this work, you need a total of two photos–one on the left hand side (which I just demonstrated) and one on the right. In the center will be a section of text which explains your product.
Obviously, when you load your second photo, you will align it right and resize it to approximately the same size as your first photo. Remember, each photo should only take up about a third of the document (or post’s) width until you fine tune it.
Quick note: I’m showing you how to do this on a WordPress post, but it will work on most Word Processors.
When you upload your second picture, it may not line up exactly where you want it. It may be higher or lower on the page. Just be sure that the photo on the left is aligned left, using the icon mentioned, and that the photo on the right is aligned right. At first, it’s best to do this on a completely blank page with no text or other images. Then, simply fine tune the positioning of your photo following these instructions:
Left click in the middle of the photo. Place your cursor in the middle of the photo and left click
Move your photo: draggg it where you want it by holding down on the mouse button while moving the mouse. Doing so will make the picture move across your screen
Position your photo: visualize a line underneath both pictures, running west to east, connecting them/ practice (plus patience) makes perfect!
Sweet tip…listen it’s entirely possible, even probable, that at some point during this process you will accidentally cause your photo to…dis appear (gasp)! Very stressful but if it happens, no worries… just recover it by clicking on the undo arrow at the top of your visual editor. Ta da!! It will instantly reappear.
As you can see, I further adjusted the sizes of these boxes so that they could accommodate space for my text. This is a process in exactness which may take some time. Also, you may notice that I put the text in italics. It is more attractive, and generally, italics take up less space. You can also try different fonts, and font sizes if you are familiar with coding.
Because these two photos are separated with text and because we will be surrounding the photos and text with one unifying border, there is no need to blend them together as you would need to in a more elaborate ad. The text between them explains the photos while pulling them together, and the border (which we will create in a moment) will clearly show the viewer that this is all one ad.
A Picture Paints a 1000 Words… but you still need to say something!
Now, you simply need to insert text between your photos, detailing your ad. It doesn’t need to be long a lot of text, and because we are dealing with limited space, it shouldn’t be. All you need to include is something jazzy and short about your product or service that makes the reader want to know more. You want something compelling that draws your reader in with few words. Whatever you do decide to say, just make sure your text doesn’t extend above or below the pictures, and that the pictures are aligned by height; in other words, it is important that the top and bottom of your photographs are the same distance in their respective measurements from north to south…you should be able to lay a ruler on the top of both photos and it should be level–or at least it should look even to the casual observer. So should the bottom of your photos, so align your photos before adding your text.
Screenshots and the “snippet tool
Next, you’re going to take a screen shot of both images and the text. When you do, the “rectangular” snippet feature will create a clean, imaginary border from the left side of the left picture to the right side of the right picture.
Not familiar with the snipping feature? I explain all of this in rigorous detail in my internet marketing program.
Finally, I put a simple border box around the text and photos, turning it all into an an ad.
There are two ways to do this: you can use…
This has been an excerpt from my 17th lesson in my 20 part series, “How to sell anything online”. To view more tutorials like this
Enroll in the How to Sell Online, ecourse
Get the real deal here; step by step instructions for presenting, promoting, and selling your product online.