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