Photoshop  Home Photoshop Web Layout Business Header and Navigation
rss

Business Header and Navigation

Author: Ryan Trafford More by this author


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:

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:

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.

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

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:

Now you should have something like this:

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:

Click to enlarge

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

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

Now you got something like this:

Click to enlarge

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

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.

Now you got something like this:

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:

Click to enlarge

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

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:

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:

Click to enlarge

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

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 Tutorial: Final Result
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 "Business Header and Navigation"