Submit Photos & Illustrations to Shutterstock and make $$$!

Web 2.0

This is a tutorial on how to make glassy icons. This is just one of many ways to create web 2.0 images. I have tried to keep it simple but it assumes you know your way arround Photoshop.


1. Start off with a basic image or text. In this case I chose a butterfly using the Custom Shape Tool. I am working on a 300 x 300 pixel white canvas.

butterfly 2.0

2. Rasterize the butterfly layer.

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

icon 2.0

4. Stroke the layer with a orange stroke at 4 pixels in size.

graphic 2.0

5. Apply a white inner glow to the layer at size 20.

clipart 2.0

6. Now create a new top layer. Using the mask tool, create an oval at the top from one side of the image to the other. Fill this mask tool using the Gradient Tool from white at the bottom to clear at the top. Now slant the layer a little anti-clockwise and change the layer opacity to around 50%.

web design butterfly highlight
7. Again create a new top layer and create a new oval mask at the bottom of the image. Now fill this mask using the gradient tool with black at the top down to clear at the bottom. Give it opacity 30% and a soft light blend mode. Angle the layer in the same way as the highlight and moce it around until it look well placed.

buttons Shading

8. Move the whole image (all layers) to the top of the canvas.

9. There are many ways to create the mirror effect under the image, but simplest I think is to just copy the whole image then paste it back. You do this by Ctrl + a then Shift + Ctrl + c then Ctrl + v.

9. Flip the whole layer verticaly. Now move it down so that the top of the new image just touches the bottom of the original image.

Glassy icon

10. Apply a mask to the new layer from the bottom and up, covering the new image.

Glossy icon

11. Using the gradient give it a white bottom moving up to clear at the top of the new layer. Now give the layer opacity 50%.

Fin

12. Now play around a little with various settings until you are happy. I finished by creating a new top layer and with the brush tool at size 100 just clicked once on the top left wing, just to give it a little extra glare up there.

glassy butterfly icon glassy butterfly icon

Feel free to play around and make variations. One thing you can do is angle the image so that it is standing on edge. This often looks good with a reflection:

Mobile cell phone

Extra tip:

Want to make some extra money? I have made thousands (over $2000 to date) by making some web 2.0 icons and then selling then on Shutterstock. I just made them, and put them on Shutterstock and left them. Every month I get paid now for doing no extra work. The honest truth is that Shutterstock is an affiliate link but if you want to make extra money for relatively little work, this is great a great way of doing it.

27 thoughts on “Make Web 2.0 Icons in Photoshop

  1. i dont understand what constitutes as a “web 2.0 icon”
    just something that looks glossy and trendy? or something with well done design? why dont you just call it website icons?

  2. This way works on white. Use the eraser to fade out the mirror image to get it to work on black. That does not fix the reflective layers. You will just have to mess with them. It is just meant to be a simple way to do it. I need to write a more detailed version for any background.

    web 2.0? I know. What is it? Nobody knows, but many graphics have certain attributes that are regarded as web 2.0 these days such as the mirror effect, and highlighting. Also stripes are another web 2.0 feature, but I have not found a good definition for web 2.0 yet.

  3. Black background? use layers.
    The background doesn´t matter if you do this over a transparent background.

    web 2.0 logo = mirrored reflex under the “usual” artwork.
    it´s a fad, it will pass.

  4. All true. The fad will pass. Have a look at the new Olympics logo for London 2012. The furure is looking 1980s.
    This tutorial only works on white however but if you know photoshop you will not find it a problem to work around it.

  5. Quote: i dont understand what constitutes as a “web 2.0 icon”
    just something that looks glossy and trendy? or something with well done design? why dont you just call it website icons?”

    This design trick was initially the OSX scheme called ‘Aqua’ now its seen in any format anywhere.

    I detest quoting ‘Wikipedia’ but I’m obviously slightly less lazy than you, and apparently better informed about the banal…

    http://en.wikipedia.org/wiki/Web_2.0

    Good day.

  6. Yep. To add to the 1980’s thing, I have just been commissioned to create a lot of flash graphics that are all retro 1980’s and this is for a major financial institution in London.

    Wilmadonna – I am not sure I understand the question, but save them as gifs mostly unless you find 256 colours are not enough. Then try JPGs or PNG. Mostly gifs are fine for icon size work. JPGs will loose a little quality but handle colours much better than gifs. PNGs are the best for color and quality but then the files can be huge.

  7. Great tutorial – thanks. As a newbie to Photoshop, can you explain in Point 6 “use the mask tool” – is this the same as the marque tool?

    Also how do I select a transparent colour to go from “white at the bottom to clear at the top”?

    Many thanks

  8. I’m a little lost by what you mean by “mask tool”… I was using the selection tool and I end up with black ellipse outside of the shape as well as inside of it. I’ve looked at masking and can’t find a way to add the gradient to the image but not the background which must be possible? Sorry I know I’m being dumb but a hint would be muchly appreciated!

  9. I am having the same problem as Eris… or at least close to it. I know what the mask tool is, but not very experienced in using it. I create the new top layer (with nothing in it), click on the mask tool, click on the marquee, create the oval, and then click on the gradient tool, create the gradient, but no gradient appears. Am I using the wrong type of Mask (Vector, Layer or Quick Mask)? Should the “Top layer” actually be a duplicate layer? Please help!!

  10. Pingback: | Design Resources
  11. Thanks..this was awesome.
    just a by the way. I’m working on icons at the moment. most of the time… your client would want the background to be transparent. Gifs are the easiest, and you’re right, the smallest in file size. and it supports transparency/bitmaps are also in favor amongst some.

    with gifs you will have a slightly jagged edge around your icon, depending on the size… when saving the icon, in the gif dialogue box…choose matt: custom and make it the colour of your background.

    what this does is it lines the edge of the icon with your background colour, and takes away much of that jagged look. this especially helps with darker colour backgrounds***

    ps…web 2.0 is just technical jargon, it is a loosly used term that was coined in an article, but it implies a new generation of web work. all round. design being a major part of that.

Leave a Reply