Her

Home Photoshop Tutorials Web Layout Glass Button for Your Website.

Glass Button for Your Website.

Author: GraphixKid Author's URL: www.newtutorials.com More by this author

Start by drawing a circle of this color on a new layer:

image 1

Now, using Dodge Tool [O], lighten the center of the circle with small circular strokes:

image 2

Now add a Inner Shadow layer style. Make the settings like you see below:

image 3

Your image should now look like this:

image 4

Go to your background color layer, and using Dodge Tool and Burn Tool, make an "outer edge" for the light.

image 5

Unfortunately, the background now looks like this:

image 6

To fix this, select the layer transparency of the light layer, then go back to to your background layer and hit Delete. Make sure you have the background grey as your secondary color.

image 7

image 8

Go to Free Transform Selection, and move the selection circle slightly lower than the light.

image 9

Copy the light layer, and with the copy layer selected, hit Delete.

Your layer set should now look like this:

image 10

Set a Color Overlay layer style for the copy, and make the color white.

image 11

Set the blending mode for the (reflection) layer to Overlay, and set the layer opacity to around 60.

image 12
Click to enlarge

Using Free Transform, make the reflection slightly smaller, so that the optics look right.

image 13

Now set an Outer Glow layer style to the original light layer, set the effect blend mode to multiply, and make the settings like below:

image 14
Click to enlarge

Create a new layer just above the background layer.:

image 15

Set the new layer's blend mode to Overlay, and get yourself a nice whitish-yellow color as your primary color.

image 16

With a small brush set to a low opacity, draw around the lower outside edge of the light.

This creates a glow effect around the light, adding to the realism.

image 17

Glass Button