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!

Download: snowflakes.zip

Enjoy, and Happy Holidays!

Here is a set of Gel Styles for Photoshop (*.asl format) available for download at Deviant Art [link]. Just click on the link that says ‘download‘ on the left-hand side of the preview screen. I originally created these styles in Photoshop CS, and they’ve worked all the way up to CS3. I recently bought Photoshop CS4 but I haven’t had the chance to test them out.

Web 2.0 Gel Styles for Photoshop by Jessica C. Green is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.
Permissions beyond the scope of this license may be available at http://ardathksheyna.deviantart.com/art/Gel-Styles-and-Outlines-23252763.

1. Create a new document: File > New… Any size document will do, as long as its bigger than 400×400.
2. Set the foreground color using these values (r:128 g:127 b:132). Using the Paint Bucket tool (G), fill the entire document.
3. Select the Shapes tool(s), (U) or (Shift+U), depending on if you want to use a regular shape, or a custom shape. Make sure that the Paths option is selected (in the Shapes tool bar). Now click+drag to create your shape.
4. Select the Path Selection tool (A), right+click on your path and choose make selection. Leave all the default options the way they are, ie: feather radius = 0, anti-alias (checked), and click OK.
5. Press (M) or (Shift+M) for the Rectangular Marquee tool.
6. Go to Filter > Noise > Add Noise… and use these settings: Amount = 25%, Distribution = Gaussian, Monochromatic (checked). Click OK.
7. Now, go to Filter > Blur > Motion Blur… use these settings: Angle = 0°, Distance = 21. Click OK.
8. Rectangular Marquee tool should still be selected; if not, press (M) again. Right-click anywhere around the selection or inside of it, and select Select Inverse.  Now press (delete), to clear the selection.
9. Now click outside the selection to clear it. Now, go to Layer > Layer Style > Bevel and Emboss (or use the Fx shortcut on the Layers palette). Play around till you find something you like =)

To create just a simple, tileable texture:

• On step 1, use a size that is easily tileable (something less than 256×256). Flatten the image after step 2 (only if the image isn’t already flat).
• Skip steps 3 thru 5, 8 and 9.
• After step 7, go to Filter > Other > Offset, and set your horizontal offset to half of your document width. Do the same for the vertical offset (half of document height) just to check it; this is usually fine. Make sure that Wrap Around is selected in Undefined Areas. Click OK. You’ll have a seam down the middle of the document.
• Now, go to Image > Canvas Size…, and change the Canvas extension color to match the color fill of the document. Making that the anchor is set to the middle, change the document height to 300 and click OK.
• Using the Rectangular Marquee tool, make a narrow (not more than 100 pixels) selection around the entire length of the seam in the middle of the document. Right-click and select Feather… Change the value to somewhere between 12 and 25 pixels. Click OK.
• Go to Filter > Blur > Motion Blur… and use the same settings for step 7. Click OK. Use Canvas Size… again but set height back to 256.
• Go to Filter > Other > Offset, to test your tile.

Now, you should be finished!

note: the instructions in this tutorial are aimed primarily at Photoshop users but can be utilized in any image editing program that supports layers and blending modes. The reason that this tutorial came about is once upon a time, I had a set of plug-ins that I’d paid for that did exactly what I’m going to cover in this tutorial. Well, I lost the disk and didn’t really feel like paying for them again, so I came up with my own way of creating a “dreamy” effect in Photoshop using just the plug-ins that come with Photoshop.

1. Start by opening your document in Photoshop. You’ll have one layer that is labeled “Background” in italics. Click and drag that layer over the Create New Layer icon, or go to Layer > Duplicate Layer… and click OK.
2. You should have a second layer called “Background copy”. Now, press Shift+Ctrl+U (Windows) to desaturate that layer.
3. Click on the Blending Mode drop-down at the top of the Layers panel, and select “Overlay.” So far so good. You’re almost done.
4. Making sure that your “Background copy” layer is selected, go to Filters > Blur > Gaussian Blur. Now play around with the blur level till you have something that looks nice. I usually go for a blur value of 10.
5. Click OK, and now you’re done.

To make things easier, I’ve created a set of actions for Photoshop.

Download Zip 8Kb: Dreamy Photo actions

This software is licensed under the CC-GNU GPL.