How to create a nice map pin icon in Photoshop

Hey there! Sorry about some of my recent posts being low-quality, it’s because I’ve been spending most of my blogging time on this! Here’s my first tutorial on how to make this amazing map pin icon in Photoshop. If you would like more tutorials like this, be sure to let me know! (The comments field is fine.) Hope you like it!

Okay! Just FYI, Here’s what this is what your pin icon is going to look like in the end:

Part 1: Drawing the circle

Well, let’s jump right in. I’ll assume you have Photoshop, so make a new document 5 inches by 5 inches, at 300 ppi resolution. Oh, and make sure that you’re using RGB color. If it’s automatically set to CMYK, you’ll get a huge headache trying to export it as a PNG (I speak from experience).

Okay. Now, right-click on the shape tool, choose an ellipse, and make sure that your fill color is red and your stroke width is 0 pt. Draw an ellipse on the canvas (It doesn’t matter how centered it is; just place it around where I have it). Remember to hold shift while dragging to constrain porportions (make sure the width is the same as the height, so you get a circle instead of an oval).

Next, we’re going to align this shape. Click on the move tool (or press V) and then press Cmd-A (on a Mac) or Ctrl-A (on a PC) to select everything. Now, select the ‘Align Horizontal Centers’ button (on the toolbar, as shown above).

Part 2: Shading the circle

Well, now that we have all the positioning figured out (at least for the time being), we’re going to start making this icon look 3-D! The first step is to choose Inner Shadow from the FX icon (at the bottom of your layers panel).

Adjust your settings according to those in this screenshot. Now look at your circle. Pretty cool, huh? (Just for reference, here’s a photo of what it should look like:

Part 3: Adding the highlight

Okay, but if you look at most map icons, there’s a little highlight in the corner. Next, I’m going to show you how to do that:

First, you’ll need to put an ellipse in this spot on your circle. It doesn’t matter what color it is. Just draw an ellipse and use Free Transform (Cmd-T or Ctrl-T) to move it to that spot.

Remember when I said that the color doesn’t really matter? Here’s why. Just set the fill of the layer to 0. Don’t worry if your circle disappears.

Set your gradient settings to those I have here. Remember to set both colors of the gradient to white, and set the opacity on the far-right edge to 0 (like on the picture above).

Yay! We’re finally done with our pinhead!

It should look like this:

Part 4: Adding the rest


Next, you’re going to need to draw a rectangle for the actual pin. Make sure the stroke width is set to 0 pt, and draw a rectangle around where I have it here.

Align it to the center the same way we did before.

Now, move the rectangle underneath the pin head (if necessary).

Choose the gradient overlay option again, and adjust your settings accordingly.

We’re almost done! Now, we just have to make the circular base.

Use the elliptical selection tool to select the bottom of the pin, like this. Just make sure the left and right sides are aligned.

Now use the rectangular selection tool to select the rest of the pin. It wouldn’t hurt to go above the visible portion, like I have here.

Now, for the easiest step in this entire tutorial. Make sure your rectangle layer is selected, and click the Add Layer Mask button.

Now you’re done!

I hope this tutorial helped you! If you’re stuck or want to tell me how I’m doing, feel free to comment below! Thanks!

Leave a comment

Your email address will not be published. Required fields are marked *