Saturday, January 8, 2011

How to make Animated banner in Photoshop

Animation Website Banner Ad

Here I am telling you about how to make Animation Website Banner Ad
[1]-First of all Open New Document of Custom size,Height & Width 370×423 pixels,Resolution 72 & Mode RGB Color
Pun461-photoshop-animation-website-banner-ad1
[2]-Now fill the Background with any color & then Open New Layer & create the following selection with the help of Elliptical
Marquee Tool
Pun461-photoshop-animation-website-banner-ad2
[3]-Now fill the selection with any color & then go to Blending Options,select Drop Shadow & use the following settings
Pun461-photoshop-animation-website-banner-ad3
[4]-Now select Gradient Overlay & use the following settings
Pun461-photoshop-animation-website-banner-ad4
Pun461-photoshop-animation-website-banner-ad5
[5]-Now your image should look like as shown below
Pun461-photoshop-animation-website-banner-ad6
[6]-Now create the following Dollar Sign with the help of Text Tool
Pun461-photoshop-animation-website-banner-ad7
[7]-Now go to Blending Options,select Drop Shadow & use the following settings
Photoshop Technique-How to use the Drop Shadow feature
Pun461-photoshop-animation-website-banner-ad8
[8]-Now select Bevel & Emboss & use the following settings
Photoshop Technique-How to use the Bevel & Emboss feature
Pun461-photoshop-animation-website-banner-ad9
[9]-Now select Gradient Overlay & use the following settings
Pun461-photoshop-animation-website-banner-ad10
Pun461-photoshop-animation-website-banner-ad11
[10]-Now your image should look like as shown below
Pun461-photoshop-animation-website-banner-ad12
[11]-Now create the following selection with the help of Magic Wand Tool & after that Hide the text Layer
Pun461-photoshop-animation-website-banner-ad13
[12]-Now select Layer1 & then press Delete & your image should look like as shown below
Pun461-photoshop-animation-website-banner-ad14
[13]-Now select Text Tool Pun461-photoshop-animation-website-banner-ad15 & then create the following Text
Pun461-photoshop-animation-website-banner-ad16
[14]-Now go to Blending Options & then select Drop Shadow & use the following settings
Pun461-photoshop-animation-website-banner-ad17
[15]-Now select Bevel & Emboss & use the following settings
Pun461-photoshop-animation-website-banner-ad18
[16]-Now select Gradient Overlay & use the following settings
Pun461-photoshop-animation-website-banner-ad19
Pun461-photoshop-animation-website-banner-ad20
[17]-Now your image should look like as shown below
Pun461-photoshop-animation-website-banner-ad21
[18]-Now go to Window>Animation & then create the Duplicate Frame with the help of Click on following Button which is indicating
by Hand sign
Pun461-photoshop-animation-website-banner-ad22
[19]-Now select Frame-1 & then Hide the following Layers with the help of Remove the Eye Sign which is indicating by Hand sign
Pun461-photoshop-animation-website-banner-ad23
[20]-Now your image should look like as shown below
Pun461-photoshop-animation-website-banner-ad24
[21]-Now select Frame-2 & then Hide the following Layers
Pun461-photoshop-animation-website-banner-ad25
[22]-Now create the following adjustment with the help of Move Tool & your image should look like as shown below
Pun461-photoshop-animation-website-banner-ad26
[23]-Now make the Tween Frames with the help of Click on following Button which is indicating by Hand sign
Pun461-photoshop-animation-website-banner-ad27
[24]-Now use the following Time settings in Tweens
Pun461-photoshop-animation-website-banner-ad28
[25]-Now Play the Animation with the help of Click on following Button which is indicating by Hand sign
Pun461-photoshop-animation-website-banner-ad29
[26]-Now go to File>Save for Web & Device & save your image
Pun461-photoshop-animation-website-banner-ad30
[27]-Thanks for read this Photoshop Tutorial.I hope U have enjoyed & the Final Output of this Tutorial is shown below
Pun461-photoshop-animation-website-banner-ad31

No comments:

Post a Comment