No Web 2.0 Web site is complete without a smattering of glass-like buttons. This simple Photoshop tutorial quickly shows you how to make these little buggers in a jiffy. The process is quite simple, but I’ve spelled it out with as much detail as possible for any new-comers to Photoshop. Obviously, if you’ve experience, just scan for gist ;-).
The desired result.
Step 1: Open a new Photoshop file. You can make it any size you want, but for this tutorial, we’re going with 200×100 (72 dpi). Background colour is inconsequential, but set it to transparent, and then you can stick the button on whatever part of your Web site you like and it’ll match.
Step 2: Choose what the primary colour of your button will be. Select this as your Foreground Colour. Select a much lighter, but similar, colour for your Background Colour.
Step 3: Click and hold the Rectangle Tool (directly below the Type Tool), this will allow you to select the Rounded Rectangle Tool. Once selected, draw a rounded rectangle to roughly the dimensions of your box. It should be filled with your Foreground Colour, but if not – fix that. 😉
Should look like this.
Step 4: Now we add some style to the button. In the Layers window, double click the layer called “Shape 1”. This will bring up your Layer Styles. Select Gradient Overlay, and choose the Foreground to Background gradient type. If your preview is on, you’ll see a gradient fill your button with the lighter colour (background) at the top and the darker colour (foreground) at the bottom. Reverse this (just select the Reverse option).
Step 5: While we’re in the Layer Styles box, lets add a stroke around the button to give it a bit of a border. Select the Stroke style (last in the list), set the stroke to 2 pixels, and choose a colour the same as or darker than your Foreground Colour. Click OK and close the Layer Styles.
Step 6: Our button is looking good, but we need a bit of a glare to give it that glassy look. To do this, simply hold down the CTRL key and click on the Shape 1 Vector Mask. This will cause the shape to be surrounded by a Selection (the marching ants) line. Now create a new layer (careful not to deselect the selection – if you do, just repeat the first part of this step).
With the new layer selected in the Layers window, and the selection still loaded on your image stage, click the Select/Modify/Contract… menu, and contract the selection by 5 pixels. Now, make sure your Rectangular Marquee Tool is selected, hold down the ALT key and you’ll see a minus (-) sign appear beside your mouse pointer. Click and drag a box around the lower 2/3rds of your selection. This will subtract that part from the selection. You should be left with a small box with its top corners rounded.
Step 7: Use the gradient tool to fill this selection. Make the gradient go from white to a colour from approximately the middle of your button (mid way between your original Foreground and Background colours). Set the Opacity of this layer to about 50%, and use the Gaussian Blur filter to blur it a bit (radius of 1.5 should do it).
Step 8: A button is of little use without a bit of text. Add some, and throw on a touch of drop shadow by double-clicking the text layer and bringing up the Layer Styles window again. Ah hell, if we’re going to do the most overused Web 2.0 graphics trick, we may as well overuse the most used Web 1.0 one as well – add a bit of drop shadow to the button by double clicking the Shape 1 layer. Now, sit back, crack a cold one, you’re done.
Voila!
14