Create an old map of your location

Put your city on the map in 4 layers. Create an artistic old map of your area. Here’s what you should be achieving:

psd map tutorial step5

Step 1: Getting the actual map

Go to maps.yahoo.com, find your area and zoom in to a desired level—I went in somewhere between City and Street view in some area in Bucharest, Romania but you can also do a Country view. If your part of the world isn’t covered by yahoo maps, try google mapsor get a regular image of a map from the area you need.

Update: Simon suggests in a comment below that to avoid any legal implications in using a screen capture from Google or Yahoo Maps in your artwork, you should rather go with an open map provider as openstreetmap.org.

Hit the PrintScreen key, go in Photoshop and paste it in a new document and then Crop (C key) the image keeping only the desired part. Use the Patch Tool or the Healing Brush Tool to remove the center cross.

psd map tutorial

Step 2: Applying the old paper texture to give it a vintage look

For the second step you need an old grunge paper texture. I used this free image from cgtextures. Paste it on a new layer above the map and set the blending mode to Multiply. If your image turns out to dark, select the paper layer and go to Image > Adjustment > Brightness/Contrast and set set the brightness to a higher value (I didn’t need to). You may also need to adjust its size and position.

psd map tutorial step2

Step 3: Adding a photograph

Now you need to find a suited image of your city/region. Well, it doesn’t necessarily have to be related to your region as long as it looks good. I used this image of the The Athenaeum in Bucharest. But I also found fantasy/surreal art images to look great here (examples at the end). Paste the image under the paper layer and adjust its blending mode, opacity and brightness/contrast. I used Multiply with a 50% Opacity but you may want to try other values for your image of choice (like Soft Light for the blending mode or increasing the Brightness).

psd map tutorial step3

Step 4: Clear the roads!

Next thing I did here was to create a Layer Mask to the Bucharest Athenaeum layer and while having the mask selected and the foreground to black, I used a 100px brush with 0% hardness to brush away the sky. Then, with the same brush, but after setting its Opacity to 50% I brushed some more on the mask in regions I considered to “crowded” like where there were roads and texts from the map layer and trees and building parts from the Athenaeum image. I then reduced the brush size and brushed some more along the roads. The brush size should be smaller than the road width. Try to only brush inside the roads.

psd map tutorial step4

Step 5: A nice final touch, the borders

Your layers should now be in this order: Paper layer (up most), Photograph layer and Map layer. While having the Photograph layer selected, create a new layer (Ctrl+Shift+N), name it Borders and fill it with white (press D and X to make the foreground color white and Alt + Backspace to fill it with color). Hit Ctrl+A to select all, go to Select > Modify > Contract and contract the selection by 19px. Change the Foreground Color to #999999 and hit Alt+Backspace to fill the selection. Go to Select > Modify > Contract again and enter 1px. Hit the Delete key to clear the selection.

psd map tutorial step5

And you’re done. Gongrats! Oh, right… I promised the fantasy examples:

psd map tutorial fantasy image

I used two layers with two photographs for the one above, both with Multiply blending mode and both with layer masks.

psd map tutorial fantasy image

Another cool vintage example:

psd map tutorial fantasy image

And another one, of a south Romanian view (click to view full size):

psd map tutorial fantasy image

Go beyond: add a page curl using Veerle’s tutorial and place it on a desk environment! Let me know how it all went. Good luck!

Posted in blog Tagged with: , , , ,
26 comments on “Create an old map of your location
  1. mmolai says:

    This is the epitome of “nifty”
    Floated!!!

  2. Eli says:

    I love how you’ve actually used a real map from Yahoo for this! Good job.

  3. I really like this tutorial and I’m looking forward to trying it later today. The end result is looks great. Thanks for the tut!

  4. Brissy18 says:

    Hey. Thanks for the great tutorial. I shall use it. But don’t forget to put a great old north point to top it off.
    Cheers

  5. This is very interesting.I will use it to show my shop on website.

  6. Sandra says:

    This is fantastic! Thank you for sharing such a brilliant idea with the world. I’ll have fun trying this!

  7. Simon says:

    Or if you want to do your own retro-rendering of maps that isn’t in a modern Yahoo / Google/Microsoft style, and which doesn’t have nasty copyright implications, you could use freely available data from Openstreetmap, and you can tinker with the actual map rendering with tools like Kosmos, or just bring the data in as an SVG and tinker.

  8. Stefan says:

    @Simon: Thanks! I updated the tutorial with your suggestion.

  9. Carrie Mae says:

    Lovely! This such a simple project with a gorgeous result. Thank you for sharing.

  10. Kai says:

    Super cool!
    I’ll use this tutorial for my schoolproject (gamedesign)

  11. fxencore says:

    I think if you create a dispalacement map with your paper – the result would be more realistic.

  12. Stefan says:

    @fxencore: That’s right.
    In the last example I used Transform/Wrap to make the map and the photograph layers match the paper layer.

  13. Thanks for the info, I love finding out about new techniques

  14. excellent techniques in whole tutorial. thanks

  15. Thank you. Great post

  16. Dave says:

    I really like this tutorial and I’m looking forward to trying it later today. I especially like the last example – great work and tut!

  17. Daniel Pinto says:

    Great Post! Thanks!

  18. I just created about a dozen of these to use within our soon to be released travel area. Your tutorial was simply perfect to follow. Thanks. Looking forward to trying a couple more of your tutorials.

  19. Aker says:

    This one’s great, I love the idea and the result, great job :)

  20. Marty Rogers says:

    Beautiful tutorial.

    I really enjoy things of this style and nature. I may give this tutorial a whirl later and see how it goes, it’s very simple and clear to follow so it should be fairly straight-forward.

    Thank you, good job and keep up the greak work.

  21. Michael says:

    Hi I really like this its very creative and produces a great effect.

  22. Arielle says:

    Another good idea is to decopage the map onto a magnetic board (Ikea or BBB has them) and you can hang it on an office wall and hang notes/ ideas from it…

  23. joe g says:

    Think it would enhance the “vintage” feel if you lowered the saturation on the map. Aside for that great tutorial. Thanks a ton!

    • Stefan says:

      I tend to agree with you, desaturation is in some ways the hallmark of vintage. That would depend on the piece of map you’re working with though, I remember I tried playing with the saturation and decided not to lower it but to go with the more vibrant colors.

  24. Bogdan Olteanu says:

    Foarte tare ideea ta :-) imi plac rezultatele si combinatia e ok :-), cautam ceva de inspiratie si am gasit :D
    Great ideea excelent results.

35 Pings/Trackbacks for "Create an old map of your location"
  1. Photoshop Tutorial: Old Fantasy Map of Your Area | CLD Tutorials says:

    [...] View tutorial [...]

  2. zabox.net says:

    [...]Turn a map from google maps or yahoo maps into a cool vintage style version[...]

  3. [...] Old Fantasy Map of Your Area Learn how to create a vintage, aged map using a screen shot of the area of your interest in Yahoo! Maps. [...]

  4. Link to Vintage & Retro Photoshop Tutorials « goriLaRadio says:

    [...] Old Fantasy Map of Your Area Learn how to create a vintage, aged map using a screen shot of the area of your interest inYahoo! Maps. [...]

  5. 35 Beautiful Vintage and Retro Photoshop Tutorials | POLPDESIGN says:

    [...] radio knobs/dials in this Photoshop tutorial by skillfully using of the Marquee Tool in Photoshop. Old Fantasy Map of Your Area Learn how to create a vintage, aged map using a screen shot of the area of your interest in Yahoo! [...]

  6. Tuto #2 : Créer une vieille carte | NoobStudio says:

    [...] Tutoriel ici ! [...]

  7. Photoshop: 35 hermosos Tutoriales Vintage y Retro | ProyectoAurora.com says:

    [...] Old Fantasy Map of Your Area Learn how to create a vintage, aged map using a screen shot of the area of your interest in Yahoo! Maps. [...]

  8. 35 Beautiful Vintage and Retro Photoshop Tutorials | Web Burning Blog says:

    [...] Old Fantasy Map of Your Area Learn how to create a vintage, aged map using a screen shot of the area of your interest in Yahoo! Maps. [...]

  9. [...] very cool old looking map of your own place. Look on this site how to do [...]

  10. Retro Vintage Design Tutorials | Tutorials | Faze One Studio says:

    [...] Photoshop Tutorial: Old Fantasy Map of Your Area [...]

  11. 33 Photoshop Tutorials for Designing Amazing Posters and Ads « All things beautiful says:

    [...] 23. Old Fantasy Map of Your Area Poster [...]

  12. [...] Состариваем карту Учимся на состаривать скринщот карты на Yahoo! Maps. [...]

  13. Retro Vintage Design Tutorials | Faze One Studio - Photgraphy & Design says:

    [...] Photoshop Tutorial: Old Fantasy Map of Your Area [...]

  14. 30 Useful Photoshop Tutorials for Vintage and Retro Style « « MegaTeacher | Let's start learning MegaTeacher | Let's start learning says:

    [...] Old Fantasy Map of Your Area [...]

  15. 30 tutoriales útiles para Photoshop con estilo Vintage y Retro | Diario del espía says:

    [...] Old Fantasy Map of Your Area [...]

  16. [...] オンライン地図サービスを使って、レトロなマップを作る方法 [...]

  17. […] 3. Crear un viejo mapa de ubicación […]