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

Posted on July 20th, 2009 under Web Graphics

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 500x367 Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop

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 500x415 Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop

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 effect1 Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop

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

Drop Shadow

2 drop sha1 500x350 Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop

Inner Shadow

2 inner sha 500x350 Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop

Gradient Overlay

2 gradient overlay 500x350 Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop

and you will have the following effect:

2 effect 2 500x368 Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop

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 500x373 Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop

and you will have the following effect:

3 effect 500x368 Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop

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

Drop Shadow

3 drop sha 500x350 Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop

Bevel and Emboss

3 bevel 500x350 Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop

Gradient Overlay

3 grad 500x350 Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop

and you will have the following effect:

3 effect 2 500x360 Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop

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.

3 effect 3 500x368 Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop

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 500x325 Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop

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 Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop

and you will now have this effect:

4 effect 2 499x367 Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop

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 500x367 Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop

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

Drop Shadow

5 drop sha 500x350 Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop

Bevel and Emboss

5 bevel 500x350 Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop

Gradient Overlay

5 grad 500x350 Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop

And you will have the following effect:

5 effect1 500x361 Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop

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 500x367 Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop

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!

Fresh Posts from PSD Vault

Creativity Fine-Tuning: Best of PSD Vault Flickr Group – Vol. 55

Create a Magical Photo Manipulation with Flowery Effect in Photoshop

Imagination Unleashed: Best of PSD Vault DeviantART Group – Vol. 23

Easily Apply Texture with Clipping Mask to Produce Unique Text Effect in Photoshop

Unique and Curious Photoshop Tutorial Showcase – January 2012

Creativity Fine-Tuning: Best of PSD Vault Flickr Group – Vol. 54

http://www.tripwiremagazine.com/user-news//user-linkdesign-a-simple-yet-effective-clean-and-shining-button-for-your-website-in-photoshop.html tripwire magazine | tripwire magazine

[...] Advertisement Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop [...]
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.
http://www.tripwiremagazine.com/news/news/17-awesome-user-submitted-links-on-july-22nd.html 17 Awesome User submitted links on July 22nd | tripwire magazine

[...] Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop [...]
http://www.devblab.net Ricardo

Tnks, i liked, Gracias me gusto
http://thepirateway.net/?p=10148 How to Quickly and Effectively Clean Out Body Hair in Photoshop

[...] Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop [...]
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!
http://www.itechart.com/Pages/Subsections/FlexDevelopment.aspx Flex developer

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

COOL ….LIKE THAT
http://www.1stwebdesigner.com/tutorials/50-really-high-quality-photoshop-navigation-menu-tutorials/ 50 Really High Quality Photoshop Navigation Menu Tutorials | Graphic and Web Design Blog – Inspiration, Resources and Tools

[...] 49. Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop [...]
http://guidesigner.net/adobe-photoshop/collection-of-really-high-quality-photoshop-navigation-menu-tutorials/ Collection of Really High Quality Photoshop Navigation Menu Tutorials | guidesigner.net

[...] 49. Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop [...]
http://huibit05.com/design/50-really-high-quality-photoshop-navigation-menu-tutorials/ 50 Really High Quality Photoshop Navigation Menu Tutorials | huibit05.com

[...] 49. Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop [...]
http://speckyboy.com/2009/08/11/30-useful-photoshop-buttons-and-badges-tutorials/ 30 Useful Photoshop Buttons and Badges Tutorials : Speckyboy Design Magazine

[...] Simple Yet Effective, Clean and Shining Button [...]
http://www.helloyi.cn/index.php/2009/08/12/30-useful-photoshop-buttons-and-badges-tutorials/ 30个漂亮的Photoshop按钮和徽章制作 | 好易阁|Web技术|杀毒软件|免费资源

[...] Simple Yet Effective, Clean and Shining Button [...]
http://guidesigner.net/adobe-photoshop/best-collection-of-useful-photoshop-buttons-and-badges-tutorials/ Best Collection of Useful Photoshop Buttons and Badges Tutorials | guidesigner.net

[...] Simple Yet Effective, Clean and Shining Button [...]
http://huibit05.com/design/icons/30-useful-photoshop-buttons-and-badges-tutorials/ 30 Useful Photoshop Buttons and Badges Tutorials | huibit05.com

[...] Simple Yet Effective, Clean and Shining Button [...]
http://www.neurosoftware.ro/programming-blog/blogposter/web-resources/50-really-high-quality-photoshop-navigation-menu-tutorials/ 50 Really High Quality Photoshop Navigation Menu Tutorials – Programming Blog

[...] 49. Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop [...]
http://www.faqpal.com/story/3332 You are now listed on FAQPAL

Design a Simple Yet Effective, Clean and Shining Button…

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 wi…
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 :)
http://blog.4dpixelworld.com/web-design/collection-of-really-high-quality-photoshop-navigation-menu-tutorials Collection of Really High Quality Photoshop Navigation Menu Tutorials | Web Design GroundBreak

[...] 49. Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop [...]
http://blog.4dpixelworld.com/web-design/best-collection-of-useful-photoshop-buttons-and-badges-tutorials Best Collection of Useful Photoshop Buttons and Badges Tutorials | Web Design GroundBreak

[...] Simple Yet Effective, Clean and Shining Button [...]
http://mayramoretti.com.br/blog/?p=225 * 30 Tutoriais de Botões no Photoshop – Top of your Mind

[...] Simple Yet Effective, Clean and Shining Button [...]
http://www.sezerozkara.com/blog/archives/520 30 Faydali Photoshop Dugmeler ve Rozetler Tutorials

[...] Simple Yet Effective, Clean and Shining Button [...]
http://www.tubeget.info vamsi

I made this :DD
http://i30.tinypic.com/23j0cxk.png
please rate :D
http://www.sonichtml.com/blog/?p=694 50个高品质的Photoshop导航菜单教程 « SonicHTML – 高品质 HTML+CSS 服务

[...] 49. Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop [...]
http://paranimage.com/50-high-quality-navigation-menu-photoshop-tutorial/ 50个高质量的PhotoShop导航菜单教程 | 帕兰映像

[...] 49. 使用Photoshop为你的网页创建一个炫目的按钮 [...]
http://www.clippingimages.com clippingimages

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!
http://www.dravalley.com Dravalley Support Community

Really nice tutorial. Someday i may use it for my own website hehe
http://www.desiimg.com desi

Thanks very much..
I will try these ;)
http://www.dxs77.cn/index.php/sheji/161.html 50个高质量的PhotoShop导航菜单教程 – 大杂门

[...] 49. 使用Photoshop为你的网页创建一个炫目的按钮 [...]
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!
http://bluesunries.wordpress.com/2010/02/05/50%e4%b8%aa%e9%ab%98%e8%b4%a8%e9%87%8f%e7%9a%84photoshop%e5%af%bc%e8%88%aa%e8%8f%9c%e5%8d%95%e5%88%b6%e4%bd%9c%e6%95%99%e7%a8%8b/ 50个高质量的photoshop导航菜单制作教程 « Bluesunries's Blog

[...] 49. Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop [...]
http://makeit.easy-blog.ru/?p=175 Делаем стильную кнопку для сайта « Make It

[...] Источник: PSD Vault [...]
http://Website 张炳勇

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

Very cool. Thank you. Great job…
http://www.clippingpathindia.com Clipping Path India

Very much useful tutorial specially for me,i was searching something like this tutorial.Thanks.
http://Website 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!
http://Website 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.
http://www.guzeltravestiler.com travesti

Thanks for share, nice job.
http://www.clippingpathcenter.com/ clipping path

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

Regards,
Al Kamal Md. Razib
http://www.travestivideo.com travesti video

Really nice tutorial. Someday i may use it for my own website hehe
http://Website 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?
http://www.eyyad.net Eyad

Wow thanks alot
http://www.clippingdesign.com Clipping path

Wow :) Nice tutorial. Very effective one. Well explained. Thanks for share. :)
http://www.webcad.nicknamenoelle.com.ar María Fernanda

Very useful buttom design. We´¨ll try it and let you know the results.
http://www.brettwidmann.com Brett Widmann

very nice and easy!
http://vintage-webstudio.com claudia

Super button and mine looked just like yours! Thanks for sharing!
http://www.isiservices.nl/ 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.
http://Website 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?
http://Website ravi

thanks ….great job….
http://mouse@yahoo.com Mouse

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

Thx
http://www.google.com Nicolas

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.
http://www.sohnahimachal.com arun prashar

nice examples for Photoshop learners
http://customwebdesignsite.com/Ads.html Ad Design

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.
http://clippingpathspecialist.com/services/photograph-retouching-service.html Photo Retouching Service

Very well explained tutorial. Every step is clearly
described with picture. Thanks.
http://transcriptionplace.com/ Transcription Services

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