Thursday, December 13, 2012

Button Design 1 - Glossy Button



1. Create a new document with as 1000 * 300 px dimensions.
2. Unlock the background and open layer styles and select gradient overlay . Open the gradient editor and select dark gray for first stop and little lighter gray for the end stop.
3. Select rounded rectangle tool and draw out a rectangle on the canvas while dragging out the mouse a little outside the canvas.
4. Draw out another rectangle at the bottom keeping same distance at the bottom as is on the top and select subtract from shape option.
5. Open the layer styles window :
   a. Gradient overlay ( light and dark gray for first and end stops resp.)
   b. Inner glow (color -white, size-20)
6. Create a new layer and select text tool and type the text on the canvas. Use move tool to reposition the text .
7. Open layer styles for the text layer :
   a. gradient overlay ( select a dark gray gradient in reverse)
   b. Inner shadow (blend mode -overlay , opacity-75, angle - -58,use global light, distance -5, size-10
   c. Drop shadow (blend mode- overlay ,color -white, angle - -58 ,distance -1, size -1
8. Select the shape layer by holding down ctrl and click on the layer. Create a new layer and select pen tool . Click on top right of the canvas and drag to lower left of the canvas .  Pull out the anchor by dragging it. Create more points outside the canvas and join the two points. Right click inside the canvas and select make selection and select subtract from selection.
9. Open gradient tool and select back to white preset and drag the gradient from top to bottom while holding shift. Change layer mode to screen and opacity to 40. Deselect the selection.
10.Select the brush tool and create a new layer . set white as foreground layer. Select the shape by clicking the shape layer while holding down ctrl key .
11.Drag the brush on the bottom mid of the canvas to create a triangle. change layer mode to overlay and opacity to about 50.
12.Make a copy of the layer and press ctrl t to open the transformation and drag it to the top of the canvas.

       

No comments:

Post a Comment