Navigation Bar In Photoshop – Tutorial


This is my first tutorial so it is fairly simple and straight forward. This is as easy as it gets in Photoshop, but I think that this tutorial can yield some pretty cool results. I’m going to show you how to make a sleek, very clean navigation for your website.

Lets start with a 500×200 pixel canvas. I filled it in with a medium gray color.

Next, I used the marquee tool to get a rectangular selection (sorry for the difference in background colors, just ignore it)



Go ahead and fill that selection in with any color you want. Then, add the following layer styles.
I chose 2 light grays as a gradient overlay – darker in the bottom and a very, very, very light gray up top.

I threw in a drop shadow just to give the nav bar some depth. This step is completely optional.

I then added an inside stroke with a dark gray of 1 pixel

Finally, I threw in a very faint inner glow to give the bar some highlights.


You should hopefully have something looking somewhat like a nav bar by now.

Select the nav bar by command, or control, clicking on the thumbnail for your nav bar layer. This will select the entire bar. From there, go to Select>Modify>Contract and contract the selection by 2 pixels.

Make a new layer, fill in the selection with white. Then transform (Cmd+T) the white section so that it covers about half of the nav bar.

Lower the opacity of the white layer to about 25%. This is now our gloss for the nav bar.

Now let’s work on the selected page portion.

Start by making a selection as wide as you prefer. Fill it in with any color.
I then added the following layer styles. I chose the color blue as my selected page color. Feel free to choose any color scheme you would prefer – I have done this with yellow, red, orange, green, and blue and they all look great.
My gradient is a dark blue to a slightly lighter blue.

I then added just a very faint drop shadow.

Next came another very, very, faint inner glow.

Once you finish the layer styles, command click on your selected page layer to select it.Then go Select>Modify>Contract and contract the selection by 2 pixels.

Fill that selection in with white and then transform it so that it covers about half of the selected page layer.

Next, lower the opacity so that you can barely notice the white layer. Mine is set at 6%.

The last step is to add text. Use whatever font you like, I generally like to keep mine thin and small, but do whatever suits your preferences. I made my text a medium gray color.

To finish everything off, I added a dark gray text to the rest of the nav bar. Replace these words with whatever suits your needs.

That’s how to make a simple, yet sleek looking navigation bar in Photoshop.
My total time for the design was about 2 minutes. Hopefully it will be just as easy for you.
I hope you enjoyed this tutorial. Keep checking back for more in the future – soon they will start getting more complicated and in depth.

Premium WordPress Themes
Starting at $49.95

  • This post was written by Brian
  • Website: http://elitebydesign.com
  • About: Brian is a blogger and web designer at Elite By Design. He has been blogging for over a year providing quality design-related articles for the community.
12 Comments RSS
  1. Reply Gary R. HessNo Gravatar said on December 28th, 2007

    Thats a nice looking nav bar :) Good work on the tutorial.

  2. Reply ShelleyNo Gravatar said on January 3rd, 2008

    Hey, thanks for this tutorial!

  3. Reply BrianNo Gravatar said on January 3rd, 2008

    Thanks Gary. And no problem Shelley. More to come in the future :)

  4. Reply DVDNo Gravatar said on January 4th, 2008

    Looks Great and tutorial well explained !
    KEEP IT UP!!!!

  5. Reply PiticStyleNo Gravatar said on January 4th, 2008

    Simple and beautiful! Thanks

  6. Reply hamery1No Gravatar said on January 5th, 2008

    Clear and simple explaination.
    I love it, thanks for showing and sharing your great tutorial.

  7. Reply BrianNo Gravatar said on January 5th, 2008

    Thanks Hamery1. Much appreciated.

  8. Reply ShelleyNo Gravatar said on January 7th, 2008

    What font was used?

  9. Reply BrianNo Gravatar said on January 7th, 2008

    I used a premium font (costs some money) called Hypatia Sans. I got it for free when I bought PS CS3

  10. Reply drdchaNo Gravatar said on January 9th, 2008

    good

  11. Reply ?????No Gravatar said on May 26th, 2008

    really wonderful tutorial
    thank you

  12. Reply CorbinNo Gravatar said on January 27th, 2009

    This has been the big help to since they invented computer made this look so hard bloody simple thanks for great tutorial all i got to do now is put it on my site and im up and runner thanks again

What do you think?

N/A Subscribers
Search
Search Form
More? Try These Posts...
  • Best of Invitation Design
    Best of Invitation Design

    Get some inspiration with these unique invitations. ...

  • Inspiration In Neutral
    Inspiration In Neutral

    The latest installment of Arbenting's inspiration in color series. Inspiration in Neutral focuses on images with a neutral color theme. ...

  • Creating Usable Links and Buttons
    Creating Usable Links and Buttons

    In this post, Andrew discusses various ways to interpret and present links and buttons to the user. Emphasis is placed on fitting user’s mental models and providing the user with...

  • 29 Beautiful Christmas Wallpapers
    29 Beautiful Christmas Wallpapers

    29 beautiful Christmas wallpaper for you guys, as we all know Christmas is near. So check this out! ...

  • 5 No-Brainer Methods To Creating A More Memorable Blog
    5 No-Brainer Methods To Creating A More Memorable Blog

    Is your blog memorable to your readers? Or is your site one of those blogs where you would go, read what you're after and then close that tab? If you want to make your blog a place...