Initial icons

[bhousel]

Let's make some icons!

The goal of this project is to make SVG icons for all reasonable combinations of OpenStreetMap lane tagging. We'll use these icons as we build a lane tagging tool in iD this summer as part of @kepta's Google Summer of Code project.

Design-wise, let's try to emulate the design of the turn lane markings that are used on street signs in the US:

Some guidelines:

• Going to try 15x15 icons initially
• Each icon in its own file that closely matches OSM tag name
• Single color - black on transparent
• Fill only, no stroke
• No words

[bhousel]

It's ok if you laugh at this, but this is a throwaway attempt.

What I learned from this is that

• My initial thought of layering single arrows on top of each other to make complicated shapes probably won't work because arrowheads will collide
• For best results some arrows will start in the center, some will start on the left, some will start on the right
• Shape the beziers for the lines, and draw arrowheads separately (arrowheads are tricky)
• U Turn takes up a lot of space and doesn't mix well with Sharp Turn

[bhousel]

Here's a list!
Protip: We can make half of them and transform them to flip left/right variants. ↔️

turn singles

• reverse_left / reverse_right
• sharp_left / sharp_right
• left / right
• slight_left / slight_right
• through
• merge_to_left / merge_to_right

turn doubles

• reverse_left-left / reverse_right-right
• reverse_left-slight_left / reverse_right-slight_right
• reverse_left-through / reverse_right-through
• sharp_left-left / sharp_right-right
• sharp_left-slight_left / sharp_right-slight_right
• sharp_left-through / sharp_right-through
• left-slight_left / right-slight_right
• left-through / right-through
• left-right
• slight_left-through / slight_right-through
• slight_left-slight_right

turn triples

• reverse_left-left-slight_left / reverse_right-right-slight_right
• reverse_left-left-through / reverse_right-right-through
• reverse_left-slight_left-through / reverse_right-slight_right-through
• sharp_left-left-slight_left / sharp_right-right-slight_right
• sharp_left-left-through / sharp_right-right-through
• sharp_left-slight_left-through / sharp_right-slight_right-through
• left-slight_left-through / right-slight_right-through
• left-through-right
• slight_left-through-slight_right

turn quadruple?

• reverse_left-left-slight_left-through / reverse_right-right-slight_right-through

special

• both_ways_left / both_ways_right
• hov
• bike
• bus
• tram
• truck
• unknown
• pedestrian

[bhousel]

2nd attempt:

lessons learned:

• The MUTCD has a great design guide
• The Standard Arrow is in the appendix
• The Regulatory section has turn lane signs (p.29)
• As # of arrows increase, stroke width and arrowheads scale down (e.g. 3px stroke width for single arrow, 2.5px stroke width for double)
• These probably won't be strictly pixel aligned. They aren't really aligned in that way on the signs either (look closely at images in original post)

[kepta]

They are looking awesome.
Could you share the .ai file also ?

[bhousel]

Sure! I drew a few slight_left icons too. They look kind of unbalanced, so I may move them.
At this point my goal is really to just learn.

.ai file here. I have it set up an artboard for each icon - this is supposed to make them easy to export: https://www.dropbox.com/s/i5rbxu22nlqj57n/icons.ai?dl=0

I think next I'm going to try to make a very simple design guide for this repository. And learn how to export SVGs. I already have an idea how to package them into sprites because there's code in iD that does that.

This whole thing is turning out kind of easier than I expected because:

1. MUTCD contains really detailed instructions on how to do arrows
2. It also contains the other symbols we'll want (bus, bike, hov)
3. It's public domain