Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Animated Banner

Animated Banner


Step 1

Start a new document of size 460x68 pix. Use the foreground colour as #B39E75 and background colour as #EFD8AB.

image 1

Use the gradient tool and do a gradient fill as background.

image 2

Step 2

Create a new layer and select the electrical Marquee tool and fill it with this gradient.

image 3

Now use the following settings in Blending Option. Stroke>1 px Black Colour.

Step 3

Now Create a new layer and use the rectangular marquee tool to select a long rectangle at the bottom and fill it with white colour with a 1 pix black colour stroke. This is what I got.

image 4

Now let us fill in the price and some advertisement text. Use a Bold and Colour fill font as the main intention of a banner is to attract the visitors. This is what I have chosen.

image 5

Step 4

Now let us create a simple logo for the banner. I just typed a text and used a small icon over it to make a simple logo. Usually your client will give there own logo so you can use it instead.

image 6

Step 5

Now it is time for some animation. Type 3-4 ad text and use the visibility mode of the layer to turn them on of off. The visibility mode can make a layer visible or hidden on the canvas. You can select or deselect the visibility anytime by click the "eye icon" on or off.

image 7

Now it is time to fire up Image Ready. File>Edit In Image ready (Ctrl+Shift+M ).

In the animation window duplicate the current layer

image 8

Now select the layer visibility of the ad text layer to make the first ad text appear and the second layer disappear. This is how to do it.

image 9

Now duplicate the existing layer again and make the current ad text disappear and make the new ad text layer visible. Press the play button and this is what I got my animation as.

Animated Banner Tutorial: Final Result

This is what I got as the Final Result. Hope you liked the tutorial.



Author's URL: CoolJeba.com
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Animated Banner"

Only registered users can write comment

Reader's comments