How to Create a Location Map Icon in Photoshop

In this tutorial we will be using Adobe Photoshop to create a modern map with dropped pin icon. This tutorial assumes familiarity with Adobe Photoshop at an intermediate level, for example you should understand the basics of layer styles and how perform most basic functions, this covers lighting and vector drawing techniques, and will teach you the fundamentals of icon design in Photoshop, including using basic shapes, masks and effects to create an attractive, sleek result that is scalable for different sizes and devices.

Final Result Preview

Here is a quick preview of what we'll be making in this tutorial:

Step 1: The Document

Note: Mac users replace CTRL with CMD Let's start off by launching Photoshop and creating a new document, enter the values show in the image below to create a 128x128px 72ppi document. With rulers visible (CTRL+R) click and drag 4 guides to the edges of the document, so that you have a 128x128px square within the guides. You can then increase the size of the document to give yourself a larger canvas to work with (CTRL+ALT+C), I've chosen 610x300px to work with for the tutorial but any size larger than the original 128x128px will work, or you can skip this step all together if you prefer to work on the exact size canvas. Next, add two extra vertical guides to the document, splitting the main area into 3 sections, the central section should be about 20% smaller than each of the other 2 sections. Feel free to set a background color or pattern that you like, but be sure to keep it subtle so as not to interfere with drawing the icon.

Step 2: The Base

Next, select the Rectangle Tool (U) and draw a slightly off-white (#f5f2f1) rectangle on the canvas within the guides at about 114x94px. Apply a Drop Shadow layer style with the following settings:

• Blend Mode: Multiply
• Opacity: 42%
• Color: #000000
• Angle: 90
• Distance: 3px
• Spread: 0px
• Size: 4px

And also apply a 1px stroke, aligned to the outside, with an opacity of: 80%. Select the Pen Tool and create 2 new points along the top line of the rectangle shape where the vector line and the vertical guides intersect. And repeat for the bottom line of the rectangle. Select the Direct Selection Tool (A), highlight the 2nd and 4th points along the top and bottom line of the rectangle (hold down shift to select multiple points) and nudge all 4 points up 10px (Shift+UP ARROW). Using the Rectangle Tool (U) draw two more rectangles above the original shape, keep them the same height as the original shape was (about 94px) and for the width go from the two middle guides out to the edges of the shape, whatever this distance is, is the width they should be. Your result should look something like this now: Set the fill of both new rectangles to #f5f3f2. Apply a gradient overlay on both shapes, set the first color stop to #ffffff and the second color stop to #ebe3de, on the top row of stops in the gradient editor, set the first stop to 0% transparency and the second stop to 100% transparency. Both shapes should have exactly the same styles at this point, but we want the right-hand rectangle to appear slightly lighter than the left (assuming your light source is coming from the right-hand side of the document) so set the Fill opacity of the layer to 0% so that as the gradient fades out to 0%, so does the fill and you can see the layer below rather than the layers solid color. Leave the left as it was as it is now darker than the right-hand side.. The next step is to select the Direct Selection Tool (A) and highlight the top right and bottom right points on one of the new rectangles, and again nudge both points up 10px (Shift+UP), then repeat for the other rectangle. The goal here is get the two new rectangles to align with the first shape we drew, resulting in a base shape and two 'panels' on either side of it, sitting flush. Now we are going to draw some dividers, use the guides if necessary and with the Line Tool (U) draw two lines alongside each other where the fold would be on the shape, going from the very top to the bottom of the shape at that point (as show below). Set the left-hand line to white (#ffffff) and the right-hand shape to black (#000000). Set the black line to just 5% Fill Opacity and then group the two lines (CTRL+G) and duplicate the group. Nudge the group over to where the next fold would be on the map. Next, we will create a shadow below the base of the map, hide the layers you have created so far, and on a layer below the others draw a black ellipse using the Ellipse Tool (U) at about 76x18px. Convert the shape to a Smart Object Filter > Convert for Smart Filters. Then apply a Filter > Blur > Gaussian Blur.. effect at 10 strength. Because we converted it to a smart object first this effect is non-destructive and be modified later on if required. Our map should look like the below image at this point. And that's actually the trickiest bit done! --update--

Step 3: The Map

We're going to draw some roads onto the map manually now, so lets start off by drawing one straight road horizontally from the left to the right of the document. Use the Rectangle Tool (U) and draw a rectangle at about 115x4px stretching horizontally across the whole map. Apply a 1px Stroke aligned to the inside with a color of #bbb1ad. Using the same techniques from the base of the map, create 4 new points on the road you just drew, where it intersects with the folds of the map, using the Pen Tool. Then with the Direct Selection Tool (A) select the new points and nudge them up 10px (Shift+UP) to match the shape of the map. With the road shape layer and Rectangle Tool (U) still active, select Add to shape area (+) and start drawing some more lines using the same techniques. You can have a bit of fun at this stage, and if you're up for it draw the area around your own house or workplace to make it personalised to you. Still using the Rectangle Tool (U) draw a new shape layer and contour it to the shape of the map, if goes over a fold you will need to again create 2 new points and nudge them up 10px (Shift+UP). Color this new shape light green (#aae1a0) and set the opacity to about 25%. Your map should now look like the image below, with a similar layer structure.

Step 4: Lighting & Shading

We will now create a light source for the document at around about a -45 degree angle, to do this create a new layer and set it's opacity to about 75% so that you can see the map below when you start painting on it. We will begin by creating the shadows, so select the Brush Tool (U) and a soft round brush at about 50px diameter, then cover the whole map area with black (#000000) as demonstrated below. You can now draw on a light source, using the same tool but with a solid white (#ffffff) color, draw a few strokes of light emanating from the bottom right hand side of document as demonstrated below. Now we need to trim the light effects to the shape of the map, so go back to the very first shape we drew (the base of the map) and using the Direct Selection Tool (A) select all of the points, copy (CTRL+C) the vector paths and go back the lighting layer we were working on, paste (CTRL+V) the vector paths and then select Layer > Vector Mask > Current Layer to create a vector clipping mask on the layer, trimming it down to the shape of the map. Set the blending options for the lighting layer to Soft Light and around 80% opacity, depending on what looks most natural or how strong you want the lighting to appear.

Step 5: The Outline

Duplicate the first shape we drew (the base of the map) and move the duplicated layer to the top of the document. Set the fill opacity of this layer to 0% and apply a Stroke, aligned to the inside at 4px and fill color #ffffff. You should now have something like the image below.

Step 6: The Pin

Using the Rectangle Tool (U) draw a light grey #eeecec rectangle at about 4x32px where you want the pin to be on the map Zoom (Z) in and adjust the anchors at the bottom of the small, thin rectangle to match the angle of the map. Using the Ellipse Tool (U) draw a small brown (#6b5d55) ellipse below the pin and using the Transform (CTRL+T), rotate it to the angle of the base shape. Next, still using the Ellipse Tool (U) draw the head of the pin, holding shift while you're doing this will constrain the proportions of the ellipse, making it a proportionate circle. It should be about 16x16px in size and a red color (#e54a40). We have the basic shapes that make up the pin now, all we need to do is apply some layer styles to each object. On the Pin layer, apply a grey (#aaaaaa) stroke, 1px, aligned to the inside. And a Gradient Overlay at 90 degrees.

• Stop 1: #b3b3b3, location: 0
• Stop 2: #f4f1f1, location: 50
• Stop 3: #b3b3b3, location: 100

On the hole layer apply a Drop Shadow:

• Blending Option: Normal
• Color: #ffffff
• Opacity: 100
• Distance: 1px
• Spread: 0
• Size: 0

The head of the pin needs quite a few layer styles:

Inner Shadow

• Blend Mode: Overlay
• Color: #000000
• Opacity: 100%
• Angle: -90
• Distance: 5px
• Choke: 0
• Size: 15px

Inner Glow

• Blend Mode: Normal
• Color: #b50101
• Opacity: 35%
• Noise: 0
• Distance: 5px
• Choke: 0
• Size: 6px

Gradient Overlay

• Blend Mode: Normal
• Opacity: 100%
• Angle: 90
• Stop 1: #ffffff, 0% opacity, 100% location
• Stop 2: #ffffff, 100% opacity, 0% location

Stroke

• Blend Mode: Normal
• Opacity: 100%
• Position: Outside
• Size: 1px
• Color: #ad2220

Using the Ellipse Tool (U) and Pen Tool, manually draw a shadow for the pin at about a -45 degree angle, or following the angle of the light source we created earlier. It should replicate the shape of the original object but taper as it gets closer to it. Convert the shadow layer to a smart object (Filter > Convert for Smart Filters) Apply a Filter > Gaussian Blur blur at about 3.2% strength. Your layer structure should look something this at the end of the project.

Conclusion

And there you have it, congratulations! the final product is an elegant, modern map icon that is scalable up and down with only stroke and blur amount tweaks being needed. Thanks for reading, I hope you enjoyed it and please let us know if you have any issues.