Photoshop  Home Photoshop Web Layout Glass Button
rss

Glass Button

Author: GraphixKid 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.

Click to enlarge
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:

Click to enlarge
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.

Glass Button Tutorial: Final Result

image 18



Author's URL: www.newtutorials.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 "Glass Button"