How to make rounded rectangle/square glass button in Adobe Photoshop CS4?

If you are a software developer, then using glassy buttons in your software has a great improvement on customer experience. Making glass buttons in Adobe Photoshop CS4 is very easy. In this tutorial, I am going to teach you to make rectangle or square button with rounded edges and glass effect. So, Lets Begin…!

1. First of all, go to File>New. Then set your canvas size and resolution but make sure that the background contents are transparent and color mode is 16 bit or lower (for PNG file types). I prefer PNG file type because in PNG, you have the ability to keep background transparent while in JPEG and other file types, your file is forced to have at least one background color.
   
   
2. Then hold down mouse button on tool located on the right of Direct Selection Tool and select Rounded Rectangle Tool from the pop-up menu.
   
3. Set the radius of rounded corners. Increasing its value will increase the roundedness of corners. For the purpose of this tutorial, I’ve set it to 25 px.
   
4. Draw your rounded rectangle on your canvas. Since my canvas is square, I’ve drawn a rounded square. You can draw either rectangle or square depending on the shape of your canvas.
5. Since the drawn shape is a vector mask, you cannot directly apply gradient to it. But for the glass effect to work, gradients are necessary. So, lets apply gradients indirectly. Decide the colors that you want to have in your gradient and select your foreground and background colors accordingly. For example, if you want to have your gradient from navy blue to blue, then select foreground color as blue and background color as navy blue.
6. Right click on your Shape1 layer and select Blending Options.
   
7. From the dialog box, click on Gradient Options (make sure that a check is also made after you click) and make the following changes:
   
   TIP: If you want your shape to be flat along Z-Axis, then select linear gradient but if you want your gradient to be rounded along Z-Axis, then select radial. Since, I want to make my gradient rounded along Z-axis, I have selected radial gradient. Adjust the scale till you get your desired gradient. After you are satisfied with your settings, click OK.
8. Right click your shape1 layer and select ‘Rasterize Layer’.
9. Create new layer by pressing Ctrl+Shift+N. Click OK in the dialog box that opens.
10. From the toolbox, select Magic Wand tool and set its tolerance to 100.
11. Click on your gradient. It should display animated dotted lines along the border of your shape.
    
12. Now, click and hold your mouse button on the first tool and select Elliptical Marquee Tool.
    
13. In the toolbar, make sure you’ve select intersection mode and feather to 0 px. Also make sure that anti alias is checked.
    
14. Draw an ellipse but make sure that it passes through the centre of your rounded rectangle/square. For this, I recommend you start drawing it from outside the canvas and draw it through the canvas.
    
15. If the intersection mode is selected, then it should display a shape like this:
    
16. Now, select the paint bucket tool.
    
17. Set your foreground color to white. Click on the gradient, inside the shape formed by dotted lines. White color will get filled as below. Press Ctrl+D to deselect your selection.
    
18. Now, making sure that the selected layer is the newly formed layer (not rounded rectangle one), set its opacity to 15%. However, you can adjust the opacity till you find that perfect glass curve.
    
19. In this image, a shadow is missing. For this, select the ‘Shape1’ layer, right click it and select ‘Blending Options’. Now, click on the Drop Shadow item (make sure that a check is also made after you click). From options pane, increase opacity, distance and size. Click OK.
    
20. Your final image should look something like this:
    
21. Now, if you want to type text or something else, make sure that the text layer is below the whitish layer of glass (layer1).
22. If you want to preserve the transparency, export the file to PNG or else, export it to file type of your wish. Go to File>Save as, choose the location where you want to save your file and select file type of your choice from the drop down. Click OK. For PNGs to work well, select ‘None’ instead of ‘Interlaced’ in the next dialog that appears.

Enjoy your cool glass effect!