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

Home Decor Site Animated Banner


Start by creating a file of banner size. Fill with a solid color. Create a rectangle using rectangular shape tool. Place it at the bottom of banner.

image 1

Create an ellipse using elliptical shape tool. Place it on the left of the banner.

image 2

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

image 3

image 4

Create a rounded rectangle using rounded rectangle shape tool.

image 5

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

image 6

image 7

image 8

Insert an image you want to place on the banner. Move the layer just above the rounded rectangle layer. Press Ctrl+Alt+G to create clipping mask.

image 9

Duplicate the layer. Press Ctrl+T. Right click the layer and select flip horizontal.

image 10

Create an arrow shape using custom shape tool. Fill it with white color.

image 11

Duplicate the layer. Press Ctrl+T. Right click the layer and select flip horizontal. Fill it with black color.

image 12

Similar create some more rounded rectangles with pictures. Also add arrows in both directions for all these images.

image 13

Insert company name and other details over the ellipse layer.

image 14

Open animation window. For the first frame hide all the images. Keep only first arrow visible.

image 15

Duplicate frame. Unhide first image and second arrow. Hide the first arrow.

image 16

Similarly keep duplicating frames and keep hiding/unhiding layers according to the images below.

image 17

image 18

image 19

image 20

For the seventh frame start making black arrow visible to create a backward motion.

image 21

image 22

image 23

image 24

image 25

image 26

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

Home Decor Site Animated Banner



Author's URL: Fiery Darts
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 "Home Decor Site Animated Banner"

Captcha