Mished  

Home Articles Register

Reply
Old 03-22-2008, 07:36 AM
 
Default Web 2.0 RSS Icon

<table border="0" cellpadding="3" cellspacing="0" width="100%"><tbody><tr><td colspan="2" valign="top">This tutorial will show you how to create a 3D Web 2.0 Style RSS Icon.
</td></tr><tr><td valign="top">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.</td><td align="center" valign="top" width="200"></td></tr><tr><td valign="top">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
</td><td align="center" valign="top"></td></tr><tr><td valign="top">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.</td><td align="center" valign="top"></td></tr><tr><td valign="top">Add a gradient style to the background, and have it fading from grey, to white, then back to grey.</td><td align="center" valign="top"></td></tr><tr><td valign="top">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.</td><td align="center" valign="top"></td></tr><tr><td valign="top">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.
</td><td align="center" valign="top"></td></tr><tr><td valign="top">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!
</td><td align="center" valign="top"></td></tr><tr><td valign="top">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.</td><td align="center" valign="top"></td></tr><tr><td valign="top">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.</td><td align="center" valign="top"></td></tr><tr><td valign="top">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.
</td><td align="center" valign="top"></td></tr><tr><td colspan="2" valign="top"></td></tr></tbody></table>
Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is On
Forum Jump


All times are GMT. The time now is 03:08 AM.


Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Display Pagerank
Web Design By Icora