Hints on Making Icon and Cursor Sets
Whether for use in your own programs, or just for your desktop, you can use IconForge to create professional-looking sets of icons which look great together. For some projects, you may prefer to hire a professional artist for at least the design stage. Or you may want to handle the entire process yourself. Regardless of how you approach the design, here are some hints which may help you to get started. Even if you farm out an icon project to a designer, knowing what goes into creating an icon will make you more fit to judge the results. Most of the concepts for designing icons which are discussed here may also be applied to creating Windows and browser cursors.
Conceptualizing
What to consider while gathering ideas for icons and cursors:
- An icon is a representation of something else. Your icon should convey to the viewer something which would call to mind the function, document or other element which will be presented whenever the icon is clicked. E.g., Using a wrench or hammer to represent "Tools"; or a pen to represent text editing.
- Try to avoid images which may only be recognizable in certain locales. E.g., Postal boxes vary from nation to nation, and even between rural and urban regions within a nation. A more universal device would be a stamped and addressed envelope.
- Avoid cluttering the image with multiple items. Remember that your icon may be reduced to as small as 16x16 pixels, so there is seldom room for more than a single, recognizable object. Try to focus on a single element.
- Unless you want a cartoon motif, it is probably best for the beginner to avoid using images which depend on the human anatomy (faces, hands, etc.). The limited Windows palette does not do flesh tones particularly well. Body parts can often detract from an overall theme, as it is the eye's tendency to scale everything else in relation to the human image. And, if not well crafted, viewers may perceive unintended conotations. You must also consider both that individual humans differ in appearance considerably, and how your audience may react to those images.
- Do not tie your images to hardware or other products which may look obsolete when new models appear.
- Avoid using logos from other products (logos can change). And do not use logos of other products at all, unless you have written permission to do so from the owner of the logo.
- Some programming languages and libraries contain licenses which allow you to use there icons in your own work. This can be a starting-off point for your own icons. There are also "public domain" collections which you can adapt for your own use. Be absolutely certain that you have written permission or a license to use such third-party material. Many "free" icon collections do not have such permission, or include copyrighted or trademarked work from other artists or companies.
- When designing a set of different icons, you will want them to reflect the same style. You don't want your program or desktop to look as though it were "designed by a committee." They should repeat the same colors, and be drawn using the same line thicknesses and fonts.
Designing the Image
Things to do when drawing your icon or cursor:
- Do create sketches of your ideas, and photographs of items which might be used in your icons.
- If you have a scanner or digital camera, these may be grabbed as a starting point for editing in IconForge (IconForge can read input from most TWAIN devices directly, or you can import these into a paint program before you import them into IconForge). Some stunning sets of photo-realistic icons have been made entirely from photos, and this might be an option if you doubt your artistic skills and do not wish to use an outside artist. Once imported, such images may only need to have the backgrounds blanked out using transparent "paint," or they may need to be touched-up to increase contrast and visibility.
- Work first on creating a "Master Image," from which you will spin off reduced size icons in various resolutions. This image should be large (work at either 128x128 or 64x64 size), and in 16-million colors (either 24-bit or 32-bit).
- Keep lines sharp. Your image will eventually be reduced, and fuzzy lines and gradients will become even less distinct in the smaller versions - perhaps even resulting in the loss of important detail. You can sharpen your image using the "Outline" functions under IconForge's "Effects" menu.
- Color is one of the most important elements in a set of icons. Repeat at least some of the same colors in all of your icons to tie them together.
- Generally speaking, use color to highlight important features. Too much color looks garish. Also remember that you should be generating sets of 16-color icons which will be limited to the default Windows 16-color palette. You can explore these 16-colors in IconForge by clicking on the "Options" menu, and choosing "Set Palette." Some artists prefer to keep most icons in shades of a single color (such as grays or blues) so that they look better when reduced to the Windows default 16 colors.
- Eliminate any blank space around the edges of the image. The smaller the icon gets, the more you will regret any space wasted for margins. Crop the image so that only the most important parts are included.
- If your icons have shadows, make certain that the light source is from the same direction for all of the icons. You can obtain consistent and often interesting 3-D shadows in IconForge by using its "Bump," "Spotlight," and "Shadow" filters (under the Effects menu) to mimic directional lighting.
- If you are producing cursors (animated or static), the focus should be on the "hot spot" which is the point in the cursor which activates buttons and icons when the mouse button is clicked. The graphic and animation should lead the viewer's eye to this point. Note that you can set the hot spot in a static image by double clicking on the Syringe tool. For animations, use the hot spot icon (flame) on the editing window.
Specifications for Icons
Whether for program, web site favorites, or desktop, most icons which are created to be displayed on current Windows systems should result in an .ICO file which contains the following images:
- Small Size: 16x16 size with 16 colors (i.e., the default 16 Windows colors);
- Small Size: 16x16 size with 256 colors (the palette should include the default 16 Windows colors);
- Toolbar Size: 20x20 size with 16 colors (i.e., the default 16 Windows colors);
- Toolbar Size: 20x20 size with 256 colors (the palette should include the default 16 Windows colors);
- Normal Size: 32x32 size with 16 colors (i.e., the default 16 Windows colors);
- Normal Size: 32x32 size with 256 colors (the palette should include the default 16 Windows colors);
- Large Size: 48x48 size with 16 colors (i.e., the default 16 Windows colors);
- Large Size: 48x48 size with 256 colors (the palette should include the default 16 Windows colors);
Notes: in some cases, you may also wish to include 2-color (black and white) versions in the sizes above. However, very few systems today are using 2-color displays where this resolution would be needed. Also, for most uses, you should eliminate any 24-bit or 32-bit 16-million color resolutions from your final icons. These high-color icons do not degrade well in all Windows versions.
.ICO files are able to include other sizes. They will only be used, however, where the software or operating system is capable of, or set to, display icons of the non-standard sizes you choose to include (perhaps including Microsoft's future Windows "Longhorn" project, where much larger icon sizes are rumored).
Building a Multi-Resolution Icon
The process of creating the icon file (note that Windows currently uses only 32x32 size images for cursors, so this section mostly pertains to .ico icons), unless you creating cursors for custom programs:
- To make your icon look its best on a variety of displays, you should create a Multi-resolution icon. This will allow you to optimize the image for a variety of screen resolutions, instead of letting Windows choose how to reduce the size or colors.
- Create or Open your existing Master image (or create a new image from scratch). It is best to work on the largest size first, then duplicate this down for the smaller versions you will be creating. For your first icon project's Master, try using an image 128x128 or 64x64 in size, with 16-million colors (either 24-bit or 32-bit);
- If you are importing from an existing image, you may need to Crop and Scale the image to fit into an icon size using the controls on the Import window;
- Once the new icon is loaded, use the Transparent paint button next to the color palette to block out areas which you don't want to be shown in the icon. Take this opportunity to also simplify the image where possible by painting out unnecessary details;
- With your "Master" icon imported, let's try opening a fresh Multi-resolution Icon window. Click on the New option under the File menu. You can also use the Assistant to choose multi-resolution icons suited to particular versions of Windows;
- Select New Multi-resolution Icon from the list;
- Once the editing window opens, you can go to the panel on the right side of the editing window, then click the blue-green + button to add more sizes and colors to the window. If the panel is closed, you can slide it out by clicking the thumb-tab in the upper/right corner of the editing window (see illustrations below). For most uses, you will want to include the most common Windows sizes: 16x16x16-colors, 16x16x256-colors, 32x32x16-colors, 32x32x256-colors, 48x48x16-colors and 48x48x256-colors.
- Now go back to your "Master" icon's window, and click the blue-green arrow button under the Magnify bar to send the Master icon into the new Multi-Resolution icon's window;
- Back in the Multi-Resolution icon window, click on the Duplicate button (the blue circles) to copy the original icon into the other frames;
- IconForge will do its best to optimize the colors and size for each resolution. However, you may need to edit individual frames to make them look their best. In some cases, you may want to change the icon to grays (there is a filter for this in the Effects menu, under Color) before importing it into the multi-resolution icon's window. Sometimes a reduced image also looks better if you sharpen it (go to the Effects menu and then click either the Outline or User Defined filters for sharpening options);
- Use File/Save to save the multi-resolution ICO.
When a multi-resolution icon is used, recent versions of Windows have the ability to select the best icon size and color resolution to match the display being run on the system. It also chooses smaller icons for Explorer lists and other locations where a large icon is not appropriate.
As mentioned above, you should eliminate any 16-million color icons from within your multi-resolution ICO. Since 16-million color icons can cause problems on older versions of Windows, the only time you would include them is if you are certain that they will only be used on Windows 98 or ME (for normal 24-bit 16-million color icons) or XP (for 32-bit icons).
Other Resources
There are an increasing number good books for designing graphics for the Web. The same principals used to design Internet site icons may be applied equally well to desktop and program icons. Icons in Windows will typically be somewhat smaller however. A visit to your local library will also yield books on heraldic design, which can also be helpful. The knights of old needed symbols which would be instantly recognizable on the battlefield or on parade, and the simplified designs for crests and other armorial devices could be lessons for icon designers as well. Finally, there are books on designing corporate and product logos which may be of help in reducing an idea to a simple image.
Return to the IconForge FAQ Sheet
Do you have a question we haven't addressed?
Send us a message to our Tech Support Department
.