January 6th, 2008 in Photoshop Tutorials by Richard Carpenter
Techy Navigation Bar




18 Votes, Rating: 4.72
About The Author: Richard Carpenter
Richard Carpenter has written 322 posts.
Create a new document 600×150 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.


You should now have something like this.

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

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

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.

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

You should now have this.

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

Select the type tool once again and just type out some dash’s ( ——– ), Now goto “edit > transform > rotate 90 cw” place one of these next to your text.

Now draw a small white box above your text.

Now add a number inside you white box.

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.

All done.
Be Part Of The Community!
Become part of the hv-designs community.
Subscribe Via RSS or Follow Us On Twitter.
Leave a Reply
Search HV-Designs
Can't find what your looking for??, Try searching.
Write For HV-Designs
Intrested in publishing some articles, tutorials or freebies on hv-designs.? We welcome anyone who is intrested, we'll even return the favour by sending you aload of goodies. Learn More
HV-Design Flickr Group
Submit your photoshop artwork to the hv-designs flickr group. Not a member? Join Now.
Recent Comments
- Richard Carpenter on Personal vCard Pt.2
- Bekey on Personal vCard Pt.2
- 60 Excellent Gadget Photoshop and Illustrator Tutorials » IMvsMI blog on USB Stick Tutorial
- 60 Excellent Gadget Photoshop and Illustrator Tutorials » IMvsMI blog on LG LCD Monitor Icon
- 60 Excellent Gadget Photoshop and Illustrator Tutorials » IMvsMI blog on 3D Mp3 Player
- 60 Excellent Gadget Photoshop and Illustrator Tutorials | Programming Blog on 3D Mp3 Player
- Imon on Personal vCard Pt.2
- Multi-level Drop Down Menus : swapnil on Sliding Jquery Menu
- Ertan on Creative 3D Layout – FREE PSD
- Ertan on Portfolio Layout #6
Other Blogs Ive Written For
On occasions i write tutorials and articles for other blogs/tutorial websites, here are a list of tutorials and articles ive written. Features tutorials written on six revisions and PSD Tuts+.
Six Revisions Submissions
- Illustrative Web Design Layout Pt.1
- Illustrative Web Design Layout Pt.2
- 3D Gallery
- 3D Ribbon Style Layout
- Minimal Portfolio Layout
- Minimal Portfolio Layout PSD Sitebuild




29 Responses to “Techy Navigation Bar”