Math

Glossy Button
Create a glossy button that can be used for anything!

Category: Photoshop
Author: Charlie Ralph-Smith
Difficulty: Easy

Step 1

Start off with a button, either curved or rectangled. I used a rectangle. Be sure to make the pixel edge ' Inside '. I used a dark green.



Step 2

Put a gradient colour in the box. Preferably a bright colour. Make sure its brighter near the bottom and get darker towards the top.

You can use the HEX codes i used:
TOP: #5cbf04
BOTTOM: #93dd16

Now goto 'Inner Shadow' and use the following settings:
Blend Mode: Overlay (#FFFFFF)
Opacity 45%

Distance 2
Choke 0
Size 0

It should like something like this:



Step 3

Now you want to add some of the bright green to it

Get a new layer and use the 'gradient' took in the tool bar. Make sure the top settings are as followed:
http://www.webdesigndev.com/tutorials/button/step3.jpg

Press 'CTRL + Click the first layer in the layer pallette. It should be selected. Goto 'Select' - 'Modify' - 'Contract' and put in '2'

Zoom into the button and click the gradient tool from the top line, down to the bottom.

So far it should be like so:


Step 4

Now stretch the new layer across and centralise it, so it looks like:


Step 5

Double click this layer in the layer palette and goto 'color overlay'. Click the red box and at the top of the box, you will see the dark green pixel stroke. Just below that there should be a light green pixel line. Click that line with the picker.

You should come out with something like this:


Step 6

Now press 'CTRL + Click the first layer in the layer palette' and make a selection. Goto 'select' - 'modify' - 'contract' - '2'

Then get the select tool (square) and go across half of the box. It should look like:



Step 7

Make a new layer and press 'CTRL + Backspace'. Move this layer above the rest of the layers.

Where it says Opacity, select 15%

It should turn out like this:


Thanks!

__________________
...

sujal

Thanks for share this step. but i'm last as usually . I had require of this type button in last month.

__________________
web site development
free web templates