Animate your images to attract attention and fight the static boredom. This section contains tutorials to help you master the animation process.  Home Photoshop ImageReady Animation Animated Promotional Site Banner

Animated Promotional Site Banner


Start by creating a new file of banner size. Create a circle using elliptical shape tool at the left of the banner.

image 1

Create another circle above the first circle. Place it as shown. Fill it with white color.

image 2

Create a star shape using custom shape tool. Place as shown.

image 3

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

image 4

image 5

image 6

Duplicate the layer 3 times and place as shown.

image 7

Create an arrow shape using custom shape tool and place as shown.

image 8

Duplicate the layer and move towards right by a few pixels. Change the color. Move this layer below the first arrow layer in layer order in layer palette.

image 9

Similarly create one more duplicate and fill with a lighter shade.

image 10

Select all the arrow layers. Duplicate them and place as shown.

image 11

Repeat the above step.

image 12

Insert company name and type other details. Create a coupon shape using rounded rectangle tool. Insert text over the coupon. Merge this coupon. layer with last arrow set.

image 13

Open animation window. For the first frame move all the arrow and text layers towards the left so that it hides behind the circle below the company name.

image 14

Duplicate frame. Move first set of arrow layer and corresponding text towards right, so that most of it is visible.

image 15

Click tween button from the bottom of animation window. Apply settings as shown.

image 16

image 17

Select 2nd, 3rd, 4th, 5th, and 6th frame. Unhide the second star layer.

image 18

Select 3rd, 4th and 5th frame. Unhide the third star layer.

image 19

Select 4th frame and unhide the last star layer.

image 20

Repeat the same steps mentioned above for the next set of arrow and text layers. Also repeat the steps for star layers.

image 21

image 22

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

Animated Promotional Site Banner Tutorial: Final Result



Author's URL: Head Nerd
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Animated Promotional Site Banner"

Only registered users can write comment

Reader's comments