Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Glass Button

Glass Button


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



Author's URL: GraphixKid
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Glass Button"

Captcha