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

Designing Web Buttons

Author: Head Nerd More by this author

Added: Mar 14, 2006 Rating:  Average Rating: 2.92 Votes: 24 Position: 8821 of 12364Average Rating: 2.92 Votes: 24 Position: 8821 of 12364Average Rating: 2.92 Votes: 24 Position: 8821 of 12364Average Rating: 2.92 Votes: 24 Position: 8821 of 12364Average Rating: 2.92 Votes: 24 Position: 8821 of 12364 Level: Beginner Software:  Photoshop

In this tutorial we'll create nice buttons for the web page.

Start by opening a new file. Using pen tool create a button shape.

image 1

image 2

Double click the button layer to open layer style window. Apply drop shadow, bevel&emboss, satin and stroke. Use settings as shown.

image 3

image 4

image 5

image 6

Applying these layer styles will give a 3d beveled look to the button.

image 7

Duplicate this layer to create additional buttons.

image 8

Type text on the buttons according to your linked pages.

Designing Web 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 "Designing Web Buttons"