How To Easily Create An Animated Banner with link For Advert, Website and blog

Animated banner with click-able link made easy.

Easily create a banner offline in less than 5min

Today I am going to show you how to easily create an animated banner for your website, blog, campaign, programme etc.

Some say banner is dead or no longer effective. But that is a fallacy in the highest order.

Banners can be image/text graphically representing a more larger content of interest used to draw attention of interested users.

Banners can be static or animated. For this tutorials, I will show you how to easily create an animated and click-able banner. Click-able in the sense that, when clicked, it can direct readers to the main content.

After this tutorial, you won't bother about how to create a banner for your website or blog nor will you have to budget money to give to someone who can.

Things you must have to create an animated banner

1. Computer
2. Adobe Photoshop
3. knowledge of Adobe Photoshop
4. Design sense (Good if you must attract readers)
5. Glass of water (Mandatory lol)

if you have all this things ready, then you're set.

Am going to use a simple background image with text, then I'll animate the text.

With this you should be able to design any animated banner with links within.

Step 1

Open the Adobe Photoshop (am using an old one)

GOTO file and click on the new.

Something like the image below will show up.. this is where you will determine the width and height of the banner. (that is, if you are starting from the scratch) Am going to use 200 width and 400 height.

Step 2

If you have a background already, then all you need is to apply the text you want animate. If you're starting from the scratch, then draw a rectangle or any shape you want your banner to be. Then fill it with color you like... you can see my example below.

Step 3

write the text you want to apply separately but properly aligned.

Example... Sharelodge shares anythings because sharing is passion to us

click me to visit.

The words are align together but are all written differently so that each of them can be animated separately. As you see below

Dont understand?

If you wish to animate different words on the image then you have to write them separately. By first selecting the text tool to write. After writing, select the path selection tool just opposite to tell the computer you are done writing. Then the computer will treat it as a stand alone word. To write another word or sentence, follow the same process of selecting the text tool after you are done writing, select the path selection tool.

You can move the words so that you can align it. By first selecting the layer that contain the word, then select the move tool to move the words.

Step 4

Now to animate, you have to switch to image-ready. It can be found on the window menu bar for those using higher version or on the tool bar(the last tool on the menu) for those using older version.

To animate, we will make use of eye-like icon found on the layers menu which indicate layer visibility and the opacity which is use to fade text in and out.

Below is a picture of what you will see after switching.

Step 5

The layer menu becomes larger, and a new animation menu appears below.

Click on the paper like icon to duplicate layers as much as the animation will take.

Here am duplicating it into 10 layers.
(Am using a different banner here. don't know how i lost the one am using for tutorial)
if you look at the image you will see that the animation layer has been duplicated

Step 6

Now we will start the animating proper.

To make the PASSION blink. We will have to click on the eye-like icon on the make the passion invisible.

We will start with the second frame. Click on the eye-like icon to make the PASSION invisible on this frame.( the eye-like icon is beside the layer that contain the text “PASSION”)

Now skip the third frame because it contains what we have just made invisible on the second frame.

Go to the fourth frame and click on the eye-like icon to also make it invisible.

Skip the fifth frame as it contains text we have just made invisible

Go to the six frame and click on the eye-like icon to make it invisible. Continue until you're satisfied.(like off and on).

Click on the play button beneath the animation menu to see how it work. You can adjust the delay by clicking on the little arrow beside the seconds.

(always remember to select the frame you want to work on, on the animation menu(below) and the layer which contain what you want to animate on the layers menu(left)

Play around to see if you're good to go. (good to go good to go good to go. That's a slang youth corps when they ready for action)

Step 7

To make text fade in and out you have to make use of opacity..

opacity can make a text fade out and and fade in by reducing the opacity of the selected frame(animation menu) and selected layer(layer menu).

This is what it means.

We have already establish a blinking PASSION. Now we want to animate another word on the banner. To do this we have to select the frame we want to start from on the animation menu.

Will select frame 1. now to select which word to animate, we will select the particular layer that contain the word on the layer menu. After that selecting, reduce the opacity of the word so that the word will fade.

Select frame 2. now select the same layer and increase a the opacity a bit, select frame 3 repeat same until you use 100% opacity. Click play buttons to see how it works

You can also change position of word by changing there direction from frame to frame.

Step 8

To save, go to file and select save optimised or save to web and give it a name. You are done.

Upload it to imageshack or related site.

Now to make it click-able, get the site address of your uploaded image

example: http://imageshack.com/42dfr4t

Now use this

<a href=”http;//site where you want to direct people to.com”><img src=”http://site of your uploaded banner.com” width=”adjust it with number” height=”adjust it with number” alt=” alternate name for your banner”/></a>

highlighted words are optional

now insert the code where you want it to appear on your website or blog.
anyone who click on the banner will be directed to the link on it.

Congrats..... you can leave a comment or question and sure I will do a follow up on it.....

check out how to create animated banner within 5 min