Dumpster-fairy.com

Completed button

1.) The Metal Ring

1. Start by selecting the Ellipse Tool and draw a circle with a diameter of roughly 65px. Color doesn’t particularly matter because we’ll be using Layer Styles to change the appearance.
2. In Layer Styles, we’ll be using Drop Shadow, Bevel and Emboss, Satin, Color Overlay and Stroke. Use the following settings for each of the styles:
   

   Drop Shadow Settings

   

   Bevel and Emboss Settings

   

   Color Overlay Settings

   

   Satin Settings

   

   Stroke Settings

3. Now, you should have something that resembles this:
   
4. Make sure that you are on the same layer path, and using the ellipse tool again, create a circle that is 10px smaller than the first one and then center it inside the other circle. While the new path is selected, press the - key to subtract from the outer shape area. Now, you should have a ring that looks like this:
   

2.) The Button

1. Start a new circle path layer above the one we just created. Make sure that the new path is slightly bigger than the inner circle of the ring without showing on the outside.
   
2. Once again, we’ll use Layer Styles to adjust the appearance:
   

   Inner Shadow Settings

   

   Inner Glow

   

   Bevel and Emboss Settings

   

   Bevel and Emboss Contour Settings

3. Once you’re through all of that, your button should now look like this
   

3.) The Icon

1. The icon can be anything you want it to be. If you want, you can do a quick search on Google, Bing or Yahoo for the vector logos of your favorite social networking sites to use. For the example, we’ll just use the envelop custom shape that comes with Adobe Photoshop CS4.
2. To add more depth to the shape, place a rectangle of the same size as the envelope custom shape behind the envelope, then apply a Gradient Layer Style to the rectangle and adjust the gradient accordingly.
   

4.) Finishing Touches

Now, we can stop with what we have, or you can continue on and add the reflections. The reflections use a combination of paths and gradient layers.

Button Closeup

Once again, it’s up to you to decide how the reflections should look. Yes, the buttons can be any color you choose. You can see finished examples here.

Have fun!