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

Black and Red Header + Navbar


Step1:

Create a new document 780x200.

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.

image 1

Step3:

Apply these layer styles to the top layer:

image 2

image 3

And apply these layer styles to the bottom layer:

image 4

image 5

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:

image 6

image 7

image 8

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.

image 9

Step7:

With your rectangular marquee tool, cut out each section of the buttons from the single nav bar piece.

image 10

Position them where they should be, and apply these layer styles to each one.

image 11

image 12

image 13

Step8:

Create a new layer. With your elliptical marquee tool, hold shift, and create a circle; fill with white.

image 14

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%.

image 15

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:

image 16

With your line tool, hold shift to make a path like this:

image 17

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

image 18

image 19

image 20

Step10:

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

Black and Red Header + Navbar Tutorial: Final Result (Click to enlarge)
Click to enlarge


Author's URL: Aviva Directory
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Black and Red Header + Navbar"

Only registered users can write comment

Reader's comments