1 File setup

Create the PSD file with image size 600x600. As an aside, I'm just using specific numbers to be concrete; feel free to adjust such details to your taste. I will however suggest that you start with a fairly large image since it's easier to work with a large image, and you can always resize it when you're done.

2 Set colors

Paint the background black. That will make the icon stand out and the reflection look better. Also, set the foreground colors to a darker and lighter version of the same hue (or roughly the same hue). I've set my primary foreground color to #1D5654 (dark blue) and my secondary foreground color to #74BAB5 (light blue) since I want a blue icon.

3 Create a rounded square

Figure 3.2. Click to enlarge.

Shift-drag some guides out to create a 300x300 square. My guides are at 150px and 450px for both the horizontal and vertical dimensions.

Now select the Rounded Rectangle Tool, which is on the main tool palette hiding behind the Rectangle Tool; see Figure 3.1. Set the radius to 40px. Create a rounded square using the guides. This rounded square will automatically show up on its own layer. The result should look like Figure 3.2.

4 Set a gradient

Figure 4.2. Click to enlarge.

Right-click the rounded square layer on the layers palette and choose Blending Options. In the resulting dialog select the Gradient Overlay item and make sure it is checked. Use the settings shown in Figure 4.1. The result should look like Figure 4.2.

5 Create a smaller rounded square and set its gradient

Figure 5. Click to enlarge.

Now we want to do the same thing we just did, but with a smaller rounded square on the inside of the first rounded square. I've created guides at 200px and 400px for both the horizontal and vertical dimensions, which gives the icon a nice, fat border. After creating the guides, create another rounded square on a layer above the first one, this time using a 20px radius. Set the gradient as before, but this time click "Reverse" when you are choosing Gradient Overlay options. That will add a nice 3D effect. It should look like the icon is being lit from the upper right hand corner, as in Figure 5.

6 Add text, a logo, or whatever you like

Figure 6.2. Click to enlarge.

Manually create a new layer at the top of the layer stack and add whatever text or logo (or both) you like. Note that you will need to add a new layer or else Photoshop will try to tie the text to the layer containing the smaller rounded square, which we don't want. I've added a shield icon by using the 'd' Webding. The color is #FFFFCC though you should use whatever you want. Since the PSD is so large, you will need to ramp the font size way up. In the example the font size is set to 200px.

Also set a drop shadow on your text or logo using Layer > Layer Style > Drop Shadow. The drop shadow angle should be 45 degrees like the gradient was since we want the light source to be consistent. Also I would recommend setting the shadow color to the darker of the two foreground colors you originally selected. For me that's #1D5654. See Figure 6.1 for the settings I'm using. The result should look like Figure 6.2.

7 Add a backplane

Figure 7.2. Click to enlarge.

Our goal is to create a 3D icon, so we will need to add volume to the currently flat icon. Clear your original guides and create some new ones forming a backplane. The backplane should be somewhat smaller than the front square to account for perspective. I've created guides at 200px and 480px for the horizontal dimension, and 120px and 400px for the vertical dimension. So my backplane is 280x280, as compared to the 300x300 of the front layers.

Set your foreground colors back to #1D5654 (dark blue) and #74BAB5 (light blue), or to whatever you originally set them to. We want to use the same colors for the backplane.

Create a layer just above the background layer and select the Rounded Rectangle tool. Depending on how far back you put the backplane, you will want to choose some value for the radius. (As the backplane moves further back, the radius should decrease.) I'm setting the radius to 30px since that looks about right to me. Draw the rounded square on the new layer and once again set the Gradient Overlay. You can see the settings I used in Figure 7.1. Notice that the opacity is down to 60%, that the gradient is not reversed, and that the angle is still 45 degrees. See Figure 7.2 for the result.

Oh, I decided that the shield was too yellow and so I changed its color to #FFFFEE. It happens. :-)

8 Turn the backplane into a volume

Figure 8.1. Click to enlarge.

Figure 8.2. Click to enlarge.

The icon is really starting to look 3D, but it looks like two planes instead of a single volume. To fix this, you will need to choose the Direct Selction tool on the tool palette. The Direct Selection tool is "behind" the Path Selection tool. Anyway, choose that, and also clear your guides again.

With the Direct Selection tool, click the edge of the backplane. You should see the edge's path light up with eight points on that path. You will want to grab two of the points and drag them so as to create the illusion of a volume. You shouldn't need to grab the "handles" for the points; just drag the points themselves. See Figure 8.1. If you click on the background layer in the Layers palette, the path disappears and you can see that the icon is starting to look pretty good! See Figure 8.2.

9 Play with the perspective

Figure 9. Click to enlarge.

You should have four or more layers, not counting the background: two front layers, a back layer that now looks like a volume, and one or more layers containing text or graphics for your icon's logo. Shift-select the layers in the Layers palette (but not the background), right-click them, and choose Merge Layers. They should now collapse into a single layer.

Go to Edit > Transform > Perspective and see what you can come up with. Try to get the perspective to be roughly what you're looking for; don't worry if it looks a little strange. One you get the perspective close enough, try using the Skew transform or even the Distort transform as necessary to get the look you want. This step will take a little patience and artistic judgment on your part. Have a little fun with it. It is after all a cartoon icon.

See Figure 9 for what I came up with. Your mileage may vary.

10 Create the basic "reflection"

Figure 10. Click to enlarge.

Now we're going to create the "reflection". I use scare quotes because we're going to cheat a bit. Instead of being mathematically correct about this (which would involve flipping a copy of the icon vertically, and this turns out to be hard since we have distorted the icon), we're going to make it look like we reflected it without actually doing that.

Duplicate the layer in the Layers palette, and move the two layers into position so that the top layer is the icon and the bottom layer is the reflection. Ignore the technical incorrectness of the reflection. We'll address that. See Figure 10.

11 Transform the reflection

Figure 11. Click to enlarge.

Use the Edit > Transform tools to match the bottom of the icon up with the top of the reflection. This is another one of those steps where artistic judgment will come in handy. It's more important for the top of the reflection to be "right" (or close enough, anyway) than it is for the bottom part, since we're going to hide the bottom in the next step. See Figure 11.

12 Add a gradient to "fix" the reflection

Figure 12. Click to enlarge.

Set your foreground color to black, and create a new layer in between the two existing layers. Use the gradient tool (black-to-transparent gradient) on the new layer to hide the logo in the reflection. That way the reflection won't be obviously wrong.

13 Add some outer glows

Figure 13. The final product. Click to enlarge.

As a final touch, add an outer glow (Layer > Layer Style > Outer Glow) to both the icon layer and to the reflection layer. I changed the glow color to pure white (#FFFFFF), used opacity 75%, spread 15% and size 20px. Crop and resize the icon to suit your taste. See Figure 13.

Conclusion

Congratulations, you are now creating official Web 2.0 cartoon icons! If you have suggestions or other thoughts to share, please post a comment below.

If you like this tutorial, you may also like Creating a Rose in Photoshop.