Icon Making

I read in the forum some threads from people asking how to make icons (windows icons) but i did not appreciated the answers because they wasn't well explained or totally wrong (changing the extension of a gif file to .ico!!!). So i made this tutorial and tried to explain all the steps needed to get the final result.Yes, I'm not a professional but this might help beginners.In this tutorial I'm using photoshop cs and microangelo (5.58) (this is what i'm using to make my icons).

Introduction:

Before making an icon you should know some tips:

1. An icon is composed of several images of different sizes to be displayed correctly in windowsexplorer. Windows XP supports these sizes: 48x48,32x32,24x24 and 16x16 px.

2. The size 24x24 is used in the right part of the start menu . So if you make an icon and think that it will be used in this part of the start menu include this size in your icon.(this size is not used in windows explorer window).

3. 128x128 px size is also recommended if you want your icons to be converted to other format (mac icons) or simply to use it in dock programs (y'z dock, object dock, mobydock) or may be in future release of Microsoft Windows.( please note that only recent versions of dock programs supports icons ;old versions uses png's only).

4. You can also include 96x96, 72x72, 64x64 px sizes because some people are using this sizes but affects windows and may cause some trouble if used (especially on the start menu).

The tutorial:

Step 1: Creating the psd file.

What you need firstly is to make the picture that you want to convert to an icon.So use any skills you have to create it.Now merge all the layers together to get the final picture in one layer (please delete the background if you used it ).

Our layer palette should look like this ( With the picture you created sure):

Step 2: Cropping the psd file.

In order to make the icon as big as possible you can use this method:

Go to View> New guide to add a guide (choose vertical and press ok), repeat the step but this time check horizontal and press ok.

1. Use the move tool to put the 2 guides in the middle of your picture, you'll see that the guide will jump to the middle by it self. Repeat this step for both horizontal and vertical guide.

2. Now hold down shift+alt and create a selection around your picture with rectangular marquee starting from the intersection of the 2 guides (this is the center of your picture)

3. Go image>crop and you're done with the picture.

4. All what you have to do now is to resize the picture to the different sizes used by icons (128x128,48x48,32x32,16x16 ) and save the pictures one by one. (for example you'll resize the picture to 128x128px and save it as 128.psd and do the same thing for the other sizes).But using an action is easier because the hole process is "automated"(the action is included with the tutorial and resizes the picture to 128x128, 48x48, 32x32, 24x24 and 16x16 and saves the files as 128.psd, 48.psd, 32.psd, 24.psd and 16.psd).

Step 3: Converting the psd into an icon:(windows xp icons only) .

1.Once you finished with the psd file and saved the different sizes run Studio (start>all programs>microangelo>studio) .

2. Add the formats that we will use in our icon (press new image format and add the first size (128x128)) and repeat the process for the rest of the format (all with color depth set to windows XP).Delete all the other formats set by default in studio.

3. In the end the studio window should look like this:

4. Now drag and drop the psd files from the desktop to the studio window (Click on the format in the studio window it becomes highlighted with blue and put the respective psd file in the window) and repeat the process for all the sizes.

5. Finally all you have to do is to save the icon.So easy ? if you want to skip step3 (converting the psd into an icon) use axialis iconworkshop. (See Software's description).

Software you may use:

Axialis Iconworkshop: this is the best software you may use to create and manage icons.It's able to create icons from image files and png's from icons, convert mac icons to windows icons and create icl files (icon library). Iconworkshop also installs a photoshop plugin that permits you to transfer psd's from photoshop directly to iconworkshop without saving the psd files firstly, then scales them and create the icon in one click.

Download it here: axialis.com

Take a look on the Icon Workshop

Click to enlarge

Microangelo: this program is composed of 5 modules :

1. Animator: to create cursors.

2. Studio: the icon editor (i'm using version 5.58) supports psd (not multi-layered) and png's and exports also to psd, png, gif, bmp and ico.

Click to enlarge

3. Librarian: Search for icons and create ico files.

Click to enlarge

4. Explorer: Explore Folders in your computer and displays icons or files that contains icons.

OnDisplay:Permits you to customize folders,Drives, filetypes and cursors.

You can download microangelo Here: microangelo.us

5. Articons: this is an other icon editor simple and powerfull.What i like in this softwares is that it opens icl files and icons files in tabs in the same windows (microangelo opens a window for each icon and each library).

Click to enlarge