Drawing New Icons
Wine cannot reuse Windows icons verbatim because of copyright issues so we have to redraw them. They should have a similar design to keep from confusing users, but they must be unique works. Ideally, they'll be nicer than the Windows icons too. B-) These icons will appear in both menus and file selection dialogs. In addition, some programs may need special icons for the system tray, or internal icons for toolbars and buttons.
Note: Wine currently has a complete icon set that follows Tango design guidelines for icons. For reference, some quick information about how the icon files are formatted has been retained. However, more icons may be necessary in the future as Windows changes or adds new core applications.
Current Tango-Style Icons
Creating an .svg Icon Set
All icon files for a given component of wine are stored in that component's folder in the source tree. In order to allow for re-scaling without distortion, most icons were first created as scalable vector graphics, which also means an icon can be comfortably designed at a larger size to start.
The first version should be created in Truecolor (24-bit color depth with an 8-bit alpha channel). Copies of the icon can then be made at the 256 (8-bit) and 16 (4-bit) color-depths respectively. It is important to check the simplified copies for artifacts, making touch-ups in the smaller color palette if necessary. Also, be sure not to replace the alpha channel with an inappropriate background color by accident.
Although scaling is not an issue for the vector draft, Wine currently mimics Windows by using raster icons. Because of this and the fact that very small icons are often simplified for readability, the preceding steps should be repeated for icons that are designed to be read at sizes of 32x32 and 16x16 pixels. The first set of icons should be rescaled to 48x48 pixels, giving 9 different versions of the icon, one for each size and color-depth.
Finally, to match the format currently used in the Wine source tree, arrange these icons into a single row in a single .svg file, with the 48x48 versions on the left, then the 32x32 and 16x16 ones respectively. The bottoms of the icons should be aligned, and within each set, the icons should be ordered left-to-right, starting with the deepest colors. After this, ensure the icons are evenly spaced, using an 8 pixel strip between each copy and for the file's left and right border, then 16 pixel strips for the top and bottom borders.
Example: Adding the window icon to shell32.dll
-
Extract window-new.svg from the Tango icon distribution.
-
Use Inkscape to remove the star from the top-right corner of window-new.svg and save as dlls/shell32/resources/window.svg.
-
Run the following ImageMagick commands in the shell:
for size in 48 32 16; do
convert -background transparent window.svg \
-resize ${size}x${size} -channel alpha -threshold 50% \
-depth 8 window$size-8.png
convert -background transparent window.svg \
-resize ${size}x${size} -channel alpha -threshold 50% \
-depth 4 -colors 16 window$size-4.png
done
convert -background transparent window.svg \
-resize 16x16 -depth 32 window16-32.png
-
In Inkscape, select all objects in window.svg and record the X and Y coordinates of the group: (-0.854, 0.866). We'll call these values the "margins".
-
Make a copy of the group and move it to the side, then reselect the original.
-
Scale up the object group by 533.333% to increase the icon's size from 48x48 to 256x256.
-
Resize window.svg to (632, 272) to match folder.svg.
-
Multiply the margins by 256/48, add 8 to X and Y, and move the object group there: (4.839, 12.907).
-
Select the copy of the icon group and move it to (272, 4) plus the margins, which comes to (271.146, 4.866).
-
Import window48-8.png and window48-4.png, placing them at the same positions as the corresponding images in folder.svg.
-
Make another copy of the 48x48 vector icon and scale it by 66.667% to reduce its size to 32x32.
-
Move the group to 32/48 times the margins plus 440 to X and 4 to Y, which comes to (435.431, 4.577).
-
Import window32-8.png, window32-4.png, window16-32.png, window16-8.png, and window16-4.png, placing them at the same positions as the corresponding images in folder.svg.
-
Run Inkscape's "Clean up document" tool and then save the file as a plain SVG.
-
Use a text editor to change the id attributes of the
<image>tags to match the ones in folder.svg, and add<rect>tags foricon:256-32,icon:48-32, andicon:32-32like the ones in folder.svg. -
Run
../../../tools/buildimage window.svg window.ico. -
Delete the intermediate .png files; they are no longer needed.
Icons for Toolbars, Trays, & Buttons
Other types of icons used by Wine currently have a simpler structure. For an initial draft, just design your icons in .svg, with Truecolor and for viewing at 16x16 pixels. Arrange them in one file, using the intended display order for toolbars, with no separation or borders. For lone icons, such as those used for the system tray, they should be saved in their own separate files, again only 16x16 pixels. Then export your .svg files to Windows bitmap file.
Newer Windows Themes
Starting with Vista, Windows switched over to the Aero user-interface style, which prescribed much larger and more detailed icons in certain cases. Beginning with Windows 8, the user-interface has undergone even more radical changes with the new Metro guidelines. While adding such icons and features are at most a low priority for now, if and when Wine does adopt them, further work on program icons and graphics will be needed.