How to create a web site icon with Photoshop

by Klaus Graefensteiner 30. October 2007 13:39

    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.

    clip_image001

    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.

    clip_image002

    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:

    clip_image003

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

    clip_image004

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

    clip_image005

    Push the OK button.

    clip_image006

    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.

    clip_image007

    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.

    clip_image008

    Let "The Force" be with you.

    clip_image009

    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.

    clip_image010

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

    clip_image011

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

    clip_image012

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

    clip_image013

    Apply these settings.

    clip_image014

    And save image as Icon file as described in Step 5.

    clip_image015

    Done! You just created your first web site icon

    clip_image016

    kick it on DotNetKicks.com

Tags: , ,

Painting | Blogging | Photoshop

About Klaus Graefensteiner

I like the programming of machines.

Add to Google Reader or Homepage

LinkedIn FacebookTwitter View Klaus Graefensteiner's profile on Technorati
Klaus Graefensteiner

Klaus Graefensteiner
works as Developer In Test and is founder of the PowerShell Unit Testing Framework PSUnit. More...

Open Source Projects

PSUnit is a Unit Testing framwork for PowerShell. It is designed for simplicity and hosted by Codeplex.
BlogShell is The tool for lazy developers who like to automate the composition of blog content during the writing of a blog post. It is hosted by CodePlex.

Administration

About

Powered by:
BlogEngine.Net
Version: 1.6.1.0

License:
Creative Commons License

Copyright:
© Copyright 2012, Klaus Graefensteiner.

Disclaimer:
The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.

Theme design:
This blog theme was designed and is copyrighted 2012 by Klaus Graefensteiner

Rendertime:
Page rendered at 2/4/2012 5:24:51 AM (PST Pacific Standard Time UTC DST -7)