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 with Bull's Eye Effect

Animated Banner with Bull's Eye Effect


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

image 1

Create a circle using elliptical shape tool.

image 2

Reduce the opacity to 25%.

image 3

Duplicate the circle and scale down.

image 4

Duplicate the circle and scale down again.

image 5

Create a target shape using custom shape tool.

image 6

Create a rounded rectangle using rounded rectangle shape tool.

image 7

Create an arrow shape using custom shape tool.

image 8

Duplicate the layer. From filter menu select blur>>motion blur.

image 9

image 10

Type company name over the rounded rectangle. Apply stroke.

image 11

Type text details on right hand side in different layers.

image 12

image 13

image 14

Open animation window. For the first frame keep the arrows and text details hidden.

image 15

Duplicate frame. Keep the arrow layer and blurred arrow layer partially visible coming from the right side.

image 16

Duplicate frame. Move both arrow layers towards the target.

image 17

Duplicate frame and repeat the above steps till the arrow hit the target.

image 18

image 19

image 20

In seventh frame our arrow hits the target. Hide the blurred arrow layer.

image 21

Duplicate frame. Hide arrow layers. Let the text detail layers be visible one by one with each duplicate frame.

image 22

image 23

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

Animated Banner with Bull’s Eye Effect 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 Banner with Bull's Eye Effect"

Only registered users can write comment

No comments yet...