Use Gimp to create icon shadows for Google Maps

If you make your own custom Google Maps icons, then it is sometimes necessary to create suitable shadow icons for them. There are a few free online tools to do the job but I thought I would try to use Gimp to do the task. I figured out the basic steps:

1. Duplicate the custom icon, 
2. De-saturate and darken the duplicate, 
3. Scale the duplicate in half vertically and skewed it horizontally, 
4. Reduce the shadow opacity and make another duplicate shadow layer, 
5. Refine the shadow layers.
6. Save the shadow icon

Make a duplicate layer of the custom icon

1. Start Gimp. Load the custom icon e.g. fair.png.
   
   Note the dimensions of the custom icon in the title bar at the top; 32 by 32 pixels in this example.
   
2. If the Layers pane is not displayed, then press CTRL+L. Select the original icon layer, which is usually labelled as Background.
   
   
   
   
3. Click the Duplicate layer icon as shown above.
   
   A duplicate named Background copy is created.
   
4. Click the eye icon for the Background copy layer to turn off the display for that layer.

De-saturate and darken a duplicate layer

1. In  the Layers pane, select the Background layer.
2. In the menu bar, select Colors | Hue-saturation.
   
   The Hue-Saturation dialog box appears.
   
   
   
3. In the Lightness scroll field, drag the handle to the left. Similarly, drag the Saturation handle all the way to the left. Click OK.
   
   The layer is grayed and darkened.
   
   
   

Scale vertically by half and skew horizontally by half the shadow layer

1. Select Layer | Scale Layer.
   
   The Scale Layer dialog box appears.
2. Toggle the chain off as shown below. This turns off the constant aspect ratio.
   
   
   
   
3. In the Height field, type in half the current height e.g. 16. Click Scale.
   
   The layer is scaled vertically in half.
   
4. Press SHIFT+T.
   
   The Shear dialog box appears.
   
   
   
5. In the Shear magnitude X field, type in negative half of the current height e.g. -16. Click Shear.
   
   The layer is sheared horizontally by half.
   

Adjust the shadow opacity, location and make duplicate the shadow layer

1. Select the Move Tool in the tool box or press M. Drag the layer until the layer border is aligned as shown below.
   
   
2. Select Image | Fit Canvas to Layers.
   
   The canvas is expanded to fit the skewed layer.
   
3. In the Layers pane, drag the Opacity scroll handle to reduce the opacity e.g. 25%.
   
   
4. Click the Duplicate icon.
   
   The shadow layer is duplicated as Background copy#1 layer.
   

Refine the shadow layers by scaling and blurring

1. In the Layers pane, select the upper shadow layer e.g. Background copy#1.
2. Select Layer | Scale Layer.
   
   The Scale Layer dialog box appears.
   
3. Make sure the chain icon is connected. In the Width field, reduce the size by a few pixels e.g. from 48 to 43. Click Scale.
   
   The upper shadow layer is scaled down while maintaining the aspect ratio.
4. In the Layers pane, select the lower shadow layer e.g. Background.
5. Select Filters | Blur | Gaussian Blur.
   
   The Gaussian Blur dialog box appears.
   
   
   
6. In the Horizontal and Vertical fields, type in a radius e.g. 5.0. Click OK.
   
   The lower layer is blurred.
   
   
   

Save the shadow icon

1. Select File | Save As.
   
   The Save Image dialog box appears.
2. In the Name field, type in a name e.g. fair-shadow.png. Click Save.
   
   The Export File prompt pops up.
   
3. Toggle Flatten Image on. Click Export.
   
   The Save as PNG dialog box appears.
   
   
   
4. Click Save.
   
   The shadow icon is saved.