Mar 13 2009
Icons of Web 2.0 and How to Create Them
We see a lot of icons on computer displays. They are not new to us since every time we use the computer or connect to the Web, we encounter different icons and have become quite useful for both users and web developers. They are used in web sites since they require little space in web pages while in a computer desktop, they are used to transport the user from one window to another. An icon dates back to the year 1970 where it was developed by the Xerox Alto Palo Research used as an instrument for constructing computer interfaces so neophytes could easily grasp the idea behind this computer technology.
Later, Microsoft Windows and the Apple Macintosh popularized their icon-driven interfaces for their
operating systems. Although, today, we are now on Web 2.0, icons are still very useful on many web sites.
Role of icons in a user interaction
The modern day icons, also called Web 2.0 icons represent anything a web developer may want the way it has to. Using icons on web sites promotes user friendliness since users will immediately know by the image of the icon what it is all about. Different icons have different representations and the distinction between each other can be shown by:
• Distinction in sizes
• Patterns of contrast
• Composition
• Use of shadows and frames
• Contrasting of colors
• Animation
Creating a Web 2.0 icon
Using Adobe Photoshop, you could create a Web 2.0 icon for your web site. With these simple steps, you can make your very own Web 2.0 icon:
1. The first thing you have to do is to choose the color of your icon. Make sure the color you have in mind fits well into your web site’s whole layout. Once a color is selected, draw the shape of your icon. Most Web 2.0 icons are rounded rectangles. Rastesize its shape when you have seen that its color and size match well with it.
Name this layer, Shape. You may also want to make a few adjustments such as adding an inner shadow on the edges of the icon.
2. Create a second layer just below the shape layer and you may call it a Border. Once you have chosen the
shape for the first layer, go back to the border layer and expand the thickness of the border the way you want it to.
3. A gradient style may be added to the background to have your icon a fading effect.
4. Make another layer and place it above the Shape layer. You can call this layer Glow. Go back to the Shape layer and make use of a gradient fill.
5. Make another layer above the Glow layer and name it Gloss. Go to your Shape layer and make the necessary adjustments so that your layers are all in order.
6. Once you are satisfied with the appearance of your layers, this is the time where you may insert your own
icon. Insert the icon just above the Glow layer and below the Gloss layer. To make your icon stand-out,
you may apply the Emboss and Bevel style on it.
7. If you are satisfied with the way your whole icon looks like, you may size the icon to your likeness. If
not, you may always experiment on the different tools of the Photoshop and see its after-effect.
Here is where this lesson ends for today. We really hope you enjoyed this lesson too.
You will receive the next lesson in 7 days. Next week’s lesson will have the following title:
“The Need for an Adaptable CMS in Web 2.0″
Copyright(C) 2008 by John Delavera & Reimund Lube
