The Joy Of Illustrated Maps In The Era Of Google Earth

Advertisement

Update (01.08.2013) Please note that this article has been updated and now references to OpenStreetMap1.

In my career as a freelance illustrator, map-making has become a favorite specialty of mine. With each map assignment, I virtually travel across the globe, visiting places I’ve never been. Most recent was a “trip” to New Zealand for a sampling of local Wellington beer for Draft Magazine2. My maps are designed to appear next to magazine stories about trips to faraway places, or about the best restaurants in a nearby neighborhood.

I create them in Adobe Illustrator, and I relish the research process as much as working on the drawings themselves.

3

There was a time when map assignments arrived from clients in a FedEx envelope, full of research, including Xerox’ed maps taped together and marked up with a highlighter. Back then, I could search online for photo references, but it certainly wasn’t the 3-D experience of flight that it is now. With Google Earth, I can get the lay of the land and see the heights of buildings and the way green spaces meet city blocks. These details give me a sense of place that fires my imagination.

4

I received the brief for Draft Magazine’s project from art director Kevin Robie, with a list of publications to highlight, a preliminary layout and a few reference maps. My starting ritual is to create a Google “My Places” map, with a marker for each landmark, shop or restaurant highlighted in the story.

Here are the steps I took:

  1. Log into Google, and click on “Maps.” Click on the “My Places” button and then the “Create Maps” button.
  2. Name the map. Choose to make it “Public” or “Unlisted.” Hit “Done.”
  3. Search for a location using the search box, and then click “Save to My Maps.” From here, I can choose which map to save it to and view the map.
  4. Once I have saved locations on my map, click the “Edit” button, and then click on the location that I want to edit in the list. A callout box will appear on the map, allowing me to change the location’s title and description and even the color and style of the pin.
  5. With the map set up and Google Earth installed, I can choose to look at locations in “Satellite” mode or “Street View,” and then try the “Earth” view right from my browser to fly in and get a feel for the heights of buildings and the topography of the city.
  6. Download a KML file of my map by clicking the KML link or the Google Earth icon under the title of the map. Double-click the file to launch Google Earth on my system with my map preloaded.

5

Whether you explore your map in the browser or from the Google Earth6 app, you can fly around, visit street level and see the Panoramio photos taken in the neighborhood you’re visiting. If you’re lucky, the location you’re researching will have a panoramic virtual tour of the interior space. Street-view images can get out of date, so I always visit the websites of any businesses or restaurants that are being highlighted. I find that the Google Earth and satellite views give me a sense of a city or neighborhood that helps me to envision the overall look of the map.

Google has recently released the Google Maps Engine (currently in beta), which offers further customization, such as the ability to draw lines to create a virtual walking tour. If 3-D aerial views of buildings are what you’re after, Bing has a nice Bird’s Eye7 view that can supplement your research.

While Google and Bing can provide the 3-D vistas that allow you to travel virtually to the city you’re illustrating, you’ll also need a street map to compose the illustration. For this, go to OpenStreetMap.org8, the Wiki of world maps. Open Street Map describes their service as “free geographic data for the world.” Although maps contain factual information, most online map services copyright their maps. The license9 on Open Street Maps, allows for artistic use of their information with certain requirements and conditions.

10

I take screen shots and keep my reference images organized in the job folder on my system. In Illustrator, I create a CMYK document at the page size of the magazine. I take reference provided by the client along with screenshots of the Open Street Map view and File → Place‘d them in the document.

11

Place-linking images (as opposed to embedding them or pasting them from the clipboard) in Illustrator keeps the document’s size small — but it’s important to have a strategy for keeping up with the images on your system. If you move an image to a different location, the next time you open the document, Illustrator will ask you to find and relink the image that you moved.

I created a few more layers above my locked reference layer for the map’s background and the streets, and one for the dots that mark the locations I was highlighting.

The first stage of creating the map was to figure out the composition. In this instance, art director Kevin Robie provided his page layout with the map indicated. Once I’d drawn the location dots and some simple shapes indicating the background of the map, I could begin to see the shape and scale of the map and the space available for illustration.

12
Maps © OpenStreetMap.org Contributors

At this early stage I work in grayscale and I trace the street layout with the Pen Tool. I may not be including all the streets I draw in the final map. Sometimes the pattern of streets can provide a grid texture I can work with later. I strive to strike a balance between a basically accurate map that also functions as an illustration. I take liberties to make the information more legible as an illustration and the art more attractive on the page.

13

With my background shapes isolated on their own layer, I clicked the Target icon in the layers panel and lowered the opacity of the background shapes layer to see the map reference below. With the basic map area laid out, I began searching for photo references to help me decide on a color palette and imagery for the different locations.

14

Each location I was highlighting needed an icon illustration that’s emblematic of the place. Food bloggers, such as foodiegemsofwellie15, are a lifesaver to me because, although I can read about the specialty pies on Hashigo Zake16, that website has no images to help me visualize the size and presentation of the dish that this bar is famous for.

One of the great advantages of working in Illustrator is that I have my own spot illustration elements, which I’ve collected from previous projects. I have glasses, bottles of beer, pizza and foliage that I can scale, recolor and rework to suit any project — a major time-saver.

17

I also collect color palettes from previous projects, which I save in the Swatches Panel libraries (click Swatch Libraries → Save Swatches…, and then access them under User Defined). Over the years, I’ve learned not to assume that a color on screen will print accurately, so I’ll always check it against a physical sample.

18

I used the Pantone Plus Color Bridge guide fan book to help me choose CMYK colors from the right-hand CMYK column (I ignored the spot colors on the left because this was a CMYK job). The bridge guide also shows the equivalent spot colors, hex codes and RGB values for each color. Illustrator’s swatch libraries for Pantone books can be found in the Swatch Libraries menu, under “Color Books.” Once I find a color I like in the fan book, I add it to my swatches panel.

With colors loaded on my swatches panel and photo references gathered, I was ready to start building the illustration. I did most of my work from beginning to end in Illustrator. With other types of illustration, I may start with pencil sketches, but maps really lend themselves to being “built” from solid shapes and lines in Illustrator.

19

After flying around Wellington in Google Maps, I knew I’d be surrounding the map with a border of green trees, so I started drawing circles in shades of green and trying out different tree shapes for the border. I typed notes about an icon’s subject matter directly on the map to save my ideas for later.

Keeping the tree decoration on its own layer allowed me to use a layer clipping mask in Illustrator to quickly crop the edges of the trees to fit the map. Later, I got rid of the layer mask and used individual clipping masks on separate groups of trees so that I could vary their placement. (See the resources at the end of this article for masking tutorials.)

20

I turned off the layer with notes and printed out a preliminary map in grayscale, at a slightly larger than final size. I laid the printout on my light box and drew letters in ink multiple times to find some that I could combine to make labels for the different locations. I’d later make a 300-DPI TIFF scan of the lettering in Image Capture.

21

Next, I opened the TIFF in Illustrator and “Image Trace”’d it in black and white, with “Ignore White” turned on. I’ve saved a custom Image Trace preset in Illustrator that I use specifically for my handwriting, to retain as much of the original line character as possible. All of the detail settings are very high, and noise is at the lowest setting:

  • Mode: Black and White
  • Threshold: 128 (default)
  • Paths: 97%
  • Corners: 90%
  • Noise: 1 px
  • Check: “Create Fills,” “Snap Curves to Lines” and “Ignore White”

To save these settings as a custom preset for future use, click the “Manage Presets” button (circled above) on the Image Trace panel, and choose “Save as New Preset.”

After ungrouping the expanded trace, I started assembling the letters into place names and grouping them. Then, I copied and pasted the names onto a separate layer in my map file.

22

The title was created from a line of type and a rectangle, using Object → Envelope Distort → Make With Warp → Rise. I kept a copy of the “live” envelope objects off to the side, so that I could always adjust the amount of distortion. Then, I chose Object → Expand… to convert the warped type to paths, so that I could change colors and edit further.

23

I sent my Illustrator sketch positioned in the layout to the art director. At this stage, I showed him the composition and color palette, with a few details to show where I was going with it. In Illustrator, changing the colors or shuffling the composition elements is easy, so I always let the client know that this work is preliminary, even though it looks solid and not “sketchy.” The icons were plain shapes, which allowed me to get my ideas across without investing time in details that might need to be changed later.

Sometimes, I’ll include pencil sketches of the icons, placed on the Illustrator map; in this case, I’d worked with Kevin enough that I could use Illustrator shorthand, and he would know the level of detail to expect from my finished work.

I saved separate AI files for the sketch, comp and final version, so I could always go back and grab something I’d gotten rid of if I decided later that I needed it. Illustrator files are small enough to make this possible without eating up much storage space.

24

Once I’d finished detailing the final illustration, I got rid of any unused colors on my color palette (Panel Options → Select All Unused, and delete). Then, I saved the color palette for future use (Swatch Libraries Menu → Save Swatches). I can always access it from the same menu under “User Defined” later. Then, I went to “Select All” and chose Edit → Edit Colors → Convert to CMYK. Now, if I clicked on a color in my artwork, I could see the CMYK formula in the color panel.

Finally, I exported a high-resolution CMYK TIFF of the artwork. I could bring this into Photoshop if I needed to make any final adjustments or convert it to RGB for the website. I sent the final TIFF, rather than the Illustrator file, to my client. The final AI file is complex and made up of so many tiny parts that it would be safer for me to do any necessary edits myself. I learned that lesson after receiving a printed cover on which I found my main character’s ear unintentionally floating away!

25

After a project, I’m always excited to see the final work in print. I filed the magazine away in the hope of getting to see New Zealand some day. In that case, I’ll be tearing out the page.

Further Resources

(al)

↑ Back to topShare on Twitter

Laura Coyle is a freelance illustrator and anchor point aficionado from Atlanta, GA. Her work has been commissioned by major brands from Amazon to Target and American Express. You can see her portfolio at coyleart.com, or follow her blog at illustratoring.com. Laura teaches Adobe Illustrator classes online for ReneePearson and has been a featured presenter for tablet-maker Wacom.

  1. 1

    That was a really interesting look at your process. Thanks, Laura!

    5
  2. 2

    Jess Andreas Olsen

    July 15, 2013 11:43 am

    Very nice little guide til spicing up your brochure.

    If you want a online version. Map Box (http://www.mapbox.com/) is a very nice tool for that.

    /Jess, Copenhagen.

    2
  3. 3

    Cheers Laura, really interesting article. I am currently making a game your article has given me inspiration on how I’m going to design the game map.

    Deano

    4
  4. 4

    Pretty awesome stuff. I was wondering though – Do you have a license to use Google Maps? Tracing over their maps is against their terms of service – https://www.google.co.nz/permissions/geoguidelines.html.

    If you don’t I would suggest using Open Street Map (http://www.openstreetmap.org) and attributing them in the article or find a commercial map product that does allow tracing.

    8
    • 5

      I am sure Laura’s work qualifies as Fair use (at least under US law).. and maps are not copyrightable anyway. I don’t see why they could not be used

      0
      • 6

        Actually maps can be copy righted just like any other IP. What can not be copy righted is a fact – like a geographic location. Additionally, Google’s terms of service are opaque enough that it is almost impossible to tell if a use meets them or not. Much better to use OpenStreetMap for a project like this.

        0
      • 7

        And again… of course maps are copyrighted, as most content is. The notice is on every screen with Google maps! Tracing them is infringement of this. Varying international laws aside, not to mention where it ends up being published and accessed from, you have to make sure you have this covered properly; open source or licensed. No idea why you should think may are not subject to copyright, although it is an all too common mistake by those coming from a purely graphic/illustrative background without any experience or training in cartography. Unfortunately, a legal position of ignorance is no defence at all.

        0
    • 8

      Glen, thank you for pointing this out and introducing me to Open Street Maps. I did my research, joined their site and am glad to become more informed on this issue. The result is that I’ve revised the article and credited OSM for the images I’m using, as they require. Those who pointed out the copyright issue are correct and I wanted to address this. I’m glad that going forward, I can help introduce my fellow artists to OpenStreetMaps.org Thanks!

      0
  5. 9

    Thanks for this Inspirational article.

    0
  6. 10

    Awesome.

    0
  7. 11

    Both a great read and great work, thanks for sharing… :)

    1
  8. 12

    Very nice to see another person’s creative process, it’d be awesome if more people were to do similar things.

    0
  9. 13

    Thank you for sharing…very educational!

    0
  10. 14

    Thanks guys, for your kind comments!

    0
  11. 15

    Awesome. Thanks for the look at your process. :)

    0
  12. 16

    Not a designer, but really enjoyed this article, it was a captivating read!

    Mike

    0
  13. 17

    Great article Laura. Also enjoyed that you were in my hometown sampling beer!

    0
  14. 18

    Fabulous article!

    0
  15. 19

    This is really interesting stuff. I work as a consulting in the G.I.S industry and commonly find myself lamenting the lack of quality design many organisations put into their spatial media.

    In fact, that very dilemma is how I came to start exploring sites like smashing magazine in the first place.

    Most of what I deal with is in the interactive web sphere with medium size enterprise systems. In this space technology is often used to drive what an organization thinks they “Should” be doing rather than thinking about the people the systems are serving.

    I think this article really helps reinforce that a system is only as useful as the data supporting it… and that data is only useful if the story its telling can be clearly communicated to it’s intended audience.

    Also, Laura, as a Kiwi, I loved the Wellington map that you used as an example. It definitely captures the vibe of the place… in summer at least.

    0
  16. 20

    Thanks for sharing your process, Laura. Your maps are wonderful!

    0
  17. 21

    Great work, thanks for sharing :)

    0
  18. 22

    I forgot to say, I love seeing how you get ideas for your map icons. Using images from food bloggers as your jumping off point is a great idea!

    0
  19. 23

    Cathrine StClair

    July 15, 2013 8:41 pm

    Thank you for the great article – I loved the peek into your design process!

    0
  20. 24

    Very excellent illustration work! Loved seeing the behind the scenes process, as well. I’d like to see more of this.

    0
  21. 25

    Great article. I need to create a map and this will definitely help a lot. I didn’t know where to start.

    Laura keep up the good work, and thank you for sharing such details.

    0
  22. 26

    Laura, thank you for sharing your process! I may want to tackle one of these map projects after this!

    0
  23. 27

    Thanks for the comments!

    @Sam One thing I enjoy about working on maps is that there is so much information to take in from the writing to the research, in order to distill it into a visual communication. Also, it’s nice to hear I was able to capture some of the feel of Wellington – I hope to visit someday!

    0
  24. 28

    Here is also a good example of illustrated maps on Harvard Business School site: http://www.hbs.edu/maps/

    0
  25. 29

    Lucky Balaraman

    July 16, 2013 6:25 am

    Hey Laura:

    Generous of you to share your expert technique with readers. Also a fascinating article.

    Your final map illustration makes it obvious that you’re a professional artist and is a treat to look at!

    0
  26. 30

    Awesome post. Just out of curiosity, why TIFF and not PDF for export?

    0
    • 31

      Hi Evan, I’ve had some design clients that specifically asked for PDF because that worked best within their process, so in that case, that’s what I would give them. But Tiff works for this client. I’ve used that format reliably for years and I like the fact that it’s very straightforward (the saving options) it’s not as editable and it represents the art and the color faithfully.

      0
  27. 32

    Great article!

    I illustrate a map every year for Bug Jam, Europes largest VW festival and it always attracts so much attention in the age of the computer aided maps. It’s something that I love doing and really does add to the character of the event. If you do an image search on Google (bug jam map) you’ll find some past versions.

    0
    • 33

      Wow @thatdesigner, this map is so much fun to look at – I could pore over it for hours. Love it.

      0
  28. 34

    I too wonder about using google maps to trace the streets. They specifically state in their faq “You may not use Google Maps or Google Earth as the basis for tracing your own maps or other geographic content.” It looks like OpenStreetMap could be used if credit is given.

    0
    • 35

      It’s interesting how nearly identical their content is in this case – and identical to some of the other reference maps I had for this assignment. Something I will check into.

      0
  29. 36

    Very clever and professional process. Just a question, how much time did it take you?

    0
    • 37

      Thanks Jose. I don’t have an accurate count on this one, but generally the initial research/sketching process can take 1.5 – 2 days and it’s similar for the final. It all depends on the amount of detail, and I think this one is not as detailed as some that I work on. I juggle multiple jobs at the same time, and generally for magazine work, deadlines range from 2-3 weeks in my experience.

      0
  30. 38

    Great post – I always enjoy getting a peek at others’ creative processes. For anyone looking to visually customize but still leverage Google Maps functionality, I recently discovered this interactive tool that allows you to create visually customized Google Maps and spits out the JSON files to go with it – http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html – cheers

    2
  31. 39

    Whilst your maps look great, as someone who’s very familiar with Wellington (& lives in NZ), they miss the local landmarks (Te Papa, Beehive etc) that would give the map some real relevance. I can’t help but think if you lived in Wellington, you would have produced a map that was actually more informative than the one you have produced.

    0
    • 40

      The article mentions that the map was designed for a brief provided by Draft magazine, so I wouldn’t imagine Laura had any input into which places were featured. Either the writer/editor researched and chose the places, or they were perhaps based on advertising or sponsorship by the businesses featured. While it looks like the magazine really valued the input of the illustrator in this case, and went with the styles and icons she suggested, ultimately you’ve got to work to what the brief asks for.

      0
    • 41

      Hi Julian, I came so close to adding the Beehive! What an amazing building. It came down to space allowance and time, but you’re right, that would have been a nice addition.

      0
  32. 42

    Wow what an amazing article. I am fully inspired now!!! What beautiful work!

    0
  33. 43

    I like the your research approach and process. Awesome outcome!

    0
  34. 44

    Hello Laura,
    Your work is beautiful! I have a question for you. I do not know if it is relevant here but I am absolutely fascinated with map design and would absolutely love to work on map design projects. I was wondering if you could reveal some of your project-getting tips. Is there a particular job site/online project posting site where I could get map design projects? I hope it is all right for me to ask you this? I apologize if I asked the wrong thing…
    Thank you
    Pradnya

    0
    • 45

      Hi Pradnya,

      Thanks for your comment! I know more about working generally as a freelance illustrator than I do specifically as a map designer, so I’m not sure if this information will be helpful to you. For marketing yourself as an illustrator, it’s important to have a portfolio website, of course. You can do this on your own, and/or use a site like Workbook.com, that actively markets itself to people who routinely hire illustrators. Mailing list services like Adbase.com and AgencyAccess.com maintain lists of art buyers at design firms, publications, corporations and ad agencies. You can purchase access to a high-quality list and target your marketing efforts that way. Good luck in your pursuit of work!

      Laura

      0
      • 46

        I also wanted to add an inexpensive alternative to my above comment, which would be to go to library or newsstand to find publications that share your aesthetic. You can find their addresses printed in the pub, or on the web and sometimes the name of the art director or designer.

        0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top