Tutorial: Drawing Complex Highway Interchanges in Illustrator
This is kind of a tangent to my normal tutorials, but I had a surprising number of requests for this after I published my McKinney Avenue Trolley map, so here goes!
The first thing to note is that this is not a 100-percent accurate representation of the interchange: this trolley map is not intended to be a road map or to be used to navigate freeways. I want to communicate the idea of an interchange stack and show general connections, but I’ve left some of the fiddly detail out. However, this technique stands up pretty well to any level of detail required: it’s just a matter of how patient you are.
Let’s run through this step by step:
This just shows my base layers before any of the complex stuff starts. At the very bottom, there would be a some sort of source image template for tracing elements from (which I’m not showing to improve clarity), then the background colour layer, then two road layers. In this part of Dallas, some parts of the highways are actually lower than the surface roads, so they come first (in a layer called “Hwy Low”), then a “Streets” layer for those surface roads.
A note here on colours. I actually define separate global colours for the different types of roads I need to show on a map, so that I can easily tell them apart while working. So, as shown here, there’s yellow for freeways/highways, white for surface roads and blue for freeway ramps. When I’m done, I can simply re-edit all these global colours to achieve the final look of the map (in this case, all roads end up being white). I also define a “road edge” colour for the stroke that separates the different level of roads (black in its working mode, the same colour as the background in the final piece).
I’ve added a layer for those parts of the highways that are elevated above the surface roads, called “Hwy Up”. Once I’ve drawn the paths for the roads, I’ve copied them and sent them to the back (a quick Cmd/Ctrl-C, Cmd/Ctrl-B combo) and changed their stroke from a 6pt “highway yellow” to an 8pt “road edge” black.
Here’s the first of my clever tricks for this type of work: the top yellow line has a rounded cap end, while the lower black line has a flat cap end (these are defined in the Strokes panel). If both of them had a flat cap end, then you can often see a tiny thin sliver of black extending past the end of the yellow, especially with PDF output. It’s tricky to see with this image, but I’ve circled a deliberate example of this in “Step 2” above. If both strokes have round ends, then the black stroke extends all the way around the yellow one, which we don’t want. Having a round cap above the flat cap hides it effectively every time.
STEPS 3 THROUGH 5
Now it’s just a matter of adding all the desired freeway ramps and overpasses, working your way up from lowest in elevation to the highest. You can do this all in one layer if you’re confident in Illustrator, or you can make separate layers for each level as you go up. I thinned my ramps down to 4pt wide, with a 6pt “road edge” stroke behind them. The outside edge of the ramp stroke needs to line up pretty precisely with the outside edge of the freeway stroke below it: this probably takes the most practice to get right on a consistent basis.
You’ll note in the images above that even though the “road edge” stroke should cross over and be visible above the highway that’s on a lower layer, it isn’t. This is my second little trick: I use an opacity mask on the strokes where required to hide parts of them from view.
If you haven’t used opacity masks in Illustrator before, then I highly encourage you to do some research and make them a part of your workflow. Basically, you draw a 100-percent black object that defines the area that you want to be masked, making sure it’s placed above the stroke in the stacking order. Then, select both the stroke and the mask object and click the “Make Mask” button in the Transparency palette (you might also have to uncheck the “Clip” check box to make things show up as you expect).
It’s certainly not as intuitive as masking in Photoshop, but it saves having to shuffle things around layers in an often futile attempt to get them behind some objects while still being in front of others. In the images above, I’ve shown the masks I’ve used for each stroke as a magenta box, just to give an idea of what’s required.
Note: You could also use the simpler Clipping Mask function to achieve the same end result, although here you have to draw a masking object that covers what you want to be visible after masking, not what you want hidden. I personally find it easier to draw a small object over the tiny part I want to hide, rather than a large object that encompasses the rest of the relevant stroke.
We could really call things done after finishing Step 5, but I wanted to give the freeway ramps and overpasses a little more dimensionality and depth. I do this by copying “road edge” strokes where they cross lower layers and then pasting them behind. I cut them using the scissors tool so that I’m only left with the pieces that are required, then I just nudge them a few points directly down the page to give the illusion of depth. These are shown in green in Step 6 above.
Now it’s just a matter of redefining the working global colours for each element to achieve the final look. For this map, that means changing all the road elements to be white, and the “road edge” colour to match the background colour. Beautiful!
New Adobe Illustrator “Join Tool” Aids Transit Map Design!
When Adobe Illustrator CC introduced “Live Corners" in January of this year, I was overjoyed. They’d taken one of the most time-consuming and tedious tasks in transit mapping – generating properly nested sets of rounded corners where route lines changed direction – and turned it into something intuitive, quick and 100-precent accurate every time.
However, it didn’t solve every problem. Joining two separate paths into one (so that Live Corners could be applied to the new corner point) was still a laborious task that involved using the Scissors tool and hoping that it snapped to the paths properly, or a lot of manual pulling and pushing of endpoints until the two points aligned precisely (and it had to be precise, or you’d end up with two points very close to each other, one of which would have to be deleted before Live Corners could be used).
Despite their name, Illustrator’s Pathfinder tools actually do a lousy job with unclosed paths: only one of them – Outline – works at all, and even then it strips all stroke attributes from the path in the process. So they’re not the answer, either.
However, the October update to Illustrator CC 2014 (version 18.1, if you’re keeping track) introduced the new “Join Tool” that hides away underneath the Pencil tool, as seen in the first picture above: and it’s simply fantastic.
Simply select the two paths you want to join, and then just lazily swipe over the bits of the paths that you want to be eliminated, as shown by the arrow in the second picture. That’s it! Because you’ve selected what you want to tool to affect, it doesn’t do anything to other paths nearby, like the cyan paths in the example shown.
As you can see in the third picture, Illustrator has instantly joined the two paths with a single point, that (in all my experiments at least) is exactly where it should be. It does also add some bezier anchors even though the paths are completely straight, which doesn’t seem to affect the subsequent application of Live Corners (picture 4). If it really bothers you or you like super-clean artwork (like me!), then you can click on the point with the Anchor Point Tool (Shift-C) to get rid of them before any further editing.
Work in Progress: McKinney Avenue Trolley Map - Current Service
This is pretty much the finished product, I think, barring any major errors. The MATA website states that there are 38 trolley stops along the route, but I can only find 37, even after multiple “drives” along the entire route in Google Street View.
I changed the background colour from silver to beige after doing some prints: the whole thing just looked too drab and grey once on paper. This works much better and make the whole map seem a little visually lighter.
Points of interest are taken directly from the current official MATA map, although far more accurately located. The only addition is the the historic trolley barn, which I’ve also highlighted by using the M-Line’s distinctive maroon colour. The map also usefully includes MATA’s contact information and general hours of operation. The whole map is formatted to print out perfectly on a US Letter sheet with half-inch margins all around – handy for tourists to print out and bring along for the ride!
The route line itself shows direction of travel, as well as where the route is double-tracked (down McKinney Avenue itself). I’ve made an effort to show where on the road the tracks actually are – left-running, right-running or center-running – while the little “half-circle” stop symbols indicate which side of the road riders should stand on to board the trolley. Full circle markers are reserved for those stops where the trolley physically changes direction: the turntable at Uptown, and the current southern terminus at St. Paul & Ross.
Stops are generally named after the street they are on, with the nearest cross street as the second part of the name. This only leads to one less than optimal result, when the Cole & Lemmon stop is immediately followed by Lemmon & Cole. A few exceptions to the rule are also made for stops near notable landmarks – the Dallas Museum of Art, for example.
DART light rail stations are shown, but lower in the information hierarchy than the streetcar, or even the Katy Trail (in orange), a popular and important multi-use (bike/pedestrian) path that links Uptown and Downtown. The DART line up to Cityplace/Uptown station actually runs in a tunnel underneath the freeway, but I’m not entirely sure if that’s really an important thing to show on a map like this.
I’ve also made two other versions of this map: one for when the spur along Olive Street opens (reportedly very soon), and one for the final configuration with the full loop through the Arts District. All up, I’ve probably only spent 20 hours or so on this project, and that includes drawing the base map from scratch. Once I’m finally done, I’ll be reaching out to MATA to see if they’d like to use this map in any way.
Thoughts? Errors? Can anyone tell me where the mysterious missing 38th stop is?
Work in Progress: McKinney Avenue Trolley Map, Dallas, Texas
Thanks to Michael Champlin for inspiring this little project. I’ve been thinking of doing a more geographically-based map for a while now to break out of the routine of always doing diagrammatic transit maps, so when he sent me a link to the actual map (PDF, 5.6MB) that this heritage streetcar system in Dallas, Texas uses, I knew that something better could be done.
So here’s a work-in-progress screenshot. Most of the hard work has been done, but I’m still toying with a few elements here and there and adding the final informational layers on top. I drew the street map by hand in Illustrator, which is time consuming but rewarding. I did actually try to export the streets, parks and rivers from ArcGIS to style up in Illustrator, but got incredibly frustrated with the poor quality of linework from the City of Dallas’ GIS files: wonky curves, non-joined road segments, etc. It’d take me longer to clean that up than just draw it myself, so that’s what I did. At least I know what I’m ending up with when I do it myself!
The main experiment here – that I think is working well – is the bounding box around the two separate northbound and southbound stops along McKinney Avenue that share the same cross street (and therefore the name of the stop). This means I only have to label the stops once!
Other notes: the background grid is in quarter-mile increments, and the typeface is Good Headline Pro, which has a nice old world “Gothic” feel, but with a bit of a modern twist. Also: huge x-height and tiny descenders, which are great for this type of labelling work. The orange line is the Katy Trail, a popular multi-use path that’s an important part of the urban fabric of this part of Dallas.
Thoughts and suggestions?
Isaac Fischer writes:
Hi Cameron! I just wanted to thank you for your review of my map for the New Mexico Park and Ride system (July 2014, 3 stars). I thought I should let you know that I have contacted Park and Ride and they are considering adopting my map in place of their regular one. (I made the edits you suggested and also produced a miniature version that will more easily fit into their timetable.) I’ll let you know if they end up adopting the map.
One other thing that might interest you: I make all my maps in OmniGraffle, which is available for both Mac and iPad (but not for Windows or Linux machines). I wasn’t sure if you were aware of OmniGraffle’s potential for designing transit maps, but it is remarkably effective (I designed the Park and Ride map in about two hours). I never understood Illustrator or Inkscape; OmniGraffle is much more user-friendly. If you’re interested, I’d suggest checking it out.
Transit Maps says:
That’s very interesting news, Isaac! Hopefully they can see the value in a good system map and not only adopt it, but also pay you an amount that reflects that value for your work.
I’m aware of OmniGraffle, but I would have a couple of qualms about using it for professional map-making work.
Firstly, it’s not industry-standard software, which limits the ability to share work with other designers who don’t have the application, and it also prevents you from learning the Adobe Illustrator techniques and skills that would be required in a real-world job.
Secondly, I’m not sure of its ability to create proper four-colour process (CMYK) or spot-colour output files, which would be an absolute deal-breaker in a print production environment. Later conversion from RGB to CMYK could cause unwanted and unexpected colour shifts, especially with blacks and RGB colours that are brighter than can be printed in the limited CMYK gamut (greens and blues are especially susceptible to this). To be fair, I’ve seen conflicting reports on whether or not OmniGraffle can export a CMYK output file, so it may be capable of this.
In short, if you’d like to experiment with transit mapping for fun or as a hobby, then OmniGraffle looks like a cheap, easy to use solution. Isaac has certainly proved that quality work can be created in it. However, if you’re looking for a career in mapping, then there’s no way around it: learn Adobe Illustrator and learn it well.
Thanks also to “Bklynfatpants”, who left a comment on the site noting that it wasn’t necessarily fair to compare Isaac’s complete map with the tiny schematic that Park and Ride uses in their schedule. Park and Ride does have a complete system map, viewable here (PDF). It’s a geographical map, exported directly from GIS software. It’s still pretty bad, although admittedly much better than the itty-bitty schematic.
Tutorial: Working with a Grid in Adobe Illustrator
Got a message in my inbox from ssjmaz, who says:
I’m new to working with Illustrator. While working with 45 degree angles and Snap to Grid on I have a hard time getting my lines (routes) to align properly, there is always a part of them that intersects with the neighbouring line.
Back when I first started making transit maps, I had this exact same problem. I’d make my grid, turn on Snap to Grid to lock all my route lines to it and start drawing my map. And then I’d realise that while lines drawn horizontally and vertically always worked perfectly, lines at 45 degrees had problems. The first one was always fine, but any subsequent parallel lines simply couldn’t conform to the grid because: mathematics.
If you’ve got a 10 point grid, then each side of a grid square is 10 points long. However, this means that the diagonal distance across the grid square has to be longer – Pythagoras’ Theorem and all that. In the case of a 10-point grid, the diagonal is 14.14 points long. Because of this, locking a second diagonal route line to the grid is just never going to work: it’s either going to be too close and overlap the first one, or too far away, leaving a gap between the two route lines. See the top image above.
So what to do? There are two basic options, shown in the second and third images above:
1. Use the Object > Path > Offset Path… command to offset your existing route line by the required size of your grid (10 points in this example). This works well, but does require some cutting of the resultant path to get the final required segment. I go into more detail about offsetting paths in this post.
2. My preferred method: draw your second diagonal path exactly over the top of the first one and then offset it using the incredibly useful Move dialog box. This is accessed by simply pressing the Return or Enter key while you have an object selected. Input the required distance (equal to your grid: 10 points here) and angle in the relevant boxes. Ignore the first two boxes: they’ll update dynamically as you enter values below, then click ‘OK’ to accept the move. Again, there’s some clean up required as you have to join your new diagonal path with its corresponding horizontal/vertical one. For reference, the angles that are most useful for transit map design are:
+45 degrees: moves up to the right
-45 degrees: moves down to the right
+135 degrees: moves up to the left
-135 degrees: moves down to the left
Note that the two points where the route lines change direction are at an angle of 22.5° from the vertical: exactly halfway between the only two options available if you lock all your paths to the grid. In short, a grid is an essential tool for laying out your diagram, but you can’t expect to be able to lock every single element to it. Knowing when you have to turn “Lock to Grid” off and place things manually is a big part of being a good map maker.
Tutorial – Limitations of Illustrator CC’s “Live Corners” Function
An anonymous follower sent me this message:
I got Illustrator CC and trying to work with new Live Corners feature for my 45 degree angles but I just can’t get the value past a certain point 8.12 (as an example) so I cant match the location of the 2 corners so the lines actually match. Keep up the great work with this tumblr it has been a real inspiration for me.
This can be a little frustrating, but once you understand how the Live Corners feature works, you can build your diagrams more effectively to avoid this happening in the future.
Basically, Live Corners needs enough length along a line segment to allow it to add new bezier points that define the curve of the radius. If it encounters any other points (even stray points in an otherwise straight path) in the line before the radius you’ve defined is reached, it will use that point to define the maximum radius instead.
Let’s look at two examples. In the first (red) example above, we simply have two line segments that have ample length to accept the Live Corners radius that we enter: in this case, 200 points. Everything works as expected.
In the second (green) example, the horizontal segment only has a length of 100 points, limiting the maximum radius that can be defined. If we select the two corner points that are highlighted and attempt to give both of them a Live Corners radius of 200 points, Illustrator does some maths behind the scenes and determines that the maximum radius it can allow is 119.5 points (there’s some sine/cos/tan trigonometry going on here that I can’t be bothered to work out). That’s because the bezier points that it creates for the curves touch at this value and simply can’t cross over each other. You could define one curve as bigger than the other, but the maximum combined radius value for both curves in this example would be 239 points (119.5 times two). So you could have one radius at 200 points, but the other would max out at 39 points.
So, if you have route lines on your map that change direction a lot in a short distance, your maximum allowable Live Corners radius will get smaller. Either define smaller radii in your diagram, or simplify it to allow larger ones to be used! It also goes without saying that all your route lines have to be joined properly.
Hope this helps!
New Map Project: Highways of the United States
At long last, I can finally unveil my (almost) completed map project that i’ve been working on since May 31, 2012. Yes, 2012!
I’ve given plenty of teasers about this project over the last two years, but I still think the final scale of it will amaze you. Not only have I created a map of the contiguous United States that shows every single last active and numbered Interstate Highway and U.S. Route (both two- and three-digit), but I’ve also broken the map down into separate state and regional maps. So far, I’ve made 33 of these maps and there’s another 11 to go to complete the set. There aren’t 48 state maps because some of them are just too small to show individually (I’m looking at you, Rhode Island!). These are included in regional maps like New England or Chesapeake (Virginia, Maryland, Delaware and DC).
Posters in a variety of sizes are available in my brand new shop. Orders taken up to the end of the month of April are pre-orders; I expect to begin shipping in the first week of May.
Comments, reblogs, likes, and shares are appreciated to spread the word! Let me know what you think, or let me know if you find any glaring errors.
Graphic Fix: Change Background Color of Text Box in Illustrator
Problem: My Kentucky Ave label overlaps with objects below it, resulting in a cluttered appearance. Turns out, there is a super easy fix for something like this!
1.Create the Area Text (text box).
2. Select the Area Text with the Direct Selection Tool (white arrow).
3. In the Appearance panel select desired background fill color and adjust Transparency to your heart’s content. Your labels should now look like the Western Ave label on the picture.
4. With the text frame selected, drag and drop the new Fill onto the Graphic Styles panel to re-use it later.
Transit Maps says:
This is a great tip for people who use Area Text in Illustrator — that is, dragging out a text box for type to fit into, rather than just clicking once to use Point Type. The crux of this tip is using the Direct Selection tool to select the text frame only, otherwise Illustrator wants to apply the fill to the type contained within it. Silly old Illustrator!
If you’re like me, and you don’t like to use the Area Type tool, you can always position a new frame beneath your type and apply the required fill/transparency to that instead.
An alternative way to separate your type from an object that it overlaps would be to apply a stroke to your text, which I covered in this post back in November.