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

Navigation-Box


Learn how to create a vector-styled navigation box!

Step 1

Create a new document and on a new layer use the Rounded Rectangle tool with a radius of 40px to draw a box. Then right click with the Pen-Tool selected and choose Make Selection and fill the selection with BLACK.

image 1

Step 2

On a new layer, use the Rectangular Marquee-Tool to make 2 of the corners shaped like a rectangle.

image 2

Step 3

Merge both layers together by clicking on the top-most one and press CTRL+E. Now, select the shape and go to Select>Modify>Contract. Then choose 5px and on a new layer, fill this selection with light-gray.

image 3

Step 4

Repeat step 3 but now choose 2px and fill the selection on a new layer with a desired gradient.

image 4

Step 5

Now add your text!

image 5

Step 6

You can also think of many variations, playing with the contracts:

image 6

Navigation-Box #4 Tutorial: Final Result



Author's URL: MickM.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 "Navigation-Box"

Only registered users can write comment

No comments yet...