Navigational Header

1. Okay.. first off lets open a new file in photoshop.

2. Next we choose the colors, #10A201 and #7E7E7E

3. Now create a folder in the layers area and call it header

4. Now create a layer "call it whatever" in that layer folder.

5. Create a rectangle with the marquee tool "725 x 75pixels".

6. Fill it with your color of choice "in my case, #10A201".

Click to enlarge

7. Double click your layer and choose stroke. Choose a darker color then your fill, for the stroke line.

8. Okay, now choose your shape tool and use the rounded rectangle to make a mini header bar across the large box. "I used a 5 pixel round"

9. Now goto the paths area and select the work path and convert it to a selection. Once done create a new layer "call it whatever you like" and choose the the gradient effect and use your green color as a base.

10. Now have fun with the gradient and remember that the change in color will determine how powerful the effect will be.

11. Now choose your reflected gradient and fill it till you receive the desired effect.

12. Once done use the stoke effect that you created on the header earlier.

13. Now we create the lines that divide the text.

14. Create a new layer and call it lines. Select your outline color and draw lines as spacers. Once you have that done, change that color to a light version of color. Draw the light color next to the dark and reproduce as ay as needed.

Click to enlarge

15. You now provide the text needed for the links and attach all lines to text incase movement is needed.

Click to enlarge

16. Next we want to shadow your header bar. So double click that layer and choose the drop shadow effect.

Click to enlarge

17. Now i'll go back to my main header box. And be creative with it. Such as rounding a corner, blending images. etc...

Click to enlarge

Click to enlarge

18. I have imported an image and set it to a mask of my upper header. Once in place and I like what I see, I began playing with the layer effects. I choose OVERLAY.

Click to enlarge

19. Now I select my mask layer and contract it by 2 pixels. I apply that space change to the mask as to add a boarder.

20. Now to finish it up with a logo and slogan. And there it is a header tutorial for websites.

Click to enlarge

Thanks for viewing this tutorial.