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 Banner for Florist Site

Animated Banner for Florist Site


Start by creating a file of banner size.

image 1

Insert an image of flowers.

image 2

Create a rounded rectangle using rounded rectangle shape tool. Reduce the opacity to 80%.

image 3

Insert a cutout of a flower.

image 4

Insert another cutout and place on the left side of the banner.

image 5

Type company name over the rounded rectangle.

image 6

Type other text details in separate layers.

image 7

image 8

image 9

Click add vector mask from the bottom of the layer palette

image 10

Create a rectangular selection using rectangular marquee tool. Press Ctrl+Alt+D to feather the selection. Click the mask thumbnail. Fill the selection with black color. Repeat this steps for the other two text detail layers.

image 11

Insert some small flowers.

image 12

Open animation window. For the first frame hide the three text detail layers.

image 13

Duplicate frame. Move the small flowers to the right. Move the mask of the first text layer to the right so that it's completely visible.

image 14

Click tween button form the animation palette. Apply settings as shown.

image 15

Duplicate the last frame and hide the small flower layers for this screen.

image 16

Repeat the above steps for rest of the text detail layers.

image 17

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

Website Building Tutorial Tutorial: Final Result



Author's URL: Smartphotoshop.com
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 Banner for Florist Site"

Only registered users can write comment

No comments yet...