Create Glass Play & Pause Buttons with Photoshop

Glass play and pause buttons in Photoshop
Glass play and pause buttons in Photoshop


Here’s How:

  • Open Adobe Photoshop » Create a new document.
  • Create a new layer. Name it Glass ball.
  • Select the eliptical marquee tool and draw a circle.
  • Set the foreground color to “#0281F7” and the background color to “#04F3FC”.
  • Select gradient tool, press and hold the shift key and drag it from the top to bottom of the circle (Shift key helps you to draw it only horizondal, vertical or a 45°).
  • Add a layer style “Stroke”. Set the stroke width 3 and color is black.
  • Select the eliptical marquee tool again and draw a elipse in a new layer.
  • Change the foreground & background colors to default (Press D). Swap the colors (Press X). Now the forground color will be white.
  • Fill the gradient color (Hold the shift key and drag vertically).
  • Create a new layer and name it arrow.
  • Select polygon tool. Set the sides to 3. Press and hold thd shift key and drag horizondally.
  • Add some layer styles to arrow layer. The settings are below
  • Innershadow settings.
  • Innerglow settings. The color is “#E0FFFF”.
  • Gradient overlay settings. The color is “#02A9E0” to white.
  • And the stroke settings is same as we applied for glass ball layer.
  • The button is ready. Now we are going to add a shadow. The shadow include a light which passing into the glass ball.
  • Select the eliptical marquee tool again and draw a circle on a new layer. Name it shadow.
  • Feather the selection. Press “Alt+Ctrl+D”. Give the feather radius value 25.
  • Set the foreground and background colors are the same which we used for glass ball.
  • Select gradient tool, click to open the gradient picker and select foreground to background. Select the radial gradient.
  • Press and hold the shift key and drag vertically from the center of the elipse.
  • Go to the edit menu » Transform » Scale.
  • Drag the center top node to down. When the round shape comes to an elipse press the enter key. Adjust the size of the shadow you need.
  • Move the shadow layer down when it reach behind the glass ball layer.
  • That’s it
Share with Friends
[Facebook] [Jamespot] [Reddit] [StumbleUpon] [Twitter] [Email]

4 thoughts on “Create Glass Play & Pause Buttons with Photoshop”

  1. This is beautiful art. I\’m not a designer; don\’t even own Photoshop.

    May I use your icons on my website?

    Thanks for considering it.

    Joe Hage

  2. Thank you for visiting my website Joe.
    You can use the icon for your website but only forbidden to redistribute other than this website.
    And thank you once again for like my graphics..

  3. truly great i love ur website your work will you tell me something great thing about your designing skill and animation skill

Leave a Reply

Your email address will not be published. Required fields are marked *