What is an Image Strip?

  1. Home
  2. Tutorials

In relation to Axialis IconWorkshop, this article offers information on the following topics:

If you're a developer, 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 development 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.

Why using Image Strips?

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":

icons

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.

icons

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:

icons

 

Axialis IconWorkshop

Create Icons using a Professional Authoring Tool

Make Icons

5-Star Award

  • Axialis IconWorkshop is a professional icon authoring tool for creating icons on multiple platforms and devices.
  • The tool supports creating icons for Windows, macOS, Unix/Linux, Android, iPhone.
  • The interface is designed to increase productivity, with easy accessibility to all tools and a powerful built-in librarian and file explorer.
  • Batch processing features are included for creating multiple icons at once.
  • The tool includes features such as icon creation from images and image objects to help create professional-looking icons quickly.
  • The tool is compatible with industry standards and includes plugins for Adobe products and Microsoft Visual Studio.

Windows 7 Windows 8 Windows 10 Windows 11 Plug-Ins Add In

Download Now Learn More

Learn More

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:

icons

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.