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

Gradient Buttons

Author: Netcubo More by this author

Added: Mar 16, 2005 Rating:  Average Rating: 3.43 Votes: 40 Position: 4205 of 12364Average Rating: 3.43 Votes: 40 Position: 4205 of 12364Average Rating: 3.43 Votes: 40 Position: 4205 of 12364Average Rating: 3.43 Votes: 40 Position: 4205 of 12364Average Rating: 3.43 Votes: 40 Position: 4205 of 12364 Level: Beginner Software:  Photoshop

Introduction
Learn to make a great Gradient Button for your site, in very simple steps.

Step 1
Make a new document 500x500 pixels. Make a new layer and using your Rectangle Marquee Tool, make a fixed size of 88x21 pixels. Select a blue foreground colour and fill the rectangle.


Step 2
Now go to Layer > Layer Style > Blending Options, then select stroke. Use these settings:

Once you've done that, select Bevel and Emboss and use these settings:

Then select Gradient Overlay and use these settings:


Step 3
Now go to your Adobe Tool box, and select Pollygon Lasso Tool, and make a selection like shown below. Once, you've done that simply click on the keyboard the (Delete button) or on other keyboards "Supr".


Final Results
Well, your finished I suppose, all you need now is to add a nice text to it. I used a font called 04_09. Play around with it and see what you can do to change it.

Gradient Buttons Tutorial: Final Result


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