Free Photoshop cs3 suite tutorials

Beginners Photoshop cs3 tutorials

Design a simple website banner for header or sidebar

October 27th, 2007 · No Comments

Every web designer or graphics designer needs a banner for their website. In this tutorial you will learn how to create a simple website banner with the logo. this banner design is simple yet fulfills the need as far as you are looking for some quick design.

[1]-First of all open new document of CUstom size, Height & Width 500×400 pixels, Resolution 72 and MOde RGB COlor

pun155-website-header-image1.gif

[2]-Now fill the Background Layer with any Color & then go to Filter>Render>Lighting Effect & use the following settings

pun155-website-header-image2.gif

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

pun155-website-header-image3.gif

[4]-Now create the following selection with the help of Elliptical Marquee Tool

pun155-website-header-image4.gif

[5]-Now fill the selection with # D6D791 color & click on ‘f’ which is indicating by Hand sign as shown below

pun155-website-header-image5.gif

[6]-Now select Gradient Overlay and apply the following settings

pun155-website-header-image6.gif
pun155-website-header-image7.gif

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

pun155-website-header-image8.gif

[8]-Now press Ctrl+J for making Duplicate Layer & replace the shape with the help of Move Tool as shown below

pun155-website-header-image9.gif
[9]-Now reduce the opacity of the Duplicate Layer as shown below

pun155-website-header-image10.gif

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

pun155-website-header-image11.gif

[11]-Now create the following selection with the help of Elliptical Marquee Tool

pun155-website-header-image12.gif

[12]-Now fill the selection with following Color

pun155-website-header-image13.gif

[13]-Now click on ‘f’ which is indicating by Hand sign as shown below

pun155-website-header-image14.gif

[14]-Now select Gradient Overlay & apply the following settings

pun155-website-header-image15.gif
pun155-website-header-image16.gif

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

pun155-website-header-image17.gif

[16]-Now create the following selection on new layer with the help of Single Row Marquee Tool & then CLick & select Fill

pun155-website-header-image18.gif

[17]-Now use the following settings in FIll & then ‘ok’

pun155-website-header-image19.gif

[18]-Now reduce the opacity as shown below

pun155-website-header-image20.gif

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

pun155-website-header-image21.gif

[20]-Now create the following selection with the help of Rectangular Marquee Tool & then press “delete”

pun155-website-header-image22.gif

[21]-Now create the selection on other side and then press ‘delete’ & your image will be look as shown below

pun155-website-header-image23.gif

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

pun155-website-header-image24.gif

[23]-Now click on ‘f’ for Blending Options & then select Outer Glow & use the following settings

pun155-website-header-image25.gif

[24]-Now select Gradient Overlay and apply the following settings

pun155-website-header-image26.gif
pun155-website-header-image27.gif

[25]-Now select Stroke and use the following settings

pun155-website-header-image28.gif

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

pun155-website-header-image29.gif

[27]-Now select Text Layer & then press Ctrl+J for making copy of the layer after that press Ctrl+T and click after that select Flip Vertical and replace as shown below

pun155-website-header-image30.gif

[28]-Now reduce the opacity of the Copy of Text Layer as shown below

pun155-website-header-image31.gif

[30]-Now create another Text & press Ctrl+J after that press Ctrl+T replace as shown below and then reduce the opacity 16%

pun155-website-header-image32.gif

[31]-Finally, all settings have been completed & your final image will be look as shown below

pun155-website-header-image33.gif

Design a simple website banner for header or sidebar

Create traffic signals lights using photoshop features - Easy and free photoshop tutorials

Tags: website graphics photoshop tutorial

0 responses so far ↓

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

You must log in to post a comment.