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

Business Header and Navigation


1) Make a new document. I used 600x120 for this tutorial. Leave the background white for the time being.

2) Make a New Layer. Grab the Rectangular Marque Tool and make a thin selection at the top from the left to the right:

image 1
Click to enlarge

Fill it in with a dark medium red/maroon color. I used #C92F2F.

3) Using the Line Tool apply a black 1px line under the red thin rectangle you just created:

image 2

Using the Line Tool again make another line under the black line you just created. Use a nice soft grey. I used #CCCCCC. You wont be able to see it now, but you will in a few more steps.

image 3

4) Make a New Layer and use the Rectangular Marque Tool to make another thin rectangle:

image 4
Click to enlarge

Fill the selection in with any color you wish. Now right click the layer and go to Blending Options. Click on Gradient Overlay and apply these settings:

image 5

Now you should have something like this:

image 6
Click to enlarge

Ok now that the detailed part of the header is complete we can now apply the simpler detailing.

5) Make a New Layer and select the Rectangular Marque Tool again and make a selection like below:

image 7
Click to enlarge

Fill it in with a light toned grey. I used #D2D2D2

image 8

6) Now right click the layer and go to Blending Options. Select Inner Shadow and apply these settings:

image 9

Now you got something like this:

image 10
Click to enlarge

7) Make a selection with the Rectangular Marque Tool like below:

image 11

Now press CNTRL+U. We are now going to change the color so it gives the grey a different toned feel instead of just a solid color.

image 12

Now you got something like this:

image 13
Click to enlarge

8) Now we can start working on the navigation part. This is pretty simple. We will be using the Marque Tools along with the Line Tool to accomplish the creation of the menu. First make a New Layer. Select the Marque Tool and make a selection like below:

image 14
Click to enlarge

Lets start out with a nice dark color for the menu. I used #121212.

image 15
Click to enlarge

9) Now its time to get creative and use the Line Tool. Make another New Layer and makes lines like I did below:

image 16
Click to enlarge

Also note for the top horizontal line I used 2px instead of 1px. Ok finish up with your lines and now lets move on to the final steps!

10) Make a New Layer. Grab the Rectangular Marque Tool and make a selection like below:

image 17
Click to enlarge

Fill it in with a dark grey. I used #5D5D5D.

image 18
Click to enlarge

11) Add your final touches, yes this is the part where you.. yourself get creative! Find a nice font to use, make an appealing logo and once your all done show it off to your friends! I hope you enjoyed the tutorial. Here is my final work:

Business Header and Navigation
Click to enlarge


Author's URL: Ryan Trafford
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 "Business Header and Navigation"

Captcha