Learn To Create Your Very Own 3D Maps

Resources Used In This Tutorial

House Icon By Drago

Getting Started

Create a new document (Ctrl + N) with a canvas size of 1680 x 988 pixels. Fill (G) your background layer with the color #fce9c1. Once you've filled your background layer select the "Brush Tool" (B) with a brush size of 15px.

Creating The Major Roads

Select the "Pen Tool" (P) with the settings set to paths.

With the "Pen Tool" (P) create one road on your canvas.

Once you've created one road hold down the CTRL key on the keyboard then click any where on your canvas. With the "Pen Tool" (P) again create another road joining it onto the last one.

Repeat this process over and over again until you have made all your major roads for your map.

Once you've finished all your major roads right click anywhere on the canvas and select "Stroke Path" from the menu.

All your paths should now be displayed with a solid color. Still with the "Pen Tool" (P) right click once more only this time select "Delete Path" from the menu.

Were now going to change the color of our major roads so go ahead and add the following "Color Overlay".

To make the major roads stand out were going to add a nice thick stroke. When adding the stroke don't use the stroke in the layer styles window, instead create a new layer above your major roads layer then load a selection around your major roads.

Quick Tip:

To load a selection around an element click the little thumbnail inside of your desired layer whilst holding down the CTRL key on the keyboard.

Once the selection is loaded and your new layer is highlighted go to "Edit and Stroke".

The reason behind adding a stroke using this method is because the lines are a lot neater You should have something like this.

Creating The Minor Roads

Create a new layer underneath your major roads layers, change your brush size to something slightly smaller about 13px, then using the "Pen Tool" (P) begin to draw your minor roads in the same way we drew our major roads.

Once all your minor roads have been drawn add a "Color Overlay" using the settings below.

We now need to add a stroke to our minor roads, we also do this in the same way we did our major roads. First make a selection around your minor roads.

Quick Tip:

To load a selection around an element click the little thumbnail inside of your desired layer whilst holding down the CTRL key on the keyboard.

Create a new layer above your minor roads layer then go to "Edit and Stroke".

You should have something like this.

The Clean-Up Operation

Before we go any further in the creation of our 3D map we need to clean up the joining major and minor roads. By this i mean remove parts of the stroke where the roads meet.

Either use the rubber or one of the selection tools and remove the lines from in between the joining roads. On the roads that don't meet other roads then simply just cut the stroke short so the end of the road is left open. See image below.

Once all the joining lines have been removed you should have something like this.

Adding The Road Names

To name each road we'll be using "Text On A Path". Select the "Pen Tool" (P) then make a line on one of your roads making sure you follow the curves of the road.

Once you've made the path select the "Text Tool" (T). Place the text cursor over the first anchor point on the path until you see the cursor change, once the cursor changes click your left mouse button and begin typing.

If your wondering what settings i used for my text then please check the image below.

Repeat the steps above until all your major and minor roads have been labeled.

Creating The Map Detail

Create a new layer underneath all your road layers then fill (G) the layer using the color #f8d59d. Next make a selection around your major roads but keep your new layer highlighted.

Quick Tip:

To load a selection around an element click the little thumbnail inside of your desired layer whilst holding down the CTRL key on the keyboard.

Now go to "Select and Modify and Expand", expand the selection by 10px.

Once the selection has been expanded hit the delete key on the keyboard. Now select your desired cutting tool and randomly cut out the middle of the areas using random straight and diagonal lines.

In selected areas of the map add some grass using the color #9fd5a9.

In other areas of the map add some water using the color #9fc5d5. You should have something like this.

That's your map complete, unless you wanted to add any additional features such as railways etc...

Making The Map 3D

Save your PSD file, then save the PSD file again with another name so you have two copies of the PSD file. Now highlight every layer including your background layer in the layers window then go to "3D and New 3D Postcard From Layer".

Select the "Object Rotate Tool" (K) from the tool bar. In the top left corner you should see some axis controls, move your mouse towards the bottom until you see a yellow line appear like the image below.

Once the yellow line appears click and drag downwards until your map tilts. Your looking to get something like the image below.

Create a new layer underneath your 3D layer then fill (G) the layer with black #000000. Now add a gradient overlay to your layer using the settings below.

Now add a layer mask to your 3D map layer then drag a linear gradient (G) from the top downwards dragging down about 200px. You should have something like this.

Adding The Map Details

Download the house icon and place the icon somewhere on your map.

House Icon By Drago

Select the "Custom Shapes Tool" (U) then select a speech bubble from the drop down menu at the top.

Drag the speech bubble onto your canvas so it sits over the top of the house. Once you've created the speech bubble add the following layer styles.

You should have something like this.

Duplicate your speech bubble layer then clear all the layer styles by right clicking the layer and selection "Clear Layer Styles". Now add a black #000000 color overlay to your duplicated layer. Change the opacity of the duplicated layer to 50% then drag the layer underneath its original. Were now going to change the perspective of the duplicated speech bubble layer, go to "Edit and Transform and Perspective", now change the perspective to match the image below.

Add a layer mask to the duplicated speech bubble layer then drag a linear gradient (G) over the right corner so it looks like its disappearing into the distance.

Finally fill your speech bubble with your information and logo if you have one.

Conclusion

Thanks for taking the time to try this tutorial, I'll look forward to your comments.

Thank you for taking part in this tutorial, if you liked it then please promote it by retweeting, digging and sharing. Thank You.