Make 3D Web 2.0 Icon for your site with ease !

Well this is the latest trend, most of the well known sites has web 2.0 icons. Like many people, I am amazed at look of these icons. These icons generally have glass effect with tinge of 3D shadow.

I tried to make icon for my site(tothepc) and was successful to some extent. Most of my friends liked the icon, however there were some brickbats like: icon is too light, colors etc etc etc.

Here is my step by step guide of making a cool icon for your website or blog. FYI Davinder is my name !

Step1:Decide on the dimension of an icon. This depends on the structure of the template your are using. I went for 300px X 93px
Open Photoshop and and type the text for the icon. Then jazz it up with some stylish font type, I used ‘Garamond’

You can download and install font from this website or Google around. To install a font: go to C drive, Windows folder, fonts folder. Then click on File, click on install new fonts.

Step2:Create another text format of the stuff we have written till now. You can either write it again or use duplicate later function in photoshop.

In the box located at the bottom right part of Photoshop window, right click on the text you wrote in the first step.

In the pop up menu click on duplicate layer option. Then move the text as shown in the picture.

Step3:Now we need to rotate the second text layer and align it as shown in the picture. We can easily do this using rotate function in photoshop.

Here is how I did, Select and highlight the second layer and then press Ctrl and T. We will see guide lines forming rectangle around the text of second layer.

Move your mouse to any corner and then rotate the text. See the result in the picture.

Step4: Now we need to use shading or gradient to give that shadow effect. It is also very easy to implement.
Right click on the second text layer and then click on blending options in the pop up menu.

Then click on gradient overlay option in window titled ‘layer style’ Select gradient as ‘white-black’ shading. You can chose any based on the color scheme being used.

Step5: This is an option step, but is required to give that polished look to the icon. Here we need to add a vector shape and then increase transparency to give that 3D look.

In the toolbar on left select ‘rectangle tool’, then pick a oval shape and draw as shown in the picture. Fill white color in that and then we need to increase the transparency.

For this, highlight the oval shape layer and then move the opacity slider t about 30%. You can find opacity slider, right above the first layer in the little box with title ‘layer’

So, after doing all the above simple steps, we will get final logo in that web 2.0 look or what I say is 3D look. Of course, we can polish it further.

However, since I am still learning on it, I may write about enhancement in near future. In case you face any issue in performing any of the above step, feel free to contact me by adding a comment here.