Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Full Navigation(Part 1)

Full Navigation(Part 1)

Browse Pages: << < 1  2 

8) Make a new layer and name it "Surroundings." Get out your Rectangular Marquee Tool and make a selection like the one in the image below. It should comfortably fit the buttons in it. Fill it with #979797. It may get confusing here too. Go to your "Mini Button" layers. While holding SHIFT, Ctrl + Click each one of the "Mini Button" layers. There should be five seperate selections now if you did it right. Now to go to Select>Modify>Expand and enter in 1 pixel. Now go to the "Surroundings" layer and hit the delete key. Look at the image if help is needed:



9) Go to the Blending options (little 'f') on the "Surroundings" Layer. Go to Stroke and apply a 1 px, black, outside stroke. Refer to the below images to apply the other Blending Options:

Inner Glow


Bevel and Emboss


10) Make a new layer called "Navi." Get out the Polygonal Lasso Tool and make a shape similar to the one in the picture below. Hold Shift to get straight lines and angles. Once your selection is made, fill it with #979797. On a note about the shape below, I made the whole bar first without the angled slit near the middle. Then, I selected that shape and just deleted it. (In the image below, before doing this step, I moved all the layers down 7-8 pixels. If you already had ample space, disregard this message.)



11) Go to the Layer's Palette and click on Blending Options for the "Navi" Layer. Apply the same Layer Styles as in Step #9.

12) After applying the Blending Options, duplicate the "Navi" Layer. Now, go to Edit>Transform>Flip Vertical. Then go to Edit>Transform>Flip Horizontal. Position this layer at the bottom as shown in the image below.



Finally, we are done! You can add some text (pixel fonts work really well) or even add more shapes and things around the buttons. I just added some text and here is my final product:

Full Navigation Tutorial: Final Result


Author's URL: Havenfx.com
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
Browse Pages: << < 1  2 
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 "Full Navigation(Part 1)"

Only registered users can write comment

No comments yet...