Web 2.0 RSS Icon

This tutorial will show you how to create a 3D Web 2.0 Style RSS Icon.
First of all you need to select your colour - whatever fits in with your website - i'm using a typical RSS orange. Once you have selected your colour, draw a rounded rectangle (5px ish corners). Make sure it's a perfect square by holding shift while you draw. Rasterize the shape as soon as you are happy with the colour, shape, and size. Name the layer Shape.
Next you need to add an Inner Shadow style to the shape. You need to use the following settings: Blend Mode: Multiply Colour: Black Angle :120 Distance: 2px Choke: 9px Size: 34px
You now need to create another layer below the shape layer, and call it Border. Make a selection of the shape in the "Shape" layer, then switch back to your border layer. Expand the selection by 3px - 5px depending on how thick you want your border. Fill this layer with a colour - it matters not what colour.
Add a gradient style to the background, and have it fading from grey, to white, then back to grey.
Make a new layer, but this time above the Shape layer. Call this layer Glow. Select the Shape again as you did when you created the border, but this time contract the selection by about 3px. Use the gradient fill and select a colour that is a lighter shade of the colour of your Shape, and set the fill to Foreground to Transparant. Fill the selection on your Glow layer to about half way.
Next you should make a new layer on top of that, and this time we shall call it Gloss. Once again select your Shape, Contract the selection by about 3px, then use the Oval Selection tool to subtract the bottom half of the selection. Using the gradient fill tool once more, set the foreground colour to white, and then fill the selection as shown.
This is the point where you insert your icon. In this example i am using the RSS icon (but you can use anything you wish). You need to insert your icon above the Glow, but below the Gloss. Give your icon a Bevel and Emboss style, and use the following settings: Style: Outer Bevel Technique: Smooth Depth: 200% Direction: Down Size: 2px Soften: 0px Use Global Light: Unchecked Angle: 66 You can leave the icon like this should you wish as it looks great, but if you want to make it fantastic read on!
You should merge your layers at this point. Change the perspective of the shape to bring the top corners closer, then you need to transform the shape and move the bottom two corners upwards.
To add depth to the icon hold ctrl + alt then tap the up arrow. The more you tap the up arrow, the deeper the icon will get (you may also notice that it is creating a new layer for each tap). When you are happy with the result, merge the layers again.
Finally we need to add a shadow. Add a drop shadow style, and use the following settings: Distance: 4px Spread: 0px Size: 5px Finished! Fantastic! All you need to do now is size the icon to suit.

Tutorial created by Icora.co.uk Web Design