Boonage

Ever cracking your head on how to design an awesome button or icon for your application’s GUI? and feeling of jumping out from Web 2.0 style once in a while? In this tutorial will be teaching you on how to create a cool looking button or an icon to suit your need.
**This would be a quite long tutorial

1. 
   As usual start a document of 500 x 500 px with 72 dpi. With the Eclipse Tool, draw 2 perfect circle as shown in the picture. Then by using the Layer Overlay, give them their color respectively as shown in the picture as well. Then rename the outer circle layer - Stroke and the inner circle layer - icon-bg
2. 
   Then ctrl+click on Stroke Layer’s thumbnail to have the outer circle selected, fill the selection with white(#ffffff) color. Name this layer - General Surface Glow. Now grab the pen tool and draw a illustration like what’s shown in the picture.
3. 
   Now convert the pen illustration to marquee. To do so, go to the Path tab which on the Layer Window. Click on the Load Path As Selection (the 3rd icon from the left and the bottom), shown in the above picture.
4. 
   With the marquee selection is active and the General Surface Glow layer selected. Inverse the selection by going to Select > Inverse or by pressing Ctrl+shift+I, then press Delete. Now using the circle marquee tool, draw a selection as shown in the above picture
5. 
   With the selection is active and General Surface Glow layer selected, go to Select > Feather or press Ctrl+Alt+D to bring out the feather window, give a 30px feather, and press Delete x 2
6. 
   Now draw another round marquee at the bottom of it as shown in the picture
7. 
   Same thing with the selection is active and General Surface Glow layer selected, go to Select > Feather or press Ctrl+Alt+D to bring out the feather window, give a 30px feather, and this time press Delete x 3. You will now get something like is shown in the above picture.
8. 
   After that, ctrl+click again on Stroke Layer’s thumbnail to have the outer circle selected, fill the selection with white(#ffffff) color. Name this layer - Upper Left Glow. With the selection still active, go to Select > Modify > Contract, give it a 4px contract. Inversethe selection, and with the Upper Left Glow layer selected, press Delete.
9. 
   ctrl+click on Upper Left Glow Layer’s thumbnail to have the circle that you just made selected. Then with the Marquee Tool is selected, drag the selection to the position as shown in the image.
10. 
    Bring out the feather window, give it 30px of feather, Inverse the selection. With the Upper Left Glow layer selected, press Delete x 2. You will then have something that is shown on the picture
11. 
    Then use the Eclipse Tool to draw a white oval shape to be put on top left corner, name this layer - Upper Conc Glow, and a smaller white oval shape on the bottom right corver, name this layer - Bottom Conc Glow. The Bottom Conc Glow layer, change the opacity to around 50 - 60.
12. 
    After doin the above steps, basically you would have done the inner part of the icon. The steps now onwards are actually to give an extra shine on this button/icon, therefore is optional. Ctrl+click on icon-bg Layer’s thumbnail to have the inner circle selected, fill the selection with white(#ffffff) color. Name this layer - Circular Glow.
13. 
    Bring out the Contract window, give a 4px contract. With the Circular Glow layer selected, press Delete.
14. 
    Now grab the Pen Tool again, follow the sharp edge of “circle” and draw an illustration as shown in the above picture
15. 
    Convert the pen illustration tool to marquee. If you forget how to do it, try recall it by referring to the above picture
16. 
    After converting to marquee selection, Invert the selection, with the Circular Glow layer selected, press Delete.
17. 
    Ctrl+click on icon-bg Layer’s thumbnail to have the inner circle selected, bring out the Contract window, give a 15px contract, then bring out the Feather window, give a 30px again. Now with the Circular Glow selected, press Delete 2 - 3 times and you will get something like is shown on the above picture
18. 
    Tweak a bit on the position by pressing Ctrl+T on the Circular Glow layer.
19. 
    Now create a new layer in between General Surface Glow layer and Icon bg layer. Put in your Icon Design inside and your icon is basically done!
20. 
    To add a little enhancement on it, Group all the above steps’ layers into a group, name it Icon. Create 2 perfect circle of the same size overlaping each other. Name the upper layer Black and have the color to be Black (#000000), and name the bottom layer to Grey where the color of it would be Grey (#8e8f91). Draw a marquee selection as shown in the above picture.
21. 
    Give the selection a Feather of 30px. With the Black layer selected, press Delete 3 - 4 times.
22. 
    Create a bigger circle behind the whole thing. Name this layer - border.
23. 
    On this Border layer, bring out the Layer Overlay window, give it a gradient overlay with the color as shown in the above picture
24. 
    Finally, duplicate the Icon group and merge the whole group.
25. 
    Bring out the Layer Overlay window for this Icon layer, give a Inner Shadow of the options’ figure shown on the picture. AND YOU ARE DONE WITH IT!!!

With this icon or button, you can also make quite a lot of effect on it. Not only by changing the red color to any other color, but also add some attractive/futuristic background on it. Something like shown below can be made with it as well.

Hope you enjoy the tutorial!