Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Website Header

Website Header


Step 1

Open up a 600(width) x 120(height) white document.

Step 2

Select the gradient tool, and select the 'Linear Gradient' icon. Set #438299 as your foreground colour, and #376e82 as your background colour. Now fill in the background with the gradient, start from the top and drag your mouse down to the bottom.

image 1

Step 3

Now pull out your rectangular marquee tool, which is located on the very top left of your toolbar. Create a new layer by going to (Layer - New - Layer). Select a small portion of the bottom of the header and then goto (Select - Modify - Smooth) by FIVE pixels. You should now have a smooth curved rectangle on the very bottom of your image. Select the gradient tool and use #fae402 as your foreground colour, and #fbc301 as your background colour. Fill in the selection the same way as you did with the background. I also added a SLIGHT Inner Shadow to the layer, with the default settings with the opacity down to 10%.

image 2
Click to enlarge

Step 4

Now add whatever kind of text you would like on the bottom. I chose the font 'Tahoma' with the colour black with a very small drop shadow.

image 3
Click to enlarge

Step 5

Now write your desired text in the background, I wrote 'Tutorial-Factory.com' with the font 'Impact' at the size of 48 points and the colour code of #ffde00. Right click the text layer that you have just created, and goto Blending Options and use these options.

image 4

image 5

image 6

image 7

image 8

image 9

Step 6

Your text should now look like this. A nice, smooth and glossy yellow text!

image 10
Click to enlarge

Step 7

I added a reflection, and a little brushing around the background and this is what I came up with.

Website Header
Click to enlarge


Author's URL: Admin
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Website Header"

Captcha