Fantasy Mapping: Place Names & Design (and free Adobe map assets!)

Several weeks ago, I wrote about a fantasy map named Kystfjell (pronounced kist-fyell, but feel free to say kist-fell), which translates from Norwegian to “coastal mountains.”

In that first post, I mentioned I’d be writing an upcoming Part II that describes some of the design decisions, including place name and language, character illustration, and geographical juxtapositions within the Kystfjell map. I also promised some free Adobe Illustrator libraries based upon this design. So here we go! This is Part II. If you want to jump straight to the free stuff, HERE is a truncated design assets library that I made, inspired by this map. But wouldn’t you want to know the background of those libraries and of Kystfjell?? If so, keep reading.

Important to know: This map was made using the M4CC extension inside of Adobe Illustrator. For information on how, read the first post on this Kystfjell map.

The difference between the actual geography and Kystfjell’s geography

As cartographers, even though we aim for a known level of accuracy and precision, we still are abstracting spatial data to a digestible level. The most obvious example of this is scale. Maps are typically a 1 to greater-than-1 scale – at least the examples we usually think of when we hear the word “map.” Although, consider this beautiful Anatomy of the Teeth poster by medical illustrator, Lydia Sharp. In a sense, Sharp’s poster, and microbiology illustrations like Shannon McMann’s Brain Cell diagram are maps of a 1 to less-than-1 scale. Maps (and dataviz) of all kinds have abstracted the representation to its necessary parts, so that the visualization’s purpose and message can be easily understood by the intended audiences.

When creating the Kystfjell map, although I downloaded real geographic data over coastal Norway at a scale of 1:140,000 (see image below), this map was fantasy. I can move mountains!

And I did. I was not tied to usual intentions of communicating an abstracted reality for the purpose of data comprehension or actual geographical navigation. While I frequently do draw illustrations that have nothing to do with maps, I have never applied the liberty of mapping things where I want to for the purposes of a fantasy map. Kystfjell’s scale is much smaller (the world in the map is much larger than the downloaded data’s actual scale), as a series of large interacting societies. This means that instead of the actual geographic extent’s ~30-40-mile width, my map is about 1,000 to 1,800 miles wide. Although who knows? There is still time for Kystfjell’s geomorphology in my imagination, as the book is still being written.

Data downloaded into Adobe Illustrator using M4CC

Original data downloaded into Adobe Illustrator using M4CC.

 

Check out this map diagram below. In it, I’m showing the extent of the Kystfjell map, and changes that I made to the data that were included in my original download into Illustrator.

Changes made to the original (real) geography to make the Kystfjell fantasy map

Changes made to the original (real) geography to make the Kystfjell fantasy map

Here is the final land juxtaposition for the Kystfjell map.

Kystfjell Map full (unfinished)

Kystfjell Map full (unfinished)

Overall design of Kystfjell

Please consider the Kystfjell fantasy map unfinished. In fact, I’m not certain that the land will retain the “Kystfjell” name over time. When I get some time to finish it, the first sentence of this paragraph will be deleted. So will the sentence preceding this one, along with this sentence, and perhaps a few subsequent ones. While the map is unfinished, the overall aesthetic will remain. Why am I posting about the design when it is not quite finished? In part I several weeks ago, I promised some free Adobe Illustrator libraries, along with a post about Kystfjell’s design “soon.” Now feels like soon, so let’s talk about design!

Colors

There are really five basic colors on this map, and every other color stems from those hues. The sixth color is the highlight color. I don’t know how everyone else thinks about color, but for me, what I call highlight color is essentially just that – the color that all other colors travel to as they get lighter. So if you can imagine a gradient for each of the base colors, where the darkest hue in the gradient is the base, and the brightest hue in the gradient is the highlight color, then you can imagine that the colors within those gradients are fair game for the particular project. In most of my work – maps and other illustrations – the highlight color is almost never basic white. This retains rich tones throughout the illustration. With every map I make, I try to keep the colors at a minimum, so I made swatches of about six or seven colors within each of these gradients and only drew from those colors. I use this color method for a lot of things that I do, but when it comes to mapping for customers with specified style guides, I’m often bound to a basic strict small group of contrasting colors and/or complimentary colors. But not for Kystfjell!

Kystfjell Base Colors

Kystfjell Base Colors

 

The mountain base color-to-highlight color gradient.

The mountain base color-to-highlight color gradient

You can find the Kystfjell base colors and other Illustrator Assets here, where I’ve shared them publicly. Notice how the colors look much flatter and more saturated than they do on the map. Recall how I’ve created gradients from each of these base colors to the highlight color (image above this paragraph), and from that gradient, created a palette made from those gradients. Doing so gives the map some depth. Also, I’ve added some transparency masks explained below.

Kystfjell Assets

Save these free assets by clicking on the image

Texture

I was able to apply a papery texture to the Kystfjell Map by using Adobe Illustrator’s Transparency Mask option. This post isn’t going to include a step-by-step tutorial on how to use transparency masks in Illustrator, but perhaps such a post as it relates to cartography is called for in the near future. It is just important to know that this is how this map was textured. There are a lot of great YouTube videos and online tutorials provided by designers that share how they use transparency/opacity masks. But here is a tiny window into my particular approach to how I used a transparency mask to achieve a papery look in the Kystfjell map. Ultimately:

  • There are ten layers listed below that make up the entire land-plus-ocean base of this map, and one more that makes up the shorelines (see next section for the shoreline creation).
  • Each of these ten layers has some sort of Illustrator effect (not necessarily capital “E” effect, or what AI considers an effect). By this, I mean each of these ten layers has a permutation of gradients, transparency masks, and inner glows; at least one of these effects, but perhaps two or all of them.
  • By removing any one of these ten layers, the entire base’s aesthetic would change, either slightly or dramatically (see animation below for how stacking these layers changes the base’s look).
  • This approach is certainly not necessary, but I’m really happy with the result.
Kystfjell Land and Ocean Layers

Kystfjell Land and Ocean Layers

Of the layers inside my Land and Ocean Layers above, the following have a transparency mask applied. The mask was made from a photo of crumpled paper:

  • Highlight Ocean (Also using the Lighten filter within this transparency map setting).
  • Darker Pink Land with Gradient
  • Land Color Burn (Also using the Color Burn filter within this transparency map setting).
  • Bottom Ocean Layer

When applying a paper texture to a transparency mask on multiple layers, one trick I like to use is to make sure that the paper texture image is the same one for each layer and the X, Y registration for this image is identical each time you paste it. Copying artwork and pressing CTRL + F / CMD + F will paste artwork in the exact X,Y registration in front of  your other artwork in a layer, and CTRL + B / CMD + B will paste it behind your other artwork to whichever layer you are pasting.

Stacking the 10 ocean and land layers and the shorelines layer

Stacking the 10 ocean and land layers and the shorelines layer

Concentric Shorelines

I applied a concentric shoreline effect to the land shapes using the Object –> Expand –> Offset Path method that I wrote about on this previous blog post. Note* That previous post addresses making concentric shorelines from a linear (unclosed path) feature, such as a shoreline that falls completely off the edges of your map (Object –> Expand). I applied the remaining principles from that post’s approach to Kystfjell’s concentric shorelines.

Kystfjell map shorelines

Kystfjell map shorelines

Whimsically hand-drawn

I wanted the Kystfjell elements to appear whimsically hand-drawn. To avoid a clean digital look I used brushes from the Artistic_ChalkCharcolPencil brush library that is provided with Adobe Illustrator, as well as a few other brushes. You can see some of those brushes applied in these complimentary graphics that I’m sharing here.

Language and Placenames

Each aspect of this map was an adventure: location scouting, character developing, mountain drawing, and place-namingAs stated previously, this is my first fantasy map, so creating placenames was unexplored territory. I wanted the names to be of Norwegian influence as a nod to my heritage, but also easy for an English speaker to read. Some of the names are combinations of Norwegian words, or combinations of Norwegian and English words. And some locations are English words. I wanted Norwegian readers to read the names as actual names as well, so I consulted my friend that I have known since middle school, Benjamin Nelson. Ben is fluent in Norwegian, lives in Norway, and is married to a Norwegian woman, Linn Monica. They reviewed the placenames to ensure the names did not get translated as garble to a Norwegian reader. Also, it was pretty important to me that I wasn’t unintentionally using a word that was crude. Many thanks to Ben and Linn Monica for their review of the Kystfjell map placenames!

The Future of Kystfjell

It is true! Kystfjell is a place in a story that I am writing! As the story gets written, the map is sure to change and characters are sure to be added. I anticipate that I will generate many maps and illustrations as the story moves forward.

I’m always excited to see the fantasy maps that others are making, as well as read about the stories that inspired those maps. Please share yours if you’d like! And happy mapping!

Me making the fantasy map

Hey, it’s me with Kystfjell in the background. Action shot! Whoa.

Happy National Beer Day! Bellingham Bike Shops & Breweries Map

It’s National Beer Day this Saturday, April 7th! I’m celebrating by posting this Bicycle to Breweries Map of Bellingham, my home city.

National Beer Day is a great excuse to share this map, but I should probably give at least a brief description of the map.

The map shows the location of the city’s breweries and bike shops nearby. I made it using the ArcGIS Maps for Adobe Creative Cloud extension, and its entire dataset comes from the City of Bellingham’s open data. The streets marked with a red dash are all part of Bellingham’s Pedestrian Master Plan, which is an ambitious infrastructure program to improve the City’s walkability.

Bellingham is already wonderful place to walk and bike, rain or shine. The city has great trails, great breweries, and a lot of cyclists, walkers, and runners. With late night sunsets approaching, the season for riding bikes to neighborhood breweries is coming soon. I started this map as a tutorial to show fellow mappers how to make a map using this particular Adobe Illustrator extension, made by Esri (I’m on that team!). One of the features in the extension’s latest updates is the ability to pick from standard layout sizes for print, mobile, and other common media formats. This map uses the 11×17-inch tabloid format.

I am going to file this map into the permanently unfinished category. However, it will certainly help you find the Bellingham breweries, most bike shops, park-and-rides, all traffic lights and trails that were in existence during the time the data was created. It also was a fun exercise in creating a Victorian-esque Adobe Illustrator symbol set.

Cheers!

Bellingham Beer & Bikes Map by Sarah Bell

 

NCAA Basketball: Who’s Come the Farthest?

If you visit ESPN’s website, you can find the team rosters for all the NCAA Basketball teams that made it to the NCAA tournament. On that site, ESPN lists the players’ number, position, year, and hometown, among a few other statistics. A couple of my colleagues, Nick Brueggemann and Gregory Brunner, did some mapping with this data. I asked them if I could take their dataset and crunch it a little further. There is a ton more that could be done with this information. And maybe I will someday, but here’s what I have done for now to spatially visualize the NCAA D1 Basketball Tournament team roster data:

I decided to map the women and men athletes’ hometowns as graduated symbols, where hometown sizes are based upon the amount of athletes that come from there. The men and women hometown maps are separated in order to more easily identify the different locations. These maps started out with world city points and labels, but I removed them for the sake of decluttering the visualization. I was able to identify the lat long of the athletes’ hometowns using ArcGIS. I then calculated the distance from each player’s hometown to the city that their team is located; here is a really handy blog post that someone wrote eleven years ago; I often refer to that post when calculating distances between lat long coordinates. Calculating the distance of each athlete’s hometown to their team city allowed me to identify the average recruit distance per team, along with the farthest (and closest) recruit distance. Other than the maps themselves, I haven’t done any visualization for teams on the lower end of the average recruit distance. (Maybe in few days ?) There are a lot of players whose hometown is also the the same as their team’s city.

 

 

Creating a Satin Waterbody Effect in Adobe Illustrator (tl;dr: inner glow!)

Each style decision a cartographer makes on their maps’ features will contribute to the holistic ambience of the map. For example, a map’s tone can change in an instant just by switching typefaces. You might have even had one of those revelatory moments when a typeface gets changed accidentally in flash of serendipity, and suddenly your map has an updated fresh style and direction.

Color choices, amount of colors, graphic design effects, line weight, and a lot of other things in addition to typeface choices are among the decisions that a cartographer makes to achieve – or discover – a particular ambience in their maps. Cartographic water styling is one of these effective ways to achieve a map’s overall mood. In this post, I’m going to give some quick steps to achieve a satin waterbody look in Adobe Illustrator. It’s super easy and fun, and I’ve been doing it for so long that I sort of took it for granted. However, in the few years that I’ve been sharing my maps publicly (I’ve presented on my tendency to be a hermit of sorts) people have asked “How did you do that water effect?” It is invariable that at least one person will ask this question after I’ve presented or posted a map that has this waterbody effect. It’s also a guarantee that I will be excited to chat about it since it is likely that I will also learn from the questioner while sharing with them this water technique.

A small snapshot of an in-progress map I’m making that uses this waterbody technique

There are so many layers with their visibility turned off in this map because it is only about 40% complete. Sharing still, because this map is the one that the Skype call stems from.

Due to the combination of taking this water effect for granted and having some hermit propensities, I had almost convinced myself that it wasn’t worthy of posting about this technique. But after scheduling a Skype meeting last week to discuss this very technique after someone saw a map I shared on Instagram, I decided, “Why not?” So here are some simple steps to get a satiny water look for your maps in Adobe Illustrator. This post focuses on open water, or water that is not fully inside the map extent (i.e. the waterbody is a very large part of the overall map, and is cut off by the edge(s))

Some of these steps will not be necessary depending on your map’s water data.

*TIP! If you are not dealing with open water in your map, but rather your map has waterbodies that are fully inside your map’s extent, like the lakes in my map above, then you can SKIP TO STEP 4. tl;dr: It’s the Inner Glow Effect!

1. Ensuring your land and water polygons are well aligned

A map’s land data doesn’t always align perfectly with water data shoreline. The cause for the mismatch could be that the data sources are different, or that they were created for different scales. Whatever the cause, it doesn’t matter, because you can fix the misaligned polygons with Adobe Illustrator’s Pathfinder tools. In the interest of brevity, I’ll just focus on the most common scenario that I encounter with mismatched land/water polygons.

In the AI file below, I have a Land layer and a World Ocean layer. However, the World Ocean layer was created for a much smaller scale than my Land layer, so it has way less detail, and the mismatch is pretty atrocious.

Check out Orcas Island (large island in the center of the image below), and the white gaps around it indicating the difference between the water and land layers. The detail of the World Ocean layer is so much less than the detail of the Land layer that the World Ocean layer doesn’t even include Waldron Island to the northwest of Orcas. For the best results of the satiny open water look, I like to have all the land details including these tinier features like small islands in the effect at first. If somewhere in the process, these smaller features become an issue to the aesthetic, they are easy to remove.

Small scale ocean data with large scale land data

Orcas Island: Small scale ocean data with large scale land data

2. Creating your own Open Water!

If your open water polygons are perfectly aligned with your land polygons, then this step will not be necessary, but the next step will.

Because my land and open water polygons are not well aligned, I’m going to create my own open water polygon inside of Illustrator. In fact, I’m just going to delete my World Ocean layer, but hang onto your original water layer if you think you might need it for reference later on.

To create a new layer in Adobe Illustrator, just click the “Create New Layer” icon at the bottom of your Layers panel. Drag this new Layer beneath the land layer, and name it whatever is appropriate. I’m going to name mine “Salish Sea” since this is the encompassing term for all the inlets, channels, bays, and sounds that make up this water body.

Now you’re going to want to draw a rectangle in your new waterbody layer that is larger than the land that makes up the shoreline. So click the Rectangle tool, or type the letter “M” for the keyboard shortcut to get the Illustrator Rectangle tool, and draw your polygon. See the video below for how to do this.

Creating the new waterbody

 

3. Clip your new Waterbody to the Land

Ah, the joy of Illustrator Pathfinder tools. Before you clip your waterbody to the main land layer, you’ll have to make sure that all your land is in one path. To do this, you’re going to use the Unite Pathfinder tool. If you have only one polygon (closed path in AI) then you should be ok. Since my land from which I want the satin waterbody effect to emanate is comprised of several islands, a mainland USA polygon, and a mainland Canada polygon, I know for certain that I need to Unite my land shapes. These shapes must be closed paths! Double check this before moving forward.

3A – Unite the land polygons

First duplicate  all the land polygons layer(s) – there could be multiple – that you want to use for the satin waterbody effect. If there happens to be more than one layer that you are duplicating, make sure to put all the artwork from the duplicated layers into one single layer before uniting. With all the closed paths selected in this new duplicated layer, click on the Unite Pathfinder tool. If all your paths are closed, this will cause polygons that are touching to be merged into one single closed path, and will put all the paths, including islands, into one discrete clipping path. Check out the video below (*note that after clicking the hamburger menu, the “Duplicate Layer” option was not visible, but that is what you will choose).

Uniting your land polygons with the Unite Pathfinder tool

3B – Subtracting land area from waterbody

This easy part in bullet form. Here we go!

  • Unlock the waterbody layer
  • Hold the Shift key to select the artwork in the duplicated land layer and the artwork in the waterbody layer simultaneously.
  • Click on the Minus Front Pathfinder tool. This will punch a hole – or several holes – in your waterbody rectangle that are the same shape as your land.
  • Since all the paths from this action will be brought up to the top, drag the artwork down into your waterbody layer, and delete the empty layer that once held your duplicated land path.s

Watch this video for the quick version:

Subtract land from waterbody path

4. Adding an “Inner Glow” effect

I’m not quite sure why I used quotations around ‘inner glow’ because that is exactly what it is called in Illustrator. This is the actual step where you create a satiny look. However, steps 1-3 are usually necessary when you’re dealing with open water in your map. Again, in bullets, followed by a video:

  • Lock your land layer
  • Select the artwork in your waterbody layer, and go to Effect –> Stylize –> Inner Glow
  • Set Mode to Normal, and check the Preview box.
  • Then just play around with the glow color, opacity, blur until you’re satisfied.

Video:

Creating a satin waterbody look with the Inner Glow effect in Illustrator

Your map. Your style.

The great thing about this satin waterbody effect is that it doesn’t tie you into one particular style. It is used by many cartographers in a variety of design styles. In addition to my map in the intro for this post, here are some maps I’ve made that use this satin waterbody effect that each have a very different ambience: Mid-Century; Art Deco, and somewhat of a play on Victorian era styles.

Mid Century style Minneapolis coaster map

Minneapolis, Minnesota square map

Simple square mid-century style map created for NACIS 2015 demo, Minneapolis, Minnesota. Most of the artwork in this map is very flat. The water has a slight application of inner glow to give it more of a satiny feel.

Art deco buildings in Montreal in an art deco style

Map created for NACIS 2017 presentation showing all the Art Deco buildings near the conference. I really wanted to capture the saturated and deepness of what Art Deco styles make me feel.

University of Washington brewery map (also uses concentric shorelines effect)

University of Washington demo map. For the water color here, it is actually a pale bone color, and any blue in the water is coming from the color I applied while adding the inner glow (step 4).

What Your Personal Geography Means to Your Voting Power. Interactive Map.

This post presents the What’s Your Vote Worth? map. This map began in January 2017 as an exploration of the U.S. Electoral College, and grew into a broader examination of voting in the United States. Our intent was to present America’s proven capacity to improve Equal Access for its voters, but also probe some areas where disparity still exists in the American voting system.

Over the past twenty-five years, half of the U.S. Presidents were initially elected without a majority of the popular vote despite winning the Electoral College. Because of the varying population sizes between American states, the Electoral College simply cannot be equally allocated among these populations. This means that sometimes the winner in a general election does not always reflect the majority of Americans’ votes. This also means that for a state like Texas, with a population of nearly 28 million, it would take 3.21 voters in a general election to equal just one Wyoming voter (Wyoming’s population is roughly 585 thousand). This is just one of the many ways that your geographic location impacts your rights when it comes to voting in America.

Your geographic location impacts your rights when it comes to voting in America.

 

Gerrymandering is another way in which we can experience the geographical influence on our voting power. Our congressional district boundaries are drawn by the political parties in our state that hold power. When these boundaries are drawn to favor one party over another, we call this Gerrymandering.

Preview What’s Your Vote Worth? map

 

Other ways that our geographic location impacts our voting access are: the amount of time we have to vote; the way we can – or cannot – cast our ballots; whether or not we need an ID to vote, and more, as discussed and explored in our What’s Your Vote Worth? map.

We also discuss race, gender, and how the United States has demonstrated the capacity to progress in order to increase voting access, and at times move closer toward the intent of the Equal Protection Clause and its stated “equal protection of the laws.” It is in this spirit that we created the What’s Your Vote Worth? map.

Voting Window by state, as viewed in desktop version

Due to the depth and complexity of the American voting system, we had to eventually limit the analysis of this map to a few select examinations. Each one of this map’s sections could be an entire application in itself. We also had to make decisions on which topics to include, and which to explore in a later application. For example, this map only touches upon Voter ID laws, when in fact, Voter ID laws are a very serious hindrance to equal voting access in America. Throughout the entire process of this map’s construction, we made great efforts to ensure our map contains well-researched factual information.

We invite discourse that this map may inspire, in hopes that it remains respectful and productive.

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

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

*This is a re-post from my former site*

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: