Last edited by KermMartian on 02 Feb 2007 02:22:16 am; edited 1 time in total

Over the past few weeks, I have increasingly seen Web 2.0 icons and graphics beginning to dissolve and divide into two cleanly delineated camps. Those with smoothly blended images are beginning to fall into habits resembling the icons on the screen of iPhone pictures spread across the 'net. The other, less widespread group, consists of those putting a strong delineating line or curve at the center of their icons and graphics, invoking the style of images in the newly-released Windows Vista operating system.

Vista Style Disassembled

A Vista-style graphic generally consists of at least five distinct elements. Starting from the bottom layer of the image, you first have a solid-color matte background. Generally it has two or four rounded corners, although other shapes are also permissable, including rectangles and circles. Next is a highlight layer, made with a gradient of a lighter shade of the background. This is drawn from full opacity at the bottom of the image to full transparency around one-third of the way up the image, making a shorter but more intense lower highlight. Next is the actual content of the object, be it text, graphics, or beveled graphics. Directly above the contents is an upper gloss or glow layer made with a white gradient drawn from the top to bottom of the image. Generally this layer is subsequently dimmed to 90% opacity. Finally, the bottom half of the layer (for a rectangular image) is deleted. For a circle or other shape, an arc is used to cut the bottom half of the glow off. The last layer on top is a 1-px solid-colored border, the same color as or darker than the background, in one or two pixels from the edge.

iPhone Style Disassembled

The typical "iPhone"-style graphic looks similar but with several key differences from a "Vista"-style image. Firstly, there are only four major components, as this type lacks the top 1-pixel border. If given a border, it looks very similar to a Vista-style graphic, yet lacks some of the sharp angularity of a Vista image. The bottom layer of this type of graphic is identical to the first. The second, the lower highlight layer, is in this case drawn from full opacity at the bottom to full transparency at roughly the middle of the image. This creates a highlight that is larger yet somewhat less intense. The contents layer comes next, followed by the upper gloss or glow. Instead of being sharply cut off, however, it is drawn smoothly from full opacity at the top of the layer to full transparency at the middle of the image. The layer is then, as with the Vista-style images, set to around 90% opacity. The overall image is much smoother yet less distinct than its counterpart.

The Upshot
So what's the point of all this? What, metaphorically speaking, do we care about the difference? Not surprisingly, since I went through the trouble to design and write this, there's a substantial point. Many websites and applications make the unfortunate mistake of mixing the two types of graphics, to relatively unattractive results. When making a particular theme, program, or website, it's very important to stick with either "Vista"- or "iPhone"-style graphics throughout, as combining the two can be as off-putting as a badly-coordinated color scheme.

Have your own thoughts to add to this or any other topic? Want to ask a question, offer a suggestion, share your own programs and projects, upload a file to the file archives, get help with calculator and computer programming, or simply chat with like-minded coders and tech and calculator enthusiasts via the site-wide AJAX SAX widget? Registration for a free Cemetech account only takes a minute.