RealWorld Designer

Image to icon conversion is one of the key operations of every serious icon editor out there. Today, I decided to compare our icon editor with six others, learn their strengths and weaknesses, and finally decide which of their features are worth implementing in the next version of RWIE :-).

The test images

I have selected 3 different images to test the editors in different scenarios.

• The first image is a simple grid of colored squares on a red background. The foreground and background are not mixed (no antialiased edges), the image is big enough, and square-shaped without any redundant borders. The trick is to remove the background.
• The second image (hourglass) has non-square shape and contains semitransparent pixels and transparent background. Don’t mind the wrong background color in the browser.
• The third image is an example of a problematic image. It is a photo of a Logitech Webcam downloaded from web (many users create icons from such images). It has redundant borders, slight shadow (I want to get rid of it) and antialiased edges.

The results

Before going into details, feel free to download the archive with all the sample icons created during the test: img2ico.zip

Ave Iconifier 2

Home page (actually I cannot find its home page): http://www.winmatrix.com/forums/index.php?showtopic=1774

I have decided to finally check out this free tool, because it has gained some popularity lately, which means that there is something about it.

It has a very simple interface - it is enough to just drop images on the proper part of the window and then drag the created icons back to Explorer. The created icons contained predefined image formats (no configuration options) and it was impossible to remove the background from 1st and 3rd image. The second (non-square) image lost proportions.

Summary: Simple interface with batch capabilities is a big plus of this tool, but the actual results were not satisfactory (read above). If you plan to create icons with this tool, you absolutely must prepare your images elsewhere and feed the tool square-shaped images with correct transparency.

Aha-soft Icon Lover 4.13

Home page: http://www.aha-soft.com/iconlover/index.htm

I’ve to admit that I hate Aha-softs/Icon Empire/SibCode/…’s business strategy. Creating tons of similar products and distributing them under different brands sucks. I am not even sure, that Icon Lover is the flagship application and I have no desire to spend time verifying it.

The image to icon conversion dialog of Icon Lover offered many options including custom masks and overlays, background color selector, pixel aspect preservation, sharpening, color conversions, and simple drop shadow. On the down side, only 48×48, 32×32, and 16×16 icon sizes were available. Cropping the image #3 proved to be a bit difficult, but I finally found the “Canvas Size” command in the editor. The flood-fill tool does not seem to support tolerance, therefore it would be very time consuming to get rid of the artifacts on the 3rd image and the resulting icon has a white halo.

Summary: The image to icon wizard of Icon Lover is one of the best. It has many useful and some less useful functions, but only works with files on disk, not with images opened in the editor. No batch capability found.

IconCool Studio 3.0

Home page: http://www.iconcool.com/studio.htm

I love these Chinese guys, they have a very consistent “testing-is-useless” development style. It usually takes me about one minute of clicking to find a bug in their app - no surprise this time. It was enough to click “File”->”Import…” select the first image file and then let my curiosity take over and click the “Open” button (->exception) and then the “Reload” button (->image disappeared). This was by far not the only bug encountered.

Anyway, let’s do it again (no curious clicking this time!). The conversion dialog offers the very basic options that allow to select the generated dimensions and color depths (with strange and unfortunately persistent defaults). There was no way to get rid of the background, but it was possible to create an icon from the selected region of the image and that in the end allowed me to preserve the aspect ratio of the hourglass. The 8-bit and 4-bit formats are not dithered and use predefined palette - not cool.

Summary: The procedure was SO frustrating due to the numerous bugs, cryptic messages, and unexpected behavior that I was very happy when I finally had the 3 icons completed and closed the application. No batch conversion available.

Microangelo Toolset 6.03

Home page: http://microangelo.us/microangelo-toolset.asp

This is the proclaimed grand-daddy of icon creation software. The New Image Format dialog looks old indeed ;-).

I was unable to find a simple way to convert image to icon with multiple formats at once. The closest I could get was importing a new image format to an already existing icon. The number of clicks required and time spent creating a standard XP icon with 9 formats was really high. Microangelo preserved the aspect ratio correctly, but there was no way to remove the background.

Microangelo offered a bicubic resampling algorithm instead of a bilinear one, which is quite strange, because it is not suitable for reducing image size. Maybe it is only using it for stretching the images, but that is not a typical requirement during the I2I conversion.

Summary: Image to icon conversion does not seem to be the major use case for Microangelo developers. Strange. No batch conversion, of course.

PC Icon Editor

Home page: http://www.program4pc.com/icon_editor.html

One of the relative newcomers in the icon software scene. It has nice and clean interface with very basic features. The same applies also to the image to icon dialog.

Summary: A simple image to icon function with no major pros and cons. Just pick standard sizes and color depths and that’s all. The image on the left side is actually only for viewing and does not have any function. No batch conversion.

Axialis IconWorkshop

Home page: http://www.axialis.com/iconworkshop/

One of the most popular icon creation software today. And the reputation is earned. Just look at the fancy image to icon dialog with lots of images and explaining texts.

Axialis had a slight problem with the semitransparent pixels in 8-bit and 4-bit color depths (the missing glass - check out on the screenshot). Another slight problem was with background remover tool that left traces of red color on the image (it is only visible when the icon is zoomed in).

Summary: The look and feel of the IconWorkshop’s dialog its most attractive feature. The quality of the produced icons is also satisfactory, save for two small problems described above. Batch conversion is available.

RealWorld Icon Editor

Home page: http://www.rw-designer.com/3D_icon_editor.php

Our software, finally. A lot of time was dedicated to the image to icon conversion and there are three separate ways how to create an icon from image: a batch conversion that works almost exactly as the AveIconifier’s one; a simple wizard; and an image editor where problematic images can be opened, modified, and converted to icons by a single click (or more if you wish to paly with the configuration).

Images number #1 and #2 can be converted in batch mode without problems, #3 needed a bit of manual work. A flood-fill with tolerance set to 40 got rid of the unwanted artifacts and an Remove Empty Borders command automatically centered the image in the smallest possible square.

On the down side, I have to admit, that the configuration dialog of the conversion looks much worse than the Icon Lover or IconWorkshop ones. It has no live preview and too many controls. Fortunatelly, the average user does not need to even see the dialog, because there are multiple predefined configurations.

Summary: I was satisfied with the actual results, but the look and feel of the GUI should be improved and simplified in the next version. We will probably also offer an option to have a live preview of the created icon using the method described here. Although the application does not currently offer to create icons from selected region of an image, it is possible by just reconfiguring it. Shall it be the default in the next version? Let me know.

Conclusion

The test images were chosen to demonstrate these abilities of the image to icon converters:

• Detect background if image lacks proper alpha channel.
• Keep image aspect ratio if image and icon proportion do not match.
• Remove redundant borders (or create image from selected region).
• Fix unsuitable images (antialiased, with jpeg-artifacts, unwanted shadow, …).
• Batch conversion.
• Special effects (shadow, sharpening, masks).
• Eye candy - how nice do the dialogs look.

This post is not meant to tell everything about icon from image creation. There are many things that were left out. If you feel that I have missed a very important point, let me know!

The Unicorn3D subsystem is intended for simple models and that’s exactly what is needed when creating an icon. Or maybe that’s what WAS needed in the past. Windows Vista 256×256 format is not that small anymore and one of our customers required a more detailed keyboard on their icon. Well, it was not easy, I had to add some new functions to make this task bearable.

The result

Let’s start at the end. This was the result of my work:

It seems an overkill to create a keyboard with dozens of individual keys for an icon, but it was a nice excercise and as a very welcome side-effect, there are now three new features that would make designing of more complex models easier:

Referenced components

The Unicorn3D Composer module (the default one) can create and use references to other components. The standard model of a key is only stored once and used multiple times - with different transformations.

Custom grid size

The Grip Points view now allows setting a grid - that helped a lot when I was placing the individual keys.

Transforming grip points

A new operation can transform selected grip points. A combination of a translation, scale, rotation, and a second translation allows a wide range of effects. I have used it to quickly move groups of keys and to scale and rotate the individual key model (cause I made it too big).

Keyboard model in the editor

Here is how it looks in editor. The number of components is really quite big. Considering that each key is a NURBS surface…

Comments are of course welcome.

Everybody has heard about the famous “plug-ins” design pattern. Allowing third-party extensions to one’s software was a key feature that took applications like Photoshop or Mozilla where they are today. But let’s not stop there. With a few minor improvements, this design pattern can be much more usefull - I call it Cooperating Plug-Ins.

An Example

RealWorld Designer defines an interface for operation (for example image filter) plug-ins. The operation has two core methods:

• Create default configuration object.
• Execute the operation.

The use scenario is simple:

1. Create default configuration object.
2. Alter the configuration to fit your needs.
3. Execute the operation on given document with given configuration.

Standard plug-ins:

interface IPlugIn
{
IConfigObject CreateConfig();
bool Execute(IDocument doc, IConfigObject cfg);
}


There is of course a plug-in manager that has knows about all the plug-ins and can return the list of plug-in IDs and perform the actions on plug-in identified by an ID. If you take a look at the manager, it is very similar to the plug-in. It is able to create a default configuration by aggregating the default configuration of all plug-ins and a switch item. Ant it would be able to execute that operation.

interface IPlugInManager
{
IDCollection EnumPlugInIDs();
IConfigObject CreateConfig(IDType id);
bool Execute(IDType id, IDocument doc, IConfigObject cfg);
}


Cooperating plug-ins:

interface ICoopPlugIn
{
IConfigObject CreateConfig(IPlugInManager manager);
bool Execute(IPlugInManager manager, IDocument doc, IConfigObject cfg);
}


This little change allows us to use one plug-in from another plug-in and create “meta-plug-ins”. Meta-plug-ins can do a lot of unexpected stuff:

• A plug-in that runs two other plug-ins in sequence. By nesting it, the number of plug-ins executed in one step is unlimited.
• A plug-in that show the configuration dialog of a nested plug-in before it is executed.
• A plug-in that runs the nested plug-in in another thread.

Yet another step

The manager can be modified in similar fashion:

interface ICoopPlugInManager
{
IDCollection EnumPlugInIDs();
IConfigObject CreateConfig(ICoopPlugInManager manager, IDType id);
bool Execute(ICoopPlugInManager manager, IDType id, IDocument doc, IConfigObject cfg);
}

You may ask yourself what’s the point of having the extra argument in the methods, especially since it has the same type as the interface. It allows us to pass a different implementation of the manager to the actual plug-ins and customize the entire use scenario. In RealWorld Designer, there is a special manager that allows opening document in new windows.

Summary

Designing plug-in interfaces with cooperation in mind does not cost a lot and has the benefit of moving a lot of functionality out of the core of the application thus keeping it simple. If this is not reason enough for you, then just go away and return when you are ready ;-).

The freeware RW Cursor Editor is becoming quite popular. In the near future (end of 2007), it will get a new sibling - a more powerful shareware app. The Pro version will integrate the 3D subsystem currently present in RW Icon Editor and will make the creation of animated 3D cursors easy.

Planned features

• Parameterized 3D models - while parameterized 3D models are already available in current version of Icon Editor, there will be a couple of improvements that will make things smoother and simpler.
• Multiple frames in one R3I file - each frame will use its own lights, camera, 3D model, or parameters. This will allow making simple animations from parameterized 3D models easy.
• Image to cursor - an improved version will be able to create an animated cursor from a multi-frame image.

The screenshot of the in-development R3I window layout demonstrates the upcoming features. Note the list of layers (frames) in upper left corner and the 3D models parameters of the selected layer (frame) by the right side of the window. The hourglass models has four parameters: case color, sand color, the amount of sand in the lower part and a flipping angle. The animation is created by using different parameters in each frame. This R3I document can be rendered directly to animated cursor, where the author can adjust frame times and sequence and optionally apply image filters.

The name of the application is not fixed yet. Should we call it RW Cursor Maker, RW Cursor Creator, RW Cursor Designer, or RW Cursor Studio. Let me know what you think.

A drop shadow filter is a crucial part of every web or application graphics editor. If you need more convincing that drop shadow is your friend, read the article about the role of shadows in icon design. The good news is that the old JScript-based filter will be replaced by a new one. A better one. A faster one.

What’s new

First of all, the C++-based drop shadow is available as a standalone filter, not just as a part of the image-to-icon conversion. And it has following settings:

• Shadow size in range 1-50 pixels.
• Shadow offset - any number of pixels (separate setting for vertical and horizontal offset).
• Sharpness - controls how to distribute the shadow of each pixel.
• Shadow color - now you can create a glow effects by using a bright color instead of a dark one.
• A unique egde only shadow mode - notice on the picture that the large transparent areas remained transparent, only the edges are darker.
• Abitity to automatically adjust the size of the modified picture - best used together with a Remove Empty Border function - this way you images will always have the smallest size required.

And of course the drop shadow can be used with the new configuration dialog with preview.

Summary

You’ll see this improved drop shadow effect in next versions of RW Icon Editor and RW Cursor Editor.

Don’t you just love it when things fall into place? Is there anytning that shlould be added to this operation configuration? Let me know!

Upcoming versions of RealWorld Designer-based applications are going to have a much needed feature: the ability to run a filter and display a preview of the outcome.

How does it work?

All RW filters (or more exactly ‘operations’, because the underlying object is not always an image) consist of a configuration and a an execution function.

The lower part of the window displays the configuration of an operation, the upper part shows two windows representing the original and the processed image. The ‘Preview’ button refreshes the window with the processed image. You can of course enable the Auto-preview option and then the right window will be updated automatically once the configuration of the operation changes.

But how do the preview window work, how do they know what to display? Well, it is just the matter of configuration (as always with RW). The configuration of the preview windows is included in the configuration of the application.

In the example above, the preview window is just a simple image viewer that is used for example in image editor or in icon editor layout. But…it can be changed… If you wished to have a toolbar with zoom controls as a part of the preview windows, you can.

Summary

This new configuration dialog with preview can be:

• used with any filter - including third party filters.
• used with any document - including third party documents as long as they implement the DocumentCopy function.

You will see these previews in action with many of the new RW image filters in the next versions of RW Icon Editor and RW Cursor Editor.

Your comments are as always most welcome.