website promotion banner
eturnkeys
Your Ad Here
Photoshop  Home Photoshop Web Layout Website Header
rss

Website Header

Author: Admin More by this author


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%.

Click to enlarge
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.

Click to enlarge
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!

Click to enlarge
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 Tutorial: Final Result (Click to enlarge)
Click to enlarge



Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Website Header"