Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

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

enter image description here

Which effects are applied? Thanks!

share|improve this question
1  
What steps have you taken already? The generic answer is "play around with gradients" but that may not help you directly. –  Farray Aug 30 '11 at 2:16
add comment

4 Answers

up vote 6 down vote accepted

@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:

enter image description here

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/

share|improve this answer
add comment

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.

share|improve this answer
add comment

Bevel/emboss, at the very least.

share|improve this answer
    
Do you know how to set that Inner Shadow? In the image it's very defined. –  Fred Collins Aug 30 '11 at 2:11
    
Only bevel emboss :o –  Jack Aug 30 '11 at 4:25
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.