Vectorials
Flash Perfection
3D Lessons
Tutorialkit
Markup Tutorials
Learn PHP
network
Photoshop  Home Photoshop Web Layout Web Button
rss

Web Button

Author: Mark More by this author


Step1: Setting up workspace and creating main button.

Create a new image 800x600, Change the background color to white. Press Alt+Ctrl+0 to view the actual pixel of your work area. Create a new layer, Layer > New > Layer... (Shift+Ctrl+N) and name it Button.

Using the Rounded Rectangle Tool image 1 create a rectangle using the dimensions below. Change the foreground color to #484848

image 2

With that, you should have the effect below.

image 3

Now right click on the Button layer, click Blending Options and add the settings below.

Inner Glow

image 4

Gradient Overlay

image 5

Gradient

image 6

Stroke

image 7

Gradient

image 8

Before clicking ok, click on the New Style Button  image 9   to save the style then click ok to add the style when you are finished. With that your should have the effect below.

image 10

Step2: Creating the inner image on the button.

Create a new layer, Layer > New > Layer... (Shift+Ctrl+N) and name it Plate.  Using the Rounded Rectangle Tool image 11 create a rectangle using the dimensions below. Change the foreground color to #484848. Place the newly created rectangle over the previous button as shown below. I zoomed into it to get a better view.

image 12

Rounded rectangle dimensions

image 13

Now right click on the Plate layer, click Blending Options and add the settings below.

Inner Glow

image 14

Stroke

image 15

Click ok when you have added the setting. With that, you should have the effect below.

image 16

Zoomed in image.

Step3: Adding circles to the button.

Create a new layer, Layer > New > Layer... (Shift+Ctrl+N) and name it circle.  Using the Rounded Rectangle Tool image 17 create a rectangle using the dimensions below. Change the foreground color to #484848.

Create a circle by holding the shift key and position it as shown in the image below.

image 18

Now right click on the circle layer, click Blending Options and add the settings below.

Inner Glow

image 19

Stroke

image 20

Click ok, now you should have the effect below.

image 21

Duplicate the circle layer by pressing Ctrl+J and position it on the opposite side of the button to get the effect below.

image 22

To change the button color to match your site click. Place a Hue/Saturation layer on top of the button layers. By clicking on create new fill or adjustment layer, when you do that a menu will come up.

image 23

Click on Hue/Saturation and the window below will popup.

image 24

Play around with the Hue and Saturation, will get some nice effects.

Finished:

That is it, hope it came out to what you expected.

Web Button Tutorial: Final Result

image 25

image 26



Author's URL: www.pixeldigest.com

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

Add comments to "Web Button"