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.



  1. unbelievable easy to do, but if you don’t know how, is a very thankful tool.
    Thanks for this succinct tutorial who help us without need to read pages and pages of unnecessary things to do.

  2. Since you have a white oval hanging over the icon with low transparency, how would you use this icon against shaded backgrounds? (You’d have to change the oval’s fill to match whatever background for every instance of the button. Is there a way around this?

    • Emily; after create the oval, select with the magic wand tool the text behind it, then change to the oval layer and delete it, in that way you only keep the part of the oval who intersect the letters.

  3. Thank you for this! The other tutorials I found had, like, 30 unnecessary and complicated steps.

  4. great tutorial, ill be sure to use it on my site

  5. Suprisingly easy to do, thanks.

    I’ll try this on my new logo :)

  6. Thanks for sharing..

  7. Lovely tutorial, thank you for sharing.

  8. Great tutorial! Thanks :D

  9. Great, I m sure you can make cool icons now !

  10. HA HA! THAT’S how my husband makes those cool buttons for me. I’m gonna blow him away now and make one of my own. Thanks!

Add a Comment