Home > Articles > Programming > User Interface (UI)

  • Print
  • + Share This
From the author of

Now You See It...

While some of your icons' images may display as a perfect square, some may need to depict objects with irregularly shaped outlines. To that end, for best appearance they'll need to include a transparency effect that lets the color or pattern used in the desktop's background show through.

Macintosh icons enable this by requiring a mask to be saved with every icon file. An icon's mask serves two purposes, really: In addition to being used by the Finder to outline the icon against the desktop background, it also serves as the clickable area within the icon image that selects the icon. Adobe Photoshop is one graphics editing program that facilitates saving masks (or alpha channels) with any image.

Enabling transparency is less complicated under Windows. If you've worked with BMP files, you may know that the pixel in the upper-left-hand corner of your BMP determines the transparency color. A C programmer building a custom application would most likely expect to receive graphics intended as icons in BMP format — and these, then, would indicate the transparency color in the image's upper-leftmost pixel.

Similarly, you can simply rename a .bmp graphic to a file with an .ico extension to create an image with built-in transparency that can be leveraged for use as a Windows icon — although this will store only a single version of your image at a given size and color depth. Equally straightforward, applications designed for use as image editors (discussed in the second part of this article) typically include options for specifying a transparency color. Web designers used to specifying a matte color in Photoshop or a transparency color in Fireworks will find that this is a similar process — just a different execution for indicating what areas of the image should drop out in its final display.

  • + Share This
  • 🔖 Save To Your Account