Home > Tutorials > What is an Image Strip?

What is an Image Strip?

 

If you're a developper, you probably use toolbars in your applications. Each command in a toolbars is represented by a button containing an icon. When you create your toolbar, in addition to creating the buttons, you must populate it with the images you want to associate with each button. This is done through Image Lists objects (read more about Image Lists). First you must create and populate an Image List, then associate it to the toolbar. Note that modern UI SDKs and developement libraries such as MFC permit associating the images directly to the toolbars. The Images Lists are created in background, so you don't have to deal with this.

To populate the toolbars, you can add each image separately from an icon file (ICO format), but this is not recommended. Instead, it is much easier to use a wide bitmap containing several images placed side-by-side. That way, all the images are added automatically in one single operation. This image is called an "Image Strip" or "Bitmap Strip":

Image lists support image strips in different color dephs: 4 BPP (16 colors), 8 BPP (256 indexed colors), 24 BPP (RGB true color) and 32 BPP (RGB true color with alpha channel). In 32 BPP images, the transparency is natively coded in the alpha channel. It permits creating nice toolbars with smooth edges and shadows.

For color depths 24 BPP or less, the transparency is coded by using a fixed color. Each pixel that have this exact color will be converted as transparent when the image is loaded in the toolbar. Usually, the color used is a flashy green RGB(0,255,0) or magenta RGB(255,0,255). The problem of this method is that if you use a pixel of that color in your icon image (not the background), it will be converted as transparent. The other issue is the poor quality of the borders (around the icons) because it does not permit smooth transparency. In other words, a pixel is either 100% transparent or 100% opaque, there is no variable transparency. It results in "aliasing" on borders for icons with rounded shapes.

All icons in an image strip have the same size and the same color depth. If you want to include 2 sizes of icons for example in an application, you must create 2 different image strips. Modern applications, including those with the new Ribbon toolbar, require several image strips with different sizes and different color depths.

Once the image strip is created and implemented in your software project here is the result that you get:

 

How image strips are handled by IconWorkshop?

When you open an image strip in IconWorkshop, it is automatically detected and opened in an editor window. The image strip is virtually "cut" and each image is placed separately in a list at the top of the editor window. See below how the different images appear in the list:

As you can see, the images are indexed from 0. This has been intentionaly done to be compatible with the way images are indexed in source codes. From here, the procedure is quite simple. You select the image and work on it in the editor area below. You can also copy/paste images in the list, add/remove images, use drag & drop to change image order and more.

When done, just save the document. All the images are assembled together to remake the image strip. File formats for image strips are BMP and PNG.

How transparency in image strips is handled by IconWorkshop?

In 32 BPP (RGB/A) images, the transparency is coded in the alpha channel and saved in the image itself.

As we discussed above, for 24 BPP or less color depths the transparency is coded by a specific color. IconWorkshop automatically detect this color and display the icons with a real transparency. You don't see the Red or Magenta color as coded in the image striup. Instead you see the chessboard texture which indicates that this is a transparent zone.

When you save the strip image, the original color is applied back in the image. Note that during the edition, you can change the transparent color of the strip image.

 

 

Related Topics

Make your own icons

Back To Tutorials Home

Article written by Axialis Software Team on July 10, 2008.

Copyright ©2008 Axialis Software - All Rights Reserved - Terms of Use.

site map | terms of use | privacy | user licenses | company | contact us | free icons | make icons | make screensavers | make cursors

Copyright ©2011 Axialis Software. All rights reserved.
Send us feedback about the site.

Microsoft, Windows, Windows XP, Windows Vista are registered trademarks of Microsoft Corporation
Adobe, Flash, Photoshop, Illustrator are registered trademarks of Adobe System Incorporated
Apple, AppStore, Ipod, iPhone, iPad are registered trademarks of Apple Inc