Worthy Clicks


Search HV-Designs


Tutorial Categories


Tag Cloud


Subscribe & RSS Readers

Enter your email address:

Be notified of important updates.



Subscribe to hv-designs rss feed

Techy Navigation Bar

Posted on January 6th, 2008.

11 Votes, Rating: 4.551 Star2 Stars3 Stars4 Stars5 Stars
Loading ... Loading ...


Learn how to create a techy style navigation.


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.

E-mail Del.icio.us Digg Reddit Technorati Furl Stumble Design Links

Tags: , , ,

26 responses so far!


Note: We now use Gravatars here on HV-DESIGNS, they are little icons that appear next to your name on this site and on many others next to your comments. You can get a Free Gravatar account for free and any other site that supports it will show your avatar also!


  • 1 zech ~ Jan 7, 2008 at 12:39 pm

    great job,keep it up

  • 2 Adam ~ Jan 8, 2008 at 3:04 am

    Definitely keep it up! A nice glassy effect you have going on there.

  • 3 Seth ~ Jan 8, 2008 at 6:23 pm

    EXCELLENT!!! Many thanks, you have just got me my A+

  • 4 Frenchy ~ Jan 8, 2008 at 6:29 pm

    Yeah nice job would be good to see this as a full template not just a nav bar if you have or going to turn this nice peace of work into a template can you email me:D

  • 5 ADMIN ~ Jan 8, 2008 at 6:46 pm

    maybe i will turn it into a template… good idea, il see what i can come up with ;)

    “frenchy” if you sign up to my newsletter –>

    then you will be notified automatically when new tutorials are made ;)

  • 6 t0bbz0n ~ Jan 8, 2008 at 9:07 pm

    Hey!

    Found this very hot!

    But how do you do the inverse thingy?
    Ive got it to work 3 times… not more… Have been trying all evening :P

    Thanks for this!

  • 7 ADMIN ~ Jan 8, 2008 at 9:51 pm

    select at the top menu and goto “inverse”

  • 8 Kedon ~ Jan 9, 2008 at 11:39 am

    maybe can u post wich Fonts do you use and the pixels etc ? will be nice for people who don’t know so good :) but verry nice tuto 1st time got it done just some problems with the fonts

  • 9 ADMIN ~ Jan 9, 2008 at 6:24 pm

    the font is the playstation font think its called

    “zrnic”

  • 10 Dene ~ Jan 9, 2008 at 6:39 pm

    Hi Admin, Great little tutorial, good detail and easy to follow
    thanks alot

  • 11 JBX ~ Jan 17, 2008 at 5:26 pm

    help… anyone..
    i have a little problem…
    i don`t know why.. but it seem i can`t get it right… anyway..here`s my question
    the menu bar that he created cand be created with a photo background??? i mean , the menu background to bee the same as the original photo..if someone wants 2 help.. mail me Ionutz1983 at yahoo.com

  • 12 Ssenyondo Bashir ~ Jan 23, 2008 at 10:56 am

    Fantastic man! more to a person like me who about to become fully enrolled in web designing. Climax of ma search, I will stitch to your site and only a bulldozer will pull me out.

  • 13 Bigz ~ Jan 23, 2008 at 6:04 pm

    Really really cool… i’m kinda new to this kind of advance graphics. quite innovative.. i still managed to pull it off.. good work admin

  • 14 Zed ~ Feb 5, 2008 at 4:27 am

    great :) WORK

    :) :)

  • 15 r3zn0r ~ Feb 6, 2008 at 9:07 am

    Not bad, i do alot of this stuff myself, like your navbar :)

  • 16 G-Karmelitos ~ Feb 13, 2008 at 12:14 am

    This site very profesional, good navigation bar i see and do a lot of n. bar. This is not bad, is so GOOD!

    Thanks, G-Karmelitos

  • 17 andy eaton ~ Feb 17, 2008 at 4:50 pm

    thanks for a great tutorial, easy to follow and looks amazing

  • 18 daemon ~ Feb 21, 2008 at 4:17 am

    nice work :)

  • 19 kac ~ Mar 1, 2008 at 9:13 am

    Wow, good job !
    This tutorial is translated in french —> http://www.onane.net !

  • 20 Justus ~ Apr 3, 2008 at 8:20 am

    Great tut, loved it. D’you mind mailing me the PSD template though?

  • 21 Reactor ~ Apr 8, 2008 at 6:12 pm

    yeah i like it, it’s very clean and straight :)

  • 22 Reactor ~ Apr 23, 2008 at 9:57 am

    damn, i can’t work with the pentool xD i don’t know how it’s work :(

  • 23 reza ~ Jul 9, 2008 at 5:42 pm

    this is a best learning of photoshop.
    thank you !

  • 24 photoshop free tutorials ~ Jul 16, 2008 at 5:45 am

    Hi your work is simply great can i use your tutorials on my own website as i own a tutorial website and looking for great tutorial

  • 25 SaungHnget ~ Aug 2, 2008 at 2:36 am

    Nice Tutorial! Thanks a million.

  • 26 dark dimension » Blog Archive » astonishing world of web design ~ Sep 13, 2008 at 10:12 am

    [...] HV- designs http://hv-designs.co.uk/2008/01/06/techy-navigation-bar/ [...]

Leave a Comment