Create Professional Web 2.0 Style Icons in 4 Steps

I have seen quite a few tutorials on this but I think the method I am going to show you is one of the easiest ways to achieve a pretty stunning icon effect. This will only take around 4 steps but I will go into detail on how to create an icon similar to these.

Start a new canvas of 300X300px. I am going to make this icon rather large so you can
see the effect up close.

Next decide what shape you want to make for your icon. I am going with a rounded rectangle shape for this tutorial, but you can choose a circle or any other shape you want.

Pick whatever color you want and grab your rounded rectangle shape tool:

So STEP ONE is to make a new layer and draw your shape. Just use the default color black because we are going to add a gradient overlay later to change the color.

Here is my shape:

Now it is time to use our trusty blend options because you can make so many easy effects with these.

STEP TWO is using the blending options so right click on your layer and go to “blending options”…

I am giong to show you the exact order I used the blending options so you can see each step of the icon.

Use these settings in your blending options:

Gradient Overlay

Stroke

Outer Glow

Inner Glow

Drop Shadow

Wow this is turning out pretty good check out what I have so far:

Pages: 1 2 3

Topics: Design, Icons, Photoshop, Web 2.0