dslreports logo
 
    All Forums Hot Topics Gallery
spc
Search similar:


uniqs
5240

MrSquire
Insert something witty here
Premium Member
join:2004-06-08
X(4)Y(0)Z(0)

6 recommendations

MrSquire

Premium Member

XP Style Icon Tutorial

The following software is used in this tutorial: Adobe Photoshop (Paint Shop Pro or any other image editor capable of reading and writing Photoshop and transparent .png formats) and GIF Movie Gear (demo
version available here
). The author also has written this with the anticipation that the reader has a basic working knowledge of Photoshop (or the reader's preferred graphics editor).

In addition, the XP Icon Templates.zip file is also needed as well as the Arrow.png file which is located later in the tutorial.
(Note: the creator of the templates for the Open Folder 48, 32, and 16 is no longer known to me, as they were downloaded from the Internet a long time ago and I have no idea where I'd found them. This author hopes that because this tutorial is for educational purposes and is not for any personal gain the creator of the original templates would not object to their use here. The other templates in the folder are original to the author.)
XPIconTemplates.zip
45684 bytes


I. DEFINITIONS

The XP Style

When Windows XP was first released many referred to it as the Fisher-Price operating system. The bright colors and rounded look of both the interface and it's icons do indeed have a strong resemblance to products found in toy stores. The major overhaul on the look of the icons was made possible by increasing the maximum icon color depth from 8 bit color to 32 bit color (24 bit color + 8 bit alpha channel). This allowed for the use of gradients to blend colors rather than the dotted look of dithering, anti-aliasing for rounded shapes and an angular appearance, and the use of drop shadows to give a three dimensional feel to the icons.

Let's have a look at what an 8 bit 256 color Windows 9x style icon looks like. The use of dithering is used in an attempt to create the look of depth. Also notice that the icon is mostly working with 90 and 45 angles rather than curves and is facing straight on rather than off-set. Most importantly, look at how the transparency is either on or off and the illusion of shadowing is created with a dark line along the bottom and right edges of the icon.

Windows 9x icon


Now let's look the 32 bit XP version of the same icon. Aside from the obvious reshaping and use of gradients, notice the use curves, angles, and drop shadow. This is all possible because of the alpha channel. The alpha channel is a masking layer used to define the levels of transparency to be applied to the color channel. In the alpha channel black areas are totally opaque, white is transparent and grays are levels in between. The alpha channel smooths the rounded edges of the color layer and fades out the drop shadow.

XP icon Color Channel

XP icon Alpha Channel

XP icon composit view


Multi-Resolution

A 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. TUTORIAL

Begin 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!

sargeeld
Sgm Retired
Premium Member
join:2002-12-16
Raeford, NC

1 recommendation

sargeeld

Premium Member

Nice!! Thanks for the tut MrSquire!!

Macy
South Of Insanity
MVM,
join:2001-12-02
Pink Beanbag

1 recommendation

Macy to MrSquire

MVM,

to MrSquire
Very nice! Thanks for posting this MrSquire.

dandelion
MVM
join:2003-04-29
Germantown, TN

1 recommendation

dandelion to MrSquire

MVM

to MrSquire
Very nice, thanks!!:)

LU89
Jersey Devil
Premium Member
join:2003-05-24
@desk

1 recommendation

LU89 to MrSquire

Premium Member

to MrSquire
Bah, something else to work on

Thanks MrSquire See Profile!

MrSquire
Insert something witty here
Premium Member
join:2004-06-08
X(4)Y(0)Z(0)

1 recommendation

MrSquire

Premium Member

said by LU89:

Bah, something else to work on

:D:D:D