ANIMATED ADVERTISEMENT BANNER FOR YOUR WEBSITE

1. Create a new photoshop document with by the size of 125×125 pixels. This is what you should have by now.

2. Right click the layer and select ‘Convert to Smart Object’, or just simply hold down Alt and double click the layer. Rename it to ‘Slide1′
Now go to the blending options and apply the following:
Gradient Overlay


Stroke

Your ‘Slide1′ should look like this:

3. Now let`s create a new layer called ‘Slide2′ and fill it with a color. Then right click on Slide2 and go to the blending options.
Now apply the following:
Drop Shadow

Gradient Overlay


Your Slide2 should now look something like this:

4. Now it`s time to add some text for Slide1, so hide Slide2 and make sure you have only Slide1 in view.
Now start adding 3 SEPARATE lines of text, that means that you actually create 3 layers of text, one for each word. Here`s what I got so far:
(by the way I used Impact font, with a size of 10, smooth)


Now apply the following blending modes for every text layer that we created:
Drop Shadow

Gradient Overlay


Stroke

You should have somthing like this:

Now hide everything except Slide2 and repeat the process ( create some text ), this is what I have so far:

I`ll apply the following blending options for the ‘YOUR’ and ‘SITE’ layers.
Inner Glow

Gradient Overlay


Stroke

And finally, for the ‘www.yoursite.com’ , I just used a plain pink color.
Here`s what I got:

Now let`s start animating it.
Go to Window>Animation in order to display the animation options.
Now hide all layers excluding the Slide1. Set the delay of the first frame to 0.5 seconds:

And create a new frame. Now show the ‘Click’ text layer. Again go to the delay and set it to 0.5 sec.
Now create another frame revealing the ‘Me’ text layer (set delay also to 0.5 sec).
Create another frame in the animation tool revealing the last layer of text for ‘Slide1′ wich is ‘Now’. Set the delay for this frame to 2 seconds.

Posted in Photoshop