Simple but attractive button creation tutorial!

Someone just recently requested help on creating a glossy circular button. So upon request, I have decided to write a very simple tutorial on how to make a very simple, but attractive button.

This tutorial requires you to know your way around adobe photoshop, and know the basics.

Alright so here we go, start with booting up adobe photoshop.

Step 1.
Start by creating a new canvas (File >> New)
Make the canvas 300 by 300 pixels.
Make sure resolution is set to 72, mode is on RBG Color, and contents is set to white.

Step 2.
Create a new layer. (Layer >> New Layer)
Select the Elleptical Marquee Tool (Top left of toolbar)
Now click, hold shift and drag to make a perfect circle in the center of your canvas. (Size does not matter)

Step 3.
Now select the gradient tool.
Click, hold shift and drag downwards inside the circle.
Your circle should now be filled with whichever colors you set your gradient to.

Step 4.
Next, draw another circle with the Elleptical Marquee tool slightly smaller than the first one.
Now insert a new layer. (Layer >> New Layer)
Fill this circle with white.
Move your new circle inside the exact middle of your first circle.

Step 5.
Adjust the opacity of this circle to about 56%
Now draw another circle with the Elleptical Marquee tool rougly the same size of your last one. Place this circle on top of the last one you just made and hit the down arrow 1 or 2 times. Now hit delete.
You should now have a belveld look to your button.

Your button should look somthing like this:


Step 6:
Go: Layer >> New Layer
Now we need to create another circle. So click the Elleptical Marquee tool and create a circle slightly smaller than the first one.
Now fill it with white.
Adjust the opacity to 15%.
Create one last circle with the marquee tool. Make it sorta like an oval (horizontally) and move it 3/4ths the way down the circle you just made. hit delete.

Your button should now look somthing like this:


Step 7:
Alright, now to add one last touch to our button. Click on the layer with the first circler. (One with the gradient) And apply a drop shadow. (Layer >> Layer Style >> Drop Shadow)

Step 8:
Add some text. I used verdana, bold, and white.
I then applied a dark green stroke to the letters and centerd it on the button.

My final result looked like this:





You can down the PSD file for the above button from:

http://h1.ripway.com/ncote2/greenglossybutton.psd

Regards,
- Nick

 

If for some reason the above .PSD download link does not work. You can use this one:

www.web-bulletin.com/greenglossybutton.psd