CS3 Icon Tutorial

So here is a new tutorial on how to make your own custom icons.
In the example we will make an CS3 style icon. Personally I favor
Adobe Fireworks for these kind of things, but since this is a Photoshop
based community, Photoshop it is.

Note that at the end of this tutorial we need to use a small program (so
small you can run it without installing) from Greenfish, a Hungarian company
that makes free-ware software. I found the Icon Editor to be quite nice as
a converter, since the actual editing blows.

You can download the editor free from the Greenfish Download Page.

So here we go:
First start Photoshop and open a new document.


In this case, the icon will be used for thumbnail view in windows (48x48).
Next set the background to "transparent". This can specially be important
when making icons used for desktops.

Other sizes:
24x24 Toolbar
32x32 Desktop


Next select the Marque tool (M) and draw a square taking up about 80% of the
canvas. This will be the size of the "body" of the icon.

With a square setup, we can colour it. Press G to select the gradient tool.
Depending on what you used last it can look different:
In our case we need the right one, since the left one is the
"Bucket Tool" used to fill only in one colour.

At your upper left, you will see a small preview of the gradient and some other
options.

The one highlighted right is to make a radiant, rather than a linear gradient.
The gradient has to glow from the upper left corner.

Next, click the thumbnail gradient, highlighted left. This will open the
gradient menu.


When clicking the lower pastels for colour, you can adjust the colour using the
preview. Clicking this will open the normal Photoshop colour palette.

Note that the highlight should be on the left side.

The upper pastels are for opacity, so we can leave those.


After applying the gradient, it should look something like this.


Next press T for the Text tool. Draw a text area large enough to fit a capital
and regular letter. By default the font is set to Myriad, which suits our purpose.
Depending on your gradient, pick a font colour. The CS3 icons all use white.


I used "Wa" in this case for the Wacom Drivers.

Again, select the Marque tool (M) and select the square again. With the body
selected again, go to the bottom of the layer panel.

The second icon on the left is the effects list, select "Drop Shadow".


In the Drop Shadow Menu, adjust the settings to your liking. Most often adjusting
the angle and opacity will be enough. Also make sure you have the preview on.


After applying the drop shadow, we are done with Photoshop. Time to save.
Go to: File -> Save as. or Crtl + Shift + S. Pick .PNG from the list since
.psd doesn't work with the icon editor program and any other format (.jpg or .bmp)
doesn't support transparency. .gif does on the other hand, but the quality is not
to well.

Now comes the part where we boot up Greenfish Icon Editor.

Select "Open File" and search for the .png you just saved.

The only thing we will do with this program is re-save it as .ico.

This I found is the only way to get decent icons. Making one in Photoshop and
than renaming them from .bmp gives very poor icons with no transparency.

After you saved your new icon, you can change folders or programs there icon.
Right click the shortcut or folder and select properties.

The far right tab (Dutch Windows here) should say "Adjust" or something like it.

Selecting that tab should show this:

The button highlighted here should read something like "Change Icon".
Press it and you will get a selection of windows standard icons for folders.
Program shortcuts might have a standard selection or program specific icons.

Click the "Browse" button at the upper right and locate your custom icon.
Select it and just "OK" you self out of the menu's.

And than your done, having your own custom icon.

Of course the possibilities are endless now. Specially in combination with a
custom wallpaper. Like when your at work and all the games are banned. You
can make a chess board as a wallpaper and make the pieces out of icons.
Not to mention office spread Battleship during the break.