Cool glassy icon creation

This photoshop tutorial will teach on how to make a cool glassy icon to be display not only on your website, but also for graphics use on banners, printout material and more.

1. 
   Make a document of any size, normally for me i will always use 500 x 500 for small graphics creation. Using the rounded rectangle tool, having around 8px of radius, draw a perfect square by holding the shift key when draging your mouse. After the square had been created, open the layer blending option, choose the gradient overlay, insert the 2 colors on the respective side (as shown as the above image). Name this layer icon-bg
2. 
   Then duplicate another layer of it, name this layer glass, select the glass layer, move it to above of icon-bg’s layer, change its color to white(#ffffff) by using the blending option’s color overlay. Change the opacity of it to around 50%. Use the square marquee toolbar draw a selection and you will reach to somewhere that’s shown in the above image. With that marquee selection is active and the glass layer is selected, press the delete key.
3. 
   Now you will basically have a glass look on it. To further smoothen the look of it, this is an optional step, use the round marquee tool, draw a selection according to what’s shown on the above image. Go to Select > Feather (Ctrl+Alt+D), give it 30px of feather, press “delete?? once.
4. 
   Ctrl+click on the thumbnail of the layer icon-bg to have a marquee selection on it, then go to Select > Modify > Expand, insert 1px and press OK. Then create a new layer below icon-bg, fill the marquee selection with white (#ffffff) color, name the layer shine
5. 
   After the above step, you wont see any difference because of the white background. So to make things easier to see, create another layer below shine, simply draw a black (#000000) color rectangle, and you will see what you’d done so far. Name this layer dummy-bg
6. 
   Again use the round marquee tool, draw a selection as shown in the above image, then go to Select > Feather (Ctrl+Alt+D), give it again a 30px, with the shine layer selected, press “delete?? twice.
7. 
   Repeat the above step for the top area, but this time only press “delete?? once??.
8. 
   Now you can see the shine beside it, tweak a bit of the opacity on the shine layer if you want to.
9. 
   Again Ctrl+click on the thumbnail of the layer icon-bg, go to Select > Modify > Expand, this time insert 2px on it. Create a new layer above the layer dummy-bg but below the layer shine, fill the marquee selection with a color, here i fill it with black (#000000). Give this layer a name of icon-frame
10. 
    Now hide the layer dummy-bg and you will see what’s shown on the above image, and we are almost done.
11. 
    Finally, open the blending option for the layer icon-frame, enable the gradient overlay, put in the respective color as shown on the image.
12. 
    Now basically you’re done, all you have to do now is create the symbol you want and put it in, i will try use the RSS symbol here as an example
13. 
    Add an inner shadow on it if you want and that’s it, you’d just made yourself a nice, cool, glassy icon!

There are many things you can do with this icon design, here i’ll make an example of what you can do. Reflection. I know many people already know how to do a nice reflection and shadow, but still i will show it for the sake of those who doens’t know. I will go through this very fast and not so detail.

1. 
   Continue with the previous work, create a layer below this icon, using the Eclipse Tool, black fill, draw a long but thin eclipse as shown in the above image
2. 
   Using the Gaussian Blur tool, blur it with 1.0px. Then adjust the opacity a bit
3. 
   Now duplicate the whole icon, flip it vertical, nudge it until its bottom part touches each other like what is shown on the image
4. 
   Then using round marquee, select the region shown in the image, use feather of 30px again, press “delete?? 3 - 4 times
5. 
   Adjust the opacity, and now you have yourself a beautiful effect with this icon you’d just made!

Color tweaking also can be done on this icon, with this you could achieve something shown at bottom. With this, hope you enjoy the tutorial!

Copyright @ Boonage 2007