Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Create a Nice Looking Navigation Column

Create a Nice Looking Navigation Column


1. Begin with a white canvas, at least 640x480 pixels. Duplicate the layer (Ctrl+J) and then right click the new layer and go to blending options. Add a default black/white gradient. Select OK, then bring down the opacity to around 20%.

image 1

2. Now select the rounded rectangle tool (U), select 'fill pixels' setting at the top bar, radius 30 pixels, and color #008aff. Draw a vertical rectangle, something like this:

image 2

3. Next use the rectangular marquee took (M) to select a portion of the rectangle. Do not select part of the rounded edges.

image 3

4. Free transform (Ctrl+T) the selection by dragging the dottom of the transform box down, to overlap the rounded edges.

image 4

5. This is what you should have:

image 5

6. Still on the same layer, go to blending options. Add the following:

image 6

image 7

image 8

image 9

7. Now it's starting to look good

image 10

8. Ctrl+click the current layer to select it.

image 11

9. Now select the rectangular marquee tool, with the 'intersect with selection' setting.

image 12

10. Drag over the part where you want the column heading text to be. This will be the area that it a light shade of blue.

image 13

11. When you un-click you will have something like this:

image 14

12. Next, create a new layer (Ctrl+Shift+N) with the selection still active. Go to the paint bucket tool tool (G) and will the selection with white. Lower the opacity to around 40%.

image 15

13. On the new layer add the following blending options to it:

image 16

14. You will get this:

image 17

There ya go! Now you can add your favorite text to it.

Final Product:

Create a Nice Looking Navigation Column Tutorial: Final Result



Author's URL: Nifty Tutorials
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
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 "Create a Nice Looking Navigation Column"

Only registered users can write comment

No comments yet...