Designing Maps

How to make beautiful and compelling maps for your games

Drawing Mountains

Wherein I teach you methods for drawing mountains on maps.

How you choose to display mountains will depend on three things: the visual style you’re trying to achieve, your skills with drawing, and how much time you want to spend making them. I’m going to discuss three basic styles here and describe their benefits and drawbacks.

This post is about skill application. If you want to learn about strategies for correctly placing, sizing, and labeling mountains (or about how plate tectonics may affect your world), you should read Designing Fantasy Outdoors Maps (which will eventually point you here).

This tutorial assumes that you have created mountain range guides, as explained in Designing Fantasy Outdoors Maps.

Take One: Shapes

In this method, you draw the outside edges of your mountains as shapes and then allow Photoshop to figure out the mid-line ridge point and draw corresponding highlights and shadows. This method has the advantage of being very fast to do but it has a lot of disadvantages: the results can be unexpected, the mountains can look crude even when done well, and it’s much slower to edit after the fact.

First, you’re going to draw the mountain shapes.

How to Draw a Mountain Range with the Pen
Create a new layer group, “Mountain Ranges” right above your Landmass, and then for each mountain range:
  1. Create a new layer with the name of the mountain range inside the Mountain Ranges group.
  2. Select the Pen or Free Form pen tool.
  3. Set your ink color to something you can see (I like #999999 or the color of the landmass for this ).
  4. Find one of the mountain range lines you drew. This is where you are going to draw. Set this layer to about 30% opacity so that you can see it but it isn’t overwhelming.
  5. Draw the edges of your mountain range as a shape, roughly following the range line. Don’t make it smooth – make the shapes jagged. The deeper the angles, the more impressive the effects will be.
  6. Turn off visibility of the corresponding range line.

Now apply some style. This is going to be all about applying a bevel.

How to Style Pen-Drawn Mountains
  1. Select the Mountains shape layer in Layers panel and open its Layer Style dialog.
  2. Set the layer’s Fill Opacity to 0%.
  3. Select Bevel & Emboss.
  4. Set the “Style” to “Inner Bevel”.
  5. Set the “Technique” to “Chisel Soft”
  6. Set the “Depth” to 420 (nice!)
  7. Set the “Direction” to “Up”
  8. Set the “Size” to the maximum, 250
  9. Depending on the age of the mountain, set the “Soften” value to make them look sharp or hill-like, depending.
  10. Make sure your light source is at 90 degrees direction and 30 degrees altitude.

Play around with the opacity and blend modes of the bevel highlights and shadows or even the layer itself. Maybe add a texture. When adding textures, you may be tempted to use the “Texture” section in the Bevel & Emboss effect. Don’t. Use a pattern overlay.

You can use this technique to make soft hills, too. Use the Freeform Pen tool to make a looping wave shape.

The Bevel Settings for Pen-Drawn Hills
Your bevel should use following settings:
  • Depth: 200
  • Size: 250
  • Soften: 15
  • Highlight and Shadow Opacity: 25%
  • (no stroke)
Lower the Opacity
Lower the Opacity on the Guide
Draw the Mountain Shape
Draw the Mountain Shape
Turn Off the Range Guide
Turn Off the Range Guide
Apply the Bevel Effect
Apply the Bevel Effect
No Highlight, Lowered Shadows
No Highlight, Lowered Shadows
No Highlight, Lowered Shadows, With an Overlay Stroke
No Highlight, Lowered Shadows, With an Overlay Stroke
A Soft Hills Shape
A Soft Hills Shape
Hills Shape with a Soft Bevel
Hills Shape with a Soft Bevel

If you have bevel shaped mountains pushed up against an uneven shoreline, you’re going to want to cut them down to work with the shoreline. This is one of the reasons why mountains drawn with the Pen tool are less desirable than hand drawn mountains. The trick is to rasterize the mountain layers and then clip them to the shape of the coastline.

How to Clip Bevel Mountains
For each mountain range shape layer you need to clip, called Mountains:
  1. Duplicate the Mountains shape layer as “Mountains Pixels”.
  2. Turn off visibility of Mountains and save that somewhere.
  3. Right click on the Mountains Pixels layer in the Layers panel and select Rasterize Layer Style. The layer is now pixelized.
  4. Hold down the <command> key and click on the preview icon for your Landmass layer. This selects all the pixels in the landmass.
  5. Go Select -> Inverse to invert the selection.
  6. Select the Mountains Pixels layer.
  7. Hit the <delete> key.

You will probably want to go in there with the Brush tool and add some lines to prettify it.

Uncut Bevel Mountains
Uncut Bevel Mountains
Clipped Bevel Mountains
Clipped Bevel Mountains

Take Two: Stamps

This technique is really about using stamps but you use a bush. This method has an advantage in that anyone can do it (you don’t really have to know how to draw) and it automatically lends itself to a kind of “old world map” feel. A disadvantage is that it is incredibly slow to use.

You’re going to pick a brush that has the shape of a mountain on it and “stamp” it into the canvas. This method is entirely pixels.

You will need to select the right brush – one that has a mountain shape you like. These brush shapes can range from simple inverted “V” shapes to complex drawings of mountain ranges. If you try drawing a line with one of these brushes, you’re going to get a weird, fuzzy line. This is almost certainly not what you want.

There are hundreds of pre-made brushes to be found for this purpose (just search “Photoshop Mountain Brushes” or something similar; there are tons on Deviant Art). Search for “How to Import Photoshop Brushes” to add them when you find some. You can also make your own (the process is similar to importing a texture, but search the interwebs for “How to Make Photoshop Brushes”).

Let’s assume you’ve found a brush you like.

You’re going to be very careful about where your mountains go. Stamping individual mountains in a long range is going to get really tedious really fast, so you may want to find a “Mountain Range” brush. Remember that you can set the brush’s size so you can make some mountains larger than others. Ideally you’ll have a library.

Stamping is easy and follows a simple loop.

How to Stamp Mountains
  1. Place the cursor over the canvas and click.
  2. Curse under your breath because you didn’t get it perfectly aligned.
  3. Type <control>z to undo your most recent mistake.
  4. Place the cursor over the correct position on the canvas and click.

You should be able to see the shape of the brush while you do this: the cursor should reshape itself to the exact size. If it isn’t doing that, turn it on.

How to Turn on Brush Preview
  1. Go Photoshop -> Preferences -> Cursors
  2. Under “Painting Cursors”, ensure that “Full Size Brush Tip” is selected.

Pick a variety of mountains and hills shapes to use and mix them up. Don’t forget that you’re working in pixels! Once a stamp is down, it can be modified with the eraser tool or other brush tools.

Various Mountain Brushes
Various Mountain Brushes
Ghost Outline of a Brush
Ghost Outline of a Brush
A Stamped Mountain Range
A Stamped Mountain Range
A Stamped Mountain Range with Blend Mode "Overlay"
A Stamped Mountain Range with Blend Mode “Overlay”

Take Three: Freehand Drawing

This is the method I most often use because I find it to be the prettiest with the style I like to use. It’s advantage is that it is super flexible (you can make the mountains look how you want them to) and very pretty but it has disadvantages in that it is slower to do, it assuredly requires a pen tablet, and you need to have some basic drawing skills.

I modified my technique from one I originally found at Fantastic Maps (which is a wonderful site and you should read all of it).

Fight me, damn you!You’re going to want a pen tablet for this. Doing this with a trackpoint or a mouse is going to be tedious. As Ramirez said to MacLeod in Highlander: I would spare you that pain.

You’re going to make a lot of layers. You’ll want to label them in such a way that you can easily remember what you did, which means including your brush settings in the layer’s name. Each layer will have a purpose. You’re making separate layers so that you can adjust their blend modes and opacity values independently later.

While I recommended making individual ranges their own layers when working in shapes, don’t do this here.

You’ll need to make several layers.

The Drawn Mountains Layer Structure
Inside of your Mountain Ranges group, create the following layers (in this order) with these names and set their blend modes as such. You’ll change the names of the layers later when you’ve figured out your brush mechanics.
  • “Ridgeline” in Normal mode
  • “Thin Lights” in Screen mode
  • “Thin Darks” in Multiply mode
  • “Fat Lights” in Screen mode
  • “Fat Darks” in Multiply mode
  • Set the blend mode of the Mountain Ranges layer group to Overlay.

Drawing the Ridge Lines

First, draw the mountain range’s ridge lines.

How to Draw Mountain Ridge Lines
  1. Choose your weapon: Select a Hard Round brush. If you have a pressure sensitive tablet, choose one with Pressure Opacity. Set the brush’s size to very small – 1 pixel is probably right.
  2. Set your paint color to a dark grey (#222222).
  3. Draw a thin jagged line on the canvas following your mountain range line. This will represent the “centerline” ridge. It helps to think of the points as where mountain peaks will be.
  4. Once you’ve got that how you like it, turn off visibility of the mountain range line’s layer.
  5. Now add secondary ridges and spurs. Starting from the centerline ridge, draw additional, shorter jagged lines outward.

When drawing the spurs, feel free to let these lines “dash” in places. Ideally, you can let the opacity of the ends drop. I like to “fork” the tail and head of the centerline ridge as well. As you go, you’ll start to see the mountains take shape.

Remember your brush settings? You may want to come back and edit this layer later using the same brush. Rename the Ridgeline layer to include that information. Something like “Ridgeline (1PX HR:PO #222222)” for 1 pixel, hard round, pressure opacity, and color (I always work with #222222 and #dddddd so I tend to omit that).

Draw a Jagged Line Following the Range Line
Draw a Jagged Line Following the Range Line
Turn Off Visibility of the Range Line
Turn Off Visibility of the Range Line
Draw Spur Lines Outward from the Center Ridgeline
Draw Spur Lines Outward from the Center Ridgeline

Adding Base Shadows and Highlights

Now, you’re going to add in the broad, larger shadows and highlights.

How to Draw Shadows in Mountains
  1. Select the Fat Darks layer.
  2. Change your brush size to something much bigger: 15 pixels or so. Change the brush’s opacity to something much lower: 20% at the highest. If you have a pressure sensitive tablet, choose one with Pressure Size (not opacity; make sure you’re not using a brush with opacity sensitivity).
  3. Keeping the map’s light source in mind, start painting in shadows along the ridgeline, opposite the light source. Your strokes should be multiple and run away from the ridgeline as much as possible.

Don’t fret overmuch if you “color outside of the lines”; the blending will deal with that. Feel free to go over areas multiple times to darken, but don’t make it black. Darker shadows will come across as steeper edges away from the light, so that’s the information you’re imparting. They should fade to nothing at the ends (the mountain’s feet).

Paint in the "Fat" Shadows
Paint in the “Fat” Shadows
Paint in the "Fat" Highlights
Paint in the “Fat” Highlights

Remember to rename your Fat Darks layer before moving on to adding highlights.

How to Draw Highlights in Mountains
  1. Switch to the Fat Lights layer.
  2. Switch to a light paint color (#dddddd).
  3. Paint in the highlights on the other side of the mountains to show where the sun shines.

Don’t worry if you go over areas that are already shadowed; that’s fine. It will help to create texture. You’re going to be drawing on both sides of the mountain range, mind, just more on one side than the other.

Adding Deep Shadows and Highlights

Once that’s done, you’ll add in darker and lighter areas, implying more texture and details on the Thins layers.

How to Draw Deep Shadows in Mountains
  1. Switch to the Thin Darks layer.
  2. Set your paint color to your dark color (#222222).
  3. Increase the brush’s opacity (about 40%) and it’s size to something smaller (4 – 5 pixels, maybe)
  4. Start drawing in where the darkest areas on your mountains are. This is going to generally be along the insides of ridge line edges but feel free to start strokes for this at any point. Draw away from the ridge line if you can.
  5. Add some strokes in the “light” side as well.

When you’re happy with that, rename your Thin Darks layer to include your brush information, and move on to the Thin Lights.

How to Draw Bright Highlights in Mountains
  1. Change your layer to Thin Lights.
  2. Set your paint color to light (#dddddd).
  3. Draw in where the “brightest” areas are in the sunlit side. There won’t be many of them.
  4. You may also want to lightly edge some of the darkest areas, to create more contrast for them.

When you’re done, remember to rename the layer.

Voila! Play around with the blend modes and opacity values of each layer to get the effect that you want. I typically set the main ridgeline layer to Overlay at this point (it’s easier to work with when Normal).

Paint in the Thin Darks
Paint in the Thin Darks
Paint in the Thin Highlights
Paint in the Thin Highlights
Set the Ridgeline to Overlay
Set the Ridgeline to Overlay

Adding Color

You’ll want to add some color to them now.

How to Add Color to Drawn Mountains
  1. Create a new layer below the Fat Darks layer called “Greyify”. Set it’s blend mode to Color
  2. Set your paint color to a medium grey (#999999).
  3. Set your brush to Hard Round (and Pressure Opacity, if you can). Size it at 30 pixels with 30% opacity.
  4. Paint over the mountains. Double and triple up your strokes towards the center. You don’t have to be precise.

You can obviously use different colors for this (browns, for instance). As long as the blend mode is set to Color, everything will work out.

Add a Grey Color Layer Below
Add a Grey Color Layer Below
Setting the Fat Darks Layer to Multiply
Setting the Fat Darks Layer to Multiply

Adding Snow

Snow covered peaks can be tricky given the various blend modes you’re using. You’ll have to change the blend modes for the Ridgeline, Thin Darks, and Thin Fats layers to Multiply. This may end up appearing harsh, so you may want to play with the individual layer opacity values (say 75%).

How to Add Snow to Drawn Mountains
  1. Create a new layer beneath all of the other layers (below Fat Darks and above Greyify) and call it “Snow”. Use a Normal blend mode.
  2. Set your paint color to pure white (#ffffff).
  3. Set your brush to Hard Round, 5 pixels, 50% opacity (it doesn’t matter what kind of pressure sensitivity you use here).
  4. Gently draw in your snowy areas with the brush. Remember that snow-lines aren’t consistent from mountain to mountain (local climate affects this) so don’t worry if it’s not too even. Draw along the main ridgeline where it’s high enough for snow; stop when it’s not.

You’ll find that you really don’t see the snow easily where you’ve placed your shadows. This makes sense, but it doesn’t quite feel realistic. Ideally you’d be able to do funky things with blend modes; however, with light colors there won’t be much difference with the lighten modes (Overlay, Lighten, Screen, Color, Luminosity) and the snow will disappear entirely with all the other modes.

Adding Snow
Adding Snow
Snow After Being "Cleaned"
Snow After Being “Cleaned”

We can fix this by reducing the intensity of the shadows that bleed into the snow layer.

How to Reduce Shadow Intensity in Mountains
  1. Select all the pixels in the Snow layer by holding <command> and clicking on its preview icon in the Layers panel.
  2. Go Select -> Modify -> Feather. Set the radius to about 5 pixels (or more or less depending on your map’s resolution). This “fuzzes” the selection.
  3. Select the Fat Darks layer.
  4. Hit the <delete> key. This will soften the shadows where the snow is, making it brighter.
  5. Select the Thin Darks layer.
  6. Hit the <delete> key again.

You can experiment with moving the Snow layer to the top and playing with its opacity and maybe find something you like. Play around with your ridgeline opacity. You may want to change its color with a color overlay. Experiment and find your style!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.