Make a glossy web button in photoshop
This tutorial will show you how to make a great, coo, glossy web button in Adobe Photoshop.
1.
Start by making a background layer, dragging a gradient that looks like the one in the image below, remember the gradient mode should be radial gradient.
So your background looks like this.
2.
Now go to Filters -> texture -> grain and set it as the image below.
3.
With your elliptical selection tool drag a big selection in a new layer and fill it with a color, (don't matter what, we are going g to change it later).
Double click the layer to get the its layers style, give it a gradient overlay as in the image below.
4.
Hold down ctrl and click your layer containing the elliptical shape, then create a new empty layer, go to select -> modify -> contract and contract it by 25 px.
Fill your new layer selection with the same gradient as before, just drag the opposite way as you did, now your shape should look like it has a bump or is going inwards
5.
While still holding the selection make a new layer and go to select -> modify -> contract and give it about 8 px.
With your new selection in the new layer you can now give it a gradient as I did in the image below. I used a blue with not much gradient in it, because I want to make a reflection later.
6.
Go double click your new layer to get to it layers style panel and give it an inner shadow with settings as below.
7.
Now for each layer except the background layer, go select layer then go to filters -> blur -> gaussian blur an blur all layers with about 1 just to soften the edges.
8.
Hold down ctrl and click the layer containing the smallest circle (the last one we made) and go grab your elliptical selection tool, set the selection mode to subtract from selection and drag as in the image below to cut away some part of the selection.
9.
Then go to select -> modify -> smooth and give smooth with an amount of 10 then select -> modify -> contract with about 5 px.
10.
Hold down shift key and press backspace and fill your selection with white, then go to filters -> blur and give it a gaussian blue r with quite a high amount depending on your with selection size, but the image should look like this:
11.
Hold down ctrl and click the small elliptical layer again as before, then grab your selection tool again and repeat the glossy effect to the bottom part of the circle so it looks like this.
12.
Go to layers style for the first elliptical layer we made and give it a drop shadow effect with some default settings.
13.
Now you can make layers between the small circle layer and the glossy layers, and create shapes to be contained within the orb.
14.
I got a little further and with the background layer selected go to filters -> render -> lighting effect and gave it a light just for fun.