The back of the second business card carried a small map to allow people to find the studio easily. The map in itself was quite a project, taking around twelve hours to complete. The aim was to create a map that was adaptable into different situations, and for different sizes. For this reason it had to done as a vector. We looked a few existing maps from various mapping applications and websites, but none were suitable. We decided to start from scratch. We started with this existing low-resolution map:
Before tracing the image we cleaned it up in Photoshop first. This step is important to make sure that the tracing process runs as smoothly as possible, and to ensure that we don't have to huge amount of work on the document after it has been turned into a vector. The photoshop work entailed removing the text and other objects and making sure that the edges were straight - this often meant adding and subtracting pixels on an individual basis. Once this was complete it was a simple matter of changing the colours until we had something like this:
Once we have an image like this it becomes fairly easy to trace. We ran it into Corel Trace and had a vector-based document shortly thereafter.
Now that our image was traced the work was not over. Everything is generally a curve after it was traced, and curves did not suit our map. So each curve had to be selected and coverted to lines. Then the number of nodes had to be removed until we had nice straight edges with clear points.
Once we had the document cleaned up we would be able to work on it and adjust it as needed. The goal in such a map should not be to have something that is 100% accurate, but something that is very simple for someone to understand. There should be just enough detail for them to remember the way to wherever they are going. Anything else which is not absolutely necessary should not be included, since it may distract them. To have the exact scale was also not important so the size of each block was reduced and the streets made larger. The T-shaped walkway near the centre of the image was also removed, as well as several other small details. The path and the courtyard leading to Balanced Bodies was added by hand, since it was important for people to know that they needed to enter via the alley leading off Bleicherweg.
Now the scale and the map started to look friendlier to the human eye, it was time to add a few street names and an icon to show the reader quickly where they were going. Instead of a rather boring "X marks the spot" we thought it better to make a little icon from one of the figures from the logo. This would also work well when the map printed in a small size.
Now it was time to start adding a few symbols. It was important to show where the tram stops and the parking garages were, but in a small map we wouldn't have room to show them using text. Some symbols which stood out clearly would be needed. Rather than draw the symbols by hand we managed to find some low resolutions graphics to use as a base:
It's plain to see that there isn't much here to trace, so the image was progressively resized to be 10% larger in each step until we had an image of several megapixels. Then it was time to sharpen the edges, and manually fix up various sections before taking the next step to trace the object. Since many of the edges were very rough to start with, there was quite a lot of work required after the trace was complete to add and remove points, convert some curves to lines, adjust curves, etc. When the process was complete we had a vector-based tram that could be scaled up or down to any size. The next step was to work on the symbol for the parking garage. This was not as difficult, and again an existing graphic was found:
Since the curves and lines in this graphic were simpler and the starting resolution a little higher we had it traced and cleaned up in minimal time.
Now it was a matter of adding our new symbols to the map, and since this map would appear only about 40mm wide we thickened the borders around each block.
Download a vector-based .pdf here
You may also notice that the path of the text on each street name was also adjusted - where the street bends slightly so does the text. This makes it much more readable. If this isn't clear scroll up to the previous version and you may see what we mean. Our map was now complete and was included on the back of the business card. After the cards were printed it was clear and very easy to read.
The work on the map wasn't quite complete. We also needed a larger version for the website and for a PDF document that someone might like to download. The borders on each block were thinned down again and additional information added:
Download a vector-based .pdf here
Now all the information which would have been a little bit too much on the 40mm wide version could be added without ruining the map. The exact address as well as information on which tram lines run through the respective tram stops was added. Since the Almodo bar was an important navigation point, a small symbol and info box was added for this as well. Additional arrows showing the locations positions to major navigational points off the map were also added.
Our work on the map was now complete.
» Go further to » "stationary"
