Jump to content

Creating Subway Route Bullets Using XML and SVG Files


Threxx

Recommended Posts

Not the typical thread posted in this subforum. Consider this a bit of a tutorial for those looking to make their own custom route bullets or signs.

So, in an attempt to create some signs for my Alternate Subway History, I decided to get a bit into graphical design. My plans require route bullets that obviously are not currently used in the system, so I was in a bit of a predicament as to how to make them. I tried starting with ones that I could simply recolor, but this did not go as well as I'd hoped.

 

WfU0jfM.png

Note the clear artifacts on the (K) bullet, as it was an attempt to recolor from the normal 8th Avenue colors that the bullet once bore. Antialiasing on the text made this a pain in the tail, so I ultimately felt it would be easier to make my own.

I knew going into this that the (MTA) uses Helvetica as their font system-wide, so acquiring the correct font was a simple task. I found image editing for this purpose to be extremely finicky and tedious and I wanted a somewhat more precise way to go about it, so I looked into SVGs.

Turns out that SVG files are just fancy XML. XML, being relatively similar to HTML, was easy for me to pick up, so I was able to create images using markup code with some experimentation. The process for me went something like this:

1. Create a circle. (I created a 100px circle on a 120px canvas as it is very versatile in scaling, but you can do whatever you feel would work)
2. Set the circle to be the proper color (I pulled official colors from this page on Wikipedia, save for 2nd Avenue and 6th Avenue which I sampled directly from a bullet using the eyedropper tool in GIMP).
3. Add text for the route letter/number. (Helvetica Bold, 70px, should reflect the size of your circle)

4. Estimate x/y alignment for text. Open in an image editor (I used Inkscape since it natively supports SVGs but most anything should work)
4. Readjust alignment if necessary. Repeat steps 3 and 4 until the letter/number appears relatively centered.

As you can tell, it's a bit of a crapshoot and ultimately the bullets aren't perfect. Perhaps it's a bit more accurate since misaligned bullets are surprisingly common on signs, even ones made today. I think the ones I have made are relatively accurate, and if they aren't, I welcome someone to make the alignments a bit more precise.

 

Here's the same sign above remade with the new bullets:
9OVapWa.png

Using XML you can essentially create your own bullets. To help anyone else who might want to do this, I've provided a ZIP file here that has bullets for each letter within (All current official bullets plus a couple for my own fantasy plan. Any unused letters I simply made white on black.) as well as a text file containing the hex values for the colors of all of the current lines. You can edit any of these bullets in any text editor. I would personally recommend Notepad++ if you're on Windows or TextWrangler if you're on OS X.

 

SVG files are great for route bullets because they can be easily scaled without loss of quality, so you can create bullets for use on signs or as avatars. They're also far smaller than normal images since they're just markup text ultimately, so they're also efficient.

 

Here's a bullet which is completely original in letter and color, for the Triboro RX:

 

PsrWtvF.png

 

I should note that I'm not taking requests, mostly because this post serves to help people create their own bullets by themselves. I am open to having this thread be used for people to post things they create in this method.

DOWNLOAD THE PACKAGE HERE

One last note, I do plan on making diamond bullets soon. It's simply a matter of drawing a rhombus instead of a circle, which isn't difficult in the slightest.

Link to comment
Share on other sites


I think most design companies do not take the trouble you took to get their designs working but very impressive. Maybe you should check some software to design vector graphics. I use Adobe Illustrator for my graphics. there are plenty of tutorials out there. Check them out too.

Just a hint ;)

Link to comment
Share on other sites

I think most design companies do not take the trouble you took to get their designs working but very impressive. Maybe you should check some software to design vector graphics. I use Adobe Illustrator for my graphics. there are plenty of tutorials out there. Check them out too.

Just a hint ;)

 

I'm not particularly concerned with how this is done professionally because this works just fine for me. I'm just doing this for fun.

 

bchannel-nconduit_north.png?dl=0

Here's a sign I just put together today.

Link to comment
Share on other sites

  • 8 months later...
  • 5 months later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use.