Free online photoshop training

Photoshop tutorials for webdesigners

Website Banner Animation Graphics

January 17th, 2008 · No Comments

Here I will teach you about Website-Banner-Animation-Graphics

[1]-First of all Open New Document of Custom Size, Height & Width 200×700 pixels, Resolution 72 & Mode RGB Color

pun258-website-banner-animation-graphics1.gif

[2]-Now fill the Background Layer with any color & then create the following selection with the help of Rectangular Marquee Tool

pun258-website-banner-animation-graphics2.gif

[3]-Now fill the selection with any color & then Go to Blending Options with click on ‘f’ which is indicating by Hand sign

pun258-website-banner-animation-graphics3.gif

[4]-Now select Gradient Overlay & use the following settings

pun258-website-banner-animation-graphics4.gif
pun258-website-banner-animation-graphics5.gif

[5]-Now your image will be look as shown below & after that create New Layer 2 with press Ctrl+Shift+N

pun258-website-banner-animation-graphics6.gif

[6]-Now create the following selection with the help of Rectangular Marquee Tool & then fill then selection with any color

pun258-website-banner-animation-graphics7.gif

[7]-Now Go to Blending Options & select Gradient Overlay & use the following settings

pun258-website-banner-animation-graphics8.gif
pun258-website-banner-animation-graphics9.gif

[8]-Nnow select Pattern Overlay & apply the following settings

pun258-website-banner-animation-graphics10.gif

[9]-Now select Stroke Structure & use the following settings

pun258-website-banner-animation-graphics11.gif

[10]-Now your image will be look as shown below

pun258-website-banner-animation-graphics12.gif

[11]-Now select Text Tool pun258-website-banner-animation-graphics13.gif & create the following Text

pun258-website-banner-animation-graphics14.gif

[12]-Now create another New Text with the help of Text Tool on Seprate Layers

pun258-website-banner-animation-graphics15.gif

[13]-Now lastly create following Text with the help of Text Tool

pun258-website-banner-animation-graphics16.gif

[14]-Now select above layer & go to Blending Options with click on ‘f’ which is indicating by Hand sign

pun258-website-banner-animation-graphics17.gif

[15]-Now select Gradient Overlay & use the following settings

pun258-website-banner-animation-graphics18.gif
pun258-website-banner-animation-graphics19.gif

[16]-Now select Stroke Structure & use the following settings

pun258-website-banner-animation-graphics20.gif

[17]-Now your image will be look as shown below

pun258-website-banner-animation-graphics21.gif

[18]-Now Go to Image Ready with the help of Press Ctrl+Shift+M & after that go to WINDOW>ANIMATION & make Duplicate Frame
with the help of CLick on following sign which is indicating by Hand sign as shown below

pun258-website-banner-animation-graphics22.gif

[19]-Now select Frame 1 & Hide the following Layers

pun258-website-banner-animation-graphics23.gif

[20]-Now your image will be look as shown below

pun258-website-banner-animation-graphics24.gif

[21]-Now select Frame 2 & Hide the following Layers

pun258-website-banner-animation-graphics25.gif

[22]-Now your image will be look as shown below

pun258-website-banner-animation-graphics26.gif

[23]-Now Play the Animation with the help of click on following Button which is indicating by Hand sign as shown below

pun258-website-banner-animation-graphics27.gif

[24]-Now press Ctrl+Shift+Alt+S (Go to File>Save Optamized as..) & use the following settings

pun258-website-banner-animation-graphics28.gif

[25]-At last, all settings have been completed & your final image will be look as shown below

pun258-website-banner-animation-graphics29.gif

62      photoshop graphic tutorial
61      photoshop website tutorial

Tags: Web graphics

0 responses so far ↓

  • There are no comments yet...Kick things off by filling out the form below.

Leave a Comment