Let me start by saying that I used Photoshop CS6 to make this but you can use almost any design software to create it. The base we will be creating can be used for an icon set using the mask we’ll be making as well as stock images or your own. I’ve included the PSD file for easy reference so download it and fire up Photoshop, let’s get started! (Here's the video tutorial if you hate to read. :D)
THE BASE
Step 1: Open a new document. Name it whatever you like, set the size to 512x512 pixels and the ppi to 300. Set the color mode to RGB.
Step 2: Grab your rounded rectangle tool,(It’s hiding below the rectangle tool). Now click somewhere near the center of your artboard and set the dimensions to 490x490 with a corner radius of 66 pixels. Hit enter, now double click the layer in the layers panel and rename the layer “base”.
Now hold ctrl+a to select everything, switch to your move tool (v) and up in th etop toolbar click the indicators to center the square. Hit ctrl+d to deselect. You should now have something that looks like this.
Step 3: Make a copy of the square by holding down ctrl and tapping J on the keyboard. Hide that layer for now by clicking on the eye next to the thumbnail in the layers panel.
Step 4: It’s time to add a gradient to the base. With the base layer selected, click on the “fx” icon at the bottom of the layers panel and select “gradient overlay”. In the new dialog box that pops up click on the actual gradient to open up the color picker. Double click the color stops and type in C5C5C5 for the hex code on the first color, and E4E4E4 for the second. Leave everything else set to default and click ok until you are back at your artboard. You should now see something like this. (without the shadow)
THE ICON
Step 5: Now draw out a long skinny rectangle using the regular rectangle tool making sure to draw it all the way across your artboard. Like this:
Hold ctrl+T to bring up the transform tool and, holding shift, rotate the rectangle over the top right corner of the base. Rename this layer to “One”. Copy that layer using cntrl+J and rotate it across the right side of the base, a little lower than the corner. Repeat the process until you have something like this:
Step 6: Arrange the rectangles in this order in the layers panel: Two>One>Five>Three>Four. Now select both One and Two using cntrl+left click. With the rectangle tool selected change the fill of the shapes to D7D253. Now select the remaining shapes and color them AEAEAE.
Now draw a brown rectangle to add some color. Use the color code A6917D and place it below all of the “street” layers. You should now have something like this:
Step 7: Group all the rectangles together by selecting them all and hitting ctrl+G. Then right click on the group in the layers panel and select “merge”. Now select the base layer, right click it in the layers panel and select “rasterize layer style”. Reselect the group of shapes and right click, select “create clipping mask”.
Step 8: Next up on our to do list is the little blue location indicator. Grab your ellipse tool and, while holding shift, click then hold down alt as well and drag out a circle. Place it over the number three layer. Let’s give our circle a subtle blue gradient. Go to fx>gradient overlay and set the gradient colors to 88adc5 and 84b1d1. While you've got the fx box open, give it a drop shadow and lower the shadows opacity to 75% with a distance of 7 pixels and a size of 13 pixels. Set the angle to 90 degrees. Click ok. It should now look like this:
THE MASK
Step 9: Make one last copy of the base layer. Right click on it and select “clear layer style”, then move that bad boy to the top of the list. Up in the navigation panel go to filter>noise>add noise and make sure uniform is selected and give it 4% noise, click OK.
Step 10: Let’s add a gradient to the mask. Set the foreground color to eeeeee. And go to fx>gradient overlay. Once in the fx box, select foreground to transparent gradient. Set the style to radial, the angle to 90 degrees and the scale to 150%. It should now look like this:
Now just decrease the opacity of the mask layer to 29%.
Step 11: Next we will give it a nice subtle drop shadow. Re select the base layer. Go to fx>drop shadow. Set the color of the shadow to 595957. Set the opacity to 48%, angle to 90 degrees and both the distance and size to 5. It should now look like this:
Finally, save it as a .png image file. If you’re going to be making an icon set, be sure to place your themed icons in-between the base and mask and save them individually. Thanks for reading, I hope you had fun and learned a thing or two along the way.
[Read more]
