Great Design

Welcome to Great Design. This website will look at the best designs on the internet. As well as tutorials teaching you how to produce amazing designs and get good looking results.

Creating A Cool Web 2.0 Icon

Jun 16, 2007

Web 2.0 are those cool icons which you see every where, but do you no how to make them? This tutorial will explain how. Click on any of the images for the full version.

Stuff you will need:

Photoshop (or Similar)

Step 1)

The first step is to create you canvas, this can be any size you want it to be.

Step 2)

Add a shape to your canvas to a new layer and colour it.

Creating A Cool Web 2.0 Icon
Step 3)

Apply Bevel and Emboss to the layer using Size: 200, Highlight white at 100% opacity and a dark blue shadow at 75% opacity.

Creating A Cool Web 2.0 IconStep 4)

Apply a stoke around the shape, in the base colour you picked, size 4.

Creating A Cool Web 2.0 Icon
Step 5)

Apply an inner glow, white, size twenty.

Creating A Cool Web 2.0 Icon
Step 6)

This part becomes a little tricky, you need to create a new layer, right click and create this into a clipping mask. Apple a white to transparent gradient. Adjust the opacity as necessary.

Creating A Cool Web 2.0 Icon
Step 7)

Slightly rotate the layer so its at an angle.

Creating A Cool Web 2.0 Icon
Creating A Cool Web 2.0 IconStep 8)

Again, do this the same for a darker shadow at the bottom, adjust the opacity as necessary.

Creating A Cool Web 2.0 Icon
Step 9)

One of the defining points of web 2.0 icons is the reflective shadow. The method I used is to copy the layer, and remove anything except the white, and reflect it as shown.

Creating A Cool Web 2.0 Icon
Step 10)

Apply a layer mask to reveal all. And then add a black to white gradient, this hides parts of the image, leaving only the shadow.

Creating A Cool Web 2.0 IconStep 11)

As shown you have a cool web 2.0 icon which you can use on your websites.

Creating A Cool Web 2.0 Icon
The cool features of having a simple and effective logo is that you can scale the image to any size.


Creating A Cool Web 2.0 IconKinda cool don't you think. Leave your comments, with your web 2.0 creations.

4 comments:

Anonymous said...

How do I get rid of the excess white from around the white-to-transparent gradient if I use a different colour background for my image?

James Powell said...

I'm not a 100% sure what you mean. Could you link to a picture.

Anonymous said...

To the original poster, I think you should be able to do a quick mask and use a gradient to partially select and delete the second star layer in order to have it go to transparent, making it compatiable with non-white backgrounds. Good Tut!

James Powell said...

Thanks mate