Stylish Button

Hey there, today we're gonna be doing a stylish button that you've probably seen quite a few times around the web now, but maybe you're not sure on all the steps to do to create one, so here we are.

Let's get started.

Open up Photoshop (yes you need to open Photoshop!), create a new canvas, i used 600x500 to give myself some breathing space, you can make it smaller if you wish.

Fill in your background with a colour your eyes are comfortable to work on, i used a grey gradient, this step is not important, you can just fill it in white.

Create a new layer and name it Button. Grab your rounded rectangle tool and use these settings.

Click on your canvas to bring up the shape, now right click inside the shape and select "Make Selection". Now fill this in with white. Deselect, go to the blending options for this layer and use the following.

You should now have something which looks pretty damn close to this!

Now create a new layer and name it Glow. Set your foreground colour to #9fd3ff

Grab your brush tool, select a Soft, Round brush at size 27px.

In your layers palette, Ctrl+Click on your Button layer to select it. Go on your Glow layer, and while holding shift, draw a straight line from left to right inside the selection so that you have a kind of glow at the bottom. When brushing inside the selection, you want to have about half or less of the brush inside the selection and the rest outside, like shown here:

Deselect, and you should have something which looks like this.

Now Ctrl+Click your Button layer again, and create a new layer. Name it Highlight.

On this new layer, fill in the selection with white. Deselect.

Now use your rectangular marquee tool to create a selection like this.

When you have the selection, hit the Delete key on your keyboard (You can also use Backspace, thanks Richard!). Deselect. Lower the opacity of the Highlight layer to 20%. You should have something like this.

Now create a new Group use the the group icon in the layers palette. Put your three layers inside it (Button, Glow, Highlight).

Right click on the group and select Duplicate Group. Now while having this group selected, hit Ctrl+E to merge all the layers in this group. You'll now have a single layer, move it under your first group in your layers palette.

Now move your layer to this position.

Add a layer mask to this layer and grab your gradient tool, set your foreground to black and use these.

Hold shift, and drag a gradient like this and let go (drag from the bottom to the top).

You'll now have a nice reflection. You can play around with the gradient if you want more or less of the reflection to be visible. You can also play with the layer opacity. This is what i got.

Your button is done! But i'll just give you the blending options i used for the text too, because i'm like that!

I used the font Eras Bold ITC, size 15pt. You can use another font such as Arial if you don't have this font. Type your desired text, and use these blending options.

You now have a finished button along with a text that goes with it!

Hope it can come in useful to you! Get experimenting!