You will learn to make a really nice web 2.0 style button in a few simple steps, with a good looking result. Don’t forget to be updated about current trends.
1. Make a rectangle with the Rounded Rectangle Tool with 5px for Radius and #01a7ea as color.
2. Add it a Inner Shadow
3. Now you have something like this:
4. Create a New Layer and make a selection as shown below:
5. Fill it with a Linear Gradient: #3fbbf0 to #9adfff and deselect.
6. Click over the thumb of the layer where the rectangle is, then go to Select/Modify/Contract and type 2px then go to Select/Inverse then press Delete and deselect.
7. Press Ctrl + T and go to Edit/Transform/Wrap
8. Now add it a Stroke.
9. You should have something like this:
10. Add text using Myriad Pro 25pt and Semibold.
11. Then add it a Drop Shadow.
12. Finally a Gradient Overlay: #ededed to #ffffff
13. And you’re done.
Rate Tutorial:
16 comments on this tutorial
fantastic, thanks for this!
great work!
I cannot “Select, Modify, Contract”, i have clicked on the layer, but i dont think that the rectangle is selected.
Dont worry, i figured it out, i had to right click as soon as i had made the rounded rectangle and click on “make selection”, then contract, then inverse, then delete
Great tutorial! Thanks
wow, thanks for sharing this. This was just what I was looking for. I owe you one. Thanks a lot.
Nate.
Excellent tutorial, thanks! xD
I like this one a lot, I have always wondered how they got that clean glass effect.
its very nice and amazing project.
I like this one a lot, I have always wondered how they got that clean glass effect.
Thanks for this nice tutorial dude, love it awesome. And now I know.
Great project.Thanks.
Excellent tutorial. Very easy to follow. Thank you
This is a nice Photoshop tutorial. However, for those who does not have Photoshop or knowledge of designer and wants create their own button with easy, I will suggest Cool Button Designer. Cool Button Designer can generate buttons for all three states on the fly, mouse over, mouse pressed and normal states. It gives you ability to control the light and reflection, add icon to your button, to gazillion of shapes, etc… Very nice software to create Web 2.0 style button. Cool Button Designer also generates you the HTML code for you to use. It saves the templates, that you can resize any time without loosing the quality of your button.
You should try it, its not a joke, and with 3-5 minutes you can build this button from scratch.
I am using it myself for my projects, and very glad to find it.
Try it, google for Cool Button Designer. Official website has a free trial to download and its limited with watermark only.
There are times when I would like to seek a clarification from them and then there are times they would like to have a word with me about a ‘comma’ here and ‘an expression there.
thank you very macht
such a great post.. thank you…
[…] fonte pscloud.com […]