All posts tagged “Adobe Illustrator

comments 2

Highways of the United States: Maps of States and Regions

Texas_01

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 23

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

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

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.

comments 70

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

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

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

comments 6

Rail Transit of Portland, Oregon

Rail Transit of Portland, Oregon

Here’s a new transit diagram that I’ve been working on for a while now – a unified rail transit map for the place I live, Portland, Oregon. Portland is blessed with fantastic public transportation, but I’ve always felt that the official TriMet system diagram fails to fully show this, even after its recent redesign.

Read More

comments 44

Interstates as Subway Diagram: 2011 Version

Interstate_2014_1200px

36″ x 24″ Poster – $39

My original Eisenhower Interstate System in the Style of H.C. Beck’s London Underground Diagram is one of my most successful pieces of design, with almost 85,000 views on Flickr, countless posters sold, and inclusion in the excellent book Mapping America: Exploring the Continent (highly recommended for map geeks!).

Read More

comments 14

High Speed Train Routes of France Transit Diagram

TGV Diagram

Society6 – Large Poster: $34 Society6 – X-Large Poster: $50

Presenting my next transit-styled diagram, this time showing all the high speed train routes that pass through France. This includes the French (SNCF) TGV trains, the Eurostar trains from London, the Thalys services from Belgium and the Netherlands, and some ICE services from Germany that operate in tandem with corresponding TGV services from France. It does not show high speed trains that do not pass through France: for example, the ICE train from Amsterdam to Germany does not pass through France, so is not shown.

Research for this diagram was particularly tricky as no one source outlines all the routes in one comprehensive listing. I had to compile the information from various sources, none more valuable than the amazing Deutsche Bahn web timetable, which I have fond memories of using in 2003 as I caught trains all over Europe while backpacking.

Once I started the diagram, the sheer amount of high speed services in France initially overwhelmed me, and it was a long while before things formed a coherent pattern for me. Once I worked out the complex routing of trains out of and around Paris, things began to fall into place.I decided that colour-coding would try to reflect the origin of the train, so all trains out of the Gare de l’Est in Paris are variations of green, for example,while all Thalys routes are a shade of the rolling stock’s distinctive maroon. I find it particularly interesting how the initially homogeneous colours become more mixed the further from Paris you get, especially towards Marseille, where lines from all over France begin to converge towards their final destination.

It’s interesting to note that the equivalent diagram in America would consist of one route – the Acela Express from New York to Washington, DC – and even that barely qualifies as “high speed”. Fast by American standards, maybe…

But do note that these trains do not necessarily travel at their maximum speed (up to 300km/ per hour or 185 miles/hour) on all the routes shown. To attain these speeds, the trains have to run on specially-built tracks, which currently are only on the highest density parts of the system. However, all these routes use TGV/Eurostar/Thalys/ICE rolling stock, which is the criterion for inclusion on this diagram.

My favourite parts of the diagram include the grand loop around Paris to the east, the complex interplay of routes around Lille, and the subtle inclusion of the Winter routes to the French Alps without having to accord them an entire route from start to finish: more complexity is not what this diagram needs!

As usual, you can view a much larger version of the diagram over on Flickr. Comments are always welcome!

Update: March 3rd, 2011: New version of the diagram with a new route added from Melun to Marseille (Don’t know how I missed that one!). Routes from Le Havre to Strasbourg and Cherbourg to Dijon were deleted, as these “experimental” (and poorly patronised) routes stopped running in December 2010. Winter services to Evian and Saint-Gervais also added. Finally, the station names have been made a little larger.