Note: You can print this (or any page) from your web browser by selecting File/Print. This information is provided for your personal use only and is not to be redistributed without permission of the author. This tip covers Photoshop CS3.
Laurie McCanna's Photoshop Tip #7
Making a Rounded, Slick, Web 2.0 Icon
In this example, start with a 64 pixel by 64 pixel file. Create a new layer by clicking on the New Layer icon at the bottom of the Layers palette.
Next, select the Rounded Rectangle tool by clicking and holding on the Rectangle tool. On the Options bar, select Fill Pixels. You always want to work with pixels when creating icons so that you can see exactly what your tiny image will look like.
On the options bar, click the Geometry Options icon. It's a tiny arrow that brings up the Geometry Options dialog. Make sure to select Snap to Pixels. The Snap to Pixels option ensures that each edge of the rounded corner will look exactly the same.
Next, set the radius for the rounded corner. On this icon I used 8 pixels.
If you'd like to use a drop shadow for the icon, you'll need to leave space around the rectangle. The easiest way to do this is to drag out some guidelines from the edge of the image file. Finally, holding down the Shift key to constrain the shape to a perfect square, drag the rounded rectangle tool from guideline to guideline.
Finally, you'll want to add several layer effects to create the gradient background, stroke, dropshadow and inner shadow to give the effect of beveling. You can download the icon style file here
. Then, in Photoshop, select Window > Styles
if the Styles palette isn't visible. Next, click the arrow on the upper right corner of the Styles palette to open the menu. Select Load Style, and browse to where you've unzipped the file to. Once you've loaded the style file, drag the style icon (it will be the last style in the palette) to your rounded rectangle layer.
Making an Old School Style Icon
Start out with your file the size you want your finished icon to be. Windows standard icons are generally 32x32, just as a guideline.
This first method of making an icon is the standard toolbar-icon look that many software programs have,
and can actually be done in Windows Paintbrush, PaintShop Pro, or any simple basic paint program. Bucket fill the image with
your background color, which is usually light grey. Draw a one pixel black
border all the way around the icon. (Use the pencil tool with the smallest
brush setting. Hold down the shift key as you draw your line to constrain
the pencil to a straight line). Then, on the bottom and right sides of your icon, inside the
black border, draw a darker grey line 2 pixels wide. On the left and top
of the icon, draw a 2 pixel white line. At the corners of the icons, where the grey and
white lines meet, stairstep the pixels so that they form a 45 degree angle.
I've had a lot of folks ask me about converting BMP or GIF files to Windows ICO (icon) format.
- Axialis Icon Editor - Shareware icon editor that will create all sizes of Windows icons, and also allows you to convert Mac icons to Windows format
- IcoFX is a freeware utility
- Icon Sushi is another freeware icon utility