Drawing Hillshade: A tutorial (with time lapse videos)

Introduction

Welcome to my tutorial on drawing hillshade. This post is for people who want to draw map hillshade with pencil/graphite. In an upcoming post, I’ll describe drawing true hillshade on a complete map (with labels, roads, etc). Other upcoming mountain-drawing posts will include pen-and-ink and colored pencil. For now, this post is a tutorial for drawing with your graphite pencils. I’ll present some fundamental steps that should get you on your way to being a pro hand-drawing hillshader.

A friendly recommendation to all you graphite art enthusiasts: Drawing at your best requires getting into the flow. Reading through this post, and then doing some warm-ups (some listed at the end of this post) is a great way to get into the flow of drawing hillshade. Warming up will help you get acquainted with the paper and graphite you’re using. Music helps too!

The description of each step is accompanied by a time-lapse video of me demoing the step. In the videos, you can follow along as I sketch the area around Mount Everest captured in Imhof’s hillshade. I also incorporated photos of my sketch of a ridge along the Knik Glacier in Alaska, showing the static results of each step. You’ll find a full video of this Alaska drawing as the second-to-last item in this post. The reference for this second video comes from a digital hillshade image that I created from a DEM using GIS software. In Step 1, (Choose a Reference Photo) you can download this image as a reference photo, along with some others if you like.

The Materials

  1. Pencils. If you’re incorporating hillshade into a map with other information (labels, cities, etc.), you might want to use pencils on the lighter end of the scale. When drawing just the hillshade, I like to use any pencil ranging from 2B to 6B on the the HB graphite scale (sometimes up to 8B if I’m feeling super shady). I’ve drawn entire hillshade landscapes using only the 2B, but the 3B to 6B are so great for blending the smoother areas. Faber-Castell is my go-to pencil brand. I find them to be quite smooth. Staedtler pencils are also good.
  2. Paper: Get a good sketch pad. Get a few with various weights and textures, in fact. Always experiment with the paper to which you are committing your final project. Graphite blends differently on various paper types.
  3. Blending Stump(s) and tortillonEveryone is going to have a different drawing style. When I draw, I use the tortillon a lot. You’ll find it really useful for the gradients when your drawing hillshade.  While there is a difference between blending stumps and tortillons, this post will use them interchangeably and let you choose which you want to use (both the term and the tool). While you will vary the pressure, I use medium-to-slightly heavy constant pressure when using the blending stump (and tortillon). The thicker the paper, the more pressure I usually use.
  4. Erasers. I use a high polymer eraser and a kneaded eraser. The high polymer gives a nice clean slate in the spots you’re erasing, and the kneaded eraser is great for smudging off graphite to lighten up spots without removing all the graphite. Kneaded erasers can also be formed into narrow shapes for erasing small areas and finer lines. Sometimes, I will use an exacto knife to slice off a narrow piece of high polymer eraser for these fine-line erase jobs too.

To trace or draw freehand?

When practicing this technique, I like to draw freehand. It’s really great practice for getting accustomed to drawing from real-life references. Freehand also helps train your mind for how to draw from the imagination. However, when it comes to final drafts of real landscapes, for example a map of a real space that I want to put out into the world, I will likely perform Step 1 by tracing the ridges on a light pad, light box, or on a computer screen (super gingerly to protect the screen!) So, while you’ll see me drawing freehand in the videos, just know that you don’t have to do this. In fact, Step 1 for the Alaska hillshade that I demonstrate was traced from my computer screen.

BUT! All other steps after sketching the ridgelines do not need to be traced. In fact, it is recommended that you do all other steps by freehand while using an image as the reference. Paper over a light pad is going to hide all of the luscious nuances of light values. You’ll never be able to capture the landscape’s drama by tracing your whole way through it.

Sarah Bell tracing the North Cascades

If you’re tracing, only do so as you initially sketch the ridges and valleys. Here I am tracing the area around Ross Lake, in the North Cascades National Park

 

The Preparation Steps

(Actual drawing begins Step 1, Sketch the Ridgelines)

Pre-Step  1 – Choose a Reference Photo

If this is your first time drawing hillshade, I recommend starting from an actual reference. This will be help you understand how the light plays on the landscape. But where do you find a reference photo of hillshade? Here are a few ideas:

*Note – If you are using an image made from a DEM as your reference image, remember that these can oftentimes show a lot of extra data in the landscape. It is ok to generalize to the predominant gradients and values along the landscape where DEMs may have a little too much detail.

It can be helpful to start your shaded relief drawing journey with a great reference photo of a steep area that has some significant relief (a lot of elevation difference between the peaks and valleys). The reason I find this helpful in the beginning, is that steep areas allow for a lot of shade, so they will have a lot of different light and dark values you can work with. A scale of 1:100,000 or larger (larger scales: closer to the Earth) is a little easier to start with as well. The smaller the scale (farther from the Earth) the more ridges and valleys you’ll have on your page. It’s nice to start with something less challenging, but I also know how fun a good challenge can be! Remember, you don’t have to start by drawing the entire landscape in the photo; you can focus on a few ridges as a warmup.

Here are three magnificent maps with gorgeous hillshade. Each of them has areas of distinguishable relief, which makes the lighter and darker areas easy to identify.

From L to R: Imhof's Everest map; S. F. Emmon's Topographical Map of Mosquito Range; Imhof's hypsometric & hillshade map of Rheinwaldhor-Biasca, 1963

From L to R: Imhof’s Everest map; S. F. Emmon’s Topographical Map of Mosquito Range; Imhof’s hypsometric & hillshade map of Rheinwaldhor-Biasca, 1963. You can find the entire PDF of this atlas here.

Pre-Step 1.a – De-saturate: Black-and-White

This step is optional, but it’s a nice trick when you’re just practicing: De-saturate all the color from your reference photo. My approach when starting with hand drawn shaded relief was to use a black-and-white image as my reference photo. The reason is that all shaded relief really is is the difference between light and dark values on a page or screen to give the illusion of elevation relief. When making graphite art, the appropriate use of light and dark values is what makes a drawing realistic. It sounds like an oversimplification, but it’s true! You can get the right values in a variety of ways: pencil pressure, erasing, smudging, smearing, blending, hatching, scribbling – really any style you want to use to make the brighter areas brighter, and the darker areas darker. Back to the original point of this paragraph – Black-and-White reference images. When beginning this journey of hand-drawn hillshade, I found it a lot easier to see the difference between light and dark values in my reference photo if I was using an image without color. Luckily, on page 339 of Imhof’s Cartographic Relief Presentation (2007. Esri Press), there’s an image of just shaded relief for his Everest map, which I’ve included below this paragraph. This is the same area from the map above-left.  Take a moment to study this photo. It is a beautiful placement of light and dark values to give the impression of mountains and glacial valleys. There are no harsh lines. The ‘lines’ you see along the ridges are just an illusion provided by darker slopes’ adjacency to lighter slopes. Understanding that key point is fundamental in drawing hillshade.

E. Imhoff Shaded Relief Everest

E. Imhof’s shaded relief for his Everest map, 1967-1972 (photo from Cartographic Relief Presentation, Esri Press 2007)

Notice how dark those southeast facing slopes are! The richness of this particular image is the reason I was so drawn to it for one of my first hillshade sketches. If I were to draw a hillshade as part of a map with other information, like labels, buildings, glaciers, lakes, I might want to ease off on the darkness so that the other information could show up well.

Pre-Step 2 – Identify the light source

It really is about the lights and darks! It’s implicit the name, really: hillshadeshaded relief. You’re basically creating an impression of elevation by adding shade to the areas where less light can reach. Take a moment to identify the direction the light is shining in your reference image.

The light source on almost every shaded relief that you’ll see comes from the upper-left/northwest. In fact, there’s this weird phenomenon that happens when you switch the light source from upper-left to lower-right – or of you rotate a shaded relief image 180 degrees – the high areas look inverted. The two following shaded relief images of Mount Saint Helens are identical. The one on the left was rotated 180 degrees so that north is at the bottom of the image, while the image on the right has north at the top. Notice how the stratovolcano on the left image appears to be sinking into the earth instead of rising out of it, like the image on the right. Also, the left image’s valleys look more like ridge tops. It’s a neat optical illusion. Check it out! These images are identical. I promise.

These are identical shaded relief images of Mt. Saint Helens. On the left, the image has been rotated 180 degrees so that the light source is at the lower-right. Notice this orientation gives the image an inverted look - as if the mountains sink into the earth like canyons. On the right, north is at the top of the image.

These are identical shaded relief images of Mt. Saint Helens. On the left, the image has been rotated 180 degrees so that south is at the top of the image, and the light source is at the lower-right. Notice this orientation gives the image an inverted look – as if the mountains sink into the earth like canyons. On the right, north is at the top of the image.

With the light source in mind, investigate all the nooks and crannies of your reference photo. This is a sort of warm-up I like to do when drawing hillshade. Sometimes we draw what we think should be there instead of what the still life, landscape, model, or any other reference is telling us. Where do the darkest shadows collect? Where do the brightest parts of the slopes shine? Also check out the gullys, valleys and plateaus. Understanding the light’s behavior along the landscape you’re about to draw is key to getting a great impression of what’s really there. And yes! It is an impression. So 100% perfection is not required. But your peaks, valleys, rolling hills should correspond extremely closely with your reference, especially if you’re making a map to be used or viewed in the wild. Although, I’m also a fan and creator of fake maps, fantasy maps, and maps inspired by – but not based in – reality. And hillshade in those maps are rooted partially or fully in the imagination. But you’ll even need to account for the light’s behavior – albeit imaginary – in those landscapes to make them look like mountains.

The Drawing Steps

Step 1 – Sketch the Ridgelines

Purpose of this step – In this step, you’re basically drawing the framework upon which the subsequent steps will be based. These sketched lines will “disappear” soon, as the image starts to take a more physical form while you continue to sketch and blend.

Pressure and Pencil Choice – After investigating the light source on your reference photo, the next step is to lightly sketch the ridgelines – or divides. I like to use a #3B or 4B or higher pencil. Since you will eventually blend this sketched line with your stump, you’ll want to sketch lightly. The #2B is nice for blending, but I find that the increased softness in the #3 makes this a little easier. You could use a #4B or darker, but just know that it is always easier to go darker later on, and more difficult to go lighter.

Sketch the ridgelines & divides. Start with the most prominent ones.

Sketch the ridges & divides. Start with the most prominent ones.

 

In this time lapse video below, I’m sketching most of the prominent ridges from Imhof’s shaded relief image. While I’m doing so, I’m keeping in mind that these ridges are going to simply serve as guidelines which will divide light and dark values – that is to say these ridgelines are not the drawing, but rather they set up the framework by which you will shade.  So, the pencil pressure should be very light. I’m also faintly sketching in some of the lines where the dark and light values diverge in the valleys, but mostly this step focuses on the ridges.

 

Hillshade Step 3 Alaska

The ridge along Knick glacier after I sketched the ridges via tracing. This will be the only step that tracing will occur (if at all); the remaining steps are freehand. This image also includes some lightly shaded areas I did while sketching the ridgelines. More shade added in the next step.

Notice how faint the sketched ridges are.  Although the images in this tutorial each have prominent ridges, the concept holds true for gentler landscapes as well: Draw a faint line along the highest crest that follows the length of your hills, mountains, and cliffs. Note that in gentler more rounded landscapes, you’ll eventually blend this sketched line, so draw faintly.

Step 2 – Shade the Shadows

Purpose of this step – The objective for Step 2 is to get some graphite on your page so that you can blend with your blending stump in Step 3. This shading step will start to give your drawing some depth as you add graphite to the general areas where the predominant shadows fall. As explained below, the shading for this step should be kept pretty tight against the ridges and features where the shade/shadows begin, since this is usually where shadows are darkest in shaded relief (or so I have found).

Pencil choice & pressure – Using a pencil ranging from the #3B-#6B start lightly shading in the landscape you just sketched on the sides of the ridgelines and hills where the shadows are cast. The pressure should still be pretty light. Tilting the pencil to use the broader edge (as opposed to using the tip of the pencil) will make the graphite easier to blend.

Technique – As previously stated, you’re shading pretty tightly close to those ridgelines for now (see video below). You’ll fill in the rest of the shadow along the slopes gradually. This is also an opportunity to sketch in some of the less prominent ridges that you may have left off from the previous step. In fact, I sketch a lot of minor ridges later on in the process once the drawing is beginning to take form. Here’s a time lapse video showing me doing Step 2:

 

Alaska shaded relief: A closeup view of Step 2 (Shade the Shadows), prior to blending. The pencil pressure was pretty light, and was done with a 4B Faber-Castell. This combination of medium-to-light pressure with a softer pencil will make it easy to blend.

Now we have a nice sketch going! Don’t be frustrated that what you have doesn’t look like a shaded relief yet. It will soon. You’re doing it right!

Step 3 – Blend!

Technique – This step is so rewarding because it is the one where your sketch starts to take the form of a true hillshade drawing. Take one of your blending stump tools (I’m actually using a Tortillon for all the drawings you see here) and start blending the graphite you just shaded in the last step away from the ridge in the direction that the shadow falls. If you’re doing a deep canyon, this is still the same, except you’d be blending away from the rim instead of the ridgeline. You will essentially be drawing with your stump by moving around the graphite. I blend in tiny little circle motions. You can scribble, drag, or back-and-forth, whichever works for you. Remember to be consulting your reference photo occasionally.

Pressure – Test with various pressures. I find that I use a medium-to-heavy pressure when I blend. Don’t be shy when you blend; you can tilt the tool to get broader coverage. Now is also a good time to mention that I spend the majority of time using the blending stump/tortillon when I draw hillshade. It’s true. I’m blending or drawing with the blending tool more than I’m using a pencil.

Remember to consult your reference image throughout this process. Try not to blend into the lighter side of the ridges, especially if the ridges in the reference photo indicate a sharp edge versus a gradual slope. If you do, you can easily erase it. In this video, I’m taking the blending stump and just blending those areas I shaded.

Soft ridgeline drawing (Nifty Trick) –  Much of my time drawing hillshade is with the blending tool.  After you’ve been blending this dark graphite for a few minutes, you’ll notice that it will build up in your blending tool. This is GREAT! You can use the extra graphite that accumulates on the blending stump to draw in some of the minor ridgelines on the brighter slopes of the mountains.  This is useful since brighter slopes’ ridges have a softer appearance, and drawing with the blending tool has an instant softness to it. Notice how far the blending stump can take that graphite you just put down in the previous step!

The landscape is now taking form on the page.

Alaska Hillshade step 4

My Alaska hillshade sketch after the first blending phase. Although it isn’t complete here, it’s starting to gain some depth.

 

 

Step 4 – Shade Again

Purposes of this step – This step is a lot like Step 2, but now you will focus on more details in your reference image, and transfer them to your drawing by shading. Take a good look at your reference photo. Where is it the darkest? How dark are those dark values? Pretty dark! I usually find that my drawings really start coming to life when I start getting dark. This doesn’t mean use a ton of pressure. But you want to try to increase the pressure ever-so-slightly. I use a light-to-medium pressure. Choose a #3B to #6B pencil. Maybe even a #7B or #8B if you’re feeling it. I used a #5B in the following video. Remember that you will blend all of this graphite. After studying your reference photo, start shading in the darkest areas where light has a hard time reaching. This will likely be against the ridges. You will also use this step to begin shading in some of the minor ridges and the valleys that haven’t been added yet.

In the video below, you’ll see me add a lot of new ridges that didn’t get added when I did Step 1 (Sketch the Ridgelines). I’m adding these as I frequently consult my reference photo.

Getting these darker areas into the drawing really makes the higher areas begin to pop. Now get ready for some more blending.

Step 5 – Blend Again

In Step 4, you just put down some more graphite on your paper with a pretty soft blend-able pencil. Now it’s time to blend it. Following the same principle from Step 3, use your Tortillon to blend all that graphite you just put down. Remember you can also draw with your Tortillion with all that extra graphite that you’re picking up as you blend. You can also continue to add those ridges on the sunnier slopes, where the shadows aren’t as harsh.

Notice in the video above, I did a lot of drawing with my Tortillon on those sunnier slopes. I also used the extra graphite on the stump to fill in the valley floors.

 

Step 6 – Create the Highlights

With all that shading and blending that you’re doing (nice work!), you’ll find that some areas need to be brightened along the way. You’ll use the eraser to do this. Consult the reference image and compare it with your drawing to identify some ridges and slopes that might need to be illuminated.

If it is a narrow spot, make sure you’re using a narrow polymer eraser or a narrowly formed part of your kneaded eraser. I didn’t get a long recording of myself erasing for highlights; this video was recorded as a time lapse, and then slowed down; the result is a little choppy. However, slowing it back down was necessary to show the technique more clearly.

 

Step 7 – Repeat until you’re happy with it

Now just keep shading and blending while still consulting your reference photo, paying attention to the light source, values, and forms of the ridges. The key throughout this process is to remain confident, and not get frustrated. Oftentimes the drawing doesn’t start looking like the landscape in your reference image until you’re well into the process. Drawing hillshade takes practice, and with each iteration you will learn more tricks and your own personal drawing style will emerge. Skip to the warm-ups below to get the hang of it.

 

Here my Alaska hillshade video, which pieces the steps together:

 

Hillshade Warm-ups

Draw simple shapes like the following, and test out the steps. Consider the imaginary upper-left light source as well.

 

Sketch the ridgelines. Using simple shapes like this is a good way to warm up.

Sketch the ridgelines. Using simple shapes like this is a good way to warm up.

 

Lightly shade in the shadier slopes along the divides.

Lightly shade in the shadier slopes along the divides.

Blend in the graphite on the shady sides

Blend in the graphite on the shady sides

Repeat until complete

Repeat until complete

 

 

The Making of a Stacked and Animated Map

Remember that time when we mapped and animated the 2018 Formula 1 racing circuits?

You know, it had that wild, neon pink, retro color scheme…

Formula 1 screenshot

I promised to “walk through how D3 and flubber were used to make all this come together”.  Well then, we’ve arrived here, and along the way we looked at how to begin making web maps in D3 followed by how to wrap your mind around web map projections.  Be sure to check out those posts, too.  The concepts build on top of each other in the hopes of making this one easier to digest.

Getting to the main point:

How do you stack and animate geographical features that are located in different places?

Map projections play an important role in this technique.  I chose to project the Formula 1 circuits using the Mercator projection because it is good at maintaining the shapes of small features, specifically when rotated to each feature’s centroid and zoomed in closely.  Mercator thus is “conformal” in projection terminology.  And since it can be a pain to remember: zooming in closely on a map means using a large, local map scale.

I’ve broken out the inner workings of the stacking and animating technique into 3 separate parts which are very much alive and kicking in the CodePen demos below.  Each Formula 1 circuit is first translated from geographic coordinates to SVG space (projected) by rotating and scaling the Mercator projection to every one of these circuit features.  This is what fundamentally makes them appear stacked because they now occupy the same area of the SVG element.  Finally, instead of showing all of them at once, we only show one circuit’s shape at a time and animate to the shape of the next circuit in the stack.

Part 1: A two-dimensional globe is drawn with an orthographic projection to show how projections can be rotated to specific locations on Earth.  In the bottom area of this demo–using the Mercator projection with a large map scale–we also rotate to each circuit’s centroid location and then add the circuit to the stack.

See the Pen Stacking & Animating Formula 1 Circuits in D3 (Part 1) by Jacob Wasilkowski (@jwasilgeo) on CodePen.

Part 2: Skip the leisurely world tour and immediately make a stack of circuits.  Again, each circuit is drawn as an SVG <path> element with the assistance of a uniquely rotated Mercator map projection.

See the Pen Stacking & Animating Formula 1 Circuits in D3 (Part 2) by Jacob Wasilkowski (@jwasilgeo) on CodePen.

Part 3: By now we know how to quickly create a stack of disparate geographic features. The focus in this final demo is on the animation that morphs between all the circuits’ shapes using the flubber JavaScript library.

See the Pen Stacking & Animating Formula 1 Circuits in D3 (Part 3) by Jacob Wasilkowski (@jwasilgeo) on CodePen.

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.

“Bring Up State” Animation Effect with D3

*Check out our What’s Your Vote Worth? data viz storytelling to see this effect in action.

Tired of falling down into web maps?

Zooming in, zooming in, and zooming in from outer space down to the Earth’s surface got you feeling sad?

Here’s another idea: demand that geographic features come up to you. Web maps typically require you to zoom in and may give the sensation of “falling down” or “diving in” towards the Earth’s surface. Why not make this everyday interaction become more user-focused?

Click on a state to get started.

See the Pen Bring Up State – D3 by Jacob Wasilkowski (@jwasilgeo) on CodePen.

In this JavaScript code sample written with D3js, called “Bring Up State”, we serve—provide, give, deliver—a state polygon that has been clicked on to give it full focus. This is the opposite from expecting your audience to freely zoom in as with traditional web map experiences. This sample goes one step further by fading away the remaining states in the background to alleviate visual clutter and bring attention to the current state. Take a look at the code to see how it is all glued together.

Just click—no need to fly down closer to the Earth—and the visualization will do the heavy lifting of bringing up the geographical feature directly to you.

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: