How To Make Web 2.0 Glossy Buttons In Photoshop

Wanna design a simple mac style web 2.0 glossy button, this tutorial will show you how simple the steps are and how amazing the output is

Step 1 – Setting The Button’s Corners Radius

Web 2.0 buttons are known to have rounded corners,  in this step we’re going to show you how to draw a simple rounded corner button.

Fire up a new canvas and pick the right dimensions that suits your needs (i picked 250×500 for this tutorial), select the shape tool ( U is the keyboard shortcut) then pick the rounded rectangle tool.

Draw a rectangle as follows

Step 2 – Making The Gradient

Now after you’ve drawn the rectangle button, it’s time to give the base a web2.0 feel,  right click the shape layer and choose

Blending Options >> Gradient Overlay

Click the “Gradient Color Picker” marked in red below

Now adjust the button’s bottom color of gradient to #c1c1c1

and for the top gradient color set it to #ececec

Here is the output after applying the gradient

Step 3 – Stroke Line The Button

After the gradient, give the button a 1px line stroke with black color and set opacity to 20% (or choose the best gray color) setting marked in red in the screenshot

.

gives the following output, so far so decent

Step 4 – Button Text

To set the functionality of the button, you need to tell what or where this button is going to lead, so we’ll need to write short text inside the button to describe the goal behind clicking it, and also it needs to stand-out

Select the text tool (T is the keyboard shortcut) write whatever you want the button to do, and set the color of the text to #c0c0c0 and Myriad Pro is the font used

As you can see above the text looks dull and needs refinements to stand-out, to do so we’re going to create an inner shadow that will make it look neat and clean

right click the text layer and choose

Blending Options >> Inner Shadow

and set the options as marked in red in the follow screenshot

Here is the output after applying inner shadow so neat and simple.

Step 5 – Border Effect

Now let’s hook up our button with a border

duplicate the button layer, drag it below the original layer, delete the effect of the button and set it’s color to white!

As we duplicated the button, it has the same size as the original, to make the border visible we need to expand it.

you’ll need to free transform the border layer (CTRL + T  is the keyboard shortcut), use the upper bar to control and set the height and width of the border, expand it’s height by 30% and the height by 10% as shown in the screenshot.

now we need to give the border layer some special effects to make it shine, a stroke line and an inner shadow would do the magic  :D

right click the border layer and choose: Blending Options >> Stroke  set a 1px stroke, color it black with 10% opacity.

and the output would go like this, barely visible, but when adding the inner shadow, it will give the desired look and feel

let’s proceed and add the inner shadow

right click the border layer and choose: Blending Options >> Inner Shadow  and set the options as follows

and again the result after applying the inner shadow to the border layer (bg button)

Step 6 – Gloss Effect
let’s now do the final touches and give our neat button a glossy shiny look

Create a new layer, place it above the original button layer

now select the Eleptical Marquee Tool ( M is the keyboard shortcut) and do a similar selection.

To bound the selection to the button layer only do the following, hold CTRL+ALT+SHIFT and then click the vector mask thumbnail to get the selection in the following screenshot

after doing the step above, while still having the Marquee Tool selected right click the selection and pick “Fill”

fill the selection with white color and adjust the opacity to 35%

Here is how it look when applying the glossy effect

Step 7 – The Final Output

Download the Source Files

MacStyle_DL_Button_DecentPixel.zip [493kb]