6 (Really 3) steps to Create an Antique-looking Concentric Shoreline Effect in Adobe Illustrator

I’m currently working on a map that I’m intending to incorporate Victorian (and maybe a little bit of steampunk) visual influences. For inspiration, I was initially looking at a lot of beautiful Victorian-era (roughly 1830s-1900, some say a little later) sketches of contraptions, including some diagrams of intricate devices that went nowhere.  Then I started to investigate common styling techniques used in maps that were made during the Victorian era. The USGS Historical Topo Map Explorer was a great resource for this investigation. I really wanted to incorporate the sort of concentric shoreline effect that was evident in all the earliest USGS topos, and elsewhere. Check out these cool mid-late 1800s maps in the slideshow that use this effect:

This slideshow requires JavaScript.

This effect on a linear open path like my coastline couldn’t be accomplished with the Offset filter, but the Offset is great for a closed path like lakes. So, I attempted this effect on my meandering coastline with the blend tool for about 30 seconds before realizing it would not be the right solution for this effect. Instead, this effect can be accomplished using Object –> Expand. 

Step 1 – Make a copy of your waterbodies and coastlines that you want to apply the effect to.  

Select the layer(s) or select the individual paths, and CTRL+C or CMD+C or Edit–>Copy.  For this sample, I am only using the coastline, but you can do this with your closed paths like lakes, and even river polygons.

step_01

Step 2 – Paste the copied artwork into a new layer or new AI file

If you choose to paste your copied artwork into the same file in your current map, then paste it in a new layer, and lock the rest of the layers. I am pasting mine into a new AI, and will later add it to my current map.

step_02

Step 3 – Copy the line. Make the new copy’s line point size bigger than the last. Repeat until desired width.

With each copy I made, I named the new path to be the point size’s number (see image below). With each copy, I increased the line point size to make it wider. After every few lines, I would increased the difference between the point sizes. For example, the first few lines increased by 5 points (5, 10, and 15 point); the next increased by 6 points (21, 27, 33 point) and so on. This will eventually result in an effect where, as the lines are closer to the shore, they are also closer to one another. The image below shows the lines I created from a 200-point width to a 750-point width.

step_03

Below is the resulting series of lines created in step 3. It looks like one fat line because they are all stacked atop each other.step_03b

Step 4 – Select all lines and Object –>Expand

With all your new lines selected, go to the Object window and select Expand. The Expand dialog should look like this. Click OK.

step_04

The result should look something like this, except of course, with your shorelines:

 

step_04b

 Step 5 – Remove Fill Color & Add Stoke color

Remove the fill color of your newly expanded shoreline shapes, and add a stroke color. You’ll start seeing the concentric effect.

step_05

In the image above, my coastline is going westward out to sea (good) and inland eastward (not ideal). The next step, which is also the last, will fix this.

Step 6 – Delete the anchor points that go inland.

The explanation for this step is longer than actually performing it! So a small dose of patience while reading this paragraph, and you’ll soon be on your way to making trippy antique shorelines! Whichever method you feel comfortable with, delete the anchor points from the new pretty concentric lines you made that go inland, or that cover land. My current method of choice is to use the direct select tool (white arrow) and select the anchor points. This helps ensure I don’t delete anchor points that I want to keep. Since these are geometrically concentric, one little anomaly can create a visual jolt that impacts the whole flow. A quick way to do this step is to:

  • Delete one anchor point per each concentric ring nearest to the end of your shoreline, making sure not to delete parts of the line that sit on your water in your map.
  • Do the same thing for the other end of those lines: select one anchor point at the end and delete it. Now you should have a set of unattached lines that sit above land that you want to deleted.
  • With the regular Select tool (black arrow) select all these newly unattached lines and deleted.

Now you have concentric shorelines!

step_06

 

 

 

Advertisements

Mid Century Nordic Folk Art Map of Beacon Hill in Boston

The first part of my life was spent in the Minneapolis area. I, along with many other grandchildren and great-grandchildren of Scandinavian immigrants in Minnesota, was surrounded by Nordic folk art, food, and costumes. This map’s theme is inspired by that vibrant Nordic art.

post_02_img_06

I work for a large GIS software company that holds a very large conference every year in San Diego. This past July, while working at this conference to demo an Adobe Illustrator mapping extension (I’m on this extension’s development and design team), a lot of people asked to see examples of maps made with this extension. So a new task was born; it’s important to note that part of this task was to make maps that can be made quickly. Some of the most rewarding maps that I have created or been a part of have taken months – or longer! – to make. This Nordic inspired map of the Beacon Hill area in Boston was created for the purpose of showing off some of the function of the Adobe Illustrator mapping extension, and again, people wanted to see how to make a map quickly. All of that pretense is to say that it is a much smaller and less detailed version of a map that I would consider complete. Nevertheless, it was a fun map to make, and thus far, the people who wanted “quick” have been happy with it.

Elements of this map

  • Data. The data comes from the City of Boston, and was all located and downloaded from the cloud using our Adobe Illustrator mapping extension. That is to say, I was able to add map data to Adobe Illustrator by using just one piece of software: Illustrator.
  • Fonts (all from Typekit): 
    • Juniper Std Medium (title
    • Eskapade Fraktur
    • Tenso
  • Trees. I made all the trees, duck, and sailboat in Illustrator after downloading the geographic data into Illustrator. The tree placement was informed by the City of Boston trees data. The trees’ design is inspired by mid century Nordic folk art, specifically.
  • Traffic lights. The traffic light placement is as-is from the City of Boston’s gis dataset. The mapping extension in Illustrator made it possible to replace the default traffic light symbol with my custom traffic light Illustrator symbol that I created for this map. It’s an automated replacement, so that each symbol was replaced all at once. I made a little YouTube video showing how to do this global symbol auto-replacement.

Flow Mapping with Leaflet

Here’s a fun announcement for mappers who love the user-friendliness of LeafletJS! Jacob Wasilkowski just released a Leaflet version of the Canvas Flowmap Layer. It’s a new method for mappers and geo-developers to create animated flowmaps to the HTMLCanvasElement using Leaflet. GeoJSON point feature coordinates are translated to pixel space so that rendering for the points and curves are mapped onto the canvas.

You can find the LeafletJS version here. Check out this original post on the Canvas Flowmap Layer to learn about the cartographic methods that inspired its development.

leaflet