Create a Simple Glass Button in Photoshop

It's super simple to create a trendy looking glass button in Adobe Photoshop.

Steps

Intro

  1. The button you are going to create is going to look like this.

Create a new image

  1. Start Photoshop and type CTRL+N (Command-N on Mac) to create a new image.
  2. Enter 250 for "Width:", 250 for "Height:", 72 for "Resolution:", and White for "Background Contents:". Click "OK".
  3. Click "File">"Save AS". Change "Format:" to Photoshop (*.PSD, *.PDD). Set "File Name:" to GlassButton.psd. Click "OK".

Create pinstripe background

  1. Create a temporary document for the pinstripe background. Type CTRL-N to create a new document. Enter 1 for "Width:", 10 for "Height", 72 for "Resolution:", and White for "Background Contents:". Click "OK".
  2. Type Z to open the Magnifying Glass. Click the pinstripe document until its at least %1600 bigger. Type SHIFT+CTRL+N to create a new layer. When the new layer dialog window opens, just click "OK".
  3. Type M to open the Square Marquee tool. If for some reason the Circle Marquee tool opens, you can change to the square tool by holding down the left mouse button over the Marquee tool in the toolbox. A small window will open up next to the toolbox and you can select the square tool.
  4. On the pinstripe document, draw a Marquee around the bottom 1 pixel.Make sure that feather is set to 0.
  5. Type SHIFT-F5 to open the Fill window. Set "Use:" to Black. Click "OK". Now type CTRL+A to select the entire document.
  6. Click "Edit">"Define Pattern". A window will pop up. Set "Name:" to Pinstripe.
  7. Close the pinstripe document. We don't need it anymore, and there is no reason to save it.

Change the GlassButton background

  1. Click on the title bar of your GlassButton document to activate it.
  2. Type SHIFT+F5 to open the Fill window. Change "Use:" to Pattern. Change "Custom Pattern" to the Pinstripe pattern we created. Then click "OK". Your document should now look like this:

Making the button shape

  1. Click and hold down the left mouse button over the Marquee tool in the toolbox. When the small window opens up beside it, scroll to the Elliptical Marquee Tool.
  2. While holding down the SHIFT button, click the upper left hand side of the document, and drag out an elliptical marquee until the mouse pointer is nearly at the bottom right hand corner of the document. We want the circle to be a little smaller than the document. Click SHIFT+CTRL+N to create a new layer. When the New Layer window opens, change "Name:" to Button Shape.
  3. Change the foreground color to a nice deep blue. Click the Foreground Color swatch on the toolbar.
  4. When the Color Picker window opens, change "#" to 000066 (those are zeros).
  5. Click "OK".
  6. Back at the GlassButton document, type SHIFT+F5 to open the Fill window. Set "Use:" for Foreground Color. Click "OK". Type CTRL+A to select the entire document. Type CTRL+X to cut out the circle, and then CTRL+V to paste it back. The cutting and pasting centers the circle in your document. In the Layers Palette, change the "Blending Mode" to Linear Burn.
  7. Your document should now look like this: If it doesn't, go back and check each step of the instructions.

Apply distortion to the background

  1. If you have ever looked through a glass of water, you'll notice that the image coming through is slightly distorted. With our button, the background pinstripes are showing through, so we need to distort the lines a little bit.
  2. Hold down the CTRL key, and click the Button Shape layer in the Layers Palette. This draws a selection around our button shape. Now click on the Background layer in the Layers Palette. Click on "Filters">"Distort">"Spherize". Set "Amount" to 66%.
  3. Click "OK". Your document should now look like this:

Add a reflection

  1. Make sure there is still a selection around the circle. Type SHIFT+CTRL+N to create a new layer. When the New Layer window opens, change "Name:" to Reflection. Click "OK". A new layer named Reflection should have been created in between the Background and Button Shape layers, when looking at the layers in the Layers Palette. We need to move the Reflection layer to the top of the palette. Click and hold down the left mouse button on the Reflection layer, and drag it to the top of the palette.
  2. Type D and then X. This changes the foreground and background colors to White and Black. Type G to change to the Gradient tool. Set the gradient to Foreground to Transparent.
  3. Making sure your Reflection layer is selected, start drawing a gradient line from the top of the circle to the bottom of the circle. Hold down the SHIFT key while you are doing this to ensure you get a perfectly straight line. When the line has reached the bottom of the circle, let go of the mouse button. Now type CTRL+D to deselect the circle. Your document should now look like this:
  4. Change the size and shape of the Reflection layer. Type CTRL+T so we can Free Transform the Reflections layer. Grab the "square" that runs along the right side line. While holding down the ALT key, drag the square inwards until the Reflection layer is about 4/5ths the size it used to be. Now grab the "square" that runs along the bottom line. While holding down ALT, drag the square upwards until the Reflection layer is about 3/5ths the size it used to be. Hit ENTER to confirm the transformation. Your document should now look like this:
  5. We don't want the Reflection to be right in the center of the button like that, so type V to change to the Move Tool. Now click the reflection and drag it up until its nearly at the top of the circle. In the Layers Palette, change the Opacity to 85%.
  6. Now your document should look like this:
  7. You could stop here if you wanted to. But lets add a wikiHow style check mark in the middle of the button.

Adding a wikiHow style check mark

  1. Click on the Button Shape layer in the Layers Palette. Now type SHIFT+CTRL+N to create a new layer above the Button Shape Layer. When the New Layer window opens, change "Name:" to Check Mark. Now we need to open the Custom Shape tool. In the toolbox, click and hold down on the Rectangle Tool until a window opens up next to it. Select Custom Shape from the list.
  2. From the top toolbar, change the shape to the check mark shape.
  3. Click on the Foreground Color swatch in the toolbox. When the Color Picker window opens, change "#" to 932200. Click "OK".
  4. On the Check Mark layer, draw a large check mark that is a little smaller than the button. You do this by clicking near the bottom of the circle, and dragging out a shape.
  5. Click on "Layer">"Rasterize">"Shape". Now change the opacity of the Check Mark layer to 80%. Your document should now look like this:
  7. While holding down the CTRL button, click the Check Mark layer in the layers palette. Type V to change to the Move tool. Now hold down the ALT key, and hit the keyboards down arrow 8 times. Now change the foreground color to A72903. Type SHIFT+F5 to open the Fill window. Make sure "Use:" is set to Foreground Color. Click "OK". Type CTRL+D to deselect the layer.
  8. In the Layers Palette, right click the Check Mark layer, and select Blending Options. The Layer Style window will open. Click on Dropshadow. Change "Angle:" to 90, and "Distance:" to 15.
  9. Click "OK".

Some final touches

  1. Right click on the Button Shape layer, and pick Blending Options. When the Layer Style window opens, click on Inner Shadow. Change "Blend Mode:" to Multiply, "Opacity:" to 75%, "Angle:" to 90, "Distance:" to 5, "Choke:" to 0, and "Size:" to 75. Click on Drop Shadow. Leave all the settings to what they are. Click "OK".
  2. And that's it, you're done! Your final image should look like this:



Tips

  • You can click on "Image">"Image Size" to change the size of the image. If you were going to use something like this on a web site, you would definitely want something smaller.
  • You can add text to the button by using the Text tool.
  • You can play around with the Layer Style window to get some interesting results.

Things You'll Need

  • Adobe Photoshop 7 or 8 (CS)

Related Articles

Retrieved from "https://kipkis.com/index.php?title=Create_a_Simple_Glass_Button_in_Photoshop&oldid=353025"