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

Simple Navigation


1. Make a 250x300 document. Now press "D" on your keyboard to reset the foreground and background colors to black and white. Make sure your background is #8C8C8C.

2. Grab the Rectangular Marquee Tool and and make a pretty nice sized selection. After making the rectangle selection you want to create a new layer. Now make sure your on the new layer. Use the Paint Bucket Tool and color it with #4D4D4D:

image 1

3. Now on the new Layer we want to apply some blending options. Use all these following settings:

image 2

image 3

image 4

I used #2D2D2D as the stroke color.

4. Grab the Rectangular Marquee tool again and make a selection similar to mine below:

image 5

Press delete. Now repeat this step by not deselecting the selection. Press the Down Arrow key on your keyboard to move the selection area down to make the nest button square:

image 6

Keep repeating this step until your navigation is all filled in with buttons like mine below:

image 7

5. Now apply this last blending option:

image 8

I used the Towel texture, feel free to use any texture you want.

There you go, you created a simple navigation in just a few minutes. Use these skills you learned here to create better navigation in the future.

Simple Navigation Tutorial: Final Result



Author's URL: Think-Designs.com
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 "Simple Navigation"

Only registered users can write comment

No comments yet...