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

Glossy Navigation Buttons


1. First of all as usual, create a new document so you have some space to make the buttons in.

I used a document size of 400 x 100 pixels.

2. First you'll need to make a selection, so use the rounded rectangle shape tool to make the selection, then fill your selection with a gradient of #6c7c84 to #5a676d.

image 1

3. Right-click the main layer and go into the Blending Options.

Apply and change the following layer styles:

image 2

image 3

image 4

image 5

You should now be left with a button like this:

image 6

4. Create a new layer (Layer > New > Layer...)

Select your main button layer by holding ctrl and clicking the layer's thumbnail. Now on the new layer draw a Whit to Transparent gradient from the top of the button to the bottom.

image 7

Cut the gradient exactly in half.

image 8

Change the layer mode to Soft Light and lower the opacity to 40%.

image 9

5. Again create a new layer. Now select the main button layer. Contract the selection by 1 pixel (Select > Modify > Contract) now fill the selection with white. Contract the selection by another 1 pixel then press delete.

image 10

Use a large, soft brush to erase away the bottom. Now change the layer mode to Soft Light and leave the opacity at 100%.

image 11

Apply the same method to a line for the bottom.

image 12

6. Now you just need to add text. For the arrow I used 11pt Tahoma, for the rest I used Tahoma 12pt, Bold.

I also added this Drop Shadow to the text layer.

image 13

Glossy Navigation Buttons Tutorial: Final Result

Thanks for reading this tutorial. Hope you enjoyed.



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 Navigation Buttons"

Only registered users can write comment

Reader's comments