Techy Navigation Bar

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.

27 thoughts on “Techy Navigation Bar”

  1. 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

  2. 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 😉

  3. 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 😛

    Thanks for this!

  4. 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

  5. help… anyone..
    i have a little problem…
    i don`t know why.. but it seem i can`t get it right…`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

  6. 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.

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

Leave a Reply

Your email address will not be published. Required fields are marked *