Mac style web button

5 Comments
Web Graphics, Buttons, Web Design

Make a simple Mac style web button in a few steps.

1. Create a rectangle with the Rounded Rectangle Tool using 12px as Radius then click over the layer and Raterize it.

 

2. Now add a Gradient Overlay: #e6e9e2 to #ffffff

Photoshop Tutorials. Mac style web button.

3. Then a Stroke with #b7b7b7 as color

Photoshop Tutorials. Mac style web button.

4. You should have something like this:

Photoshop Tutorials. Mac style web button.

5. Now while pressing Ctrl, click over the thumb of the layer and then go to Select/Modify/Contract and put 1 px. Fill with any color and go to Select/Deselect

Photoshop Tutorials. Mac style web button.

6. Change its fill to 0%.

Photoshop Tutorials. Mac style web button.

7. Add a white Stroke and change the Opacity to 50%

Photoshop Tutorials. Mac style web button.

8. Finally add some text, Segoe 11pt color: #7a7a7a

Photoshop Tutorials. Mac style web button.

Rate Tutorial:

1 Star2 Stars3 Stars4 Stars5 Stars

5 comments on this tutorial

Nice button, i like it :D

Plz add the codes of the colors u used this would be helpful. THNX MAN

Colors added, sorry about that I didn’t realize. Thanks.

I can’t see the images, is it just me?

Leave a Reply