Modern Web Header

Step 1 - Open Your Canvas

Open up a new document 850x200, set the background color to white. Create a new layer by going to Layer>New>Layer (Ctrl+Shift+N). Set your foreground color to #d72a00 and your secondary color to #b40e00.

Step 2 - Create a Gradient

Using the Rectangular Marquee tool make a selection across the whole document about 100px tall (half of your canvas). Use the gradient tool to create a gradient from bottom to top using the 2 colors I gave you in step 2.

Click to enlarge

Step 3 - Logo Box

Create another new layer. Now use the Rectangle Tool to make a white box around 150px wide a little bit off the left side of your gradient and the same height as your red gradient. This will be the space for your logo. Right Click the layer and go to blending options and apply gradient overlay with the following settings:

Click to enlarge

Step 4 - Select Your Gradient

Create a new layer. Set your foreground color to: #740900. Now Ctrl+Click the icon next to the red gradient layer to make a selection of it. Go to Select >Modify >Contract and enter in 3px. Use a soft brush to brush like so in that dark red color:

Click to enlarge

Step 5 - Inverse Selection

Move that layer under the white box layer. Create another new layer still underneath the white box. Ctrl+Click the white box layer to make a selection of it. Then go to Select>Inverse, then Select>Modify>Contract. Use 3px again. Use a soft brush to brush like we did in step 8 like so:

Click to enlarge

Step 6 - Add Some Style

Create a new layer above the rest and use the Rectangle Tool to make a black rectangle below the red about 25-50px high. Right click the layer and go to blending options. Use the following settings:

Step 7 - Add Your Text

At some Text to the header/Navigation bar and your done! Here is how mine turned out after I added some text in the logo area, and finished up my menu down below. You can really customize this menu and use it in a lot of different places. If you need help with this tutorial don't forget to stop by our forums!

Click to enlarge