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.

the new icon with guidelines

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.