Submit Tutorial

spacer
Newsletter

spacer
RSS
spacer
Submit Tutorial

spacer
Glossy Pill Button
by Ryan Trafford
Pill Button
by Mark
Beveled Button
by Axialabs.com
Draw an aqua pill Button
by Swish-db.com
Free Templates
A collection of free web templates. Premium quality web designs, easy to browse.
Photoshop  Home Photoshop Web Layout Pill Button
rss

Pill Button

Author: Netcubo More by this author

Added: Mar 15, 2005 Rating:  Average Rating: 3.62 Votes: 13 Position: 2674 of 13090Average Rating: 3.62 Votes: 13 Position: 2674 of 13090Average Rating: 3.62 Votes: 13 Position: 2674 of 13090Average Rating: 3.62 Votes: 13 Position: 2674 of 13090Average Rating: 3.62 Votes: 13 Position: 2674 of 13090 Level: Beginner Software:  Photoshop

Introduction
Learn to make a great Pill Button

Step 1
Make a new document of 300x200 pixels. Make a new layer, Select the on your toolbar. Once selected change the Rounded Rectangle tool settings to these:

Also make your foreground colour light blue. Then make the button size similar to this:


Step 2
Now, go to Layer > Layer Style > Blending Options > Gradient Overlay and enter in these settings:

Then go to Bevel and Emboss and enter in these settings:

You should now have something that looks similar to this:


Step 3
Now hold CTRL and click the Button layer, on your layers palette. Now go to Select > Modify > Contract and enter in 10 pixels. Once again go to Select > Modify > Feather and enter in 10 pixels. Select your Bucket Tool, and set your foreground white. Fill the selection with white using the Paint Bucket¹ tool.



Final Results
Now you can add text, to make the button a little more exciting.

Pill Button 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 "Pill Button"