Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Glossy Nav Bar

Glossy Nav Bar


1. New Document

First make a new document in which you can make this sleek nav bar! (I used a regular template size of (800x1000)

2. Starting the bar

Create a new layer and make a selection sized 780x30, fill the selection with #52A1C4

image 1

Now apply this Gradient Overlay:

image 2

3. Shine

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

image 3

image 4

image 5

After that get the gradient tool image 6 and get the Foreground to Transparent gradient image 7

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

image 8

Now a much smaller gradient at the bottom:

image 9

Set the layer mode to Overlay

image 10

4. Text

I used: Tahoma, 11 pt, Bold, White with a 100% Drop Shadow

image 11

Finished:

Glossy Nav Bar Tutorial: Final Result



Author's URL: PhotoshopStar
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Glossy Nav Bar"

Only registered users can write comment

No comments yet...