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
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
Browse Pages: << < 1  2  3  > >>
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 "Creating Header (from the layout trilogy)"

Only registered users can write comment

No comments yet...