Photoshop: Create an iPhone Google Map-style Shadow for Icons

by Chadwick Wood
August 23rd, 2010

While working on the next release of Sphericle (which is going to be awesome), I've had to create new map icons for the Search screen in the app. I want these icons to have the same style of shadow as the Google Map pins do on the iPhone. So, after some experimentation, I found a pretty easy and accurate way to do that. Here's what we're starting with:

On the left, you can see the typical pin. On the right is an icon I'm working on, showing a player's profile picture. This is the icon we'll make a shadow for.

Duplicate and Merge Your Shadowed Object

First off, you want to create a flat copy of whatever you're making a shadow for. In this example, the icon is actually made up of several layers grouped together, so I select the Group, then "Duplicate Group", then "Merge Group". This results in a flattened copy of the icon.

Select the Group

Duplicate the Group

Merge the Group

Apply Layer Styles to Make a Shadow

No matter what the contents of your flattened icon copy are, you can use layer styles to make it into a shadow. In the Layers palette, double-click on the right side of the layer with your copy of the icon, which will open up the Layer Styles dialog box. Then, apply the following layer styles:

1. Blending Options: under "Advanced Blending" set "Fill Opacity" to 0%.
2. Color Overlay: set the Color to black (#000000), and the opacity to 25%.
3. Outer Glow:
   • Blend mode: normal
   • Opacity: 25%
   • Color: black
   • Spread: 0%
   • Size: 3 px

Below are some pictures to aid you. Once you've done this, your copy of the icon should be a slightly blurry, semi-transparent gray version of the icon.

Blending Options

Color Overlay

Outer Glow

Transform the Shadow to Achieve the Right Perspective

The last thing to do is transform the shadow, then put it in the right place. So, select your icon copy and go to Edit -> Free Transform. We need to do two transformations:

1. Set the height to 50%. Make sure the width stays to 100%... we don't want to resize proportionally; we're intentionally warping the layer.
2. Set horizontal skew to -40 degrees. This is what gives the shadow the angled effect.

Click the check box to make your transformations final. The last steps are to move your shadow layer to line up with the icon it's shadowing. Just do this however looks right. Also, your shadow layer will probably be in front of the icon it's shadowing, so make sure you swap the order of those layers, so that the shadow is behind.

Here's our final product. It's a pretty close copy of the built-in iPhone effect!

I was hoping to write a script to automate this whole process, but I'm using Photoshop CS3, and it doesn't look like you can script layer styles. So, that will have to wait. If you have any questions, let me know in the comments. And if this tutorial helped you, do me a favor and check out Sphericle. Thanks!