Learn To Create Your Very Own 3D Maps

Hello everybody welcome to another tutorial from photoshop-plus. In todays tutorial I’ll be walking you through the process of creating your very own custom 3D map.

In Blog, Designing

What We’ll Be Creating

3D Map Photoshop Tutorial

Resources Used In This Tutorial

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.

3D Map Photoshop Tutorial

Creating The Major Roads

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

3D Map Photoshop Tutorial

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

3D Map Photoshop Tutorial

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.

3D Map Photoshop Tutorial

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

3D Map Photoshop Tutorial

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

3D Map Photoshop Tutorial

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.

3D Map Photoshop Tutorial

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

3D Map Photoshop Tutorial

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 > Stroke”.

3D Map Photoshop Tutorial

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

3D Map Photoshop Tutorial

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.

3D Map Photoshop Tutorial

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

3D Map Photoshop Tutorial

3D Map Photoshop Tutorial

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 > Stroke”.

3D Map Photoshop Tutorial

You should have something like this.

3D Map Photoshop Tutorial

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.

3D Map Photoshop Tutorial

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.

3D Map Photoshop Tutorial

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

3D Map Photoshop Tutorial

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.

3D Map Photoshop Tutorial

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.

3D Map Photoshop Tutorial

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

3D Map Photoshop Tutorial

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

3D Map Photoshop Tutorial

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 > Modify > Expand”, expand the selection by 10px.

3D Map Photoshop Tutorial

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.

3D Map Photoshop Tutorial

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

3D Map Photoshop Tutorial

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

3D Map Photoshop Tutorial

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 > New 3D Postcard From Layer”.

3D Map Photoshop Tutorial

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.

3D Map Photoshop Tutorial

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

3D Map Photoshop Tutorial

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.

3D Map Photoshop Tutorial

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.

3D Map Photoshop Tutorial

Adding The Map Details

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

3D Map Photoshop Tutorial

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

3D Map Photoshop Tutorial

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.

3D Map Photoshop Tutorial

3D Map Photoshop Tutorial

3D Map Photoshop Tutorial

You should have something like this.

3D Map Photoshop Tutorial

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 > Transform > Perspective”, now change the perspective to match the image below.

3D Map Photoshop Tutorial

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.

3D Map Photoshop Tutorial

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

3D Map Photoshop Tutorial

Conclusion

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

3D Map Photoshop Tutorial

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

Purchase Psd Now

  1. mustapha
    February 24, 2011 at 10:32 AM

    nice design
    & great idea
    thanks Mr Richard
    :)

  2. February 27, 2011 at 2:34 PM

    Great Tutorial and techniques well explained!
    Thanks for sharing…
    Featured in Tutorials of the week in http://www.hangaroundtheweb.com

  3. March 8, 2011 at 10:27 AM

    excellent. Thanks.

  4. April 21, 2011 at 2:10 PM

    its greattttt….

  5. May 6, 2011 at 10:25 PM

    This was a great tutorial! Thanks for the help.

  6. purple
    June 25, 2011 at 6:51 PM

    good one!!!
    need more of these maps tuts!
    thnkx

  7. July 14, 2011 at 9:53 AM

    This map look good. Thank you tutorial. ;-)

  8. August 18, 2011 at 1:36 PM

    Dude, this is awesome! Will try this for the imprint of my website but my photoshop skills are not the best. Great tutorial indeed!

  9. August 27, 2011 at 6:54 PM

    I love the map design! Now you should go use that to make it into a 3D looking map icon. Check out my blog post on the matter! http://blog.soyfestivo.com/?post=making-a-simple-map-icon-in-adobe-photoshop

  10. hajer
    February 6, 2012 at 10:25 PM

    seems v.easy and nice ..
    thanx alot :)

  11. March 23, 2012 at 3:51 PM

    Great Idea and Great Design Of Great Designer

  12. manxmuddled
    April 2, 2012 at 1:02 PM

    I came unstuck at the colour overlay and load selection part. I had to rename the background layer to add the colour overlay, and then when I tried to load selection it just selected the outside border of the file. What am I doing wrong? I love your result and really want to persevere with this!

  13. Tikaram
    February 8, 2015 at 1:23 PM

    Really a great and inspirational idea for the nice designation, thanks for your tutorial :)

  14. Guy
    February 21, 2015 at 11:14 PM

    I did exactly as instructed yet come up with different results. It would help if the author told us how to do things rather than assume we already know how.

  15. Wilma Hamlin
    March 2, 2015 at 2:00 PM

    Hi Guy, we are sorry if you did not get the desired result. If you can kindly mention the step which is not clear (in detail), we would be able to help you .

Give Us Your Feedback

Here on Photoshop Plus we use something called Gravatar, its a little image which will appear next to your name when you comment on a blog. Using a gravatar will help us recognise genuine comments from the spam comments.


Don't forget to leave a comment on this post, we appreciated your feedback good or bad.

There's currently 15 Comments On Learn To Create Your Very Own 3D Maps, why not add yours!

Leave a Reply

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

Auto Scroll To The Top
css.php