Home | Donate | Blog |Podcast |Site Map | Contact Us | Submit Product

How To Make Your Own Animated Banner Ads Using Photoshop Elements

A Good Way To Replace Adsense Blocks On Poor Performing Pages, To Help Direct Visitors To Higher-Earning Pages

In a previous article, Adsense Tips #2, I talked about replacing Adsense Ads on some pages of your website with your own banner ads, so that visitors are directed towards new pages, or pages that perform better in order to raise revenue. In this short tutorial I'll be showing you how to make an simple animated GIF banner with Photoshop Elements (version 2 in this case, but they're all similar) that can be used to replace an Adsense block. (Just like the one you see at the top of this page!)

tutorial 1
Right. We're going to be making a animated banner ad to replace a Google Adsense 728 by 90 leader board, so fire up Photoshop Elements and click on "File" then "New" and make sure that the settings are the same as those in the picture on the left.
Your page should now look like the image on the left. We're going to open up an image to use next, using "File" then "Open".
tutorial 3
Your screen should now look something like this. We're going to resize the image, the cars in this case, and put them on the left of our banner. We do this with "Image" "Resize" "Image Size" and change the height to 92. Then "Select" "All", then "Edit" "Copy", and click on the white banner, then "Edit and "Paste". Finish this section by moving the cars to the left of our banner with the move tool, then close down the original image of the cars (or whatever you're using).
tutorial 4
Your page should now look like this. Because we're going to make an animated Gif Banner, we need to duplicate this layer so it will be ready for two different lines of text. Use "Layer" "Duplicate Layer" "Ok". Now we're ready for our first line of text. Click on the text button on the tools bar (the T), and make sure "Arial" and "10pt" are selected at the top of the screen. Click in the middle of the image and type your first line of text. Once you've done that, duplicate this Text layer, select the duplicate in the layers palette, and change the text to your second line. To make it easier to see what you are writing click on the eyes on the layers palette to hide / reveal the text layers.
tutorial 5
Your screen should now look something like this. Next is the tricky part. We are going to merge the car layers with a separate white background, to give us two identical white car banners, with no text. Then we're going to merge each text layer with a car banner layer. The trick here is to use the eye icons to highlight the layers we're working on, then "Layer" and "Merge Visible". First duplicate the background (white) layer by selecting it on the layer palette then "layer" "duplicate layer" "ok".
tutorial 6
Your layer palette should now look like this. Now we're going to move the layers around in the palette so they'll be ready for merging. To move layers within the palette simply drag them up or down. (See the next picture for how it should look).
tutorial 7
Note how the layers are organized, and the eye icons are selected next to the top three layers, ready to be merged. With "Layer" "Merge Visible" our palette should now look like.....
tutorial 8
This. Our first layer is done, and I've got the eye icons selected and ready to merge the bottom three layers. "Layer" "Merge Visible" leads to...

This. (If "merge visible" doesn't appear on the "layers" drop down menu it's because you haven't got one of the layers to be merged selected in layers palette). Now we're ready to save our image using "File" "Save for Web"

tutorial 9

Make sure the settings on the right of the screen are the same as mine that you can see on the left. Press the little internet explorer sign (not shown) to preview your creation. Maybe try a different frame delay. Maybe cancel and change the order of your layers. Do not change the size!

Save your image, then load and embed it onto your web page, add a hyperlink, and there you have it, a nice animated banner to direct visitors to a high paying adsense page. Easy!

Comments / Questions:


Add A Comment / Question:


Email Address (Optional, will not appear in comment, I will post answer on site, but cannot reply personally to all):

Comment / Question:


More Internet Articles


About Us | Links | Submit Link | Privacy Policy | ©2006 sciuridae.co.uk