Creating simple button with Photoshop CS5 using only layer styles [PSD]

I am not an artist, but sometimes I have to make nice button on my own. So I find out that it’s quite easy to do it with only adding layer styles. Just throw in some stroke, barrel emboss, gradient et voila. I was pretty amazed how easy it can be achieved. My simple button is only looking good on slightly darker backgrounds. On white color it needs some adjusting. At the end of this post you can find a link to my psd file. Now, I will show how I did it, step by step.

1. New file

2. Select Rounded Rectangle Tool

3. Set corner radius in pixels (remember to check option snap to pixels!)

4. Draw shape

5. Use layer styles button (or double click on layer) to bring layer styles window

6. Setup layer styles parameters. Firstly Bevel and Emboss

7. Then Gradient Overlay (Set colors of you choice, mine are #3e71aa and #59a8e0)

8. And finally stroke

You can add some layers as a background


Link to my PSD

Pretty decent button. Very flexible because it’s based on shape and can be resized without losing any details. For example when you need to change button size to fit slice. Another advantage is that you can easly manage your styles in one layer. Also you can copy layer styles and apply them to shapes in other psd.