« XP Style Briefcase Icon
Computer Web Site Navigation Header »

Star Studded Animated Banner


Star Studded Animated Banner
Start by creating a new file of the banner size. Fill background with a solid color.
Create a circle using elliptical shape tool. Place it so that only a part of circle is visible.
Create two more duplicates and adjust their placement as shown in the image below.
Create a rounded rectangle using rounded rectangle shape tool.
Create a star shape using custom shape tool and place it on the border of the rectangle.
Create more duplicates and decorate them along the border of the rectangle. Select and merge all the star layers.
Fill the gaps with more stars and merge together to create another star layer.
Double click the layer to open layer style window. Apply layer style with the settings shown.
Apply same layer style on the other star layer and hide the layer styles of both the star layer for the time being. Enter text in a new layer.
Create another line of text in a new layer.
Insert a clipart of a mobile phone and place on the right.
Type click here on the mobile screen.
Double click the layer to open layer style window. Apply layer style with the settings shown.
Open animation window. For the first frame switch on the layer style of one of the star layer. Hide the layer style of click here layer
Duplicate frame. Hide the layer style of first star layer and unhide the layer style of second star layer. Unhide the glow effect on click here.
Select both frames and create two more duplicates.
Select all six frames and duplicate.
For the all the six selected frames hide the first line of the text and unhide the another line.
Similarly create six more duplicate frames and unhide the third line for these frames.
Press Ctrl+Alt+Shift+S to save an optimized animated GIF.

This entry was posted on Wednesday, April 19th, 2006 at 7:29 pm and is filed under Animation. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.


5 Responses to “Star Studded Animated Banner”

  1. Ekke Says:
    April 27th, 2006 at 4:19 am

    FÖR ER SVENSKA BESÖKARE AV DEN HÄR TUTORIALEN…. BESÖK MIN HEMSIDA ;)

  2. iime Says:
    April 30th, 2006 at 5:24 pm

    I fin this tutorial very useful.

  3. Kannmani Says:
    May 6th, 2006 at 5:17 am

    very very cool and easy understanding site. thank you.

  4. Chobe Says:
    May 21st, 2006 at 8:00 pm

    This tutorial is very nice! I also went to some sites and found another tutorials! It’s very simple! This one is too! But, since I’m just a beginner to start here, I started on the other one!

    [img]http://i60.photobucket.com/albums/h29/Chobe95/animated-banner.gif[/img]

    Or…..

  5. teckyone Says:
    June 29th, 2006 at 6:32 am

    I would love to know which version of Adobe Photoshop they are using. I have 5.0 limited eddition

Leave a Reply