Her

Home Photoshop Tutorials ImageReady Animation Animated Banner for Purse Store

Animated Banner for Purse Store

Author: Mr. Smarty Author's URL: www.smartphotoshop.com More by this author

Start by creating a new file of banner size. Fill the background with blue color.

image 1

Create a rectangular selection using rectangular marquee tool.

image 2

Press Q to enable quick mask. From filter menu select distort>>glass. Apply settings as shown.

image 3

Press Q to disable quick mask. Create a new layer and fill the selection with white color.

image 4

Create a rectangle using rectangular shape tool.

image 5

Double click the layer to open layer style window. Apply layer style with the settings shown.

image 6

image 7

Insert a product image and place over this rectangle.

image 8

Similarly create more rectangle and place images over them.

image 9

Insert company logo and place on the left.

image 10

Create a rectangle using rectangular shape tool. Press Ctrl+T and rotate it.

image 11

Double click the layer to open layer style window. Apply layer style with the settings shown.

image 12

image 13

Type details on the rectangle. Use different layers for different lines of text.

image 14

image 15

image 16

Open animation window. For the first frame hide all rectangles and images.

image 17

Duplicate frame. Unhide first rectangle.

image 18

Duplicate frame. Unhide first product image.

image 19

Similarly create duplicate frames and keep unhiding rectangles and images.

image 20

image 21

image 22

image 23

For 8th frame keep the rotated rectangle layer and the respective text layer partially visible from the right edge of the banner.

image 24

Duplicate frame. Move these layers inwards.

image 25

image 26

Duplicate frame. Hide the first detail layer and unhide the second one.

image 27

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

Animated Banner for Purse Store