Adobe Photoshop CS3 Style Icons

Step 1

When I want to create an effect that already exists I always like to have a piece of reference material to work with. In this case I’ve taken a screen shot of the Photoshop CS3 icon and placed it in the file to look at while I work.

Step 2

Create a new layer by clicking the New Layer icon at the bottom of the layers palette and name it "Background Square" then select the Rectangular Marquee tool by pressing the M key and drag out a nice square for the icon’s background. (*note: By holding the Shift key while you drag you can constrain your selection to a perfect square.) My square is 210×210 pixels.

Step 3

Press the D key to reset the foreground and background colors to black and white, then fill the selection with black by pressing Option-Delete (PC: Alt-Backspace).
Deselect by pressing Command-D (PC: Ctrl-D) and lock the layers transparency by clicking the Lock Layer Transparency button at the top of the layers palette.

Step 4

Lets go ahead and setup for the blue background gradient by changing the foreground color to #0b88cb and the background color to #004068.
Press the G key to choose the Gradient tool, then from the options bar across the top choose Foreground to Background from the color picker and Radial Gradient for the gradient type. Now simply click a spot in the upper left hand corner of the box and drag at a 45 degree angle toward the bottom left corner to create a gradient that looks similar to the example.

Step 5

Now we’ll add a drop shadow to the layer by Right-Clicking (Mac: Control-Click) on the layer and choose Blending Options. Click on the Drop Shadow link in the left column and add the following settings then click OK.

Step 6

Your file should now look something like the one below.

Step 7

Press the T key to call up the Text tool and lets go ahead and add our text with the following settings.

Step 8

The text also has a slight gradient but instead of using the gradient tool directly we are going to use the layer style called Gradient Overlay as shown below.
Before I called up the Layer Styles dialog box though, I changed my foreground color to #d6dfe5 so that it would already be there for the layer style application.

Step 9

Technically now we are finished as far as a correctly built PS3 icon. I thought for my icon I’d add a Web2.0 style gradient and rounded corners to add a nice little touch which you will find in the .PSD file available for download at the bottom of the lesson.

Step 10

Try all the variations or make up your own and enjoy!