Professional Glossy “Download” Button
In this easy, step-by-step tutorial I’m going to show you how to design a simple, professional & glossy “Download” button. I’m just using download as an example here, it’s really a multi-purpose button 
These kind of buttons are also being used a lot on “Web 2.0″ sites lately, so get with the times! (not seriously)
1. Creating your Button
Start by creating a new document to make your button in, otherwise open up a website design you’ve been working on. I created a small document sized 400 x 110, just to make my button(s) in.
Now you need to make the shape of your button, you can do this by either using the Rounded Rectangle Tool (which is the most common) or you could use the channels to create a nice, uniform rounded box. It’ll be best if you just use the Rounded Rectangle Tool though.
For the settings, use a radius of about 10-15px, you can see the other settings I’ve used below:
Now, draw out your button onto the canvas in whatever color you want. (it doesn’t matter what color you use)
2. Apply Layer Styles
Right-click your button layer in your layer’s palette then go into the Blending Options, click and apply the following settings:
You can use whatever colors you want in the above layer styles, but your button should now look something like this anyway:
3. Highlight / Shine Effect
Now it’s time to add a nice, glossy shine to the button. Start by making a selection around your button (Select > Load Selection) then contract your selection by about 5 pixels (Select > Modify > Contract) now you should be left with a selection like this:
Create a new layer then drag a white to transparent gradient from the top of the selection to the bottom, as shown in the below image:
Now you need to make a curvy path using the Pen Tool, turn your path into a selection then delete the bottom half of the gradient, something like this:
I also used a large, soft brush to erase away the bottom edges, this gives it a very nice, smooth feel.
4. Text & Details
Now it’s time to add your text to the button! Start by getting out the Horizontal Type Tool (T) then write out your text.
The font I’ve used above is called Myriad Pro, for the top line of text I used: Black Italic, 24 pt, Sharp, #fff.
For the bottom line of text I used: Semibold Italic, 12 pt, Sharp, #fff. I finished off by adding this Drop Shadow to the text layer.
Lastly, for a nice touch, I added in a reflection to the button and a faded cog in the bottom left corner. Add the shadow/reflection by duplicating your main button later, moving it below your button layer then erase all but the top.
You can download the cog shape that I used from: Cog Shape File.
5. Finished
And that’s pretty much it. I also created a red version of the button though.
Thanks for reading, I hope you enjoyed the tutorial. If you want, you can download the PSD file from this tutorial from here: Pro Glossy Button Download.
6. HTML & CSS Markup
I’ve also made the coded version of this rollover button, for those that might be interested.
CSS Code:
#button { margin: 0; padding: 0; }
#button a { display: block; background: url(./button_off.gif) no-repeat; width: 200px; height: 0px !important; height /**/:72px; padding: 72px 0 0 0; overflow: hidden; }
#button a:hover { background: url(./button_on.gif) no-repeat; width: 200px; height: 0px !important; height /**/:72px; padding: 72px 0 0 0; overflow: hidden; }
HTML Code:
<h1 id=”button”><a href=”#” title=”">Button</a></h1>
You must be logged in to post a comment.
Trackbacks
- 18 Essential Photoshop Tutorials for Blogger | The Tao of Blogging to Wealth
- 18 Tutoriales de Photoshop para bloggers
- 18 Photoshop Tutorials for Bloggers | ARTEgami in English
- Web Sitenize 39 Eşsiz Photoshop Buton Tutoriali | Listeniz.Net
- Botao web 2.0 tutorial - Button Web 2.0 Photoshop
- Webincafe - Blog » 39 Photoshop Button Tutorials You Should Have in Your Arsenal
34 responses
wonderful thanks a lot
Nice though, although you could also try and style a button instead of an anchor.
(yes with javascript onMouseOver(), etc.)
This isn’t the symantically correct way to display a button.
Great stuff these shiny buttons are all the rage at the moment
Although I appreciate the effort, I don’t think you’ve given all the steps here.
Following your steps will not give you the shine gradient shown in the final version. Looking closely at the final stage of the gradient in step 3, you can see that the gradient has a different tone and shape, most noticeable at the top and corners.
I believe you may have overlooked a few important steps.
Pretty neat, thanks a lot for the CSS-Version.
Really really neat!
Great job
I really like your tutorial and I’m looking to create similar buttons however following along as I got to making the path and creating the shine affect it’s unclear what to do to make my graphic as clean? Do you have extra steps on how to make the curvy path using the Pen Tool and create the shine? Or can you point me to where I can find a more in depth tutorial on how to do this?
great job though!
Thank you!
lp
I’m sorry for not being very detailed around the Pen Tool area, for those wondering about it, please look up a detailed tutorial on using the Pen Tool.
Sorry again!
so cool.Thank you for sharing the tutorials.
Great tutorial. Thx!
Everything went on fantastically fine, but at last the pen tool and the shading made all the difference, I think you might have omitted some steps, I am not happy about that part at all.
This is really great and really helpful for my site. thanx!
thanks that is really good work
WOW…..that was really great exp for me.
thanks n keep it up……..
Hopeless - either post the FULL tutorial or there’s no point. It’s painfully obvious once you come to deleting the bottom half of the gradient with a pen tool selection, that this tutorial is incomplete. You can see that the next thumbnail bears no resemblance to what you’ve just done yourself in Photoshop - that’s because there’s at least one step missing folks! The opacity of the gradient is different for starters. Removing the bottom half of the gradient, without leaving a sharp edge, is the most important step and it’s been omitted. Very frustrating.
Thank you so much..
EAse up folks, If you’re a beginner, you might have some troubles….I mean c’mon, post a tutorial of how to use the pen tool???
Some of these things you need to know already.
If you want to have your hand held, cough up the dollars and go to college.
Thank you very much
Awesome! Thanks!
Excellence!!! Thanks for spreading idea.
If you cannot follow this tutorial then you need to learn photoshop before trying to do anything fancy, steps were not omitted, the author was assuming that you knew your way around photoshop. Wonderful tutorial by the way.
Thanks - Great help!
Thanks for the tutorial — it helped me out a lot! Definitely going to back to check out more tutorials.
Great job, and thanks again!
- Mike
Thanks for the tutorial, it is reaaly nice work and I liked red color it looks great.
Thanks for this tutorial. I made a similar button for my website.
My Favorite Button (DOWNLOAD)
My friends call me a download freak
That’s really nice thanx dude
Great tutorial!
But I agree with some speakers. There’s a thing missing here. =) I was searching for this shine effect the whole day, now thought I’ve found it here. But I think I must take some basic pen tool lessons first… now I know, that’s what I was searching for actually XD
anyway, awesome work!
Great tutorial!! Just tried it out.
Thanks a lot.