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

Navigational Header


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

image 1

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

image 2

image 3

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

image 4

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

image 5

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

image 6

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

image 7
Click to enlarge

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

image 8

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"

image 9

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.

image 10

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

image 11

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

image 12

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

image 13

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

image 14

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.

image 15
Click to enlarge

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

image 16
Click to enlarge

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

image 17
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...

image 17
Click to enlarge

image 19
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.

image 20
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.

image 21

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

Navigational Header
Click to enlarge

Thanks for viewing this tutorial.



Author's URL: tuts4you.net
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 "Navigational Header"

Captcha