Mac style web button

16 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

16 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.

Мало:) Пиши дальше, а то обрывается как-то на самом интересном месте.

Чтобы писать такие информативные посты надо хорошо отдыхать. Автор - где вы отдыхаете и как? Поведайте секрет.

Хаюшки! Да коментаторов тут пруд пруди и все не по дулу

STEP 5:

It’s CMD (command) + Click on a Mac.
(or)
to select all pixels. You can also use CTRL + click on the thumb, but the you have to use “Select Pixels” from the popup menu.

When all pixels are selected: THAN you NEED to add a NEW LAYER and fill the space inside the selected pixels with any color you like. When thats done, you do CMD + D to deselect the pixels and then you change the fill of the new layer to zero (0%) and the next step is to add a new WHITE stroke of 50% to the new layer.

@site-admin-owner,
Fix or update this tutorial please. You need to let people know they have to add a new layer. if not this tutorial doesn’t work out.

Ура!, написавший необычно накропал!

Наверняка, грамотная статья

Бесспорно, отменная статья

Где-то я уже встречал схожую заметку да ладно

I was wondering if you could elaborate on the particulars for doing this downunder?

later this year I will be coming back here to see how people have responded, I’d like to see if they agree with my comment?

Nice site, it looks like you paid thousands to design it, can you put some instructions up please? (more info please, I don’t properly understand how to do it).

I was wondering if you could elaborate on the particulars for doing this downunder?

Leave a Reply