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

Tech Navigation Bar


Create a new document 600x150 with black as your background. Select the "rounded rectangle tool" and draw out a rectangle fill it with the color black also, now add these layer styles.

image 1

image 2

You should now have something like this.

image 3
Click to enlarge

Now create a new layer above your rectangle then select the pen tool and create a box like this.

image 4
Click to enlarge

Right click and goto make a selection. Then fill with the color white.

image 5
Click to enlarge

Select your rectangle layer whilst holding the "ctrl" key on the keyboard now click your white box layer that you created in the last step. Goto "select > inverse" then hit the "delete" key on the keyboard, you should be left with this.

image 6
Click to enlarge

Add this layer style to your white box and set layer opacity to 65%.

image 7

You should now have this.

image 8
Click to enlarge

Select the type tool personilze your navigation with the sections you require. The colors ive used are #ffffff & #d9ff3f.

image 9
Click to enlarge

Select the type tool once again and just type out some dashes ( --- ), Now goto "edit > transform > rotate 90 cw" place one of these next to your text.

image 10
Click to enlarge

Now draw a small white box above your text.

image 11
Click to enlarge

Now add a number inside you white box.

image 12
Click to enlarge

Now select the type tool again and whilst holding shift press "¬" key, on my keyboard its under the "esc" key and above the 2tab" key. Add this symbol to the right of your text.

Tech Navigation Bar
Click to enlarge

All done.



Author's URL: Hv-Designs.co.uk
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Tech Navigation Bar"

Captcha