This tutorial will show you how to make a nice and shiny header for your website!

Open a new document and make it 800x200 pixels and make the background color white.


Step 1:
With the Rounded Rectangle Tool (U) set to a radius of 25 px, draw a rectangle of about 700 by 150 pixels.. Or whatever looks good.. Apply Layer - Rasterize - Shape.



Step 2:
CTRL+Click on the thumbnail in the layers tablet. You should see the shape selected now.
Now take the default gradient tool and, while holding shift, start about 20 pixels above the shape and drag it to the bottom of the shape. Result:



Step 3:
The second shape.
Take a look back at step one. This one is very similar to it.
What we are going to do is place another shape INTO the existing one.
Press U again for the Rounded Rectangle Tool.
Now set the radius to 20 pixels in stead of 25.
Now pay attention!

The trick here is to put your mouse in the middle of the rounded edge in the top-left corner of Shape1. Then drag it to the middle of the rounded corner on the bottom-right.
Apply Layer - Rasterize - Shape again.

Got it? This is what it should look like now:



Step 4:
Apply some layer styles!
Assuming your layers are still named Shape1 and Shape2 I will use these names for the settings.
On Shape1:
Apply a 1 px Stroke effect in the color #cccccc, or some other grey..

On Shape2:
Apply a 1 px Stroke effect in the color #666666.
Now set the FILLto 50%. That is the FILL, NOT THE OPACITY!

Result after step 4:



Step 5:
Make a New Layer (CTRL+SHIFT+N).
CTRL+Click on the thumbnail of Shape2 in the layers tablet.
You should see a selection of Shape2 now.
Now select the Eliptical Marquee Tool (M) and make sure that you put the mode to Substract from selection.


Now select the area you want removed and you should see this kind of selection:


Fill the selection with White, #FFFFFF.
Set the opacity for this layer to 5%.



Step 6:
Make a New Layer (CTRL+SHIFT+N).
Select the outline of Shape2 again by clicking on it's Thumbnail in the Layers tablet.
Now take the Rectangular Marquee Tool (M).
Again set the mode to Substract from selection:


Now deselect just over half of the bottom of the selection:


Grab your gradient tool!
While holding SHIFT, drag the tool from just above the top of the selection to just about under it (like 5 pixels).
Make sure the top is white and the bottom dark. IF this isn't the case, check the 'Reverse' box in the top of your screen.
Put your brand new gradient layer on blending option Screen and the Fill/Opacity to 50%.
Result:


Step 7:
Add your own logo and text, but make sure to put Layer 3 on top of everything!
(Layer 3 is the layer you put the last gloss finish in remember?)
Result:



As a reminder: Please take a few minutes of your time to sign up and share your work!

You used that on one of you headers :P

and i thought it was hard to make :D

but it doesnt look that hard from here, i shall give it a try sometime :)

Hi, great tutorial, thank you very much.

Two things I didn't find out:

Where is the fill option?

Where are blending options?

Great tutorial, thanks!

The FILL option is under the OPACITY option in your layer palet :)

and the blending options.. well you can see the word NORMAL in your layers window right?
If you click on the down-arrow next to it you will see a drop-down menu with all the layer styles available! Also Screen and other things like overlay and soft light.

i hope this answers your question!

Genius work. Thanks
But i think that we can simplilfy Step 3:

WE can do it by duplicating shape1 and changing size ;)

And my work:

Can someone tell me about Layer 3 to add the gloss?

I'm new to Photoshop and I really like your tutorials!!

Keep them coming as I'm learning more here then on books!!

THANK YOU for your help!!!!

This one is for you.. specially for you :)

I get that you got stuck at step 6? (if not PM me i will respond with an answer ASAP.)

So to get tje glosy part on the top half of the inlay, you have to select the top half of that.

First you make a New Layer (CTRL+SHIFT+N).
You should have your new layer (in the case of this example Layer 2) selected in your layers window.
Then you CTRL+CLICK the thumbnail of shape 2 (the inlay) in your layers window.
You should see a hand with a rectangular selection on it appear as a cursor.
So CTRL+CLICK the thumbnail, not the layer!


You should now see the rounded rectangular selection as following:


Now select the rectangular marqee tool:


And While holding ALT drag the tool from the lower corner to halfway the image on the opposite side. (Holding alt makes a tiny '-'mark appear next to your tool, this means your substracting stuff from your selection.) This is what it will look like:


When you let go of the mouse button, this is the remaining selection:



Now for the (almost) fnishing touch!
Grab your gradient tool and start throwing gradients!
This is your gradient tool:

If THIS icon appears in that spot:

Just press G. It helps a lot.

So you now have to make a gradient!
FIRST, MAKE SURE YOU TICK THE BOX LABELED 'REVERSE' IN YOUR TOP TOOLBAR. (assuming you have default colors)
Grab the tool and place your mouse just a little under the top of the selection.
Then, while Holding SHIFT, drag a line downwards untill you reach about 10 pixels UNDER the bottom of the selection. This pic shows the movement and the result in 1 pic:


Last step!
(this one will help J.D. very much too)
Set the blending mode to screen! You do this by clicking the dropdown box that as of now said 'Normal' and then select screen from the list.


Now for the fill, set it to 50%.
It looks exactly like this:


Youre done!
You can deselect now (CTRL+D) and there is your result:



Just let me know if this helped! (You too J.D.)

I have a question how do you make the white grass thingy??

Nice tut's i like them. :D