Photoshop

Glossy Navigation Bar Tutorial

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
Glossy Navigation Bar Tutorial
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.
Glossy Navigation Bar Tutorial
Now please apply the following Gradient Overlay in the blending options/layer styles:
Glossy Navigation Bar Tutorial
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.
Glossy Navigation Bar Tutorial
Glossy Navigation Bar Tutorial
Glossy Navigation Bar Tutorial
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:
Glossy Navigation Bar Tutorial
Now a much smaller gradient at the bottom:
Glossy Navigation Bar Tutorial
Change the layer mode for your gradient layer to Overlay, and lower the opacity if necesary.
Glossy Navigation Bar Tutorial

About the author

NadeemSMB

Leave a Comment


*