Design a Web 2.0 Style Icon

88695 views | added on 15.09.2007

We will learn how to design a web 2.0 style icon in Photoshop.

  • This is the end result.
  • We will work on a white (#ffffff) background color. Create a new layer with 600 x 300 pixel document size.
  • Press U to select the Shape Tool.
    And make sure that the Ellipse Tool is selected.
  • Drag a shape layer about 175 x 175 pixels and name it "icon_bg".
    Apply these settings to the layer.
  • After these settings, the icon should look like below.
  • Next, create a new layer and select an area like the image below.
  • Fill this area with color #ffffff and apply gaussian blur from filters with the settings below.
  • And set the opacity of this layer to 50%. You will get this result.
  • Then create a new layer and select an area at top-left side of the icon_bg shape layer.
    And fill it with color #ffffff.
    The icon should look like below at this level.
  • This step of the tutorial is like the previous. Create a new layer and select an area like the image below.
    And fill it with color #ffffff. Set the opacity of the layer to 25%.
    The icon should look like below at this level.
  • And add your icon and text.
    I simply added a question mark with "Book Antique" font and a text with "Century Gothic" font.
  • Finally, we will create a simple reflection.
    In order to achieve this, you should select all icon layers except for background and duplicate this layers.
    While all layers still selected, hit Ctrl + E key combination (Merge down).
    Flip this layer vertical (Ctrl + T key combination and right click -> flip vertical).
    And set the position at the bottom of icon.
    Apply a simple mask to this merged layer from quick mask mode with a gradient.
  • Download .psd file here.
Comments
comment on 09.10.2007 by jackorlando
this icon rocks.. thanks..
comment on 14.04.2008 by leoeroz
thanks for this tutorial...
comment on 14.04.2008 by ersin
It is very helpful.. thank you.
Add comment: