Smooth, Simple Glossy Navigation Bar

Advertisement

In this very easy Photoshop tutorial we’ll be learning how to design a nice, sleek navigation bar that you can use on your website design. This is a beginner tutorial, so if you’re an intermediate or professional Photoshop user, I’m not sure you’ll be learning from this ;)

1. Create a New Document

First, start by making a new document in which you can make this sleek navigation bar! (I used a regular template size of (800×1000, but you might want to use a much smaller size for this tutorial.)

2. Create the Bar

Start by creating a new layer. Now make a selection inside of your document, fill your selection with #52A1C4.

Now please apply the following Gradient Overlay in the blending options/layer styles:

3. Add a Glossy Shine

Create a new layer and select the main bar layer (CTRL + Click layer thumbnail) now contract the selection down 1 pixel by going to Select > Modify > Contract in the menu.

After contracting the selection, find and get out the Gradient Tool () and set the gradient to Foreground to Transparent gradient

From the top of the selection make a gradient into the middle area like so:

Now a much smaller gradient at the bottom:

Change the layer mode for your gradient layer to Overlay, and lower the opacity if necesary.

4. Adding some Text

For the text I used: Tahoma, 11 pt, Bold, White with a 100% Drop Shadow as shown in the below image:

My finished product:

Thanks very much for reading everyone! I hope you enjoyed this tutorial, even if only a little bit.

And thanks for visiting PhotoshopStar, your source for free Photoshop tutorials.

Advertisement


18 Responses

  1. James says:

    Very cool, love the colours! :)

  2. Madhouse says:

    love that navbar, will be using that tut very soon :)

  3. RuxA says:

    thx , nice tut greetz form germany ^^

  4. cocabottle says:

    nice tutoriAL gonna try it soon :)

    @ruxa Greetz from Holland

  5. Alberto Marlboro says:

    Thanks for sharing.

    Alberto
    from Brazil !

  6. not bad….looks really cool….good work dude!

  7. Watera says:

    The bar looks stylish, however I would recommend a darker color for it, as the contrast between bar and text is not excellent.

  8. Fayyaz Ahmed says:

    Its really very good tutorial and it was very helpful for me to make good effects.

  9. Dan says:

    Looks good, but when I tried to follow it it failed at step 3 as Modify was greyed out :-( Any ideas why that is?

  10. Dan says:

    Just figured out what i was doing wrong. I wasn’t using an overall background larger than the layers we were working on. did it again with a larger background and it’s now working fine!!

  11. tima says:

    Wow , good stuf

  12. one says:

    simple & gooooooood. thx :)

  13. Moonflower says:

    Very detailed. thanx. :)

  14. Anna says:

    Marvelous!! Very helpful!! :D

  15. Melissa says:

    Thanks for the tut! I used a dark color and it turned out great!

  16. Jeff Swanson says:

    Awesome, simple tutorial. Finally, someone showing a photshop/web graphics tutorial where the finished product actually looks like something I want to put on my site. Keep up the good work.

  17. Flowers says:

    Thank you !

  18. NG says:

    couldn’t finish step 3, might be a better tut if you showed your layers