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.
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
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:
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.
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:
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!