AbleStable®
go to Reviewsgo to Servicesgo to Registered Usersgo to Resource Centrego to AbleStable: Helpgo to About Us
go to AbleStable: Home Articles
go to Search

go to Exhibitions Centre
  Essential technical advice...  
go to Help
go to Resource Centre
go to Library
go to Articles
go to E-Books
go to Glossary
go to Reviews
go to Web Link

Library > Articles > Technical > 019

E-mail this web page address to a friend or colleague
Enter their email address below (no record is kept of this action)

     

Introducing Vista® icons

Author:
Axialis: software company and developers of Icon Workshop
Editor: Mike de Sousa, Director, AbleStable

Introduction

This article provides information on the following topics:

Windows Vista® - A Resolution-Independent User Interface

Vista® 256x256 PNG Compressed Icons

Compatibility with Windows® XP

Creating a Vista® Compressed Icon

Using Vista Compressed Icons in Software Projects

Microsoft Vista®, the next version of Windows® to arrive in 2006, will include many new features and enhancements. The most visible evolution will be the new Graphical User Interface (GUI). A first look at Aero (the codename for the Vista® user experience) reveals a slicker interface with sharper graphics.

The Windows Vista® icon control slider
The Windows Vista® icon control slider

But the changes are not only visual. Aero has been designed to comply with computer technology that will be delivered over the next decade. Many new features have been implemented in Aero to support the hardware changes to come.

Windows Vista® - A Resolution-Independent User Interface

One of the most important enhancements of Aero is its ability to deal with the high-resolution displays of the future, and that feature a resolution-independent UI. At present, monitors generally have a resolution of 96-DPI (dots/pixels per inch). Simply put, 48x48 icons are displayed on screen in a half-inch square.

Future LCD screens however will support resolutions up to 240/320 DPI. Therefore, to be displayed at the same size without quality loss, icons must include much larger images. That's the reason why Vista introduces a new standard for Windows icon size: 256x256 pixels.

The screenshot below shows the Vista® File Explorer displaying icons using the maximum resolution available: 256x256. Of course the result seems a bit "large" on a 96-DPI screen, but keep in mind that this technology has been designed for future screens. The add_favorite.ico file has been created with Icon Workshop, a professional icon development program from Axialis.

Windows Vista® displaying 256x256 icons: click to enlarge
Windows Vista® displaying 256x256 icons

An additional option will permit you to display icons at smaller sizes more attune to medium-res screens (say 150-DPI) screens. In such cases Aero uses the 256x256 image and shrinks it the desired size without any quality-loss. Based on our preliminary tests, the result looks really slick with real-time zoom!

Top

Vista® 256x256 PNG Compressed Icons


The standard Windows Vista® icons now include the following 12 formats:

256x256-RGB/A 48x48-RGB/A 32x32-RGB/A 16x16-RGB/A
256x256-256 colors 48x48-256 colors 32x32-256 colors 16x16-256 colors
256x256-16 colors 48x48-16 colors 32x32-16 colors 16x16-16 colors

The problem is that if you simply make an icon and save it in standard Windows XP ICO format, the resulting file will be around 400Kb on disk. The solution is to compress the images. Only the 256x256 images are compressed. The compression scheme used is PNG (Portable Network Graphic) because it has a good lossless ratio and supports alpha channel (transparency). Based on preliminary tests, the compressed icon sizes are 100Kb to 150Kb.

See the different formats below of an icon included in Icon Workshop's sample icon add_favorite.ico (the 16-color formats are not displayed but are present in the icon):

Example Icon: click to enlarge

The PNG compression is embedded in the ICO file for the 256x256 images only. PNG compressed Vista® icons cannot be read and edited with an XP-only compatible icon editor, nor can you open them with a PNG image editor.


You will require a Vista® compatible icon editor to edit such icons.


Top

Compatibility with Windows® XP

Vista® compressed icons are compatible with Windows XP. They can be used in XP but only using the standard formats (48x48, 32x32 and 16x16) which will be read and displayed. The 256x256 PNG formats will be ignored.

For example, if you save a Vista® icon your XP desktop, it will be displayed as 48x48. The most important fact is that Windows® XP won't reject Vista® icons.

Can we add other formats, such as 128x128, in Vista® icons?

Yes, but this is not recommended. 128x128 formats are actually used under Windows XP Desktop enhancers or Dock-Bar applications. These applications will probably support this icon format when ported under Vista®.

Creating 256x256 icons compatible with Vista® and Windows® XP

Simply create uncompressed versions of the icons. They will work on both Operating Systems. The drawback is the icon file size will be around 400Kb for one icon! Using a professional icon editor you will easily be able to remove the PNG compression.

Top

Creating a Vista® Compressed Icon

Here is a step-by-step tutorial on how to create a Vista® compressed icon using Axialis IconWorkshop. This tutorial requires IconWorkshop Corporate Edition v5.20 or more.

1. Create a 256x256 version of your icon image using any image/vector editor. Save your artwork with smooth transparency (32 BPP alpha channel) using a file format that is compatible with IconWorkshop: BMP, PNG, JP2000, PSD.

You can also transfer your work from Adobe Photoshop using the Axialis transfer plug-in, or you can create an icon by assembling several image objects.

2. Launch Axialis IconWorkshop and open the image file. It is loaded in an image document window, not an icon editor window, as shown below (1):

click to enlarge

3. If the scale-1:1 preview window is not in 256x256 mode, the preview image will be cropped. It is recommended that you switch to 256x256 preview mode if you want to work with 256x256 Vista® icons. To switch to this mode, right-click in the preview window, a menu opens. Choose "256x256 Display". The preview window now looks as shown above in floating mode (2). Use the same method to return to the previous state: choose "128x128 Display", remove the "Floating Window" option and use the mouse to dock the window.

4. Select the whole image. Choose Edit/Select All or press Ctrl+A. An animated selection rectangle is now drawn around the image.

5. Choose File/Create Windows Icon From Selection or press "I". A large dialog box opens. This dialog box will permit you to create all the image formats you want to include in your icon in one simple step:

6. Type the Name of the new icon project (1). The root of the image file is proposed by default.

7. Select the images formats to include in the icon (2) by clicking on the images. To create a Vista® icon, it is recommended that you follow the Vista® specifications as specified above. Don't forget to add the 256x256 vista formats in RGB/A (XP), 256 and 16 color modes (3).

8. To create a fully-compliant Vista® icon, you'll need to compress the 256x256 formats in PNG. Select the associated option (4).

9. You can also choose to apply the dithering option to the 256/16 color images as well as add a filter effect to smooth/sharpen the resulting images in RGB/A mode (5). View the results in the preview images.

10. When done, click OK. A new icon project is created in a document window:

click to enlarge

11. The main window with the grid (1) is the edition area where you can retouch the icon. The gray chessboard-like texture behind the icon is the transparent portion of the icon (the alpha channel info has been preserved). The scale 1:1 preview is displayed in the associated window (2).

12. All the available formats are displayed in a list (3). You can select them to edit (1) or preview (2) them. See the application built-in help (press F1) to learn how to add/remove formats or work with this icon project.

13. The compressed format (only the 256x256 formats can be compressed) are marked with this overlay PNG compression image: png compression image. You can add/remove this option by choosing Draw/Compressed Image Format (Vista®) or by pressing "K". You can also use the local toolbar or a right-click menu.

14. When done, save the icon by choosing Edit/Save or pressing Ctrl+S. The resulting icon size is 150Kb.

Top

Using Vista Compressed Icons in Software Projects

As mentioned at the beginning of this article, Vista® icons specifications are preliminary and subject to change. The information provided here is only based on initial tests.

Vista® compressed icons have been tested on Visual C++ 6.0, Visual .NET 2003 and both reject the icon during the resource compilation. This is unsurprising since the new ICO file format introduces a new header which points to raw PNG data. Of course the compiler crashes and returns a false error message. The DIB header is not old, it is a PNG. Passing it through SDKPAINT does not help.

Vista® compressed icons have also been reported as not functioning in the Delphi programming environment. New components will no doubt be developed in the future that identify these shortfalls.

Top

Conclusion

Vista® icons deliver a new framework of icon presentation for high definition monitors and operating systems while remaining compatible with Windows XP and lower definition screens. The larger 256x256 icon format provides additional opportunities for icon designers to explore more subtle and detailed development in their aim to create visual symbols that aid the user in their use of the computer environment.

     
       
 
Author

Axialis is a Paris based software company founded in 1989. The developers of Icon Workshop, a professional level icon program, Axialis create Windows based powerful and easy-to-use applications for home users, professionals, and companies.

Mike de Sousa is the Director of AbleStable®. Mike has been commissioned as an artist, music composer, photographer, print and web site designer, and author. Mike is also Creative Director at 2BrightSparks.

If you observe inaccuracies in our in-house contributions or wish to contribute an article or review to be included at AbleStable® visit Feedback.

Copyright Notice
Although our contents are free to browse, copyright resides with the originators of all works accessed at AbleStable®, and unauthorized copying or publication of our site contents is strictly prohibited. To use our specially selected premium content go to Content Syndication and Licensing

AbleStable © 2002-2007

 
     
       

 All Material: AbleStable © 2002-2007
go to Frequently Asked Questionsgo to Feedbackgo to Press Centrego to Privacy Statement