Multi-ResolutionA multi-resolution icon file (.ico) is similar to to a .gif animation in that it is a single file containing several images. The difference is that the operating system chooses a single image to display based upon where the icon is displayed (desktop, toolbar, menu, etc...) and the color setting of the monitor (8 bit, 16 bit or 32 bit).
Microsoft recommends three sizes for Windows icons: 48x48 pixels, 32x32 pixels and 16x16 pixels. 48 and 32 sized icons are used on the desktop and in folders. 48 size is displayed when the view setting is set to Tiles. It is also used for Thumbnail view when the folder or file it is in reference to does not contain pictures. The 32 sized icon is the standard size and is the default for the desktop icons. It is also used in folders when the Icon folder view is selected. Taskbars and menus use the 16 size icon. Single size icon files and .exe files that use only the default 32x32 size icon must have their icon stretched or shrunk when viewed at 48x48 or 16x16, both causing distortion. There are a few other sizes that might be worth the consideration depending upon the icon's usage. 24x24 is used on the right hand side of the XP start menu and in Explorer toolbars when the Large Icon feature is used. 64x64 and 128x128 can be used for settings for the visually challenged or when a Mac style dock application is used.
In addition to different sizes, the icon file can contain images of different color depths. The standard color depths are 32 bit, 256 colors and 16 colors. Consideration may also be given to a 24 bit high-color version of the icon if the icon might be displayed with a good quality video card on a non-XP system.
In this tutorial we will only focus on creating an icon in 32 bit color with the three standard sizes. The intent here is to create an XP style icon for display on an XP machine with a capable video display. If for some reason the color display on the monitor is less than capable of 32 bit color the icon will still be displayed in the best manner possible. If you wish to create the other color depths simply reduce the colors of each image as you work on them and save with a distinguishable file name for each size/color depth.
More information on XP style icons and their design can also be found at this
link.
II. TUTORIALBegin by opening the arrow image in Photoshop.
Arrow.png
In the Layers pallet, duplicate the the background so that you have a copy on a layer, then delete the background image (you must be working on a layer rather than a background for the next step). With the Magic Wand tool (set this to anti-aliased), select the white background and delete it. Invert the selection. Set the foreground color to Medium Green (R=1, G=255, B=0) and the background color to Dark Green (R=0, G=64, B=0). Select the Gradient tool and set it to Foreground to Background. Using the Linear Gradient setting, fill the arrow shaped selection from the top left corner to the bottom right corner. Stroke the selection with Medium-Dark Green (R=0, G=128, B=0) set to 4 pixels and located inside the selection. Save the image as a Photoshop file (we'll call it Green Arrow.psd).
Green Arrow
Open the Open Folder 48.psd file from the Icon Templates zip file. Resize the Green Arrow image to 31x38 pixels and drag it into the Folder Icon 48 image. This should create a new layer between the existing blank layer and the Folder [top] layer.
Layers View
Nudge the right edge of the arrow layer so that it is just inside right side of the folder. Add a drop shadow to the arrow layer using the Layer Styles dialog. These settings simulate the XP drop shadow reasonably.
Drop Shadow Settings
Using the Unsharp Mask filter, sharpen the arrow layer, if needed. You may also find a need to do some smudging or further nudging at this point. Save the file as 48.psd (the XP Folder Icon 48.psd should have Read Only attributes to prevent accidental over-writing). At this point you have too options: merging the visible layers and resaving as a .psd file or using the Save For Web command and saving as a .png-24 with transparency. I prefer the second option, as it keeps a layered copy of the file in the case you find that you need to go back and tweak something again.
Open the Open Folder 32.psd file next. Go back to the Green Arrow image and undo the Resize command through the History pallet. Resize the Green Arrow image to 20x24 pixels and drag it into the Folder Icon 32 image. Repeat the steps above, but change the opacity of the drop shadow from 60% to 50%. Save the new file as both a .psd and .png.
Next open the XP Folder Icon 16.psd file. Again, go back to the Green Arrow image and undo the Resize command then Resize it to 12x14 pixels and drag it into the Folder Icon 16 image. Repeat the steps above with the opacity of the drop shadow at 50%. If you haven't already done so, you will have to sharpen this layer. Go to the Layers pallet and select the Folder [top] layer. Change the layer's opacity from 65% to 42%. Save the new file as both a .psd and .png.
Now that the images are finished, let's make the icon.
Open GIF Movie Gear and select Insert Frames. Select your 48x48, 32x32 and 16x16 prepared images. Then from the file menu select Save As.... Name the file My Downloads Icon (or whatever you'd like), then from the drop-down menu below select Windows icon (.ico), and save.
Saving the icon file
You now have your new Windows XP style icon to use!