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 Magazine. 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.

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.

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.

Whether you explore your map in the browser or from the Google Earth 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 Eye view that can supplement your research.

I took screenshots and kept my reference images organized in the project folder on my system. In Illustrator, I created a CMYK document at the size of Draft Magazine’s pages. I took maps provided by the client, along with screenshots of my Google Map views, and File → Place’d them in the document.

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.

At this early stage, I worked in grayscale and I traced the layout of streets with the Pen tool. I may not have included all of the streets I was drawing in the final map; sometimes the pattern of streets provides a grid texture that I can work with later. I tried to strike a balance by creating a basically accurate map that also functions as an illustration. I’ll take some liberties if it makes the information more legible and the art more attractive on the page.

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.

Each location I was highlighting needed an icon illustration that’s emblematic of the place. Food bloggers, such as foodiegemsofwellie, are a lifesaver to me because, although I can read about the specialty pies on Hashigo Zake, 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.

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.

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.

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.)

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.

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.

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.

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.

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!

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

• Layer Clipping Mask Illustrator Tutorial
• Clipping Mask Illustrator Tutorial
• Laura’s Illustrator tips & tutorials blog

(al)

© Laura Coyle for Smashing Magazine, 2013.

The July edition of what’s new for web designers and developers includes new web apps, JavaScript resources, iOS 7 development tools, responsive design tools and frameworks, icons, e-commerce solutions, image apps, coding resources, and some really great new fonts.

Many of the resources below are free or very low cost, and are sure to be useful to a lot of designers and developers out there.

As always, if we’ve missed something you think should have been included, please let us know in the comments. And if you have an app or other resource you’d like to see included next month, tweet it to @cameron_chapman for consideration.

Froont

Froont lets you design websites right in your browser, using a simple drag and drop interface. This lets you see your site exactly as your visitors will.

jQuery CollagePlus

jQuery CollagePlus is a jQuery plugin that arranges your images to fit exactly inside a container. You have control over padding between images, the target row height, and CSS borders, and the plugin handles the rest.

Thincons

Thincons is a $7 set of icons inspired by iOS7. There are 77 icons in all, and you can get a sampling of them in exchange for a Tweet if you don’t want to pay for the full set.

gridr buildrrr

gridr buildrrr is an easy-to-use grid creator with just enough options. Specify the number of columns, the column width and margins, and any draggable boxes you want to include, and let gridr buildrrr do the rest.

Tabulous.js

Tabulous.js is a jQuery tabs module that offers a number of transition options, including scaling, sliding, and more. Implementation is quick and easy, with full documentation.

Opa Framework for JavaScript

The Opa Framework for JavaScript makes it simple to simultaneously write frontend and backend code in the same language, in the same module. It’s fully compatible with all standard JS libraries, includes database automation, and has HTML5 native support among other features.

Golden Ratio Typography Calculator

The Golden Ratio Typography Calculator is a simple tool for creating better typography. Just enter your font size and content width, as well as an optional CPL (characters per line), and get a number of typographic recommendations.

Gumroad

Gumroad makes it simple to sell any digital (or physical) goods online. Just upload your files, style your sales page, and get selling. Gumroad handles your payment processing, and charges just 5% per transaction.

Notism

Notism is a fast, simple, effective way for teams to collaborate on visual content. It includes tools for sketching and commenting, allows you to create interactive prototypes, and even has project management capabilities.

Style Guide Boilerplate

This Style Guide Boilerplate is geared toward designers and developers who want to roll their own frameworks to handle common components they use between projects.

AOL Reader

Need an alternative to Google reader? Check out AOL Reader. You can sign in with your AOL, Facebook, Google, or Twitter account to request access to the beta version. The app’s layout is customizable, and it offers the ability to import your RSS subscriptions in standard OPML format.

Webfonts Corner

Webfonts Corner is a showcase of web fonts in use on sites around the web. It’s a fantastic place to go for typographic inspiration.

Square Market

Square Market is a new ecommerce solution from Square. It costs nothing extra over the regular cost of Square payment processing, and the storefronts provided are modern and well-designed.

Gridism

Gridism is a responsive grid system that’s simple and easy to use. It stacks grid units on mobile device screens, and scales up to 978 or 1140px (your choice).

iOS 7 GUI PSD

This iOS 8 GUI PSD from Teehan+Lax includes GUI elements found in the beta 1 release of iOS 7. The PSD is well-organized, labeled, and layered, with editable shape layers, great for mocking up apps.

Automaton

Automaton is a task automation tool written in JavaScript. Just set up an autofile describing what you need done, and even have one autofile use another autofile for even more complex tasks.

File-type icon set

Building a web app? Then this free, open source file-type icon set from Teambox might be just what you need. It includes icons for a ton of different file types, including TXT, RTF, WAV, MP3, XLS, CSS, HTML, DOC, PDF, AVI, SQL, and many more.

Later.js

Later.js lets you define complex schedules and quickly calculate future or past schedule occurrences. It works client-side or with Node.js.

Clipping Magic

Clipping Magic makes it simple to remove the background from your images. Just mark the foreground and background of an image and Clipping Magic’s algorithm takes care of the rest.

The Secret Handshake

The Secret Handshake is an educational resource for young and student designers looking for inside tips on how to break into the industry. There are sections on resumes, the application process, and creating a portfolio.

Macaw

Macaw gives you the flexibility of an image editor, but writes semantic HTML and succinct CSS, so you can draw your code rather than write it. It’s not available yet, but you can sign up to be notified when it is.

Topcoat

Topcoat is a CSS framework for building clean and fast web apps. It includes a number of useful components, is themeable, and includes a PSD with all of the components in the code base.

AlloyUI

AlloyUI is a framework built on YUI3 and Bootstrap for creating highly scalabel web apps. It’s fully documented and includes tutorials for getting started.

Tactile Design Kit

This Tactile Design Kit can greatly improve conversations with your clients about how they want their website designed by providing an interactive, physical brainstorming tool. You can download it as a PDF, EPS, or AI file.

DevDocs

DevDocs is an API documentation reader with a consistent, organized interface. You can look through documentation for HTML, CSS, DOM, JavaScript, jQuery and more, all from a single place.

Core Circus ($84)

Core Circus is a layered type family of eight 2D typefaces that can be combined for 3D effects.

Shelley (free)

Shelley is a free decorative novelty font reminiscent of vintage signage.

Anarchy (free)

Anarchy is a distressed display font that’s free for personal use. A commercial license is available for $15.

Monstrinhos ($12)

Monstrinhos is a dingbats font made up entirely of monster characters and related images. It’s a fun, wacky font with lots of possibilities.

Haext (free)

Haext is a rustic, neo-Gothic, Art Nouveau-inspired typeface that has definite runic and craftsman influences.

High Tide (free)

High Tide is a geometric display typeface with a very modern, unique look.

Klinic Slab (name your own price)

Klinic Slab is a slab serif typeface that comes in four weights (with italics for each). It’s a workhorse font that’s very functional while also having a distinct personality.

Cellos Script (free)

Cellos Script is a formal script font that’s free for personal use. There’s a commercial license available for $59.

Alianza ($133)

Alianza is a complex typographic system that includes three complementary styles: slab, script, and italic, with nine weights in each. There are also three sets of ornamental fonts included.

Quirky Nots (free)

Quirky Nots is a free handdrawn display font with a clumsy but whimsical feel.

Know of a new app or resource that should have been included but wasn’t? Let us know in the comments!

eBook: SEO in Practice – only $5.95!

If you discover a source of information that search engines don’t already cover, filling the gap is not always straightforward.

Every week we tweet a lot of interesting stuff highlighting great content that we find on the web that can be of interest to web designers.

The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of the best tweets that we sent out this past week.

Note that this is only a very small selection of the links that we tweeted about, so don’t miss out.

To keep up to date with all the cool links, simply follow us @DesignerDepot

User interfaces made for movies http://depot.ly/mR0It

Anežka makes some beautifully traditional illustrations http://depot.ly/mR2nk

How to Use Visual Hierarchy and Website Layout to Emphasize Your Message http://depot.ly/mR2ia

Eye-candy design studio: PalauGea http://depot.ly/mR27B

“Game of Thrones” characters crash the 80′s fashion http://depot.ly/mR0YK

If Kerouac wrote JavaScript (and Dr Johnson wrote CoffeeScript) http://depot.ly/mR0Do  *A very cool article by @angustweets

Make a guess: these are the 10 typefaces every design studio should own http://depot.ly/mR0xS

The editors of @alistapart have created a Summer Reading Issue full of Responsive, UX, Design & more! http://depot.ly/mQZLz

Let’s laugh http://thecodinglove.com

The Almanac is “Complete” http://depot.ly/mPBk0

Design Dilemma: Negotiating Logo Copyright Issues http://depot.ly/mPBd6

20 Helpful Video WordPress Themes http://depot.ly/mPB8j

Adobe launches ‘Anywhere for Video’ service http://depot.ly/mPybn  via @CreativeBloq

Haunting Black and White Portraits of Homeless People by Lee Jeffries http://depot.ly/mME5T

Beautifully crafted paper artworks and graphic design by Happy Centro http://depot.ly/mMDM6

VideoElephant Wants To Be The iStockphoto Of Pre-Packaged Professional Video Content http://depot.ly/mMEnt

Awesome illustrative object series by Kevin Leung http://depot.ly/mMDBm  via @LLGDfeed

Inspiring Interview with David Pache of Helvetic Brands http://depot.ly/mKo3Q

FYI Monday: Stunning Gig & Movie Posters by Ken Taylor http://depot.ly/mKnYH

20 top freelancing tips – interview by @CraigGrannell via @netmag – http://depot.ly/mKnDG

Want more? No problem! Keep track of all our tweets by following us @DesignerDepot

Magical Photo Restoration App for Windows and Mac – only $9.97!

Memory management is a fairly crucial part to building JavaScript web applications, and just because the language has a garbage collector it doesn’t absolve you from all duties.

Take your classic controller (or view in Backbone land). In its constructor it may bind to some model events, perhaps re-rendering itself when a record changes. You’ll need to clean up these events listeners at some stage, especially if you’re constantly instantiating and removing the controller.

Backbone and Spine have a ‘remove’ method which, behind the scenes, will remove the controller from the DOM via jQuery. Backbone will even cleanup any event handlers using it’s Event.fn.listenTo feature. However, calling this manually whenever we want to remove a controller is a bit onerous, and means we can’t use features like jQuery.fn.html() to remove controllers. We somehow need to detect when the controller’s element is removed from the DOM.

It turns out that jQuery already has a form of this event listener cleanup, $.cleanData(). Whenever an element is removed from DOM, such as by replacing its parent’s HTML, it’s passed through this function to strip jQuery’s event handlers.

We can tap into this existing feature to fire our own remove event whenever a element is removed from the DOM. We can then listen to this event in our controller and do any cleaning up required.

Rather than override $.cleanData(), we can just define our own special event:

jQuery.event.special.remove = {
      remove: function(e) { 
        if (e.handler) e.handler(); 
      }
    };
    

Here we’ve defined an event named remove which, when processed by $.cleanData(), will be triggered.

The last step is to bind to this event in our controller:

var Controller = function () {
      this.$el = $('<div />');
      this.$el.on('remove', this.release);
    };
    
    Controller.prototype.release = function () {
      // Cleanup data
      // this.model.off('change', this.render);
    };
    

That’s all there is to it! Now whenever the controller’s element is removed from the DOM, release will invoked and our event listeners cleaned up.

This is an article in the ongoing series about Monocle.