Vectorials
Flash Perfection
3D Lessons
Tutorialkit
Markup Tutorials
Learn PHP
network
adv banner
Photoshop  Home Photoshop Articles Full Navigation(Part 2)
rss

Full Navigation(Part 2)

Author: Havenfx.com More by this author
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



print this page tell a friend subscribe to newsletter subscribe to rss
Rate this Material: Bad 1 2 3 4 5 Excellent
Browse Pages: << <  1  2

Add comments to "Full Navigation(Part 2)"