How to create a web site icon with Photoshop

by Klaus Graefensteiner 10/30/2007 12:39:00 PM

This article is for the "Absolute Photoshop Beginner", for somebody, who never used Photoshop before.

Step 1 - Download and Install Adobe Photoshop CS3:

Download and install a trial version of Photoshop CS3 from www.adobe.com/downloads/ . I picked the Photoshop CS 3 Extended edition.

Reboot the computer, if the install asks you to do so.

Step 2 - Download and Install the ICO File Format:

The goal is to create an Icon graphic in Photoshop and save it as *.ico file format. Photoshop doesn't provide this file format out of the box, but you can download it from this web site: http://www.telegraphics.com.au/sw/.

For Windows pick the appropriate link and push the download button. This will initiate a file download. Save and/or open the ICOFormat-1.6f9-win.zip file.

Extract the ICOFormat.8bi file into the following folder: "C:\Program Files\Adobe\Adobe Photoshop CS3\Plug-Ins\File Formats". This is the folder that holds the Photoshop file format extensions on English US Windows, if Photoshop has been installed using the default settings. This folder might be different depending on your platform and configuration.

Step 3 - Restart Adobe Photoshop CS3:

Step 4 - Create a new Preset and Photoshop project:

Icon files are 16x16 pixel RGB 8 bits/Channel RBG files. 16 x 16 pixels is a small graphic area to start with. Instead work with a 64x64 pixel RGB file and reduce its size later.

Start Adobe Photoshop CS3 and select the File->New menu option. This opens the "New" dialog. Make the following selections:

Save the Preset by pushing the "Save Preset…" button.

Then select the just created ICO64 Preset in the Preset drop-down list.

Push the OK button.

Now you are all set for your first Icon drawing.

Step 5 - Draw your icon using a colored brush:

The checker board in the middle is your "Canvas". The background of this canvas is transparent as defined in the preset. Push the "Ctrl + +" key combination ("Ctrl" and "=") or ("Ctrl" and "+") to zoom in on the canvas and make it look bigger.

Pick the "Brush" tool from the tool strip on the left side. Then select a color in the "Swatches" area on the right side. Now you are ready to draw your icon graphic. You can configure the size and type of your brush using the Brush configuration dialog, which can be opened by pushing the Brush button from tool strip on the top.

Let "The Force" be with you.

Step 6 - Save your art work:

I recommend to save your drawing as Photoshop and Icon file. First save it as Photoshop file. Select the File->Save As.. Menu option.

Then save it as Windows ICO file. Select the File->Save As.. Menu option and pick the ICO (Windows Icon)(*.ICO) file format.

If the selection is not available then you either didn't install the ICON file format correctly or the preset was using a not compatible bit rate for the RBG channels. The bits per RBG channel can't be bigger than 8 bits per channel. To check this go to the Image->Mode Menu option and verify that...

...RGB Color is checked and 8 Bits/Channel is checked.

Step 7 - Reduce Image Size and Save as web site icon:

To reduce the icon size to 16 x 16 pixels select the Image->Image Size… Menu option and change the pixel Width and Height values accordingly. Pick the "Bicubic Sharper" reduction setting.