Subscribe Via RSS

3268 Subscribers

Subscribe Via RSS
Subscribe Via Twitter

Followers

Subscribe Via Twitter
Techy Navigation Bar

January 6th, 2008 in Photoshop Tutorials by Richard Carpenter

Techy Navigation Bar

1 Star2 Stars3 Stars4 Stars5 Stars19 Votes, Rating: 4.74
Loading ... Loading ...
About The Author

About The Author: Richard Carpenter

Hi im Richard Carpenter im a freelance web and graphics designer from England. I am also a regular Blogger, Tutorial Writer, and owner of HV-Designs. You can follow me on twitter HERE. You may also view my portfolio HERE.

 

Richard Carpenter has written 331 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.

Subscribe Via RSS Follow Us On Twitter

30 Responses to “Techy Navigation Bar”

  1. zech says:

    great job,keep it up

  2. Adam says:

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

  3. Seth says:

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

  4. Frenchy says:

    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 says:

    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 says:

    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 says:

    select at the top menu and goto “inverse”

  8. Kedon says:

    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 says:

    the font is the playstation font think its called

    “zrnic”

  10. Dene says:

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

  11. JBX says:

    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. 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 says:

    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 says:

    great :) WORK

    :) :)

  15. r3zn0r says:

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

  16. 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 says:

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

  18. daemon says:

    nice work :)

  19. kac says:

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

  20. Justus says:

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

  21. Reactor says:

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

  22. Reactor says:

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

  23. reza says:

    this is a best learning of photoshop.
    thank you !

  24. 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 says:

    Nice Tutorial! Thanks a million.

  26. Scotty says:

    this is a great nav tutorial keep up the great work !!!

  27. Edurado says:

    Hi!
    Thanks a lot! your website is great!!!I really need this as I´m a newbie to photoshop :)
    Unfortunatelly I could´nt perform step 4. I draw the white shape with the pen tool, and I follow your explanations to add it to the round rectangle, but I´m missing something,… Could you explain that step in detail ( a small youtube video explaining how to add the white shape to a rectangle will be perfect :) )?

    Thanks in advance
    Eduardo

  28. I am not new to blogging and truly appreciate your site. There is much prime content that peaks my interest. I am going to bookmark your web site and keep checking you out.

Leave a Reply