Step 1.
Start a new document of any size, I'm working with a 777 x 110 and fill the background with: #71849E.
Step 2.
Create a new layer, and using the rectangular marquee tool make a selection on the canvas similar to the one bellow:
Fill this selection with #C3C3C4. Press Ctrl + D on your keyboard to deselect.
Double click this layer, and apply the following blending options:
Outer Glow:
Gradient Overlay:
Stroke:
Result:
Step 3.
Next create a new layer, and use the rectangular marquee tool to make a selection on the canvas similar to this:
Now use the polygon lasso tool (
) hold down the Alt key and deselect some of the box making angled sides like so:
Fill this selection with: #DDDCDC
Right click on the previous layer (the one bellow this) and choose "copy layer style":
Now right click on the topmost layer (the one we just made) and choose "paste layer style":
Result:
Step 4.
Next create a new layer, using the rectangular marquee tool make another selection in the middle of the canvas like so:
Now just like we did in step #3, use the polygon lasso tool (
) hold down the Alt key and deselect some of the box like so:
Fill this select with: #DDDCDC
Right click on this layer and choose "paste layer style", just like in step #3:
Result:
Step 5.
Now you want to continue to use the same steps as above, using slightly different shades of grey to flood fill your selections with, placing each panel on a new layer of it's own. Keep doing this until you've got several overlapping panels, which is what I've done here:
Step 6.
Once you have a nice compliment of tech panels we can add the navigation bar. To do so go ahead and create a new layer on top of everything else, get out the rectangular marquee tool and make a selection along the bottom of the canvas like so:
Fill this selection with #B2B2B2, press Ctrl + D on your keyboard to deselect.
Now double click this layer, and apply the following blending options:
Drop Shadow:
Outer Glow:
Gradient Overlay:
Stroke:
Result:
Step 7.
Now we'll add some text to the navigation bar. The font I used here is a 10pt (not px) Ariel with a color of: #385C78
I then applied the following blending options:
Stroke:
Here's how mine looks after adding text, make sure you put a little bit of space between the buttons (we're adding dividers next):
Step 8.
Next get out the pencil tool, set your foreground color to black (#000000) and set the pencil tool up like so:
Now create a new layer, and draw a 1 pixel line from the top of the navigation bar to the bottom like so:
Do this between each of the button texts.
Next drop the opacity of this layer down to 34 percent:
Now press Ctrl + J on your keyboard to duplicate this layer.
Press Ctrl + I to invert the color (this should change the color to white)
Press 'V' on your keyboard to get out the move tool (
).
And press tap the Right arrow-> on your keyboard one time.
This should give our button divider a little depth.
Result:
Next I set the foreground color to: #385C78
Get out the pencil tool again, only this time with a thicker size:
And added three little dots to the top right corner of each of my buttons, to separate them from the header a bit, and make the buttons stand out a bit more, here's how it looks:
Step 9.
At this point you're ready to place your company logo and slogan on the header. You want to place these two vital elements in the top left hand corner of your page, as it is the very first thing the users eye will see being that we read from left to right, top to bottom.
Here's a generic logo I threw on there and how it looks:
And this concludes the tutorial. Here I've refined the header by adding a box for the "search" feature, and also added another button/link area for the top right corner of the page:
I hope you've enjoyed doing this tutorial, thank you for reading!
More Tutorials: 
