This is not a tutorial, but a quick guide and tip on making easy web 2.0 icons and buttons using Photoshop for free. If you don’t have Photoshop, I would recommend downloading GIMP which is nearly as god and free.
There is no clear cut style or design for web 2.0 but the term kind means something that look fresh, clean and new.
It can be glassy, textured, even flat, but most of all clean.
To get an icon clean it needs space and proportions.
The icons I am talking about here are based around an image representation on top of a coloured field that can be of any shape but most often rectangular or circular.
So what you are going to need are the basic image shapes and a background to place it on.
Here I have uploaded blank buttons. Use these to get started although you should note the terms of use on the site. They are free but need a link back if you use the graphics.
If you do not have any shapes, you can get symbolic shapes from Photoshop’s customer shape tool. See what is on offer there or google free custom shapes to download new ones.
Download one of the blank buttons and open it up. Make sure you download the largest version and work with that.
Then place the custom shape over it. Already you will have an icon or button! Before you finish though, try blending the shape with the button using the Layer Style – Blending Mode. You will see that the shape can work in many ways with the colours of the blank button. When you are happing, just save it as a png, gif or jpg file.
It is very easy. With the basic blank buttons, all you need to do is work out what shape to put in it and how to blend them.
Another tip is to use Photoshop’s Image >> Adjustments >> Hue/Saturation feature to mess about with the colour of the button.


Leave a Reply