Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

Design an icon

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.



Deisgning Orb Button

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.



Deisgning Orb Button



Deisgning Orb Button

Here we go.



Deisgning Orb Button

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.



Deisgning Orb Button

Here we go.



Deisgning Orb Button

Now I will use some layer styles.



Deisgning Orb Button



Deisgning Orb Button



Deisgning Orb Button

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


And copy the selection into separate layer.



Deisgning Orb Button



Deisgning Orb Button

Use this gradient.



Deisgning Orb Button



Deisgning Orb Button

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



Deisgning Orb Button

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.



Deisgning Orb Button



Deisgning Orb Button

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



Deisgning Orb Button



Deisgning Orb Button

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



Deisgning Orb Button

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.



Deisgning Orb Button



Deisgning Orb Button



Deisgning Orb Button



Deisgning Orb Button



Deisgning Orb Button

I’ve changed the Stroke option a little bit.



Deisgning Orb Button



Deisgning Orb Button

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

Enjoy!



Deisgning Orb Button

Another example:



Deisgning Orb Button

Comments