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

Shopping Site Animated Banner


Start by creating a file of banner size. Create some twirl shapes using custom shape tool.

image 1

Create a rectangle using rectangular shape tool. Reduce the opacity to 50%.

image 2

Duplicate the rectangle layer. Increase the opacity to 100%. From layer menu select rasterize>> shape.

image 3

Click add vector mask button from the bottom of the layer palette.

image 4

Ctrl+Click the layer thumbnail to get the selection.Set the foreground color to black. Now select the mask thumbnail and fill the black color. This will create a mask for the below rectangle layer. Unlink the mask and content thumbnail in layer window. Hide the layer.

image 5

Type your text details over the rectangle layer. Move this layer below the mask rectangle layer in layer order in layer palette.

image 6

Add some star shapes suing custom shape tool.

image 7

Similarly add other details with their rectangle and mask.

image 8

image 9

Open animation window. For the first frame let the mask cover all of the text lying below.

image 10

Duplicate frame. Select the mask thumbnail, move the mask so as to reveal all of text below.

image 11

Click tween button from animation window. Apply settings as shown.

image 12

image 13

Similarly after 22nd frame let the mask of site name layer reveal the text below.

image 14

Press Ctrl+Alt+Shift+S to save an optimized animated GIF.

Shopping Site Animated Banner



Author's URL: Invano.com
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Shopping Site Animated Banner"

Captcha