Vectorials
Flash Perfection
3D Lessons
Tutorialkit
Markup Tutorials
Learn PHP
network
adv banner
Beveled Button
by Axialabs.com
Professional Navigation Buttons
by Depiction.net
Useful Button (and a bit about gradients)
by Adam Priestley
How to make Web Buttons in Adobe Photoshop
by Daniel Piechnick
Free Web Designs
A collection of free web templates. Premium quality web designs, easy to browse.
Photoshop  Home Photoshop Web Layout Stylish Navigation Buttons
rss

Stylish Navigation Buttons

Author: YourPhotoshopGuide.com More by this author

Added: May 16, 2007 Rating:  Average Rating: 2.64 Votes: 14 Position: 10427 of 12257Average Rating: 2.64 Votes: 14 Position: 10427 of 12257Average Rating: 2.64 Votes: 14 Position: 10427 of 12257Average Rating: 2.64 Votes: 14 Position: 10427 of 12257Average Rating: 2.64 Votes: 14 Position: 10427 of 12257 Level: Beginner Software:  Photoshop

Create a new file of 78 x 28 pixel for the button. Create a new layer and fill the background with #0F479F.

image 1

Apply these layer styles in it :

image 2

Create a custom gradient as shown :

image 3

image 4

image 5

image 6

Duplicate the button layer in separate file and arrange them as shown :

image 7

Finally, add link text. I have used Tahoma font selecting white color for the text and added little drop shadow in it.

Stylish Navigation Buttons Tutorial: Final Result



Author's URL: www.yourphotoshopguide.com

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Photoshop  More Photoshop: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials
Add comments to "Stylish Navigation Buttons"