Make Web 2.0 Icons in Photoshop

Posted 7 June, 2007 in Tutorials

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

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.

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.

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

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

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%.

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.

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.

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

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%.

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.

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:

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 comments to “Make Web 2.0 Icons in Photoshop”

hot posts » Blog Archive » Make Web 2.0 Icons in Photoshop, June 15th, 2007 at 11:36 am:

• [...] [...]

Free Icons Graphics Buttons » Blog Archive » Download Button, June 15th, 2007 at 12:27 pm:

• [...] See more icons on the web 2.0 page. Also see how to make these icons in the web 2.0 icon tutorial. If you found the graphics of any use, you can buy me a beer!Bookmark to: [...]

Free Icons Graphics Buttons » Blog Archive » Download Icon, June 15th, 2007 at 12:28 pm:

• [...] Download Icon. See more in the web 2.0 icons section. See also the tutorial. If you found the graphics of any use, you can buy me a beer!Bookmark to: [...]

James, June 16th, 2007 at 8:49 pm:

• Very cool, thats so cool.

artisu, June 17th, 2007 at 1:01 am:

• Kind of you to say so!

reezluv, June 17th, 2007 at 9:50 am:

• that’s cool, but what happen when the background color is black?

cyranthus, June 18th, 2007 at 6:00 pm:

• 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?

artisu, June 18th, 2007 at 7:03 pm:

• 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.

oldschoolphotoshop, June 19th, 2007 at 6:33 pm:

• 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.

artisu, June 20th, 2007 at 12:40 am:

• 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.

web doc 2.o, June 25th, 2007 at 6:27 pm:

• cyranthus Web 2.0 is in reference to the glossy style with a shiny table like reflection. It can be done on any color background.

  But it is a way to reference that particular style. Glassy look.

drStrangelove, June 26th, 2007 at 3:05 am:

• 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.

wilmadonna, June 26th, 2007 at 3:08 pm:

• Hi !
  Thanks for this information…
  But I have a question or two…
  In wich format does it have to be saved?
  (jpg, gif or what)
  And how big is the design?
  (cm or pix)

  Thanks!

unscarred, June 29th, 2007 at 11:09 am:

• The future is looking 1980s?

  that has to be the scariest thing i have read all week

artisu, June 29th, 2007 at 5:16 pm:

• 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.

leeps, August 6th, 2007 at 1:55 pm:

• 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

Eris, August 10th, 2007 at 10:34 am:

• 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!

The Duke, October 8th, 2007 at 11:26 pm:

• 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!!

nilesh, December 9th, 2007 at 12:45 pm:

• dude do we need to put any deposit or sumthin or do we need to pay any amount of money to join shuttershock and sell our photos?????

artisu, December 11th, 2007 at 11:49 pm:

• Shutterstock is free to sell.

Talkin’ blues « inklinz | reveries from the bottom of the world, January 20th, 2008 at 10:23 am:

• [...] of these things also isn’t helped by this assumption that all things are better with shiny glass effects. Luckily there are still people making the small things in nice distinctive packages. Check [...]

Dogg, January 22nd, 2008 at 5:46 pm:

• Having the same problem as The Duke and Eris with that mask tool. Anyone know of a simple tutorial on using masks in Photoshop. Yea I know, just Google it, lol!

kunaal, February 1st, 2008 at 3:18 am:

• very usefull content,i liked it, can u out up work on where people r involved,like the ones done for film stars…..

Lab101.co.uk » Blog Archive » Design Links, February 6th, 2008 at 6:38 pm:

• [...] 2d images into pseudo 3d spinarounds Lego Block Tutorial web 2 logo tutorial Luxa – Photoshop Tutorials, Videos, Resources, Tips & Tricks Top 50 Logo Design Tutorials | E [...]

| Design Resources, February 8th, 2008 at 6:13 pm:

• [...] 2d images into pseudo 3d spinarounds Lego Block Tutorial web 2 logo tutorial Luxa – Photoshop Tutorials, Videos, Resources, Tips & Tricks Top 50 Logo Design Tutorials | E [...]

BLOGTIPPS » Blog Archive » ICONS Glanzeffekt Tutorial - auch ohne Grafikprogramm, May 10th, 2009 at 9:32 pm:

• [...] WEB 2.0 Icons und Grafiken zum selbermachen – Tutorial [...]

freerayne, July 15th, 2009 at 10:06 pm:

• 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.

Your comment:

Name (required)

Mail (requried)

Website