What are You Looking for?

ByJames Qu
July 20, 2009

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

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

Pass your certification exam with help of testking 642-983 questions, testking 642-436 practice exam and testking 642-845 brain dumps.

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:

2 shape setting 2

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!

ByJames Qu
Updated

  1. 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

  2. Actually, you could make this better, if you just changed some settings in bleeding option.

  4. @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!

  5. Your site is very good. There are useful information and most importantly, for sharing great. Thank you ….

  7. 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 :)

  14. 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”

  16. Thanks.我是个iPhone初学者，因此需要编程、美工都学习一下。按照中国的俗语，那就是“十八般武器样样精通”

  19. i found ti is dificult . i do it follow this steps. but i didnt finished . some of steps are complicated, i can not gei it. help!

  20. Thank you veye much! it is indeed a good tutorial!
    i want ask taht when i did the fourth step,i fliped this layer vertically ,but there was no effect. hope someone give me direction.

  24. I tried this valuable tutorial twice (I am brand new to PhotoShop) and had the same problem: too much white at the outer edges of the button. What have I done or not done so that the red doesn’t fill the shape?

  30. in a single word it is an outstanding posting.
    And thanks for sharing this good work with all of us.

  31. Hi, i am ok till the end of step 3.
    On step 4, i flip it vertically as needed, but the lightning remains above of the box… Its not going the other side…

    I checked if i am not flipping it vertically correctly, but i wasnt doing it worng….
    Any ideas?

  34. Thanks a lot, fantastic tutorial!
    If the shining edge remains above of the box when you flip it vertically you might need to uncheck ‘Use global light’ on this layer. It worked for me.

  36. The quality of the tutorials here are excellent, I am a beginner to Photoshop and yet following all the steps, I managed to get that effect, bookmarked for all my future references :)

    Ralph

  40. Thanks! Great button. When following along, I got hung up on the duplicate lighting layer and flip vertical. I can’t get the white edge on it.

  45. Thank you for you article. I have a problem that as below.

    I can not flip my last copied lighting layer. so I can not add shining edge line

    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.on the bottom. I am waiting for your answer

  46. Thanks for your article, I am confused about this step
    Flip Vertical and flip this layer vertically onceI can only flip the layer,but layer style is not changed,so the shining line is still in the top.
    looking forward to your reply.

  49. pretty shitty.. im sorry i dont get anything. next time consider the fact that there might be people with newer versions of photoshop

  50. If you are having problem with STEP 4, just convert the duplicated layer to ‘smart object’ by right clicking on the layer in the layer panel and selecting ‘convert to smart object’. Now you can transform and flip vertical… hope that helps

  51. Can the red button be changed to blue? I couldn’t find a place to change colour in the layer style tabs, the only one i could get was red.

  53. Really great tutorial :) I’m just a beginner and the result is just amazing. The font i chose really matches the colors. A high end client would even be impressed by this button ;) Cheers

  57. I cannot follow this. Can u make a video of the same, so that we can pause the video and do it exactly and learn to use it too. It would be extremely useful. Thanks

  69. each and every steps is very useful and informative. still i am using ancient methods to create the buttons, but from your article i got an idea. thanks for this well kind of information. keep share more updates.

  73. Definitely it’s a good tutorial that’s make me more easy to create Clean and Shining Button within few minute.

Comments are closed.