How can I create nice looking subtle buttons in Photoshop?

Question

Can you give me some hints for recreate these two buttons?

Which effects are applied? Thanks!

Answer 1

@Jack this actually is a bevel

To use:

drop shadow, about 1 or 2px (opacity low)

gradient (light green to slighter darker green)

Bevel (opacity low, size 1 px)

Note: If you invert it (dark inner shadow, and reverse the gradient and bevel and you will have your pressed/mouse-over button.

Will provide screenshot and download later

EDIT This is what i made quickly:

You can download the source here to learn form it. Open the layer styles and see what i did. To change the color of the button simply edit the gradients

Source psd : http://www.luukratief.com/psd-files/subtle-buttons-normal-hover-click/

Answer 2

I would do that by frist, cerating a the shape with the rounded rectangle tool. the radius pixels must be about 3 px. . Then with blending options, select a overlay.. witht he tones you want. if you also want, u can use a gradient overlay, use 3 tones... the middle one should be the lightest one and the gradient should be solid.

Also, it looks like it has a drop shadow. you can add that as well, but set the opacity to less than 30.

The small lines on the edges, you get that by playing with the bevel and emboss levels, probably you want low pixels here.

And lastly, look for a similar font.

Answer 3

Bevel/emboss, at the very least.

Answer 4

If they are for the web, these style button are often generated with CSS as opposed to creating images. Generating buttons via CSS has many benefits over images such as faster load times, less HTTP requests, dynamic scaling.

Here is a link to an online button builder: http://livetools.uiparade.com/button-builder.html#

And you may find this answer useful as well.