Latest Posts from PSD Vault
- July 20th, 2009
Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop
Filed under Web Graphics
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:
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:
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)
On this shape layer, apply the following layer blending options:
Drop Shadow
Inner Shadow
Gradient Overlay
and you will have the following effect:
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:
and you will have the following effect:
On this “lighting” layer, apply the following layer blending options:
Drop Shadow
Bevel and Emboss
Gradient Overlay
and you will have the following effect:
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.
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:
and you will now have this effect:
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:
And on this text layer, apply the following layer blending options:
Drop Shadow
Bevel and Emboss
Gradient Overlay
And you will have the following effect:
To make the text stronger, simply duplicate the text layer once and you have made a very stylish, clean and shining button:
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!
User Comments:
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
Actually, you could make this better, if you just changed some settings in bleeding option.
Tnks, i liked, Gracias me gusto
@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!
Your site is very good. There are useful information and most importantly, for sharing great. Thank you ….
COOL ….LIKE THAT
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.
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
Thanks very much..
I will try these ;)
RLY GOOD M8, NICE TUTORIAL
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”
@maur: The image has been updated, thanks for pointing it out!
Thanks.我是个iPhone初学者，因此需要编程、美工都学习一下。按照中国的俗语，那就是“十八般武器样样精通”
Very cool. Thank you. Great job…
Very much useful tutorial specially for me,i was searching something like this tutorial.Thanks.
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!
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.