Glass Button

Have you ever noticed the small icon in the taskbar when Photoshop CS is open? The icon has a glassy look and contains CS's trademark feather. In this tutorial you will learn how to create a similar, but larger version of this icon.

Create a trendy glass button with Photoshop CS's feathers on it.

1. Start off by creating a new 175x100 document with a white background. Change the foreground color to #E2E2E2 then grab the Rounded Rectangle Tool and in the bar at the top of the screen, change the radius to 12. Then create a selection as shown below.

2. Next right-click on the newly created layer and select blending options. Change the Opacity to 50%. Select the Black to White gradient then click on the current gradient to bring up the Gradient Editor. The gradient is a bit too dark, so change the black in the gradient to #8D8D8D.

3. With the Blending Options window still open, select Inner Shadow. The Inner Shadow will create the glossy look for the glass button.

4. Next add a Drop Shadow and an Inner Glow.

5. The last blending option that will be used is a Stroke. Set the stroke width to 1 px and change the stroke color to #E2E2E2.

6. The only thing that needs to be added now is CS's trademark feathers. First you will need the feather image.

Open the image in Photoshop and you'll notice that the feathers are too large for the button created, therefore the image size will need to be reduced. For this tutorial, we want the feathers to touch both the top and bottom borders. However this height is unknown at the moment. In order to find out the height that the image with the feather in it should be reduced, grab the Measure Tool. In order to get the most accurate measurement, zoom in to about 400%. Click directly below the top stroke the drag the mouse to directly above the bottom stroke. At the top of the screen below the navigation, the desired height will appear. The height of my measurement is 82 pixels.

7. If you have not done so already, open the CS feather image in Photoshop. Next resize the image to the height of the measurement received in the previous step. Then drag the feathers onto the document with the glass button and place it anywhere on the image that you would like to.

8. In order to make the feathers blend more with the button below it, add a few blending options. Start off with an Inner Shadow using the same one from step 3, only this time change the Opacity to 25%. Then add an Outer Glow.

9. Finally add some text and your glass button with CS's trademark feathers on it is now done!