How to create an icon from an image? November 6th 2005

This tutorial describes how to make icons from images in RealWorld Icon Editor and explains how to prepare images to attain best possible results.

Reader of this guide should be familiar with basic terms related to computer images and icons as discussed in articles about computer images and Windows XP icons.

Overview

Icon is a container of several images, where each image is optimized for specific color depth and screen resolution. When creating icons from image, the task is to resample the image to specified sizes and adjust it to specified color depths.

An image with alpha channel and an icon generated from the image.

Since an icon usually has a transparent background, the conversion should either use transparency information from the source image or determine the transparency using another method.

Converting images to icons in RealWorld Icon Editor

This is a three-step process:

1. Open a supported image. The application understands these standard formats: PNG, JPG, GIF, TIF, JPEG2000, TGA, PCX, PSD, and BMP.
2. Activate one of the 'Create Icon' commands in 'Document' menu or in toolbar. Each command creates an icon with different effects and/or formats.
3. After finishing step 2, a new window is opened. Use this window to modify your new icon and to save it.

The application comes with several preconfigured image to icon buttons. Users may add their own or modify the default ones. The customization is enabled through layout configuration dialogs.

The source image

An icon is only as good as the source image. For best results, follow these guidelines:

• Keep your source images square. The transformation will stretch source image to fit destination icon dimensions. If the source is not square, the result becomes deformed.
• Use large-enough source images. If the source is larger than 200x200 pixels, the result icon is likely to have nice smooth edges.
• The image should not have any unnecessary empty borders. Icons are small and cannot afford to waste any space.

As mentioned earlier, icons have transparent background. Best results are obtained if source images already have correct alpha channel (use an adequate file format such as PNG). RealWorld Icon Editor can create icons even from images that are missing an alpha channel, although there are additional conditions.

Images without alpha channel

If the original image does not have an alpha channel, the color of the first pixel (or a user defined color) is assumed to be background and it is considered transparent. Make sure that the background color is never used in the actual image (hint: do not use white or black as a background color). Also, avoid using images with smooth edges. If an object is mixed with background, it is virtually impossible to remove all traces of the background.

A good (left) and bad (right) images for image to icon conversion. The right image is too small, it has redundant empty borders, its edges are blent with background, and it is not square.
Icon created from the left image. A shadow effect was used to enhance object's outline.		Icon from the right image is smaller than necessary, has wrong proportions, and an unwanted cyan outline.

Images with artifacts

If a source image is stored using a lossy image format such as JPG, it contains artifacts. Images with artifacts are not suitable, because background and foreground are mixed and the application is unable to separate them. This is similar to the problem with smooth edges.

Fixing an unsuitable source image

A raster image editor integrated in RealWorld Icon Editor can help you fix most problems with source images and prepare them for conversion to icon.

To edit an opened image, click 'Edit as Raster Image' command in 'Document' menu or on toolbar. The application window is now showing the image in edit mode. Enable alpha channel in 'Document'->'Raster Image Properties' dialog and use the Flood Fill tool to remove background manually (replace it with transparent color). Experiment with the tolerance parameter of the Flood Fill tool to remove image artifacts and/or antialiased outline.

Once the background is fixed, switch to the 'Image Viewer' layout. Activate the 'Remove Borders' operation in 'Document' menu to automatically remove empty borders and center image in the smallest square possible. The image is now ready and you may use it to create a new icon by clicking one of the 'Create Icon' commands.

Advanced features

RealWorld Icon Editor offers two unique features related to image to icon conversion.

Applying effects during conversion

Almost all Windows XP icons have some kind of shadow or outline enhancement effect. These effects, when used appropriately, give icons uniform style and improve the recognition speed by emphasizing important features of an image. It is of course possible to incorporate these effects into the source image manually, but it would be a lot of work, because:

• The effect should be similar on all icons that are used together. Therefore the size of source images should either be the same or the size of the effect must be relative to the source image size.
• Different image sizes in an icon require different effects. To get perfect results you would need to apply different effects on each generated image.

No shadow - contours are hard to recognize.

Simple shadow improves look and feel.

Custom shadow for each image in an icon.

RealWorld Icon Editor can do the above automatically. It is of course customizable and you may easily change your preferences for a single icon or on a project basis.

Optimizing pre-XP icons

Prior to Windows XP, pixels in icons were either fully transparent or fully opaque. These icons had jagged edges, because smooth edges require semitransparent pixels. These images are still present in Windows XP icons and they are used when color depth of the screen is set to Hi-Color or lower or when an icon is used on older Windows. More information in article about XP icons.

RealWorld Icon Editor allows optimizing pre-XP icons for predefined background color. These icons perform well on all kinds of light backgrounds, especially on toolbars, in menus, and dialogs. The ultimate choice is of course yours. You may enable or disable optimized pre-XP icons in the configuration dialog of the image to icon transformation.

Standard pre-XP icon.

Pre-XP optimization improves edges.

Optimized icon with shadow effect applied.

The same icons on a gray background. This is the color of Windows 2000 toolbars.
The quality of the optimized icons is getting close to Windows XP icon quality.

Conclusion

After reading this tutorial, you should know what is involved in an image to icon transformation, you should also know how to spot unsuitable images, how to fix them, and how to create icons in RealWorld Icon Editor.

This article covered only the basic techniques. If you cannot find certain feature or feel that something is more complicated then it should be, please leave your comment here or in the support forum. There is a good chance that a solution for your problem already exists.

Resources

RealWorld Icon Editor homepage.
Looking glass image from the first example.
Palette image from the second example.

Recent Comments

Display all comments.

Unknown author (2007-12-23): can you put it in simpler words please

Vlasta (2007-12-24): What you are trying to do?

rewardrebel (2008-01-05): I'd not considered aspects of icon creation like speed of recognition, so have picked up some important and helpful information here. Thanks.

Unknown author (2008-01-06): OK! nobody is lazy! so wtf?
why make this if NOBODY is going to benifit from it?
FYI dumbass its complicated! even my SMART mom didnt understand it! you need to make it... simpiler, ans funner to read! then you would have GOOD comments!

Unknown author (2008-01-12): i dnt get it...=\

Unknown author (2008-01-14): To the "unkown author" please write more comments explaining how smart you and your Mom are. I have used your comments as examples in my lessons, please feel free to continue using the "text messaging" style of writing (foul as it may be), or, you may ask someone smart to explain in simple terms the meaning of "you catch more bees with honey" it might be useful for you to incorporate it's use in future requests of assistance. Strike the last sentance and continue on your quest for a "Simple Solution", many, if not most will understand your "special" needs! However if you were writing from a viewpoint of satyr, you have given us a chuckle, THANKS, if not God help us if you represent a "Smart young person".

Unknown author (2008-01-30): noobs.

Unknown author (2008-02-15): Wow - this little thread is a bit scary. These people may have to manage the world in my old age. Anyway very useful and clear information thanks. Advice to those that dont understand this page - McDonalds are always recruiting

Unknown author (2008-02-27): cool

Unknown author (2008-04-07): hiiiiiiiiiiiiii

Add comment

Please login or register before adding comments.