All posts tagged “Adobe Illustrator

comment 0

Project: Prototype U.S. Highways Shield (1926), Digital Recreation

Pre-1926 U.S. Highway Shield

While doing research for my recent 1947 Interstate Highways map recreation, I stumbled across some scans (PDF link – 0.3MB) of American Association of State Highway Officials (AASHO) road sign specifications dated from the 1920s. The very first page has a dimensioned drawing of the then brand new U.S. Highways shield that I find extremely interesting, as it doesn’t quite match the the shield as it actually first appeared on real world signage in 1927. Some further research seemed to reveal that this drawing is of a design prototype (of a theoretical Route 56 in Maine) that AASHO discussed in meetings during 1926. The drawing itself is pretty rough, with dimensions that don’t match the actual size of the drawing and completely different shapes for each side of the now-familiar six-point shield, so I redrew it accurately according to the given dimensions in Illustrator.

Read More

comment 1

Project: 1947 Map of Interstate Highways, Digital Recreation

1947 Interstates Map: Digital Recreation

Having found and digitally restored the fantastic 1926 map of the U.S. Highway system,  I started to look around to see if I could find a similar map from the advent of the newer Interstate Highway network. However, all my usual sources (the Wikimedia Commons, the Library of Congress and other online research libraries) came up with either nothing or only low resolution scans — certainly nothing suitable for reproduction.

So, what’s a map-obsessed graphic designer to do in this situation? Why, redraw the whole thing faithfully from scratch in Adobe Illustrator, of course!

Read More

comments 2

Project: 2015 Sydney Festival Route Map

Sydney Festival 2015 Route Map

If you’ve ever been to Sydney in January, then you’ll know that the Sydney Festival is a big deal. Running for almost the entire month, it brings together the very best in the arts from around Australia and the world – music, dance, performance and more. So I was more than a little bit excited when I was commissioned to produce this thematic “route map” of highlighted events, to be used both online and in the Festival’s printed program/brochure.

Read More

comments 2

Highways of the United States: Maps of States and Regions


In my post about the overall Highways of the United States project, I mentioned that the reason I made the map of the U.S. so big and detailed was so that I could break the map down into individual states and regions. Below is a gallery of all the maps available for sale. You can click on the “View Full Size” text in the gallery lightbox to see the largest preview for each map.

Posters from $22 in the Shop

Read More

comments 24

Project: Highways of the United States of America

Highways of the United States of America

44″ x 72″ Poster – $225 See Also: Maps of States and Regions

After almost two years of single-handed research, design, checking and cross-checking, I’m incredibly proud and thrilled to present my latest map project. It shows every single current and signed Interstate Highway and U.S. Highway in the contiguous 48 states in a style very similar to my previous Interstates as Subway Map and U.S. Highways as a Subway Map projects. Having made two separate maps that showed each type of road, I really had to at least try to combine them both into one map, didn’t I?

However, I’d stop short of calling this a “subway map”. While still taking many design cues from that genre, I’d rather call it a “simplified road map” instead. Because of the insane complexity of the two combined networks, there’s a lot more adherence to geography here than in those previous, more stylised diagrams. Yes, the roads have been straightened out a lot – especially the Interstates – but many cities fall pretty much exactly where they would be on a “real” map, and roads cross state borders at or very near the correct locations. The overall shapes of the states have also been preserved as much as possible: you’ll see why soon!

The map follows much the same design principles as the previous ones: white circles with black strokes denote named places (cities, towns, etc.) where two or more roads intersect. The more roads at that location, the larger the dot. Named places at intersections are always shown, even if they’re just a teeny-tiny little hamlet. Not all roads meet at named places, so there are intersections with no labels. Places that fall along a road between intersections are shown as a “tick”, and are included if they have a population of 1,000 or over (thanks, Wikipedia!). Obviously, some places are left off the map for clarity in very populous urban areas, especially if they are considered as part of a “greater” metropolis: I apologise in advance if your home town is missing. There’s still an incredible 4,385 named places on the map!

Having to show different types of roads on the same map meant that an additional level of complexity was introduced. I decided that stroke width was the best way to differentiate between two-digit Interstate Highways (the thickest stroke at 8 points wide in my working file), three-digit Interstates (6pt) and U.S. Highways (just 4pt wide). As before, bright colours were assigned to the “major” routes as defined by AASHTO: these are two-digit routes ending in “0” and “5”  for Interstates, and “0” and “1” for U.S. Highways. The U.S. Highways use a lighter tint of the corresponding Interstate colour to differentiate between them if they ever run in close proximity (this is rare, but it does happen: I-55 and U.S. 51 share the same roadway out of New Orleans, for example). Four different greys are then used for the “minor” routes, with cool greys being assigned to odd-numbered routes and warm greys used for even routes. Minor Interstates are represented in darker greys than the minor U.S. Highways to reinforce their higher position in the information hierarchy.

Roads that touch on the map while running parallel to each other are actually sharing the same physical roadway: in AASHTO-speak, they are “concurrent”. Because of the scale of the map, I can’t always show where a U.S. Route might leave a concurrent Interstate to serve a town and then rejoin again immediately afterwards.

Roads that run closely parallel without touching are not concurrent, but are sharing the same corridor. This often happens where an Interstate has supplanted a U.S. Route as the main highway through an area. While I’ve tried my best to show these corridors as accurately as possible, there are instances where the roads are on the “wrong” side of each other compared to the real world. This is especially true when a winding old U.S. Routes cross and recross a (much straighter) Interstate highway multiple times in a short distance.

But enough talk, here’s  a nice big  12,000px-wide version of the whole map over on Flickr!

Needless to say, this map is physically huge. My working Illustrator file was a massive 144 inches wide by 88 inches deep and posters are half that size – the smallest they can be and still retain good legibility. So why did I make the map so big and insanely detailed? Why was it important that the individual states retain their actual shape? Because I’m also making posters of individual states and regions.

And yes, there are posters for sale! Check out both the USA map and the individual state maps in my brand new shop.

Visit the Shop!

comments 3

Updated: Portland Unified Rail Map, September 2012

Portland Unified Rail Map, September 2012

Today is the end of an era in Portland, Oregon.

TriMet, under budgetary stress, has done away with the much-loved Free Rail Zone, which allowed free travel by light rail and streetcar within the “Fareless Square” area of downtown Portland and the Lloyd Center. Not too long ago, Fareless Square also applied to buses in the same area, so the writing’s been on the wall for a while.

Read More

comments 39

Project: Boston MBTA Map Redesign

Boston MBTA Map: Present, with Bus Routes

Back in January, I posted a review of the current Boston MBTA transit map on my Transit Maps blog – and I had some harsh words for it (I believe the phrase “hot mess” occurs in the text). Always one to back my words up with actions, I’ve been quietly working on my own revised version that I feel improves the map in quite a few areas. I’ve also created a few different versions to illustrate some points about the design, so hang in there: this could be a long post!

Read More

comments 11

Tutorial: Adobe Illustrator’s ‘Round Corners’ Effect and Transit Maps

In my earlier post about drawing a transit map, I made mention of the fact that Adobe Illustrator’s “Round Corners” effect doesn’t work very well with multiple curves around a corner, such as parallel route lines changing direction together on a transit map.

This part of my post elicited a very interesting comment from Chris Helenius in Finland, complete with a nice screen shot of the point he’s trying to make – that there are ways to get matching curves around a corner when using the Round Corners effect. However, the method he shows is a workaround – he expands the appearance of the curve, then offsets the path the required distance. In practice, this is very similar to my approach of keeping a “master” library of curves that I insert where needed – both require some cutting and pasting of points and curves to achieve the final result.

What Chris’ post doesn’t recognise is that Adobe’s implementation of Rounded Corners is fundamentally flawed, and it’s a flaw that makes it impossible to achieve consistent nested curves.

As the diagram above shows, the problem comes from Adobe’s poorly implemented definition of “radius” in the Rounded Corner effect’s dialog box.

The dictionary definition of radius is, “a straight line from the centre to the circumference of a circle or sphere.” And that’s what I expect to be implemented when I set a value in the dialog box – make a curve with this radius from the centre point of the inferred circle. If this were true, you’d see curves like those shown in the second column of the diagram: three nicely nested curves at a radius of 10, 20 and 30 points, which look the same regardless of the angle between the lines when you started.

Instead, you get what happens in column three. For reasons known only to itself, Illustrator measures the value that is put into the dialog box from the original corner point (shown as the black lines in column three) that joins the line segments on the intended curve, not the centre point of the circle. In other words, this is not a true radius at all.

When the angle between the line segments is 90 degrees, things work as expected, because the mathematics works out the same regardless of where the “radius” is measured from. But look what happens when there’s a 135-degree angle. Instead of the outer curve having a radius to its centre point of 30 points (as input into the dialog box), it’s actually 72.46 points! Even worse, all three curves end up having completely different centre points (as indicated by the grey intersecting lines), so no amount of fiddling with values is ever going to get them to nest inside each other properly.

As you can see, entering the same set of values into the Round Corners dialog box produces vastly different results depending upon the angle between the line segments – this makes results impossible to predict and the effect totally useless when designing a transit map: what is a nice tight 30 point radius on one part of the map may become a loose 72 point radius in another, even though you asked for a 30 point radius both times. I’ll be sticking to my labour-intensive, but 100% accurate methods.

Note: this part of the tutorial is no longer true for users of Adobe Illustrator CC and above, as Adobe has integrated the excellent “Live Corners” tool into the program. See this post on the Transit Maps blog for more information.

comments 73

Project: U.S. Routes as a Subway Map

U.S. Routes as a Subway Map

36″ x 24″ Poster – $39

At long last, I present the latest in my series of transit map-styled designs. This time, we have the U.S. Highway system (that’s U.S. Routes, not to be confused with the newer Interstate Highway system – which as most of you well know, I have already mapped).

Read More

comments 17

Washington Metro Diagram: My Last Word

Washington, DC Metro Diagram: Version 3

This is it. My final take on a redesigned Washington, D.C. Metro Map. This is my third major revision of a project that began in February of last year, and won the People’s Choice Award in the Greater Greater Washington “Redesign the Metro Map” contest earlier this year. I’ve taken time away from this diagram to work on a few other projects recently, but the release of Lance Wyman’s draft diagram has inspired me to finish an “ultimate” version of my vision of the diagram.

Read More

comments 13

Tutorial: How To Design a Transit Diagram

One thing I often get asked regarding my transit diagrams is how I go about actually creating them. Originally, I just jumped right in and pushed things around on a page in Illustrator until it looked okay. These days, I’m far more organised, meticulous and precise with my work and I think it shows in the quality of my diagrams. Here’s a few tips and tricks that I live by when working on them: Read More

comments 3

Project: Historical Passenger Rail of Portland, Oregon

Passenger Rail of Portland, Oregon (1912, 1943, 2015)

Somewhat related to my previous post, here’s a new transit map of Portland for your perusal. This piece was born out of two things – a friendly after-work chat with the immensely talented Ryan Sullivan of Paste In Place, where we discussed a concept similar to this; and a chance discovery of a high-resolution scan of a 1943 streetcar/trolley map on the amazing Vintage Oregon site.

Read More