50% OFF All VIP Memberships! Coupon Code: PV2016. Ends 11 December. Sign Up Now >>

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

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!

Categories: Web Graphics

Tags: ,,,,,,

  • Yakov

    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

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

  • Tnks, i liked, Gracias me gusto

  • James

    @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

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

  • QUANTUMJAMIL

    COOL ….LIKE THAT

  • shilpa

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

  • I made this :DD
    http://i30.tinypic.com/23j0cxk.png
    please rate :D

  • WoW, Awesome tutorial. Well explained, Thanks to sharing this nice tutorial.

  • Donot

    Really great tutorial although I got a little differant result ! :)

    Thank’s for sharing!

  • Really nice tutorial. Someday i may use it for my own website hehe

  • desi

    Thanks very much..
    I will try these ;)

  • arne

    RLY GOOD M8, NICE TUTORIAL

  • maur

    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

    @maur: The image has been updated, thanks for pointing it out!

  • 张炳勇

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

  • ndimos

    Very cool. Thank you. Great job…

  • Very much useful tutorial specially for me,i was searching something like this tutorial.Thanks.

  • jing wang

    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!

  • luck

    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.

  • travesti

    Thanks for share, nice job.

  • Awesome tutorial. It’s a really helpful for a beginner. Thanks for your well done job.

    Regards,
    Al Kamal Md. Razib

  • travesti video

    Really nice tutorial. Someday i may use it for my own website hehe

  • Michelle

    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?

  • Wow thanks alot

  • Wow :) Nice tutorial. Very effective one. Well explained. Thanks for share. :)

  • María Fernanda

    Very useful buttom design. We´¨ll try it and let you know the results.

  • very nice and easy!

  • Super button and mine looked just like yours! Thanks for sharing!

  • cms website design in Nederland

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

  • Greek

    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?

  • ravi

    thanks ….great job….

  • Nice Tutorial Now I got an idea how to make my buttons really coolllll!!!

    Thx

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

  • nice examples for Photoshop learners

  • 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

  • Lucian

    I’v got the same problem.. on step 4 at ,,Edit > Transform > Flip Vertical”

  • Lucian

    After i click on flip vertical..nothing happens :( Please help me with this

  • sathish

    i click on flip vertical. not unstand me…

  • joshtown

    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.

  • Very well explained tutorial. Every step is clearly
    described with picture. Thanks.
     

  • I think this your very good work man and thanks for the detail picture of each steps.

  • Prince_prefect

    Very well explained…too easy to follow….

  • SEO BLOG

    That helped me alot, thanks

  • Adam

    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

  • Honey Summerni

    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.

  • 葛小明

    I have the same problem.

  • Bharat parihar

    thanks sir..

  • Aeradada

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

  • 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

  • Nicnac66

    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.

  • Nice! Thanks much! I really like it! 

  • Armonius

    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

  • ELIAS

    Good Tutorial

  • hemanth

    this is helpful for and i learn how to create buttons for my site

  • Very good collection of photoshop button.

  • The seeker

    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

  • Thanks for the well explained tutorial.

  • I like the technique to make the logo so perfect.

  • one can easily make this button to see this tutorial.its really helpful.
    thanks to share this.
    :D

  • wulongegg

    I love this,so beautiful!

  • Very simple but creative works.

  • Good article!

  • Hey, its a really great Photoshop post of i enjoyed lot.Thanks for a share with us.good bye.

  • obviously creative & informative for Photoshop user. Any one can easily make button after see this post.

  • Wonderful Photoshop tutorials for Button design . Thanks for sharing with us .