Hello, today we are going to design an icon using basic PS techniques and layer styles. I will also explain the basic principals on WEB 2.0 design.

So let’s get started. Create a high resolution document.

Then just draw a circle using rectangular path tool (hold shift to draw a perfect circle).

You can just create it on the background. In this case PS will create a layer and fill your circle automatically.

Here we go.

Then overlay it with a little bit lighted color round gradient in the bottom. But Note to selected the whole layer (alt+click), then create a new layer and only after that you can overlay.

Only when shape is selected the gradient will overlay only the selected areas and not all the document.

Here we go.

Now I will use some layer styles.

Now make a new selection using round marquee tool. Further it a little bit.

And copy the selection into separate layer.

Use this gradient.

In almost every such design you will deal with White >to>Transparent gradient.

Here we have it.

Now
use Add layer mask to loose a little bit of lower border. Overlay the
mask with Black >to> white gradient to hide a part of the
border.

Here is our gradient -mask that we use: from lower to upper edge.

Now we will write some text to make the icon more colorful and filled.

There
are some effects on the text that I use. You know, you should study all
the layer styles for good. If you will know them you will faster decide
what you need.

With layer styles you can make your image look more like in 3d space, specially with shadows.

I’ve changed the Stroke option a little bit.

Now any background – doesn’t matter. And a little bit of presentation 🙂 .

Enjoy!

Another example: