Tutorial from the Web Layouts Category

Black and Red Header + Navbar

Posted on April 15, 2007 under Web Layouts

Learn how to make a complete website header and navigation bar with this tutorial as shown below:

preview

Step1:
Create a new document 780×200.
Step2:
Create a new layer and fill the top half of the document with red #FF0000. Create a new layer and fill the bottom half with red #850000.

Step3:
Apply these layer styles to the top layer:
img2

img3
And apply these layer styles to the bottom layer:
img4

img5
Step4:
Create a new layer for the navigation bar and fill with red #C20000. I made mine 40 pixels high.
Step5:
Create a new layer. Using your elliptical marquee tool, hold shift and create a round circle. Fill this circle with red #C20000. position the circle in the middle of your document. When you get to the center, Photoshop should sort of hold it there. Apply these layer styles to your circle:


Step6:
Put you text on your navigation bar. Try to space them out as equally as you can, and not touch the circle. I also put my website’s initials in the orb.
img10
Step7:
With your rectangular marquee tool, cut out each section of the buttons from the single nav bar piece.
img11
Position them where they should be, and apply these layer styles to each one.
img12

img13

img14
Step8:
Create a new layer. With your elliptical marquee tool, hold shift, and create a circle; fill with white. img15
Press ‘Q’ to enter quick mask mode. Get your gradient tool. Start from the bottom of the circle, hold shift, and drag to the top of the circle. Press ‘Q’ again to exit quick mask mode. You should how have a selection. Press delete once or twice depending on which one you think looks better. Now drop the opacity to about 85%.
img16
Step9:
Create a new layer. hold CTRL and left click on your circle layer to select it. Go to EDIT>STROKE and use these settings:
img17
With your line tool, hold shift to make a path like this:

Select your pen tool, right click, and do ‘make selection’ and then delete path. Press delete, and then CTRL+D. apply these layer styles:
img19

img20

img21
Step10:
Create a new layer, and with your pencil tool set to 2 pixels, make little rivets:
img22

Leave a Reply