Photoshop  Home Photoshop Web Layout Glossy Button
rss

Glossy Button

Author: Invano.com More by this author


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.

image 1

Step 2:

Create a new layer. (Layer >> New Layer)

image 2

Select the Elliptical Marquee Tool (Top left of toolbar)

image 3

Now click, hold shift and drag to make a perfect circle in the center of your canvas. (Size does not matter)

image 4

Step 3:

Now select the gradient tool.

image 5

Click, hold shift, and drag downwards inside the circle.

image 6

Your circle should now be filled with whichever colors you set your gradient to.

image 7

Step 4:

Next, draw another circle with the Elliptical Marquee tool slightly smaller than the first one.

image 8

Now insert a new layer. (Layer >> New Layer)

image 9

Fill this circle with white.

image 10

Move your new circle inside the exact middle of your first circle.

Step 5:

Adjust the opacity of this circle to about 56%

image 11

Now draw another circle with the Elliptical Marquee tool roughly 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.

image 12

Now hit delete.

You should now have a beveled look to your button.

image 13

Step 6:

Now create a new layer.

image 14

Now we need to create another circle. So click the Elliptical Marquee tool and create a circle slightly smaller than the first one.

image 15

Now fill it with white.

Adjust the opacity to 15%.

image 16

Create one last circle with the marquee tool. Make it sort like an oval (horizontally) and move it 3/4ths the way down the circle you just made.

image 17

Hit delete.

Your button should now look something like this:

image 18

Step 7:

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

image 19

Feel free to play around with the drop shadow settings.

Your button should now look something like this:

image 20

Step 8:

Add some text. I used verdana, bold, and white.

image 21

Now click and drag a box on your button.

image 22

Now type a word or two.

image 23

Now apply a 1 pixel stroke. I used a dark blue.

image 24

image 25

Hit ok, and were DONE!

My final result looked like this:

Glossy Button Tutorial: Final Result



Author's URL: www.invano.com

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Glossy Button"