Navigation Box « Web « Photoshop Tutorials

Home
Photoshop Tutorials
1.3D
2.Animal Creature
3.Animation
4.Background Cover
5.Color
6.Design
7.Effect
8.Hardware
9.Holiday Event
10.Human
11.Image Format
12.Logo
13.Nature
14.Object
15.photography
16.Shapes
17.Text
18.Textures
19.Tools
20.UI Controls
21.Web
Maya Tutorials
3ds-Max Tutorials
Illustrator Tutorials
GIMP Tutorials
Photoshop Tutorials » Web » Navigation Box 
Photoshoplovr.com is a weblog dedicated to all the Photoshop lovers who want to learn photoshop. We bring you the greatest Adobe Photoshop Free Tutorials you can find on the net.

Open up a new document, and make it the size you would like your navigation box to be, and grab the rounded rectangle tool. Draw something like this

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)

8. Now duplicate the layer with that thing that we just made it and flip it 180 degrees, then place it on the bottom of you box:

We are now going to be adding a couple of layer styles to our box. From your layers box, right-click your shape and click "Blending Options". (You can also get there using the toolbar menu at the top by choosing Layer => Layer Style => Blending Options. Make sure the layer is selected in the layers box.). From the blending options on the left, select the outer glow and apply the following settings: Don't close the blending options box just yet. Now select the Satin effect and apply the following settings Click the Ok button to close the Blending Options. Now that our background is beautifully ready, we are ready to add our navigation elements. Let's start by adding a place at the top to hold the title of the navigation box. We do that by first creating a new layer. To create a new layer, choose Layer => New => Layer from the menu toolbar at the top. Make sure the layer just created is chosen in the layers box. Select the rectangular marquee tool and enter 5px in the feather box.

w_w_w__.__ja__v_a2s.___c_o__m_ | Contact Us
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.