Using a 1950s Diner Theme as Inspiration for my Donut Map

Graphic designers (and mappers who are into graphic design), this post is for you! The first thing you need to know about this map is that most of the work was not on the map at all (scroll to bottom to see full illustration). It was on the surrounding design: the donut, the counter-top, the tissue paper (did you notice that subtle grease stain?) As far as maps go, the map itself was pretty straightforward. I hesitate to call it easy, because no matter how experienced you are at graphic design, mapping software has a learning curve at first. But it wasn’t the most involved map I’ve made. Still, there were cartographic choices that I had to make for a contiguous/mainland USA map with 31 points and chunky labels. I’ll share some of those things below. If you’d like to learn about how to add a map to your design, I posted that method that I used here.

This post is a sort of celebration of incorporating maps into your design, by sharing some of those techniques.

Donut Map by Sarah Bell

1956 Diner theme

Tabletop design

Pattern and Hue

I went with a 1950s-60s diner theme for this design project, so clearly I had to make a mid-century table top. We’ve all seen the type of countertops and tables to which I refer. I decided to make an original design of what I might see in a dream about 1950s diners. So I used an alternating 4-point star repeating pattern with a blue and green that are so similar that – to know they differ – you’d have to see them adjacent to one another. It seems like the truly period tables like this don’t have quite as bold of colors as the current versions being made today. The reason for this could be that all the originals I’ve seen have faded a little bit. Regardless, I wanted to have that original look, so these two similar-but-different colors help give that look that either the pigment wasn’t very bold, or some sunlight has helped the blue and green hues become more similar over time. The tabletop’s repeating pattern is the first of the two layers for the table, and sits at the bottom of the entire design in Illustrator.

tabletop-pattern

Texture

A lot of the old 1950s formica countertops with smooth texture still have a textured appearance as part of their design. To accomplish this, I created a layer just above the pattern layer. Inside of this upper layer, I added a rectangle with a really pale yellow-to-green-to-pink gradient. Then I added a transparency mask to this rectangle from a photo of marble; I also greatly increased the contrast of this photo prior to using it as a mask. Then, I just inverted the mask, which made this upper tabletop layer sort of visually incorporate itself with the bottom pattern layer.

I tilted the pattern a little, to make it look like the donut-paper-bakery tissue setup was a little more organically placed.

tabletop-texture

Bakery Tissue

Base layer

The bakery tissue is made of 5 layers! To do any sort of rendering in Illustrator, all that drawing I’ve done over the years has been key for me personally. Just like in the graphite arts, I add the shading last in Illustrator. So the bottom most layer was made last for this bakery tissue. I’ll start with what’s – let’s say – the base of this bakery tissue. It’s a paper-bag-brown color to look like the brown bakery tissue. I then gave each of the left and right sides pinked edges. Then I just worked the edges a little to make it look more like a realistic once-folded tissue.

Lighting

To get the lighting of this bakery tissue, I imagined a diner full of bright lights and windows letting in some natural sunlight. Still, there was a brightest light source that I imagined towards the upper left of this table. So I copied the base layer, and used a linear gradient to put some bright lines where I could imagine the light hitting the paper. Again, practice drawing helps a lot with this type of rendering.

Texture

The bakery tissue needed some crinkles. I took a photo of crumpled wax paper from my kitchen, and used this photo as a transparency mask for the top bakery tissue layer. I just copied the base layer, dragged it to the top, made it full white, and added the transparency mask. This gave it much more natural looking crinkles than I could draw in a vector design software myself.

Two shadow layers

Since there are a lot of light sources in a diner, I made two shadow layers. One fainter shadow for the upper parts and edges of the bakery tissue, and one darker shadow for the bottom edge of the bakery tissue to indicate that the strongest light source was somewhere towards the upper part of this tabletop. To make both of these shadow layers, I first copied the base layer, and then distorted and bent it to the way the shadows might hit the table just beneath the bakery tissue.

 

Grease spots (it’s the little things)

OK, so there is sort of a sixth layer on the bakery tissue. When the kind bakery employee grabs the donut with the bakery tissue, sometimes the donut goodness soaks into the paper a little. I added a faint donut shaped spot where this would have occurred on the bakery tissue. It’s just couple of gray shapes with some transparency and blur. I then used the color burn mask to make it look like it was “one” with the paper.

Grease spots in bakery tissue

Grease spots in bakery tissue

Map!

I wrote about how to make a map for graphic design here. That post gives the basic steps for using Maps for Creative Cloud as a mapping tool inside of Adobe Illustrator

“Burning” the map into the bakery tissue

To make the map look like it was part of the bakery tissue, I gave it a nice deep blush pink color, and simply added the color burn transparency mask in Illustrator. That is really it! The border layer of the states is just a darker hue of the blush pink color that sits on top of the country as lines. I didn’t use a color burn filter for  the borders, but I added a 5% transparency.

Labels

If you read that post about how to make a map with Maps for Creative Cloud, then you know that the labels were downloaded in the map. I didn’t have to manually add them one-by-one. You also read that I reprojected the map from Web Mercator to Albers Equal Area Conic. This projection gives the contiguous United States a beautiful curve that rises on the coasts. I manually adjusted each of the labels to match this curve. I also decided to add the city names beneath the shop names.

Map and Labels incorporated into the bakery tissue

Map and Labels incorporated into the bakery tissue

Donut!

I wasn’t around in the 1950s, but if you do a google image search for “donut” you will see a lot of pink frosted donuts with sprinkles. So I created that pink frosted donut with vectors and a transparency mask, and now I’m craving donuts. There are four layers that make up the donut. They are stacked from top to bottom in this order:

  1. Sprinkles. Some sprinkle-shaped vectors with a slight gradient overlay and a dark outer glow.
  2. Donut. There is a lot going on in this layer. This has the cake part with a transparency mask made of a photo of pizza dough. It also has the pink frosting, and highlights for the donut as a whole. I also added a secondary shadow to this layer.
  3. Donut base. This is just the part that gives the donut its color, following the same idea as the bakery tissue base.
  4. Donut shadow (bottom-most layer of the donut, just like one of the tissue shadows)

Newspaper

This newspaper is designed with vectors, just like all the other layers described above: there is a gradient that mimics where the light might shine brighter on the paper; there’s a transparency mask to help indicate a natural paper texture; I used shadows to help show where the light sources might be.

Full donut map and illustration.

Full donut map and illustration.

Formula 1 World Circuits

It’s time to go retro racer in 2018.

Formula 1 screenshot

Check out this animated map of Formula 1 World Circuits!

Even though it is already May, the college basketball excitement and hype of March Madness inspired me to do a sports-related data visualization or mapping project.  It was a lot of fun working with animations for the gerrymandering topic in What’s Your Vote Worth?, and it eventually crossed my mind to explore Formula 1 circuits.

What we do here is stack all the circuits on top of each other, like misshapen pancakes, and show you only 1 at a time.  Even though they’re scattered throughout several continents, here they share the same space and the same map scale.  Then, we continually move on to another circuit by morphing between the current shape and the next shape in the pancake stack.  The world reference map is also updated to provide geographical context.

An argument for doing this (other than just because I can) would be that you can directly compare the circuits’ shapes, sizes, and orientations, without having to find and navigate to each circuit separately as with a traditional web map.

I wanted to style this with an 80’s retro racer vision of a neon, cyberpunk future we’re all speeding towards, so we employed SVG and CSS effects along with an awesome font to achieve the final look.  (Thanks, Sarah!)

The stacking and morphing is all done on-the-fly in JavaScript with some neat map projection and shape animation techniques.  We’ll walk through how D3js and flubber were used to make all this come together in upcoming blog posts.

https://petrichor.studio/2018/05/formula1/

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).

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: