Fortunately, the days when only one bit was given for transparency (that is, a pixel was either transparent or not) are long gone. Thanks to the 8-bit alpha-channel, the creation of extremely beautiful icons with perfectly smooth lines has become much easier. The edges of icons don’t look like stubs any more, but this is not the only benefit of alpha-channel usage. Now we have the ability to inscribe icons with transparency elements (such as magnifier or recycle bin) in any background. So why not use this opportunity? I would like to discuss good and bad ways of using transparency, and I have some demonstrative examples (including mistakes!) from my work.
During the creation of an application icon, you should remember that in future it could be placed on a desktop with an unpredictable background. And if the icon has glass (transparent) elements, then they had better be really transparent. This is also the case for toolbar icons, because toolbar background colour may be changed, for example, when a cursor is over the icon.
I recently had the opportunity to draw icons and background images for a magazine. These were more like illustrations than icons, but that doesn’t really matter. Three of them contained glass elements: magnifier, recycle bin and hourglass. It seemed that everything looked good until the background colour was changed by the client from green to blue.
At once it became clear that I was wrong. I had to repaint my pseudo transparent elements from green to blue too. This could have been avoided if I had made them really transparent in the first place.
Here is another unpleasant story: this rabbit was one of my favourite works …
…but once I saw it on a dark background…
I didn’t like it any more.
Need custom icons?
Stock icons can look ok but nothing beats custom icons designed specifically for your app, software or website
When you inscribe an icon into a background and add reflections to the background, you should also remember that the background could be anything. If you use transparency instead a colour, you can avoid some mistakes and even make the icon much more attractive. Let’s take the Find icon from the old but very nice icon set SNOW.E 2 as an example. The glass part of it is really transparent, but the icon looks a little bit lifeless and alien on the colour background.
If we add transparency in place of background reflections, we can make the icon more perfect and realistic.
With the correct approach the bunny should look like this:
I would like to mention one more important thing about transparency: its shadow. If you want your icon to look good on any background, you should use black colour with the required transparency for the shadow. Otherwise you can get a dirty colour blur, instead of a shadow on a dark background.
So if I want my icon to look good on any background I try to follow these transparency rules:
- All transparent parts of the icon (for example, glass, ice, water, whatever) must be really transparent.
- In place of background reflections it’s better to use transparency.
- An icon’s shadow should be black with the required level of transparency.
