Aero Glass Vista Button with Photoshop
The last tutorial I wrote was “How to draw a glossy black panel with photoshop”. Now, we’re gonna do something a bit similar but more useful for websites and GUI designers. I’m not going a lot through details, you should be a bit familiar with photoshop. Otherwise, you can check some older tutorials I’ve written on this blog. As usual, I’m gonna show you in the beginning what we will be working on:

Let’s start:
1. Create a new project (Width: 230, Height: 180) and fill it with dark gray (#2a2a2a):

2. Select the Rounded Rectangle Tool, set the radius to 5 px, color to black and draw something like this:

3. Now we will add some effects with Layer > Layer Style> Blending Options:





4. Now that we have created the button, let’s make it glossy. Select the Selection Tool and select this area:

5. Press Ctrl + Shift + N to create a new Layer.
6. Hold Ctrl + Shift + Alt and click the button’s icon in the Layers panel to get the intersection of the selection with the button. Then “Select > Modify > Contract” and contract the selection of 1 px:


7. Set the foreground color to white and fill the selection using the Paint Bucket Tool. You’ll get something like this:

8. Set the transparent of this layer to 20% (You can do that from the layers panel)


9. And finally, you will type some text to get this final result:

Optional: Let’s make it shiny with Flash (new)
Stay tuned…








I am Elie El Khoury, from Lebanon (Byblos), Woopra co-founder & CIO, Web & Software Developer, Designer, Guitarist, Mac user and the worst blogger on earth! 








