Work in Progress: Label Placement

Still going with the big project! I’m getting really serious about the accuracy of label placement now, as you can see from this screenshot. The light blue guide lines (they’re drawn lines, not Illustrator guides) use a global colour that occurs nowhere else in the document, so I can easily select and delete them all when I’m done (There are literally thousands of labels on the full map). I’ve set up master labels for all eight cardinal positions, and all the other different situations for labels as well, including cities where multiple lines intersect.

When I need a label, I copy and paste it into my main document and simply snap the guides to a station marker: right away, I know it’s in the correct position, no guesswork involved. Then I type in the name for the label and nudge it left or right until the text lines up precisely with the the outer guide. Don’t think you can simply align your type perfectly based on the type point: each letter is different and will require some adjustment!

Of course, there’ll always be some places where these master placement rules will have to be broken, but these guides will give me instant visual confirmation that the rules have been broken, which can only help!

Note that the guides for the type on the left of the route line in this example align with the cap height, not the height of the lower case ascenders (which are a little taller than the cap height).

Oh, and check out my Layers palette, too: nice and neat and hierarchically organised!

End Of An Era.

September 1 marks the day that TriMet in Portland finally removed its much-loved Free Rail Zone. At the same time, it also moved away from a zone-based fare system altogether, now using a $2.50 “go-anywhere” fare.

So I thought it appropriate to update my Unified Rail Map of Portland to reflect these changes, as well as anticipate the opening of the Central Loop streetcar line through the inner eastside to OMSI on September 22. There are two versions of the map - one showing lines under construction, the other just the existing lines.

More information on my design blog, or 4000px-wide versions over on Flickr - click here for the current lines only, or here for the lines under construction. As always, comments and reblogs are welcome!

Anonymous Asked
Question45 degree lines seem pretty easy to work with (diagonals still go through lattice points, etc). But when going to 30 and 60 degree lines, it becomes harder to lay things out precisely. I was wondering how you did things like, get all the station makers at Convention Center on your Portland map to line up. Did you just draw another line perpendicular the rail line to help place the station markers? Answer

There’s a few tools in Illustrator that can help you work effectively with 30-degree angles. The Smart Guides can be changed in Preferences to multiples of 30 degrees, instead of the usual 45- and 90-degrees, so they’re a great visual aid to getting things right.

But the best thing to do is to just use the Move dialog box and enter all your values there. With an object (or a subset of points) selected, hit Enter to get the Move dialog. Enter your values in the part that I’ve drawn a red square around, with the appropriate Distance and Angle values for what you’re trying to do. Turning Preview on helps a lot.

My Boston MBTA Map Redesign Unveiled!

Head on over to my design blog to read the full post and see the four – yes, four – variant maps that I’ve worked up. These can also be seen on Flickr in larger form (4000 pixels wide, but watermarked) here:

Comments and thoughts are welcome!

What’s that, Green Line? Yes, I do think you look wonderful when all your stations are shown!

Work in progress screen shot of my Boston MBTA “T” map redesign. And this isn’t even the coolest part.

Over on my design blog, a lengthy post on why Adobe Illustrator’s “Round Corners” effect blows chunks when it comes to designing transit maps.

How to Design a Transit Map

As many of you may know, my love of transit maps extends to creating my own (all in my spare time: I have a real job as well). A while ago, I compiled a list of tips and tricks that I’ve picked up along the way that aspiring transit map designers may find helpful. Click here or on the picture above to view the tips on my main design website.

With Christmas coming up, it would be remiss of me not to mention that posters of my own transit map designs are available at my Society6 store. They’re offering free shipping today (Monday, November 28) and in all likelihood will offer it again before Christmas, so keep an eye out! Because of the fine detail and small type on these designs, I definitely recommend the larger poster sizes available.

Here are some links direct to each product page if you’re interested - be sure to reblog and spread the word to interested friends!

US Interstates as Subway Map

US Interstates as Subway (Simplified - No Text)

Rail Transit of Portland, Oregon

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

International E-Road Network (European Highways)

Itinéraires de train à grande vitesse de la France (TGV Routes)

For those of you guessing that my latest transit map project is of the U.S. Interstate system, you should be aware that I’ve already done it - twice. My first version in 2009, and a revised (better) version earlier this year. Read the full details on my design blog here.

25 x 17” and 26 x 24” prints are available for sale on my website, or you can visit my Society6 store for more prints (framed and unframed), stretched canvases, iPhone cases, laptop skins, t-shirts and more! Perfect gifts for the transit nerd in your life!

Wireframe screenshot of my current transit map-related project. About halfway done, and things should get easier from here on in. The general shape should give away where this is, but what’s the exact network shown?