Animated Banner for OS Commerce

Animated Banner for OS Commerce

Create a new document and choose background for your banner. Let it be blue.

Select a rectangular area with Rectangular Marquee Tool.

Press Q to enable quick mask. Go to Filter>Distort>glass and apply following settings:

Press Q to quit the mask. Create new layer and color the selection white.

Make a rectangle using Rectangular Shape tool.

Apply following settings for the layer style.

Insert a product image and place it inside the rectangle.

Create more rectangles and insert images.

Create company logo and place it on the left side of your banner.

Create a rectangle using Rectangular Shape Tool. Press Ctrl+T to enable transformation and rotate it.

Apply following settings for the layer style:

Insert text into this last rectangle. Type each slogan in a new layer.

Open animation window. Create a frame and hide all rectangles and images for it leaving the background only.

Duplicate frame and unhide first rectangle for it.

Duplicate frame and unhide first product image for it.

Go on duplicating the frames and unhiding banner elements for them.

Starting from the 8th frame put in the rotated rectangle layer and one of  the suitable text layers. Start from a small piece of the figure:

 Duplicate frame and move the rectangle with text inwards.

Duplicate frame, hide the first text layer and unhide the second one.

Press Ctrl+Alt+Shift+S and save the GIF image.

Enjoy the result!