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

Creating Header (from the layout trilogy)

Browse Pages: << < 1  2  3  > >>

Making the Navigation Menu

1. Open a new 500x350 image. ( The reason for 500x350 is that it'll give you lots of working space)

2. Get out your Rounded Rectangel Tool and make a shape in the middle. Have the radious set to 10 px.

image 1

3. Get the polygonal Lasso Tool and do as you did on the banner. Make it a little techish.

image 2

4. Now delete the background layer so the navigation box has a transparent background.

image 3

5. Open the Blending Options menu and use these settings:

image 4

image 5

image 6

image 7

6. Create a new layer and use the Polygonal tool to make a selction at the top of the box. Now fill with white.

image 8

7. Use the same layer style on the top selection as you did on the whole box.

image 9

8. Make another new layer and make a nice pattern on top of the top selection (layer below)

image 10

9. Set the fill option to 0% and then open the Blending Options menu. Use these settings:

image 11

image 12

image 13

10. Add a text with Navigation. I prefer to use a pixel font for this.

image 14

11. Now add your navigations in the box. Unless you have a lot of navigations, I would use a bigger font for this (Or resize the box)

image 15

12. Now make a new layer and get out the Retangular Marquee Tool. Make a selection around every navigation and fill with black.

image 16

13. Set the fill to 0% and open the Blending Options menu and use these settings:

image 17

Full Template (Part 2) Tutorial: Final Result

Now navigation box is done.



Author's URL: X-Dream
Browse Pages: << < 1  2  3  > >>
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 "Creating Header (from the layout trilogy)"

Captcha