Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop

Posted on July 20th, 2009 under Web Graphics, it has 36 Comments and 24,466 Views so far.

In this tutorial, I will show you the method I use to create a stylish, clean and shining button for your website in Photoshop. This method is extremely simple with no more than five steps, yet it’s very effective since you can use the button for a wide range of occasions.

Along the way, the tools we will be using include the shape tool, layer blending options, brush and eraser tool. This tutorial is suitable for beginners as the steps are quite easy to follow in my opinion. As for advance Photoshoppers, I would love to hear you the methods you use to achieve such effect, just drop me a comment below.

Have a try, let me know if you have any problem, I will try my best to help you out :)

Here is a preview of the final effect for this tutorial:

5 effect 2

Ok let’s get started!

Step 1

Let’s create a new document sized 640 x 480px and fill the background layer with Black.

The reason I chose not to create a document with the size same as the button we’re creating, is because ultimately we will be placing this button somewhere on a web page. Therefore, I think it would be better if we start on a bigger canvas so we will have a better overview of the button design.

Now add a new layer on top of the background layer and name it “background lighting”, grab a big, soft and round brush with a dark grey colour, do a single-click in the position shown below:

1 lighting

Step 2

Grab the Round Rectangular Tool (U) and apply the settings to it:

Draw a rectangular shape in the centre of the canvas, as shown below: (Don’t worry too much about the dimension, just a rectangular shape will do)

2 effect

On this shape layer, apply the following layer blending options:

Drop Shadow

2 drop sha

Inner Shadow

2 inner sha

Gradient Overlay

2 gradient overlay

and you will have the following effect:

2 effect 2

Step 3

Now let’s load the selection of the shape layer by holding down the Ctrl key and left-click the thumbnail image of the shape layer on the layer palette.

Create a new layer called “Lighting”, on this layer, grab a soft round brush with white colour, do a single click in the position as shown below:

3 light click

and you will have the following effect:

3 effect

On this “lighting” layer, apply the following layer blending options:

Drop Shadow

3 drop sha

Bevel and Emboss

3 bevel

Gradient Overlay

3 grad

and you will have the following effect:

3 effect 2

Optionally, you can duplicate this “lighting” layer once for more depth. You will notice on the top we created a shining edge line, which add a bit of extra flavour to the button design.

Step 4

Duplicate the “lighting” layer one more time and put this layer on top of all other layers. On this duplicated layer, go to Edit > Transform > Flip Vertical and flip this layer vertically once.

You will now see on the bottom we now have a shining edge line as well, this makes the button more stylish.

4 shining edge

In order to reveal the top shining edge line created in the previous step, we can simple grab an eraser tool with a soft round brush, and do a single click on the position shown below:

4 single click

and you will now have this effect:

4 effect 2

Step 5

Now we can simply type some text onto the button. Font choice is quite important here because we want to the button to be as eye-catching as possible. Personally I think those Bold, Clean Font always work wonders. There is a pretty nice article here containing a list of bold fonts free for download, simply grab one of those and type some text onto it:

5 type

And on this text layer, apply the following layer blending options:

Drop Shadow

5 drop sha

Bevel and Emboss

5 bevel

Gradient Overlay

5 grad

And you will have the following effect:

5 effect

To make the text stronger, simply duplicate the text layer once and you have made a very stylish, clean and shining button:

5 effect 2

That’s it for this tutorial! Hope you enjoy it drop me a comment if you have any question, I will try my best to help you out.

Cheers and have a nice day!

Yakov Says:
hm….a bit hard cuz i got a different result…..the diff part is when i made the lightning and top and bottom shining effect….maybe i’ll try again next time……thank you for sharing it’s really cool tut :D
hARIJS Says:
Actually, you could make this better, if you just changed some settings in bleeding option.
Ricardo Says:
Tnks, i liked, Gracias me gusto
James Says:
@Yakov: make sure you apply the Bevel and Emboss option shown in Step 3, without this you won’t have the shining line effect on the button.

Hope this helps!
Flex developer Says:
Your site is very good. There are useful information and most importantly, for sharing great. Thank you ….
QUANTUMJAMIL Says:
COOL ….LIKE THAT
shilpa Says:
hi friend,

This is indeed a very good tutorial it helped me to prepare this button as instructed. I was thrilled to c the outcome :)
vamsi Says:
I made this :DD
http://i30.tinypic.com/23j0cxk.png
please rate :D
clippingimages Says:
WoW, Awesome tutorial. Well explained, Thanks to sharing this nice tutorial.
Donot Says:
Really great tutorial although I got a little differant result ! :)

Thank’s for sharing!
Dravalley Support Community Says:
Really nice tutorial. Someday i may use it for my own website hehe
desi Says:
Thanks very much..
I will try these ;)
arne Says:
RLY GOOD M8, NICE TUTORIAL
maur Says:
hello there, thanks, really great tutorial but one screenshot is invisible. could you please update last screenshot in step 3. thank you in advance. here is the file name: “3-effect-3-500×368.jpg”
James Qu Says:
@maur: The image has been updated, thanks for pointing it out!