My workflow on mapping hills:

Transcription

1 This is a non-traditional tutorial thread. I'll be posting little snippets that I originally posted to G+. I'll try to keep an index of the posts at the top for easy and quick reference. We'll see how that goes... These are intended to be entrance level tips that anyone might find useful. Feel free to ask questions about specific topics. My workflow on mapping hills:...3 City design...4 Thoughts on dungeon design and game flow...5 Laying out a city...6 Simple City Icons in Photoshop...7 Hand Drawn Mountains...9 Turning a map into an aged paper handout...11 Castle Defence - a classic gatehouse...12 Drawing Isometric Dungeons...14 Quick and Easy Dungeons using Grids...15 Using Layer Effects and Blend Modes to create quick dungeons...16 Using Paths to create textured walls -or- why I hate bevels...18 Old School Dungeon Mapping...23 Creating an old-school map in Gimp How to colour a dungeon map by hand...36 Trees in battlemaps...38 How to make a grungy brush...39 How to colour trees quickly...41 Scatter Brushes in Gimp...43 Isometric hand drawn mountains...45 How to draw cliffs - 3 different styles...46 Isometric Cliffs...48 Explaining Blend Modes...49 How to draw grasslands...51 A Note On Background Textures...53 How to Draw Forests...55 Using your phone to 'scan' a hand drawn map...57 Drawing Realistic Coastlines...60 How to create a ripple texture using the clouds filter...61 How to turn a map into an underwater landscape...63 Drawing Water...65 Grids in Photoshop...66 How to Draw Icons - and a Free Ship...67 Iso Rivers...70 Step by step Town Creation...71 How to draw swamps...74 Using the Pen Tool to Draw Buildings...76 Using dynamic brushes to draw in city blocks...79 Drawing Old-fashioned Coastal Waters...81 Page 1

2 Highlighting Important Buildings - Shape, Detail and Contrast...82 Dungeon Walls...84 Labeling Locations...86 Placing icons on a map in Gimp...88 How to draw forested hills...90 How to draw, shade, and colour an isometric mountain range...92 Page 2

3 My workflow on mapping hills: 1. Lay in the shadows with a large fuzzy brush. In photoshop or the Gimp I'd suggest doing this on a layer with the blend mode set to overlay. 2. Lay in the highlights with a slightly smaller fuzzy brush. Avoid sharp edges. You want hills to be rolling, and in contrast to the sharp peaks of a mountain range. Again, here I've done this on an overlay layer. 3. Add colour (here I'm a layer with the blend mode set to colour) and leave the hills slightly browner than the flat plains. That helps to differentiate them - and means that even with subtle light and shade they'll be easy to read at a glance. A couple of other things to keep in mind: Lay in the rivers first. As rivers drain the water out of hills, they will determine where the hills should go. Less is more when it comes to shadows and highlights here. Your mountains should have the darkest shadows. Make sure that your hill shadows are quite a bit more subtle , 05:31 AM Page 3

4 City design. When laying out a city, first pin down the major areas of interest. Where is the center of power? Where are the major markets? What do people need to defend, where are the city walls (if any). The main roads will connect these locations, and they'll be determined by the city gates. Then smaller roads will radiate out from these locations - as people need to get to their source of food, and city planners tend to focus roads around palaces and city squares. Once you have the roads in place the city map is entirely functional. You can label that and be done. Everything beyond that is making it pretty (and that's an entirely different topic - drawing buildings is a long task that can push people to the edge of sanity. (today's map is taken from the City of Flint, illustrated for ENWorld's Zeitgeist adventure path: ) , 07:46 AM Page 4

5 Thoughts on dungeon design and game flow. Your dungeon design determines the flow of the adventure. If you have a linear dungeon with just one route to the end, you'll have a linear adventure and your players can feel railroaded. If you have different routes to the goal, your players may miss some areas. Are those areas less important to the story? If so, will players feel that they shouldn't explore? You can give players reasons to explore different areas, or have running battles take them into those other areas. A dungeon is more than a map - it determines the plotline of a game and presents your players with specific choices. Those choices should be interesting choices, and players should feel rewarded for making them. Keep in mind how you'd like a dungeon game to progress when you design the adventure, and make sure that players can't skip important plot areas. The map today is from the Lost City adventure by Logan Bonner: , 06:17 AM Page 5

6 Laying out a city Today I'm covering a quick way to layout a city and make it look pretty and easy to read. This one is particularly for Richard Green who was asking for some advice on a city map he's working on. The challenge with a city map is to lay out information on districts of the city as well as specific locations. The two can easily get confused, especially if you have a very detailed texture showing roofs and individual buildings. In this style I'm focusing on just showing the different districts. Individual locations of interest can then be placed on top by using icons, or something more elaborate. 1. Lay in the roads. Here I've used a fixed width round brush, with a slightly wider width for main roads than minor roads. I've also used Photoshop's layer styles to give the roads a dark outer glow to make it easier to read them. They're white on a light background, but that won't be an issue for long. 2. Here I've use the magic wand to select all the negative space where the city blocks are going to be. You can also use Select Pixels and then Invert Selection in photoshop. I've then shrunk the selection by 3px (though that depends on the resolution of your file of choice). The selection is then filled with black and this layer is set to overlay. I've also given the layer a layer style which is an internal stroke set to colour burn at 70% opacity. The result is that we can see all the city blocks, and the roads are visible as the negative space between the city blocks. 3. Now we want to designate the different districts. Again we use the magic wand tool to get the selection of the city blocks in a specific district (you can also just get the selection by using the magic wand on the layer from step 2). Now, with one layer and one selection for each of the district, fill with the patter of your choice. Here I've used a striped pattern. I've set the stripes to a colour and used a combination of overlay and colour burn layer modes to create the effect. Voila! An easy to read city map with clearly differentiated districts - all in less time than it takes to eat lunch. As ever, let me know if there are any questions in the comments section, or let me know if there are topics you'd like to see covered , 06:39 AM Page 6

7 Simple City Icons in Photoshop First lunchtime tip of the New Year - today how to do simple city icons in Photoshop. This is more of a series of pointers to tools that will make your life easier. The actual tips are in the image this time. Some useful tricks here: When you're on the Move Tool (V), if you hold down Option, the tool will create a copy of an object and move that rather than moving the object itself. This saves a lot of copying and pasting, or duplicating layers and really speeds up laying out a lot of icons. There's a little arrow beside the list of shapes in the Shape Tool toolbar. That has all sorts of useful options, like arrows on lines, or turning polygons into stars. Layer styles are very powerful. They are worth any amount of time invested into learning them, especially as they can be saved (using the New Style... button in the dialog). Once saved they can be applied very quickly. [image on next page] , 06:45 AM Page 7

8 Page 8

9 Hand Drawn Mountains It's a bit of a long one today for the lunchtime mapping tip. We're doing mountains. After I put together a post about drawing hills, I had a request to do the same for mountains. Here's a walk through of my process. For this, you need any piece of software that allows you to use layer blend modes, specifically overlay. I know these appear in Photoshop and Gimp, and I'm pretty certain they're available in others too. It also helps if you have a tablet, but this can be done using a mouse with a low brush opacity to build up the shadows gradually. I build up mountains in 5 steps over a textured brown background. I find great for good backgrounds, or you can use the one I've attached here. I've provided it CC-BY-NC licensed so that you can use it for any non-commercial purpose. Okay, onto the mapping! 1. Draw the ridge line for your mountains. Mountains form in lines and create ranges spanning long distances, and help to form natural dividing lines for countries. Don't make it too straight. If your hand shakes whilst you're drawing this it's a good thing. 2. Add in the lines for the mountain ridges that come down from the ridge line. These should bunch up near peaks and help the viewer see where the mountain tops are. They spread out as they get further from the ridge where the ground becomes flatter and easier to navigate. This part just takes a little time and practice to get it looking good. 3. Create a new layer and set its blend mode to overlay. Take a large-ish circular brush and either set its opacity to pressure sensitive (if using a tablet) or low Page 9

10 opacity (if using a mouse). Now, with the colour set to black or very dark blue block in the shadow on the SE side of the mountains. Always start a stroke at or near the ridge line and draw away from the ridge. That will result in the most overlapping strokes being beside the ridge. This means the darkest regions are beside the ridge, and also you'll get lots of details around the ridge. Now pick a few region on the SW side of the ridge that would be in shade and block those in too. Switch to white, and do the same for highlights on the NW side. 4. Create another layer and once again set it to overlay. Reduce the size of your brush by at least 50% and repeat the process. This time you're looking for the drakest shadows and the brightest highlights to give some detail and definition. Focus on mountain peaks and the top of the ridge line. 5. Create a final layer, and set it's mode to colour. Using a large fuzzy brush, and pure grey, turn the peaks of the mountains grey. Then using the same fuzzy brush, lay in some verdant green around the base. You can also go back to your first overlay layer here and spread the shadows and highlights into the surrounding plains to blend the mountains in with the background. The biggest leap of faith here is trusting that you can be fairly loose on your overlay layers and it will some out fine. The second image attached provides a quick look at what my overlay layers look like as normal layers on a grey background. You can see that the brush strokes aren't that careful, but when they are combined into the overlay layers, they look just fine. You can download the.psd of this mountain test here: , 04:30 AM Page 10

11 Turning a map into an aged paper handout Today it's a quick and easy tip for turning a map into an aged paper handout - which is really a mini discussion on using blend modes in Photoshop or Gimp. First of all you need a good paper texture. There are thousands of these free on the internet. As always, is a good bet, under Paper->Plain. You can also find hundreds of paper textures on deviantart.com (just search for "paper texture"). With this in hand it's a quick hop to a pretty map: (as always you can download this fullsize, or download the psd here) 1. Take the original map - here we have a simple 3 colour map with a couple of locations marked with crosses. It's useful, but not that atmospheric. 2. Add a parchment background as a layer behind the map. You won't see it initially (the white background blocks it out) so change the blend mode to multiply. This only darkens, so the white background will disappear. Drop the opacity of the layer to 50% to give a light watercolour look. 3. The 50% multiply layer is a little washed out, and we want to darken the lines and bump up the colours. To do this, duplicate the layer and set the blend mode to colour burn. This will boost the colours and burn in the dark lines - and once again the white is transparent for this blend mode.. I've set it to 70% opacity. Play with the opacity of the two blend modes to get a look that you like. You can also use colour and saturation blend modes with this to build up a nice effect. And just like that you have an aged paper hand out. Much easier than tea staining or baking a hand drawn map, and with less chance of setting fire to the oven , 05:42 AM Page 11

12 Castle Defence - a classic gatehouse Today, a lunchtime tip that's entirely software (and edition!) agnostic - a simple design for a castle gatehouse. Castles are built for more than one reason - people live there, guards are stationed there and often they are political power centers for the region. But first and foremost they are built to keep people out. The weak point in any castle is it's front door, and a number of techniques were perfecte over the years to make sure that someone trying to attack a castle would have a hard time of it. Now attackers might not be as obvious as a massed army at the gates - unsavoury people sneak in too. This gatehouse design was used in many places - including Linlithgow Palace, the palace I grew up beside and spent a lot of time in. 1. Visitors approach from the south (in this diagram). The outer gate is large and heavy, and often opens onto a moat that's crossed on a drawbridge. 2. Once inside, the doors are closed behind (often from a mechanism operated from the guard room). 3. Progress forwards is barred by a portcullis, and a set of heavy doors. This allows the inner doors to be opened safely so someone can talk to the visitors, without allowing them access to the castle 4. Guards on either side can target visitors through arrow slits. 5. More guards are perched above and can target visitors with ranged weapons, or that Page 12

13 classic defence of boiling oil. This provides a robust defence mechanism against invaders, but it's far from full-proof. Linlithgow Palace was taken by a small group of determined soldiers using a simple ruse with a hay cart. The farmer drove his cart with fresh grain up to the palace. The guards opened the portcullis to let him in. He stopped the cart under the portcullis, and armed soldiers burst out from under the hay. The portcullis was dropped, but the cart jammed it open, and provided an open front door for the extra troops waiting in hiding outside. Soldiers poured in and the Palace was taken with relative ease. For a game with fantasy elements, you'll want to station some form of caster at the front gate, with some easy divination magic. The murder holes make the perfect vantage point for a sorcerer, and the confined space is just built for flaming spheres , 04:17 AM Page 13

14 Drawing Isometric Dungeons There are some classic isometric dungeon maps out there, particularly those of castle ravenloft - the original David Sutherland maps inspired the styles of all maps of that castle that have come since. It's also a style beloved of computer games, most notably the Diablo series. Creating an isometric map is actually pretty easy. First draw out your floor plan as if it were top down. Place lines for all the elements on the ground - walls, doors, outlines of pit traps. I draw these lines on a separate layer from the grid as it keeps everything organised. Make it isometric! Rotate the map 45 degrees. Then you shrink the map vertically by 57.7%. The great thing about isometric maps are the vertical details you can throw in there. Find every corner, and draw a vertical line to show wall edges. Focus on the edges that don't obscure details further away. Here I've added the most detail where the detail doesn't overlap the actual floorplan. Fill in the blank space with sketched stone texture, add in illustrated doors, throw in some lines to show the rough stone in natural stone tunnels and give the viewer an idea of just how deep the spiked pit trap is. Again, I add these details on a separate layer to make it easy to erase mistakes without rubbing out the floor lines. Remember that the primary goal of the map is to show the floorplan and allow for easy use for a GM. The extra detail that an isometric map provides can really sell the setting of a map, but it's also easy to obscure important features , 04:08 AM Page 14

15 Quick and Easy Dungeons using Grids This one's quite specific for photoshop, but can be adapted to Gimp (and I've added some gimp tips throughout). It's a neat tool that often lies buried in Photoshop's preferences panel that allows you to turn on a grid that you can snap to. This is perfect for quick dungeon floorplans on the fly. Combined with layer effects and blend modes (a future mini-tute) this can give you great looking maps really quickly. There are a few steps to turning the grid on at the right scale. Make sure that you have your image file set the correct scale. Here I'm creating a map at 100 pixels per square, so I set the resolution to 100dpi. Open up Preferences and go to the settings for Guides, Grids and Slices. In here set the grid to 1 inch, and add in the number of subdivisions you want. When sticking to drawing features that take up full 5' squares you can set the subdivisions to 1. If you want to draw some smaller detail, like a 1' thick wall, then set it to 5 - to get a grid line every foot. This should now give you a grid on your map. You can show/hide it with ctrl/cmd + '. You can also toggle the snap to grid behavious using shift + ctrl/cmd + ; This also toggles snapping to guides. Note for Gimp Users - there's a plugin here by RobA that allows you to create a grid of guides that will do the same job. With the snap to grid on, you can create a new layer, and use the rectangular select tool and Fill (option + delete or cmd/ctrl + delete for foreground/background fill) to quickly lay in your dungeon layout. Using that as a base, you can use blend modes and layer styles to build a pretty dungeon (or Gimp users can use this plugin, again by RobA, to generate a pretty dungeon map from their basic layout) , 06:32 AM Page 15

16 Using Layer Effects and Blend Modes to create quick dungeons Last week I posted a short tutorial on using grids in Photoshop to create a quick dungeon map (see above). The last panel of that tutorial showed a dungeon map with some layer effects added to give it a little pop. Today I'm going through the layer effects I used to show how it's done. A note of caution on layer modes - they can easily be over used and if you turn them all the way up to 11 then they'll scream their presence to anyone looking at your map. Bang them in at full opacity, then dial them down to create a more integrated effect. 1. After last week's tutorial you should have a nice floorplan for your dungeon map. First find a nice neutral background with some slight textural variation to it. Paper and stone textures are good for this (try I've placed the floorplan on a new layer and changed it's colour to light blue ( #868ba6 for those that want to reproduce this in PS or Gimp). You can change the colour of a floorplan by locking the transparency of the layer (first of the four Lock options at the top of the Layers panel) and then fill with a colour (Edit->Fill, or option/alt + delete to fill wth the foreground colour. Finally I've set the blend mode of the layer to colour burn. Notice how the texture of the layer behind is clearly visible? The colour and tone difference separate the walls cleanly from the background, but the texture keeps the whole thing unified. 2. Here's the map with a couple of layer effects added. To access the layer effects panel double click the layer in the Layers window, or with the layer selected go to Layer- >Layer Style->Blending Options... Here I've added a 2px stroke in black at 100% opacity to clearly delineate the walls (they are important after all). I've also added a black outer glow with a blend mode of overlay and an opacity of 75%. Notice how the walls now separate from the floors and you get a sense of depth. 3. The shadows aren't quite deep enough, but rather than bump up the outer glow I add a drop shadow with no offset (offset drop shadows imply directional light, and I don't want that impression inside a dungeon - light sources should be in the rooms, not outside shining across the map). The drop shadow here is dark brown and has a blend mode of color burn with 75% opacity. That gives some great over saturated shadows Page 16

17 and really dark nooks and crannies. Finally I've added an inner glow. This highlights the edges of the wall, and contrasts with the dark shadows. I've used an inner glow in white with a blend mode of overlay, 40% opacity and a size of 50px (half a square). I this case I've avoided using any Normal, multiply or screen blend modes (other than for the stroke). These modes mask the underlying texture, whereas the overlay and colour burn blend modes combine with it. I want the texture to unify the layout and provide some visual variation throughout the map. Play around with the different options. Inner glow, outer glow, drop shadow and inner shadow give you lots of options for creating edge effects around an area. Once you've found something you like, click the New Style... button in the layer effects palette and give it a name. Now you can apply this layer style to any future selection by going to the Styles item on the left hand list and finding it again. These skills don't just work for dungeon layouts, but also for text effects, logo design and much more. It's really worth the time to dig in and get to know the layer effects panel. For Gimp users, there aren't any layer modes. However if you have a floorplan you have a selection. This selection then allows you to use filters such as drop shadow, which mean you can replicate all the effects here very easily by a combination of layers. You can also use Stroke Selection to create the stroke in step , 05:19 AM Page 17

18 Using Paths to create textured walls -or- why I hate bevels (Photoshop) So one effect that I see a lot of in maps is bevel/emboss to pull walls out of the background in dungeon maps. I personally don't like it so I chose not to use them in my own maps. I wanted to create a nice edge effect on dungeon walls without having it look like a photoshop filter. In this tutorial I'll walk through how to use paths in photoshop to create nice edge highlights and shadows on walls. In this tutorial I'll be creating this simple one room: Here's the psd file if you want to look at all of the layers used to create this: And here's what the same room would look like with the walls done with bevel and emboss: Page 18

19 This is a quick and easy tutorial, so if there's anything that makes no sense give me a shout (or a pm) and I'll make sure I explain it better. So let's start with an easy base. I begin with a background layer that's a textured neutral - you can grab these from parchment or rock textures over at cgtextures.com. I then just quickly drawn in a wall outline that will be the room. The wall lines are done on a new layer - I always keep my lines on a separate layer on their own: With the walls in, I use the magic wand tool to select the area that will be the walls (and use Select- >Modify->Expand to make sure the selection runs down the middle of the ink lines). Then go to the Paths dialog and click the 'Make work path from selection' button to make a path from the selection. (also use Select->Save Selection before going any further - you'll need this selection later) This creates a work path. Drag and drop the work path to the New Path button to create a permanent path. You also want to invert the selection and do the same process to get a path that surrounds the floor space. You'll now have two paths. This is the structure that will underpin the work that comes next. Page 19

20 Okay, starting with a quick tweak - I desaturate the background layer using an adjustment layer. I also add an overlay layer that's masked to just hit the walls. First create a group (folder icon) and mask the folder so that the floor is masked out and the walls are open. In the group create a new layer. Now select the path that surrounds the floor. You don't want to have a selection going round the outside of the walls, because we're going to stroke the path and we don't want the outside of the canvas to be highlighted. With the path selected go back to the layers palette and have the new layer selected. Pick a nice large brush and press enter. You'll see a big fat line stroke the path! Ctrl-z to undo. You should now see what we're doing here. This should be something like what you just produced: So get rid of that big fat line and we'll do something more subtle. First off, I want to put in a grungy highlight along the edge. I use a large grungy brush with a low opacity (around 10%) Start off really big - like px - and stroke the path with white (hit enter). Then reduce the brush size and do it again. Rinse and repeat until you have a nice gradual highlight up to the wall edge. I set the layer to overlay to get a nice textured highlight: Page 20

21 Page 21

22 This is nice, but it needs to have an extra texture. I set up an extra layer and this time I'll use a hard round brush with lots of scatter (1000%), colour jitter to swap light and dark and a low opacity (around 20-30%). Stroke the path again (make sure the path is selected then hit enter with the brush tool selected) with a few different sizes of this brush. You should have something like this: Now set this layer to overlay and set the opacity of the overlay layer blend in nicely: That's the wall highlights sorted. The wall shadows are just the same trick. In this case set up a new group, and mask this with the inverse of the previous mask. You can do this by selecting the previous mask, right click->add Mask To Selection, and then use Ctrl/Cmd-shift-I to invert the selection. Click group icon and then click the Add Layer Mask button (to the right of the fx button at the bottom of the Layers dialog). Now add a layer to the group. This layer will be our base shadow layer. Selec the second path - from the Paths dialog - and then go to your new layer. Choose a nice dark colour, and a large, low opacity grungy brush (again around 5-10% opacity) and hit enter to stroke the path. Reduce the brush size and repeat. This will give a nice grungy shadow: In this image I have this layer set to multiply at 100%. It's a little overbearing, so I reduce the opacity to 10-20% and create a new layer, this time set to overlay. Repeat the process of stroking the path and you should get something like this: This way you can set up highlights and shadows for a map of any size, as long as you get your initial selection right. Stroking paths in this way has lots of other uses beyond this kind of wall highlighting. Once you've got used to it here, you'll find many other uses for it elsewhere in your workflow. Page 22

23 Old School Dungeon Mapping In honour of the news that Wizards will be reprinting the 1Ed core rulebooks I thought I'd go old school and put together a quick old school map. This is less a min-tute as a set of guidelines: The walls were placed using the tips on grids from earlier this week: The colour is key to getting that old school feel - it's #18769d To add the grid, open this file ( in Photoshop and go to Edit->Define Pattern. Now you can flood fill a region with a grid by going to Edit->Fill... and choosing Pattern -> 100px grid. Lock the transparency and fill with blue to get the old school blue grid. The doors are white squares stroked with blue: The statues are just a circular graphic (attached) I used arial bold for the secret door label, again stroked with blue (Layer Styles- >Stroke) The (much longer) Gimp version of this tute can be found here: Old School Blue Maps in Maptool After I'd posted these tips on G+ Scott Pellegrino asked the obvious question - can you set the Fog of War in maptool to be old-school blue so that players reveal the white dungeon as they go. The answer is yes! Page 23

24 Once you've imported your map into maptool - go to Map->Edit Map and choose the Fog tab and set the colour using the HSB settings to the values shown in the image below. Now the Fog of War is classic old school blue! You can also set the grid colour in the same way. The tokens in these screenshots are not mine, but come from the free token packs by Devin Night ( Check them out, they're amazing. Page 24

25 Creating an old-school map in Gimp. This short tutorial will use only basic Gimp skills and give you a map of the form of those classic TSR maps of the 80s such as The Palace of the Silver Princess, that can be found for free here. I will try to keep it as simple and straightforward as possible. If there are any steps - however small - that are unclear please say and I will amend the text. Throughout this I will be using gimp version go to to get hold of the latest stable (2.4.x) release. In this post we'll go through the following steps: 1. Open a new canvas of the right size 2. Set up Gimps grid to be the right scale for the map 3. Import a new pattern (only ever needs to be done once) 4. Use the new pattern to lay a grid over the canvas to make our graph paper background. So there are very few steps and they should be pretty straightforward. If you want to see the result of this section of the tutorial, skip to the bottom of the post. Before we start we need to decide what size the canvas is going to be. This depends on two things - how large the map is in numbers of squares and how many pixels each of those squares will take up. Here I use 50px squares and a canvas of 1000px by 1000px. This means that there are 1000/50=20 squares to a side so its a pretty small map. I've chosen 50px because it's a good resolution for virtual tabletop programmes which are the area I play D&D in. To get a larger map you can go to a larger overall canvas - ie a 2000px by 2000px map will hold 40 50px squares to a side which should hold a decent sized dungeon. The alternative is to go to smaller squares. If I had chosen a 25px square then I'd get 40 to a side on my 1000 by 1000px canvas. This second option has the advantage of keeping the filesize down. On the other hand, all the resources I'll post here will be sized to 50px So that's enough talk about this. You should now have decided on the size of your canvas. I take 1000px by 1000px. Create a new canvas (File->New). In the following dialogue, make sure the measurements are in pixels that your width and height are both set to the value you have chosen. You now have a blank white square! Gimp has a grid built in. It's invisible at the moment so go to View->Show Grid. Note the View menu is in the window with the canvas on it, rather than the window with the tool palette on it. We'll be using the canvas menus for everything except for opening a new file (and that's already done). Now with the grid showing you should have a load of cross-hairs across your white canvas. These will probably be at the default Gimp spacing of 32 pixels - which you don't want. Page 25

26 To change this go to Image->Configure Grid... and set the grid spacing to your chosen value. Here I set it to 50px. You should now have something that looks like this: This grid just works as a guide for the Gimp tools - it won't show up in the final version. However that's no good for us as we will be needing a grid to form the basis of our map. We need to draw in a grid, but don't worry, you won't need to draw out every line by hand. We'll use a pattern fill. This next step is a little tricky but you only have to do it once. I've got a couple of pattern (.pat) files that allow me to create a grid of any size with great ease. They are included in this zip file: gridpatterns.zip Download this zip file and unzip it in the following directory: C:\Documents and Settings\<userName>\.gimp-2.4\patterns\ Now make sure that you have the patterns dialogue open somewhere (by default Gimp will open this in the combined layers and patterns dialogue). If you can't see it, go to Dialogs->Patterns or use ctrl-shift-p. That will bring it up, or highlight it if it is already open. Now at the bottom of the palettes dialogue is a pair of circling arrows. This allows you to refresh the seelction of patterns. The button is here: Hit this and the palette will be updated with the new patterns you have just added. Your palette should now look like this: Page 26

27 The new patterns are there and ready to use. You will never have to do this again - those patterns will always be there (unless you delete the files from the directory at a later date). One will give a black grid and the other will give a TSR blue grid. I'll use blue throughout for that added nostalgia factor. Click on the pattern you want. Now, click on the window with your canvas in it. Go to Select->All or hit ctrl-a to select the whole canvas. Now go to Edit->Fill with pattern, or hit ctrl-;. You will now have a lovely blue grid that fits beautifully over the Gimp grid we set up! This will form the basis for the map. It should look something like this: Right, best to save it here. Save it in Gimp's native format -.xcf - as this maintains all of the information. So call it something like classicdungeon.xcf and you are good to go. Quick threadjack... You can also use Filters Render Pattern Grid to render a grid of any size/colour -Rob A Page 27

28 Now, we'll do the following: 1. Add a new layer 2. Set up a brush of the right colour and size 3. Turn on snap to grid 4. Lay down the walls with the brush tool. Right, now that we have out pretty graph paper, either made using my natty pattern files or through Rob's much easier method above (there's always a quicker way to do it ), we need to start laying down walls. I'm going to do a dungeon, so we are underground - this is a classic mapping tutorial after all, we should start with a dungeon. Now it will be useful to make use of layers at this stage. The graph paper will be our background but we don't want to erase the graph if we make a mistake. Therefore we will do our drawing on a separate layer. To do this, make sure the layers dialogue is up - either by going to Dialogs->Layers, or ctrl-l. Now you'll see a thumbnail of your pretty graph paper called background. To create a new layer, hit the new layer button: This brings up a New Layer dialogue. In here, give the layer a name (I'll call mine Walls) and select the fill type to be transparency. This means we can draw on this layer, but be able to see everything that has been drawn on layers further down the stack. Right, with this layer selected, we want to draw some walls. First we want to have the walls in the same lovely blue as the rest. In the toolbox there are two blocks of colour, one is the foreground colour and the other is the background colour. You want to change the foreground colour as this is the one that all the tools use to draw with: Page 28

29 If you double click on the foreground colour box, you can change this. In this case I am using a blue with the code: 18769d If you enter this into the text field, you will have this colour too! Now we want the tools to snap to the grid we set up. Go to View->Snap to Grid and make sure it is checked. Now select the paintbrush tool and pick a brush size of 3px circle: Now pick a place to start drawing a wall and click once on a grid intersection. Now this will just make a single small circle appear. Now press shift and move the mouse to where you want the wall to go. You'll see a line connecting your current mouse position to that first dot. This is the line along which the 3px line will be painted. Move the Page 29

30 mouse to the grid point where you want this section of wall to end and click again. A nic straight wall should appear. If you keep holding shift down and move the mouse again you can extend the wall further. This way it is very quick to lay down an outline of a dungeon that will look something like this: Okay, let's finish the walls and colour the rock around before we start putting in some furniture. Finish laying down the lines for the wall outline as above so that your walls are a closed loop of lines, or until the lines reach the edge of the page. This will be important in a minute. You should have something that looks something like this: Now it's quite hard to tell where the wall is and where the corridors are (okay, not too hard on this map, but on a larger map this would be tricky). We need to flood fill the wall areas to make this clearer. To do this pick the fuzzy select tool: Make sure that sample merged is off. Now click within an area you want to fill. You should get a large area highlighted with a line of black and white 'marching ants' that should encompass the area you want to fill. If instead you get one square selected, then you've got the background layer selected rather than the Walls layer. Go to the layers dialogue and click the wals layer and try again. Now as we used the brush tool, our walls have a slightly soft edge to them. This means that the fuzzy select region doesn't quite go up to the wall lines. If we fill at this point then we'll get a thin line of white between the wall and the fill. So go to Select>Grow... and pick 2 pixels. This expands the selection to the middle of the wall lines. Now go to Edit->Fill with foreground colour, or ctrl-, This should give you something like this: This is starting to look a little better. Finish filling the walls in the same way. Now we want to lay some internal walls that don't take up full 5' squares. Do this by switching back to the paintbrush tool and using the click, press-shift-and-drag, click method above to lay down Page 30

31 internal walls. Don't worry about doors, we'll do that next. Remember - if something goes wrong you can always hit ctrl-z to undo it. This should give you something like this: Right, I promised doors, and doors you shall have. In the original TSR maps the doors were squares. Here's an example door that I have knocked up for you: Note that this is a 50px by 50px image so it fits the grid size I am using. You can get this for yourself by right-clicking the image->save Image As... Place it somewhere you can find it easily. Now when we start placing doors we'd best create a new layer. So go back to the new layer button again. Name the layer Doors and make sure it is selected. Now go to File->Open... and find where you saved that door image that I posted above. Open this. Select all using Select->All or ctrl-a and copy using Edit->Copy or ctrl-c. Close the door image and click Don't Save when prompted - you haven't changed it anyway. Now return to your map. Click the map window so that it has focus, and go to Edit->Paste or ctrl-v. Now you'll have a door image in the middle of your canvas. It will almost certainly be in the wring place. To move it, pick the selection tool from the toolbox: Now if you hover the mouse over your pasted door, you'll get a little cross-hair with a little fourdirectional arrow on the bottom right. When you hover the mouse away from it you'll get an anchor on the bottom right. Make sure you don't have the anchor and click and drag the door image to the position you want. The grid will help to an extent, but you may need slightly finer control. If so, place it roughly, then move it into its final position using the arrow keys on your keyboard. Once it is in the right place, move the mouse until you get the anchor symbol and click to place it. You can also place it by clicking the Anchor layer button in the Layers dialogue. Page 31

32 Now the big square doors are all well and good, but they're not very realistic and they don't show which way the doors should open. Here's a different door that conveys that extra information. I know that's not really cricket, but it was requested in another thread, so here it is: You can place this in just the same way as the other doors, though you will need to use the arrow keys to get the placement right. Using these it is straightforward to do all the doors you need to place: Note that you can rotate the images you want to lay down using the rotate tool from the toolbox. Just select the rotate tool and click the object before you anchor it. Equally you can use the Flip Tool to flip an image horizontally or vertically. I did this to get the double doors at the top of the map. Once you have manipulated the object into the orientation, go back to the selection tool to move it and anchor it. You can add other items to the map in exactly the same way. Now I'm not going to draw a load of mapping icons for everyone here, but it is quite possible to find a large number of them on the dunjinni site here: [urlhttp:// I couldn't find the basic Dungeoncrafter tiles anywhere, but if someone has a link, I'm sure they can post it here. Now the dunjinni tiles are a bit large (sized for a 200px grid) so it's best to resize them. When you want to use one of those do the following. When you open it for the first time, go to Image->Scale Image. Change the units to percent and the magnitude to 25 on each axis: This will scale the image down by 25%, from a 200px/grid size to a 50px/grid size. Now as before, Page 32

33 select-all, copy and paste on to your map. Remember that it is probably worth setting up a new layer for each new set of furnishings. This time when you close the image of your object, you do want to save. Go to File->Save As... before you close the file and save it as <objectname>small.png or similar. That way you will quickly build up a library of objects that you can use that are at the right scale for your maps. Equally, you can draw your own. This isn't too hard, but if/when you get stuck trying this, please ask around and people will be able to help you out. Finally, you'll want to label your maps. Choose the trext tool (the large A) and start typing. If the label is in the wrong place, don't worry. Use the movement tool with the following settings: If you click and drag on your text now you will be able to move it to wherever you like. With these last tips you should end up with map something like this in no time: If you want, you can add a scale in as well or you can leave those like toff guessing. Save the.xcf version of your map again (ctrl-s), and then Save As... (ctrl-shift-s) OldSchool.jpg (or name of your choice of course), click okay on the two dialogues that come up and you have yourself a finished map! Page 33

34 And here is the same map imported into maptool, given dynamic lighting and being explored by an adventurer who found a statue with ruby eyes and decided it would be a good idea to prise one out. The statue shudders to life, an infernal glow in those ruby eyes and the hapless adventurer wishes he'd had a bit more respect for those annals of D&D history... Now obviously the labels shouldn't be visible to the players. That's why we kept them on another layer, so that by switching off the visibility of the layer (the little eye symbol beside the layer icon) we can hide them all. If we then save the map we get just the player view without any of the traps or secret doors visible: Now obviously this was a light hearted tutorial harking back to a more innocent time of D&D, but the basic principles you've seen here are the same basic principles that go into making far prettier maps. The core of this is getting a good selection and finding a nice way to fill it. Clearly instead of using blue for your flood fill, you could use one of Gimp's built in textures - such as the granite texture. Suddenly you have a very different type of map. Something in fact that looks a little more like this: Page 34

35 But something like that is really something for another tutorial - and one by someone else as I need to get some dinner. Please feel free to ask any questions, or make comments - I will endeavour to answer them as best I can, or someone else here who is better qualified will be able to. I notice a couple of people have already chipped in with some very pertinent hints further up the thread. Thanks guys! , 06:25 AM Page 35

36 How to colour a dungeon map by hand Oops, fell behind a little on my updates. Here's todays: How to colour a dungeon map by hand Today it's back to the isometric dungeon I created in this mini-tute a few weeks ago ( +Larry Moore was asking about the next step - how I'd go about taking a map like that and colouring it up. An isometric map is a little trickier than a top down map. As there aren't hard edges for the walls it's tricky to set up a selection and stroke the selection or use filters to define walls and floor styles. So I do it by hand. And here's the steps I use. Note - I'm refering to Photoshop in this tutorial, but it's exactly the same in Gimp. Throw a nice textured background under your lines. I'm very partial to parchment backgrounds, but stone, cloth or other backgrounds also work well. The texture will pull the whole map together and suggest more detail than you put in by hand. Then create a new layer with the colour blend mode underneath the lines. Take a very desaturated colour (I tend to use a brown that's almost grey, maybe 5% saturation) and block in areas that should be stone. I use a grungy brush with low opacity and build up the greys slowly. You don't want heavy round brush edges here. They may not show up at this stage, but you'll notice hard edges on the colour layer towards the end. Finally, pick out the colours of non grey objects, like wooden doors and water. Don't worry about being too careful here. You'll almost certainly go back and edit this layer before you're done. Add in your first layer of light and shade. I almost always use an overlay layer for light and shade. At this stage, your building up general form, so use a large brush - around the same size as a grid square. A fuzzy circular brush works well, or a grungy brush with low opacity. I like to make the floor the lightest area, as our eyes are drawn to the lightest point in an image. The walls and floors around the dungeon can be darker to suggest heavy earth and rock. I also like to darken the corner where the wall meets the floor. There's no good reason for that physically, but is really seems to work for me when detailing maps. In this case I've actually built up two overlay layers to get to here - this is mostly because my background was so light. Page 36

37 Place the detail. This is the stage that takes the time. Once again, add a new overlay layer. Reduce the size of your grungy brush by half (at least) and start working in the darkest shadows. These should be along wall edges, and in nooks and crannies of natural stone walls. I also ran a dark brush along all of the flagstone lines to give a bit of dimension to the flagstones. Now switch to a light colour, amd use a hard round brush with relatively small size and set the opacity to pressure sensitivity (if you're using a tablet). Pick out sharp highlights. These should be along the any sharp edges, like the side of an outcropping, the edge of a flagstone, the edge of a door, the bright highlight on a doorhandle. I also added the stone effect in the surrounding earth by setting the hard brush to low opacity, adding a large scatter and allowing the size of the brush to vary. I threw in some scatter in the earth to hint at rocks and stones in the earth around the dungeon. Now go back to your colour layer and make any tweaks you need now that the detailing's finished and you're done! That's another long one (I'm afraid), but the steps are - lay in the colours, block in the rough light and shade, add in the detailed shadows and highlights. I hope that helps! You can find the psd for the iso dungeon here feel free to play with the different layers and see what they do , 06:45 AM Page 37

38 Trees in battlemaps I thought I'd discuss trees in battlemaps - after Anthony Metcalf asked about them. In this case I'm just talking about the decisions over the style of a tree rather than the technical question of how to actually draw one. There are four styles of tree that I can think of that I've regularly seen and there are pros and cons to each one. A lot of the decision is really based on how you're going to use the map you have at the end. I'll go through each in turn: 1. This is probably the most obvious. You draw the canopy of the tree. It's relatively easy - and there are lots of pre made tree image you can use if you want to lay in a lot of trees quickly (for example: Equally, you can hand draw them, like I've done here. The down side is that this obscures anything under the canopy that you might want to show, and in particular it obscured the tree trunk. If you're running an abstract game, where forest is just a generic terrain type and being in the forest gives you cover then this is fine. However if you're playing something like 4e D&D and you need to know where the tree trunks are for cover and line of sight, this will give you a pretty map, but won't actually allow the map to be used for gameplay. 2. This approach goes in the opposite direction. Here I've just shown the tree trunk, and no canopy. This is great for tactical gameplay as it leaves you able to throw other details onto the forest floor, like fallen trunks or meandering streams, without any problem with the players being unable to see them. However, it's less obviously a tree, and it's just not as pretty. It's the approach I took for my Leafless Wood map pack, which I still drag out whenever my players end up in a fight in a clearing: 3. Here I've gone for a happy medium. It's more abstract, as we have both the canopy and the trunk beneath. You can decide when you colour it whether you want to just leave the line art to designate the extent of the canopy, or whether you want to add in some leaves around the edge. I first saw this style done by +Mike Schley on some maps he did for Wizards, and it certainly makes for attractive battlemaps that are also useful for tactics. It's a little more time consuming, but I think it's worth it for the versatility. The one downside I've seen with this style is that if you also have a lot of ground level detail like streams, fallen logs, mushroom fields and such, then it can get very crowded and it can be hard to read off the important information. 4. Here I've just shown the branches of the tree. It works well for winter scenes and you can clearly see the extent of the tree as well as the location of the trunk. However this comes with a health warning. Doing the line work can be time consuming but it's as nothing compared to the amount of time it'll take to colour and shade. Think very carefully before doing a map with more than a couple of these on it. You're likely to regret it, however pretty they look at the end of the day! Page 38

39 , 08:22 AM How to make a grungy brush One incredibly useful tool in photoshop is a good dynamic grungy brush. The human eye looks for detail and texture, or patterns and regularity. If you use a hard edged round brush in your work, there will be hard edged circles in your work. We're very good at picking them out, so your audience will see them. On the other hand, if you use a brush with splattered edges, a random orientation and a variable size then there will be no pattern anywhere. Then the human eye sees other patterns and forms. It sees texture that isn't there, and fills in regions with the texture it believes it should see. So - build yourself a nice random grungy brush to fill in texture and you're getting your viewer's overactive brain to do 9/10 of the work for you. This is an inescapably Photoshop centric tutorial. You can achieve similar results in Gimp but the process is pretty different. In Photoshop, either create a splattered shape by dropping ink on a page and scanning it in, or pick up this set of free brushes here: 1. Use a collection of the brushes or ink shapes to make an roughly oblong shape with lots of spikes, spatters and edges. Add some opacity variation to build up the shape. Select the full shape and go to Edit->Define Brush Preset. 2. Go to the brush dialog. It's going to look pretty dull. To make it more interesting add some shape dynamics. I set the brush size to be determined by the pen pressure and throw some size jitter on top. Add in 100% angle jitter - this will turn the brush from an obviously repeating shape to a random smooth brush. Now save the brush - by clicking the New Brush Preset button at the bottom right of the brush dialog. 3. Play with your new brush! It should give you a nice variable spattered texture. Later in the week we'll be using this brush to finish up and colour last week's trees , 02:18 AM Page 39

40 Page 40

41 How to colour trees quickly Today I'm walking through my method for colouring trees. This follows on from this mini-tute/discussion on different tree styles from last week. I'm working with style 1 from that tutorial here, though it can be directly applied to the other styles just as easily. The problem with trees is the leaves. You can't just draw a green sphere and call it a tree, because we know trees are detailed objects with lots of leaves. Equally you can't draw every leaf as it'll drive you crazy, and your players won't appreciate it. So the trick is to give the impression of detail without painting every single leaf. This is where custom brushes come in. On Monday I covered how to create a grungy custom brush. With this brush, we now jump into the tree itself. Pick two colours, different shades of green for a summer tree, different shades of orange/red for an autumn tree. In Brush Dynamics, set Color Dynamics to jitter the foreground/background colour, and also add in some random variation on each of the hue/saturation/brightness values. Also add in some scatter. Now use this brush to paint in a colour layer as a base for your tree. The colour jitter means that you never paint with the same colour twice. The scattering means your brush layes down lots of independent overlapping jittery patterns. Now we'll give the impression of leaves, and some general shape and form. Add an overlay layer, pick a dark blue for the shadows and a light yellow/white for the highlights. I'm keeping the scatter, and the jitter on the brush here. As the colour jitter is only 50% foreground/background it means it'll lay down more of the foreground colour than the background. So with the foreground set to the dark blue (and the background set to light yellow) I lay in large low opacity shaps around the shadowed regions. Build them up slowly and see what the tree Page 41

42 starts to look like. When I'm happy with that, I switch the colours round (x on the keyboard for speed), reduce the brush size and increase the opacity to about 60%. Then I work in scattered highlights that give the impression of leaves. The last step is to really sell the shape of the tree. Add a soft light layer. Turn off the colour jitter and use the same bright yellow (almost white) with a low opacity to highlight the top of the tree. Switch colours to your shadow hue (dark blue) and build up the tree shadows. Try to follow any contours of the line drawing. Trees aren't just great masses of leaves - they clump and bunch and have shapes inside the groups of leaves. When you're happy with this, add a multiply layer underneath the other layers and use a low opacity brush with your shadow he and lay in a cast shadow to bring the tree out of the background. That's it! It's pretty quick, even for lots of trees. If you're doing a lot of trees, make sure you change colours a little for each one, and give them a wide range of sizes to avoid them looking like cookie cutter copies. If you'd like to use this tree, the psd file is here: And here are the pngs with and without shadow (CC-BY-NC-SA): These pngs are CC-BY-NC-SA - so feel free to use these for any non-commercial project , 06:57 AM Page 42

43 Scatter Brushes in Gimp This is less a tutorial, than just a little advice on converting the advice of the last couple of posts over to Gimp. So the last couple of tutorials I've posted have been very photoshop specific. This post is a quick note on how to achieve the same result in Gimp. The key is in getting the right brush. Simple brushes without angle jitter 1 As before, create a grungy inkblot image -but this time, create it with a transparent background (images 1). 2. Save this as a.gbr file (the Gimp brush format), and place it in the gimp brushes directory ( 3. Re-open Gimp and your brush should be there. Throw in jitter (click Apply Jitter) and random colour variation using the Brush Dynamics setting in the brush dialog (above Apply Jitter) and you're good to go. Brushes with angle jitter For this we need to have a brush that has many copies of the brush image with different rotations. To do this, I'm deferring to the excellent tool by +Rob Antonishen here: Download the setup-brush.scm plugin, and check out this page for how to install Gimp plugins: Create your brush splatter image as before, but this time make sure it's: - square, so make sure the canvas has equal dimensions on each side - on a white background, not as a transparent png - flattened. Make sure there's only one layer Run the brush maker script from Script-fu->Setup Rotating Brush You'll now have a new image with lots of rotated images in it. Save this as a.gih file - and make sure you follow Rob's screenshot for the correct settings for the Save Dialog Move the.gih brush your brushes directory. Refresh the brush list - it should now be there! Page 43

44 My version of the grungy brush for Gimp is here if you want to download it. It's free for any personal or commercial use - just don't sell the brush itself, that would be daft: Now for drawing the tree tutorial, you'll want to use the Brush Dynamics settings in the brush dialog. Those can be set to exactly follow the Photoshop tutorial here: , 08:01 AM Page 44

45 Isometric hand drawn mountains Today's tutorial is a quick walkthrough for isometric or forced perspective mountains. This is entirely software agnostic, and is the starting point for maps like this: or this: This was done with a pen in my lunch break, but can equally be done in Gimp with a mouse, or Photoshop with a tablet. 1. Defined the silhouettes for your mountains. They can be jagged, they can be smooth. Allow your hand to wander and create different shapes. It helps to start with the closest mountain (bottom of the page) and work to the farthest (top of the page) 2. Draw the ridge line. Start at the highest point on a mountain and draw a ridge line to the next in the line of mountains. Don't draw directly to the next peak, offset the end of the line. That will make it look like the ridge drops down and then comes up the far side where it's hidden from the viewer. 3. Add in the details. Here I've taken lines from all of the mini-peaks and drawn flowing lines down the sides of the mountains. Add in a few secondary ridge lines running off down to ground level (like the second mountain from the top on the left hand side) At this point you have your mountain range. Any more detail added with colour or tone will add to the effect, but you can leave it at this and it'll read just fine as a mountain range , 05:48 AM Page 45

46 How to draw cliffs - 3 different styles So I was asked a while ago about different cliff mapping styles. Today I thought I'd break the hiatus of the last couple of weeks with a few different styles of cliffs. It's not really a tutorial, just a breakdown of a couple of the styles I've used for different maps. 1. Classic cliffs This is a symbolic style - a very abstract representation of a cliff. It's used a lot on current maps. The advantage is that is clearly designates the cliff, shows where the edge is, and indicates which side is the top and which the bottom. The downside is that it's not particularly illustrative. These are great for abstracted regional scale maps and old school dungeon maps. 2. Illustrative cliffs Here we have the opposite approach. The cliff is drawn to give some impression of how it would look from above. You tend not to see the vertical lines in the cliff. Instead you see all the ledges as you look down. Where the edges are close together you can see that it's steep, where they are more spread out you can see a more gradual rise. Throw in some fallen rocks at the bottom - all cliffs have them - and some lines showing the smaller rubble that's run off from the cliff. This is a good style for battlemaps, where you might want to give an indication of different routes up the cliff, but bad for regional maps where the scale makes this style inappropriate. 3. A compromise Finally we have a style that acts as a compromise. The edge of the cliff is clearly shown. The structure of the cliff is indicated by the perpendicular lines. I've added more structure and variation. This gives a more illustrative feel to the style in 1. without sacrificing clarity. I've found this works well on world or regional scale maps where you need to indicate a cliff, and have it blend in with a more illustrative style , 04:22 AM Page 46

47 Page 47

48 Isometric Cliffs Following my quick run down of how to draw cliffs here's an equally quick one for drawing cliffs on isometric maps. 1. Draw the top of the cliff. Make the horizontal variations in the line larger than the vertical variations. This will sell the cliff as being viewed side on. 2. Draw the vertical edges. These should come down from every 'wiggle' in your cliff top line. Give them different lengths and allow your hand to wiggle a little giving them some jitter. 3. Add some ground lines for the base of the cliff. These represent the run off of debris from the cliff and give the cliff a well defined base. Just like a figure drawing needs a floor and feet to ground it, a cliff needs a base to settle it into the map. Add a few lines around the top to suggest the lie of the land around the top of the cliff and allow the top to blend into the map , 06:54 AM Page 48

49 Explaining Blend Modes Blend modes are a wonderful feature of Photoshop, and also appear in many other programs, including Gimp. Here's a few I use regularly. I've taken the same styles o text and shown how they appear using the different blend modes. Further down, you can see the effect of using a selection of different gradients and setting them to the relevant blend mode. Overlay This is a great blend mode for making an image look integrated into the background texture. Using overlay gradually shifts the tone and colour of the background texture. In the case of the text, you can see that it takes more than one overlay layer stacked up to get text that's dark enough - but once it gets there it a thick saturated brown that fits well with the colour scheme of the parchment. In contrast, even with one layer of overlay, the light letters are almost white. This is because the starting texture is very light. Overlay tends to increase the saturation of the background texture - so when we have colour gradients set to overlay you can see the colours remain highly saturated. 50% grey set to overlay will produce no effect at all. It will be indistinguishable from a transparent area on the overlay layer. Soft Light Soft light is similar in many ways to overlay, but tends to be much less saturated. You can see this difference in the letters of SOFT, and also in the gradients. I tend to play with both of these on a map, to see what gives the nicer result. Soft light and overlay layers are a good way to give the impression of watercolour washes on a map, as they allow so much of the background colour and texture to shine through. Colour Burn Colour burn is a very different beast. Firstly - like all 'burn' modes - it will only ever darken your image. White is effectively transparent when set to colour burn as you can Page 49

50 see from the gradients at the bottom. Colour burn darkens the background image, has a high saturation and gives vibrant colours. As with overlay and soft light, it takes the background colour as it's starting point and transforms it. So even in the solid blue on the bottom gradient, you can still see the parchment texture, and you can see that the colour is greener than the actual blue - the effect of the background's colour. Colour burn gives great results if you want to grunge up a parchment background. Get some splatter brushes and some low to mid saturation colours (like the low saturation red on COLOUR) and go wild. You'll have a bloodstained muddy parchment in no time. Multiply Multiply is a different beast yet again. Where the previous three blend modes combine with the background texture, multiply masks it. Multiply takes the brightness of a colour and turns it into transparency. So light colours like yellow, white or light blue will be transparent, where darker colours are more opaque. For dark colours, none of the background will show through. Multiply is a great way of laying a black and white image over a parchment. Se the layer to multiply and voila - the white is gone, leaving only the black lines. I hope that's useful and gives you some ideas on how to use blend modes in your mapmaking and art work. They might look mysterious to start with, but play around with them and you'll soon find they give wonderful and surprising results , 06:39 AM Page 50

51 How to draw grasslands Today - grasslands. Grasslands are tricky to map. They're large empty open expanses. But if you just flood fill an area with light green it'll stand out like a sore thumb against your beautifully rendered mountains and lovingly painted rivers and forests. The colour is tough too - you want it to be a light green without being fluorescent. I've found that the following works well for grasslands: 1. Lay in the base colour Take two shades of mid-green and turn on colour jitter with Foreground/Background jitter set to 100% - this'll give you a nice varying green, which helps to break up the monotonous uniformity of a green expanse. Use a large grungy brush and set it to low opacity (20-30%?) and block in your grassland. This should give you something that looks a little like 1 in the attached image. This is a little dark, and a little solid green for my liking - I like to let the background texture bleed through. 2. Play with some blend modes Duplicate the layer Set the bottom layer to 10% with Normal blend mode Set the top layer to 100% Overlay. (if that makes no sense, see yesterday's post on Blend Modes) - that should give you a nice mid green colour with some good colour variation, that should look something like 2 above. Honestly, you can leave it at that, and it'll look fine. But if you want to switch it up a bit more: 3. Add some detail Page 51

52 Create a new layer over the top and set the blend mode to Overlay. First block in a dark blue with roughly 10-20% opacity. Use horizontal strokes - this will help to reinforce the isometric perspective of your map. Now go over the same layer with a very light yellow (almost white) also with horizontal strokes, and again at low opacity - this should give you some nice light/dark variation in your grassland without breaking anything. Finally finish it off with a few dark green grass tufts scattered around using a thin brush (2-3 pixels, or 5 px if you're using a pressure sensitive stylus). If you'd like to check out the psd file for this, you can get it here: , 05:39 AM Page 52

53 A Note On Background Textures This is less a tutorial, and more a note following the previous post on drawing grasslands. The results of that tutorial strongly depend upon the background texture used and I wanted to highlight that with this post. To recap, the original grass image (Panel 1 in the attached image) is a combination of four layers: 10% normal green, 100% overlay green, 100% overlay light and dark, and a final colour burn layer for the dark grass tuft details. All of these layers allow the background texture/colour to show through and the overlay and colour burn layers actually depend upon the background colour/texture for their results. So the choice of textured background is critical. Here I've taken the same set of layers and dropped different backgrounds (all from cgtextures.com) in behind them. I'll go through them one by one to explain what's going on: 1. Parchment - as before. Here we see the results from last week's grassland tutorial, re-used here to provide a datum for comparison. 2. Paper. This is a straightforward paper texture with roughy the same tone as the original parchment. You can see all the grassland, and it looks pretty nice. However the fact that the background is much less saturated than the parchment, and specifically less yellow, completely changes the feel of the grass. It could be some wintry tundra if it looked like this. 3. White background. So here we pretty much just see the 10% normal layer. Overlay layers lighten and darken the colours beneath them. It's not a linear Page 53

54 relationship, meaning if you have a light background, you're going to need a lot of dark overlay layers to build up a shadow, but a little white on an overlay layer will brighten it up quickly. If the background's white, you'll never get any purchase with dark overlay layers. The lesson? Make sure you're background has a tone somewhere near the middle between light and dark (open up the Levels dialog and make sure the hump is somewhere near the middle). 4. Here I've used 50% grey. So having just said that overlay layers have trouble lightening dark backgrounds, and trouble darkening light backgrounds, if the background is exactly 50% grey then light colours on overlay layers will lighten it and dark colours darken it just fine. So you can see we get a perfectly respectable result here, but the background isn't adding anything to the image here. 5. Rock. Here I've just dropped in a rock background. The colours over the top are perfectly visible as they combine well with the greys (as in 4.). However the detail on the rock overwhelms the detail in the art over the top. It's as if we've ink washed a slab of granite - less a painting on the rock, and more like painted rock. The darkest shadows are coming from the texture - which is generally something you want to avoid. 6. Earth. As with the rock texture, the texture dominates. If I were to use this, I'd lower the opacity of the earth texture so that it suggests the texture rather than shouting it. I hope that shows a few of the pitfalls and opportunities for using texture as the base for a map, and how that interacts with overlay/burn layers. Let me know if you have any questions , 06:11 AM Page 54

55 How to Draw Forests Today - forests. The dark and foreboding wood is a staple of fantasy literature and our own folklore. The Forest looms large in the Grimm Tales - an enemy in its own right. Mirkwood, Fangorn and the Old Forest all harbour ancient powers and perils for the characters of Middle Earth. Without Sherwood forest, Robin Hood would be just another outlaw. Forests are the Wild Other in many stories, acting as borders, sources of mystery and sources of resources and are key to any world map. Here I've shown two types of forest, coniferous and deciduous, and I'm working in 3/4 view as before. 1. Draw in the outlines of the forests. For deciduous forests, use rounded lines. For conifers, use sharp vertical strokes. Don't worry about keeping the border complete. We're just showing the edge, it doesn't have to be perfect. Make sure the forest flows around hills and mountain edges. The forest's movement will help to delineate the hills and mountains, making them easier to pick out. 2. Add the details. Fill in the areas around the edges of the forest. Try to make sure that lines and features tend to join up horizontally rather than vertically. This will help to sell the 3/4 perspective. Also, make sure you detail forest along ridges and edges. This gives shape and form to your forests, and helps the viewer see the hills beneath the trees. As before, use curving lines for deciduous forest and sharp vertical lines for conifers. If you're doing a black and white map, congratulations! You're done. But if you want colour, read on. 3. Base colours. Here I've shied away from my standard parchment background. Instead I've laid in the base colour on a new layer (under the lines) set to Normal blend, 100% opacity. I used some large grungy brushes with low opacity to build up the colours. You Page 55

56 want to start with the lights and then build up to the darks. For the forest, I set colour jitter on the brush settings and added scatter to the brush. This gives a dappled spread of slightly varying greens, which is perfect for selling the varied colours of a forest. I use a yellower green for the deciduous and a bluer green for the conifers. I also take a low opacity dark blue and add a shadow around the base of the trees. It's subtle - but it immediately nails down the forest as a 3/4 view forest with some bulk. It makes a big difference. 4. Colour detail. Here I've added a new layer, with overlay blend mode and 100% opacity. First use dark blue and grungy brush to lay in shadow across the forest. Then I use a very light yellow to pick out the bright highlights on the deciduous forest, and a very light turquoise on the conifers. Again, use rounded shapes for the deciduous trees, and vertical spikes on the conifers. And we're done! Here's the psd file for people who want to look at it layer by layer: , 05:28 AM Page 56

57 Using your phone to 'scan' a hand drawn map After a long hiatus (winter came) here's a new mini-tutorial: Converting a Phone Photo to Digital Line Art 1. The Photo Okay, so here's a photo I've taken with my phone of a drawing made with a ballpoint pen. When taking the picture, try to do the following: make sure there's lots of light. This will decrease camera shake and noise and give you the cleanest end result. Note - your phone almost certainly has a white balance built in and will believe that the white paper should actually be a midtone. A picture that's 99% white will be read by your phone as over-saturated. Hence in this picture the map is mostly around 50% grey. There's not much you can do about this unless your phone is so advanced you can Page 57

58 control it's white balance (surely only a matter of time...) try to make sure that the light is as even as you can get it. Here you can see the bottom left of the image was darker. The more uneven the lighting, the harder you'll have to work later, so it's worth taking 5 mins to get this as even as possible. 2. First use of levels So here I'm using photoshop. However any tool that allows you to adjust the levels in an image (even preview on the Mac - and all photo editing software) can do this. You may even be able to do it on your phone to some extent. In photoshop I use the layer adjustments dialog and select Levels. This brings up a histogram of the shades in the images. Here you can see a large block in the middle of the range - these are the paper tones. They should all be right up at the right hand end - in the white region. So, we start by moving the white marker (the white triangle) down into the block, and we see a lot of the areas of the image that should be white turning white. However if we go too far we'll see a lot of the lines start to disappear! At this stage go as far as you can with the slider without losing your line art in the brighter areas. Then commit the change (merge the adjustment layer down) 3. Dealing with the non-uniform lighting - layer masks Okay, so the top right looks pretty decent, but the bottom left is still mired in grey. We can't do a uniform adjustment because we'll lose detail the bright regions before we gain anything to the bottom left. Thankfully there's a way around this. The trick is to use layer masks. I create a new adjustment layer (Levels again), and click on the layer mask. To start with it should be all white. Now I take the gradient tool (g) and drag a linear gradient over the area. This creates a gradient where the area I want to target (the bottom left) is white in the layer mask - and the area I want to leave alone (the top right) is black. 3b shows the layer mask blown up a bit bigger. Now when I adjust the levels, I can lighten the bottom left without touching the top right! As most non-uniform lights are diffuse, this form of gradient mask is generally pretty good at handling non-uniform lighting. 4. Rinse and Repeat Don't try to do 100% of the correction in one go. Create an adjusment layer, edit the layer mask and adjust the levels to clean up. Rinse and repeat a couple of times and you'll end up with something cleaner than if you try to get all the way to a clean image in one go. 5. Play! Once you have the clean line art, you can do whatever you want! Here I've turned the image into a multiply layer (so that only the black lines are visible) and placed it over a parchment background. Then I've darkened the sea and changed the colour slightly. The whole process is pretty quick once you've done it a couple of times. Once you're happy with it, you can quickly snap a picture of a sketch and have a pretty digital map in 5-10 mins , 09:46 AM Page 58

59 Page 59

60 Drawing Realistic Coastlines Here s a quick tutorial to get back into the swing of things for I was asked about drawing coastlines. This is just a technique question so it s software agnostic. 1. Starting point Here s the basic shape of the coastline this is what I see a lot in turnover sketches at the early design stage. It s very blobby and indistinct, and looks nothing like a real coastline. The key is the regularity and smoothness of the line 2. Break it up! I ve followed the general shape of the coastline, but broken the line into a more jagged pattern. Some regions are almost sawtoothed. Try not to make features and variations the same size. Coastlines are fractal they should look similarly broken up at a range of different zoom levels. Add some smooth coves for beaches to give variety (like the beach under the 2.) Add islands along the coast. I tend to add them off peninsulas where a spur of rock stretches out into the sea and leaves a trail of islands pointing out or in inlets where the islands can mimic the shape of the negative space. 3. Edge detail At this stage I ve added a range of marks to the land to indicate the structure of the coastline and hint at hills, valleys, and the form of that beach I mentioned earlier. A lot of coastline has a sharp drop to the sea, and these lines hint at that structure , 08:53 AM Page 60

61 How to create a ripple texture using the clouds filter Today I m going to cover how to create a rippling water pattern in Photoshop using the clouds filter. This is a little technical, but it ll become clear why we re doing this over the next few days. As light hits the waves on the surface of the sea it s distorted and that creates a pattern of light and dark across the sea-bed that s very distinctive. We can replicated this pattern in photoshop with relatively little trouble, but there will be some new concepts so I ll take it step by step. 1. In a new document, create a new layer, make sure the colours are set to black and white, and run Filter->Render->Clouds. This creates an automated collection of noise with a characteristic scale you can see the overall pattern of dark and lights across the panel above. Note that you ll get a subtly different pattern every time you run the Page 61

62 Render->Clouds filter. 2. Run Filter->Render->Difference Clouds. This will give you a pattern like the one below. This still doesn t look much like a wave pattern, but bear with me. 3. Invert the layer (Image->Adjustments->Invert or command/ctrl + I). 4. Adjust the levels on the layer it s currently very light and we need a wider range of lights and darks for it to be useful. To do this either go to Image->Adjustments- >Levels or add a new adjustment layer. I ve taken a screenshot of the levels panel after I ve tinkered with it to get what I m after. 5. Now we re getting somewhere. Finally I stretch the layer in this case horizontally by arond %, depending on what looks good. Now I agree that this might not look that exciting right now, but tomorrow I ll be showing you how to use this to turn any map into an underwater sunken vista. I ve also uploaded one of my own ripple textures here: Ripples Fantastic Maps The file is CC-BY-NC licensed, so if you want to use the ripples in a commercial product you ll have to follow the tutorial and make your own There's a slightly longer version of this tutorial posted over on the blog: Using clouds to create ripples Fantastic Maps along with an archive of previous tutorials here: Tips and Tricks Fantastic Maps , 07:38 AM Page 62

63 How to turn a map into an underwater landscape 1. Starting map I'm going to take an existing battlemap and turn it into an underwater ruin. Here's the map I'll be using - a simple ruin from this Ruined Library map pack (Fantastic Maps: The Ruined Library - Rite Publishing Fantastic Maps Tabletop Essentials RPGNow.com). Ruins work well as they can easily be the remains of a unfortunate city subjected to an Atlantean cataclysm. 2. Add a colour layer The first problem is that the map is definitely not the right colour. We need to desaturate the map, and add an over-all blue cast to the map. I create a new layer above the map and fill it with a grey blue (#3e526a to be precise). It's not too saturated, so it'll do both jobs at once. I set the layer blend mode to Color, and set the opacity to 75%. For more on blend modes, see this post: Lunchtime Tips: Blend Modes Fantastic Maps 3. Add an overlay layer Note that you can still see colour variation in the map - that's because we set the colour layer to 75% rather than 100%. You don't want to wash out all the prior colours. The map looks a bit like a moonscape rather than an underwater map. To bump up the blues a bit I duplicate the colour layer, set the blend mode to Overlay instead of Color. 4. Adding Ripples So we could leave it there, but I want to add some ripples to the map. As light hits the waves on the surface it is distorted and that creates a pattern of light and dark across the sea-bed that's quite distinctive. Yesterday I covered how to create a ripple pattern (Using clouds to create ripples Fantastic Maps). You can follow those steps, or just download one of my ripple files here: Ripples Fantastic Maps (note the file is CC-BY-NC Page 63

64 licensed, so if you want to use the ripples in a commercial product you'll have to follow the tutorial and make your own!). I select a large region of the ripples texture and paste it into my working map - it will show up as a new layer. Once there, use the transform tools (ctrl/command - T or Edit- >Free Transform) to spin it round and make sure it covers the whole image. Add a color layer above it, find a nice blue and merge down so that the black parts of the texture are now a good sea-blue color. Finally I set the blend mode to Multiply and drop the opacity right down to 30%. 5. More Ripples! You can immediately see the difference that the ripple pattern makes to the map. I like this so much, I'll do it again. The second layer is coloured with a greener blue to add some colour variation to the map, and it's been rotated so that the ripples aren't going in quite the same direction. 6 And we're done! The ripples give a convincing under-the-sea feel to a map that started off as an arid blasted desert ruin. Please share, and comment if you have problems or have suggestions for future posts. You can find previous tips under #fmtips or over on the tutorials section of the blog: Tips and Tricks Fantastic Maps , 03:33 AM Page 64

65 Drawing Water Here's a quick walkthrough of some thoughts on drawing water at the battlemaps/building scale. I was thinking about Mike Schley's water style (like this map) 1. Lines Around the edge of the water area, draw in smooth flowing lines. Draw them quickly with a sweeping motion - don't think too hard about it. This takes a little practice, but once you've got the hang of it, it comes quickly. Have the lines loosely follow the edge of the water, and avoid any sharp corners At this point you can use it as-is - black and white line maps are easy and quick to use. But if you want colour, read on. 2. Base colour Here I've added a grey blue as the base (on a new layer under the lines). Once the blue is in place, I added a white highlights, following the black lines for the edge of the ripples. I've added the white only to the edge away from the side of the pool. This way the ripples look like they're heading towards shore. Add brighter highlights right along the ripple edges. 3. Extra credit In this step I've added the ripple texture from earlier this week as an overlay layer at 8% opacity. I've also added a new overlay layer and used a large fuzzy brush set to black and low opacity to darken the deeper parts of the pool. This will darken the blue, and bump up the saturation, but leave the white highlights almost untouched. That's all there is to it! , 07:36 AM Page 65

66 Grids in Photoshop Today, a quick tour of one of the hidden gems of Photoshop - especially for building and structure mapping: The Grid. Photoshop has a grid built in. You can reveal it by pressing cmd/ctrl + ' Chances are that the default grid won't be quite what you're after so here's some steps for making the grid work for you. 1. Customise the scale I tend to work on projects with a 1 inch scale. Customize the grid by going to Preferences -> Grids, Guides and Slices. Set the Gridline every xxx pixels to every 100px for a 100dpi image, or every 300 pixels a 300dpi image (or just change the units in the dropdown and set it to have a gridline every inch). I also set the grid to have 10 subdivisions. This is useful if you need more fine grained control over your grid squares. You should now have something like 1. in the image. 2. Use your grid! Yes, it's really that easy. I create a new layer and fill it with black (or TSR blue, or whatever other starting colour you want to begin with for your walls). Then cut out rooms using the select tool and delete to remove the contents of the selection. Here I'm running the walls along the primary gridline. It looks fine, but the problem is that all walls have to be at least 5' thick. That's not ideal. 3. Smarter Walls In this version you can see why I use 10 subdivisions in the grid. I make every wall start 1/10 of a grid square inside the major line. This way, when I want to place internal walls, they are only 2/10 of a grid wide. This gives enough room to place door icons as well. And if I'm going to use a map in a vtt later, I can run the Fog of War down the major grid lines and the players will still always be able to see the walls. The snap-to-grid behaviour is great, but you can toggle it using shift+cmd/ctrl+; So that will let you freehand, but still have the grid visible. Handy for drawing natural caverns. Page 66

67 , 01:19 AM How to Draw Icons - and a Free Ship Today I'm covering how to create your own icons. This is a longer tutorial than normal and will cover some new Photoshop techniques, specifically using the pen tool, and more on layer blend modes. There's also a video on the blog version (How to Draw Icons and a Free Ship! Fantastic Maps) to help illustrate the steps in more detail. This was inspired through creating the icon pack that comes with the Iconic Island map pack. I may have bitten off a bit more than the CG format will allow me to chew, but you can always check out the blog version. 1. Create a Rough Sketch To start with, we need a rough sketch of the icon. Here I've used a nice big brush and not worried too much about getting everything precisely right. The key here is to create a shape that still reads well at a small scale, so try to avoid introducing any fine detail - this is the reason for using a large brush at this stage. 2. Using the Pen Tool Icons are meant to be viewed at small scales. For this to work you want very clean edges on the outline. This is where the pen tool comes in. The pen tool allows you to create a vector outline in Photoshop which is incredibly handy. At this stage I drop the opacity of the sketch down to 10-20% and switch to the pen tool (P). To start, click on a corner - you'll see a single anchor point appear. To add a straight line segment to the path click the next corner - you'll see a straight line appear between the two points. The real power comes in the curves though. To add a curved segment, you want to add an anchor point to the center of the curve. Spot where you think that is, then click and drag at that point. Dragging puls out two handles on the anchor point and controls the curvature of the line. If there's a corner coming up next in your shape, just click and you'll see the curve complete. If there's another section of curve (like the multiple Page 67

68 curves on the flags), click and drag on the middle of the next curve. In the image above, you can see that I added a curved path to the hull by finding the middle of the curve, and clicking and dragging so that the handles form a tangent to the curve. 3. Finish Outlining the Shape It'll take a little time - especially with a complex shape like this one - but take a little time carefully using the pen tool to outline your shape. Here I've created a number of paths - one for the outside (when you come all the way round, just click the very first anchor point to have the path join up) - and a number of paths inside. This is all done on the same paths layer. You can see that I've made some changes to the sketch layer as I've gone along, and I'm not outlining the ripples. 4. Change the Path to a Selection The next step is to change the path to a selection. To do this, open up the Paths Dialog (under Window->Paths if it's not already open). Find the path (it should just be called Work Path). Then look at the buttons at the bottom of the dialog and find the Load Path as Selection button. Click that and you'll see the path turn into a selection. Notice above that the internal paths cut out of the selection automatically. 5. Fill the Selection Okay, that's the hard part done. Now we can go back to the layers dialog, add a new layer, and fill the layer with black (option + delete, or Edit->Fill...). Notice that the shape is very crisp - that's the result of using the path tool. I've hand drawn the ripples in at this stage. 6. Add Some Colour A black image is fine, but we want slightly more interesting icons than that, so we'll use some layer effects to add visual interest. First off, a texture. Here I add a new layer above the black shape, and right click the layer and select Create Clipping Mask. This means that whatever I do on this layer will only show up where they layer below is opaque. In this case I've filled the layer with a basic parchment texture. The clipping mask relationship shows up as a little arrow beside the layer. You can stack multiple layers like this. 7. Adding Some More Effects Next I create a new layer. This layer I set to colour burn and use a grey-ish red. This adds an almost dried bloodstain feel to the icon. I add a layer effect to this layer of inner shadow - with distance set to zero and a large spread. Initially you won't see anything, but then you have to make sure to mask the layer to the shape of the icon. To do this, select the base icon layer, right click -> Select Pixels. Then select the colour burn layer, and click the layer mask icon (rectangle with a white circle in it). The mask will be the Page 68

69 selection, and suddenly your inner shadow will work! Don't worry if that sounds really mysterious - you can see the process in the video. It's not as complicated as it sounds. I've also duplicated my base icon layer and set the blend mode to colour at low opacity, to grey out the layer a little. You could just as easily use a hue/saturation layer for that. Finishing Up The icon's now done. To finish up, turn off all the background layers, so that your icon's on a transparent background. Then grab a selection that includes all of the icon and copy-merged (command + shift + c). Open a new document - it'll default to the right size - and paste in the icon. Voila! Save it as a.png and you have a lovely icon. The joy of the layer styles is that you can add new icons easily, and they'll have exactly the same style. This helps to keep a consistent look and feel to your icon sets. Check out the blog for a few more details, and the promised free ship icon: How to Draw Icons and a Free Ship! Fantastic Maps , 09:48 AM Page 69

70 Iso Rivers This tip is a quick one. Isometric maps are fun, and can have a large impact. The side on view gives the option for more detail and a more illustrative style. Rivers can break or make an isometric map. On a top down map, a rivers travel in all directions. On an isometric map they should travel further left to right, than up and down. If a river travels straight up and down on an isometric map it ll look out of place. In the map above I ve pulled the curves of the rivers further out when they travel left and right. This helps sell the idea that you re looking down on the map from an angle. This, combined with the same trick on the coasts, can sell the perspective and foreshortening that the isometric map requires , 01:01 PM Page 70

71 Step by step Town Creation Today a quick mini-tutorial. This isn t a photoshop tutorial, nor is it a tutorial for a polished finished map. This is a step by step in my own town creation method when I m creating the first sketch layout. The key here is to have the town layout make sense. 1. Draw the terrain and the major locations Towns adapt to their surroundings. The first thing to do is to draw the terrain the town sits on. In this case I ve picked a peninsula with a larger outcropping at the end. The coast is rocky and broken apart from a low bay on the NE. Once you ve placed the terrain, use that to inform the locations of the main buildings. Here the castle goes on the highest promontory, with a commanding view of the sea and the land around. The cliffs on the promontory provide natural defences. Any land based threat must come down the peninsula, and the town will want to defend the harbour, so it s natural for there to be a wall across the end of the peninsula. After placing the major defences, I add a harbour for fishing boats (food), a market near the docks (commerce). I place another couple of large buildings 4,5 and 6 that could be a temple, inn and wizard s tower respectively the trifecta of important fantasy town locations. 2. Place the major roads Page 71

72 Roads get people where they need to go. In this case, the road needs to take a fairly direct route from the main gate to the castle. Remember that the roads will follow the contours of the terrain. Avoid straight roads in fantasy town maps they tend not to have heavy earth moving machinery so roads need to go around obstacles on the whole. It ll help sell the sense of a naturally evolving town. Once we ve laid in the main thoroughfare, add main roads to the source of food and commerce these will be the high traffic routes. Add in a couple more here I add the second road to the NE through the smaller gate. 3. Add the minor roads Page 72

73 With the major roads in place the map looks bare. Add a web-work of smaller roads to fill in the gaps. Remember that the majority of the smaller roads are going to be to get people to the major roads. Add kinks and corners to give the minor roads some visual interest, and again follow the contours of the land. 4. Draw in the houses Page 73

74 This can take a while, depending on the scale of the map and the level of detail you re going for. In this sketch I was drawing on paper at roughly 2 inches square so a house could be little more than a dot on the map. Here the houses are a means of blocking in the space around the roads. Ideally when you re done with the houses you ll be able to see the roads even if you remove the road lines. And that s it! You re done with your sketch. Add a key and it s a functional town map. Going from here to a presentation map is a different issue, but that s a matter of style rather than substance. And here's a very quick colour for fun: How to draw swamps , 03:53 AM Here's the breakdown of how I draw lineart for swamps. Page 74

75 1. The rivers Swamps are often around a river - if this is the case, then begin with the river at the heart of the swamp. Unlike most rivers which usually run for miles without branches, in a swamp I add lots and lots of tributaries feeding into the main river. This indicates the water draining in from the wider swamp and helps to define the borders of the swamp. Because I'm drawing a 3/4 style map here, I emphasise the horizontal spread of the rivers over the vertical spreads. If your swamp isn't connected to a river, then ignore this step. 2. Tufts of swamp grass Add in tufts of grass throughout the swamp. 2-3 lines spiking up from the ground should do the trick. 3. Horizontal lines Here we really specify the area of the swamps. I add horizontal lines and ripples to imply the surface water in the bog. The lines don't meet up with the tufted grass - that separation helps keep the texture clean rather than messy. Finally I add a rippled line around the edge to define the limits of the swamp , 07:05 AM Page 75

76 Using the Pen Tool to Draw Buildings Following the previous tutorial about town design here s a tutorial on filling in the buildings in the town. I m jumping in at the stage where we ve already got the terrain, major locations and roads mapped out. The next step is filling all the remaining space with buildings to turn a skeleton of a town into a town. The key here is to give the impression of a large number of buildings, without having to agonise over every single chimney pot and awning. 1. Using the Pen Tool Here I m using the pen tool in Photoshop (P) you can also use the pen tool in Gimp (B). Under Paths, hit the New Path button, and give it a name. Here I ve called it Page 76

77 Houses. The advantage of using the path tool is that you can go back and edit any element of the city at any point. This is invaluable. It may be that you need to add a road later once and have to move some buildings to accommodate. This way, just use the direct selection tool (A) in Photoshop, or the pen tool (B) in Gimp and go back to edit the vector outline of the houses. Many path tutorials will focus on the fact that you can use the path tool to create bezier curves. We re not doing curves today, but creating straight sided polygons instead. To lay a house polygon, click one for each corner. Because you re clicking rather than clicking and dragging the path lays in straight lines between anchor points. Click again on the first point (you should see a small circle appear under the pen cursor) and the path will close. In Gimp you need to command-click the first point to close the path. Click again somewhere else to start the next building, and you re off! 2. Use a variety of building sizes First of all, don t worry about the shapes being precisely right. Any town map will have a lot of buildings, and the chance of a viewer looking at any one and judging the historical accuracy of the building shape are slim. You want the impression of an urban sprawl without having to carefully design each bit of sprawl. So, work quickly, and don t sweat the details. But make some decisions about the blocks that you re filling in. A slum area should have smaller and more disorganised buildings or solid tenement blocks. There shouldn t be too much spare space. A wealthier neighbourhood might have bigger building with more empty space around them. Use a variety of building shapes. It may well be that buildings are mostly rectangular, but a complete uniformity of buildings forms a repetitive pattern and out brains are very good at spotting repetitive patterns. That s part of the reason we re doing these shapes by hand. Add variety t-shaped buildings, l-shaped buildings. It might start to look a little like the reject bin in the Tetris factory, but that s okay. Remember, we ll be seeing this zoomed out, not examining every single building in turn. Also, use negative space. We see not just the buildings, but also the space around them. Leave courtyards and meeting areas, squares and plazas. Leave more empty space in some parts of town than others even if you don t have a reason why. Either you ll come up with a reason later, or your players will rationalise the difference for you, and add detail to your world without you trying. 3. Let the buildings flow The roads and terrain have a flow to them let the buildings work with that. Fill in the empty space around your featured locations, but use the buildings to describe lines and emphasise the larger shapes of the town. So, for example, a line of similar size buildings all curving around a bend will suggest that the buildings are all the same, and might help to sell a barracks, or pre-built line of miner s cottages. In contrast, a set of widely varied buildings, all spaced out, might be the mansions of the wealthy all created to Page 77

78 each person s taste. Filling in the buildings takes time lots of time but the end result is worth it. I ve got a few methods of laying out blocks that are more automated, and these help for cities, but nothing beats just drawing in all the houses. 4. Turn your path into a selection Once you ve tweaked your houses to your liking, turn the path into a selection. (Path s palette button at the bottom Load Path as Selection -PS, or Path Tool -> Tool Options -> Selection from Path, Gimp). 5. Fill your houses selection Create a new layer, and fill the houses selection with a colour of your choice to lay in all the houses! Here I ve used some layer options. I filled the selection with white, and set the fill opacity to 50%. I also added an inner stroke of 1px in black. There are lots of good choices for layer styles that can give you a more satisfying set of houses from this selection, but that s a tutorial for another day. For now, you ve got a full layout of your town. That s it for now. I ll post some alternative house style tips over the coming week, and delve into what to do once you ve got all your vector outlines, later in the week , 09:19 AM Page 78

79 Using dynamic brushes to draw in city blocks Earlier in the week I posted a tutorial on how to draw buildings with the pen tool. But sometimes drawing each building just takes too long. For whole cities, you probably want a quick way to lay in whole blocks of buildings. Photoshop can help - using dynamic brushes. 1. Set up the brush Here's the settings for the brush I'm using. Start with a square brush. Add jitter and shape dynamics. When you're using the brush you should vary the spacing, size and amount of jitter on the brushes. This will give you difference in the shapes and sizes of buildings that will suggest the difference in the socio-economic status of the different districts. 2. Lay in the buildings To lay in the buildings, either freehand along the sides of the roads, or click and then shift-click to lay in straight lines of buildings. At this stage - don't worry about going over onto the roads. We'll handle that later. 3. Create a roads mask We create a mask on the buildings layer. Select pixels on your roads to get a roads selection. At this point you have a choice. The quick route is to select the buildings mask (option+click the icon), and then stroke the selection (Edit->Stroke...). The problem with this is that you end up with curved edges on the mask which doesn't look great. A better way is the following - take your roads selection and then use Selection->Path to generate a path along your roads. Now, stroke the path with a rectangular brush. In this Page 79

80 case we want the rectangular brush to go along the path, with no jitter and small roundness jitter. Option-Click the layer mask on the buildings, and stroke the roads with the brush. In panel 3 you can see the result of stroking the roads. 4. City Blocks With the mask in place the blocks are now confined within the city blocks and you're done! A couple of notes here I m using my current work in progress town map obviously the featured buildings are a totally different scale and can t co-exist on the same map! Second these styles of blocks work best when you re going to view them quite zoomed out. I d suggest that this works best if the image above was your working resolution, and the final scale was 1/3 of what you see there. Finally, a word on styling here I m leaving the houses as black silhouettes. Later in the week I ll show you how you can style these silhouettes to make them integrate into your map , 01:28 AM Page 80

81 Drawing Old-fashioned Coastal Waters Really quick one today - this is an illustration of how to draw old fashioned coastal waters. Lots of historic maps use rippled lines to indicate the sea. Here's a couple of quick pointers on reproducing the effect. 1. Add your first ripple First, draw the coastline in a nice dark brush - or press relatively heavily with your pen (this was a ballpoint on sketchbook paper). Then, pressing more lightly to get a fainter line, draw a parallel line to the coast. Where your coastline is ragged and fractal, this line should be smooth and flowing. Follow the edge, but smooth off the sharper changes. Try too keep the same distance from the coast as you draw. 2. Add in the rest Now repeat this with successive lines. Each time you add another line, increase the spacing slightly. Also, smooth off the sharper corners of the line inside. If you have an inlet (like I've got here), don't cram the lines in to get through - smooth over the inlet, and draw another set of disconnected ripples within. This looks good with a light blue wash around the coastal edge as well - so this doesn't have to be just a black and white map technique. I prefer this to the procedurally generated version, as those tend to create artifacts when you get to the larger ripples. Gaussian blurs tend to generate hard straight 45 degree angles. But that's a matter of personal preference , 05:08 AM Page 81

82 Highlighting Important Buildings - Shape, Detail and Contrast Cities and buildings come up a lot in questions. I'll put together a software specific tutorial on buildings, but today I'm just going to go through my philosophy when illustrating a featured building like a castle or a temple. The process is the same, regardless of software. In this case - ballpoint pen on sketchbook paper. A map is a complex image. We want to be able to access the important information quickly. To do this we can use three things the human brain does very well - identify things that don't fit the pattern, notice detail and focus on contrast. By giving out featured buildings interesting shapes we break any pattern of regular rooftops, and by detail and tonal contrast, we help the eye focus on them amongst the sea of buildings. 1. Design the outline Historically, the most likely shape for almost any building is a rectangle. But that's pretty boring on a map. How do you know that a building is special from overhead if they're all rectangles? Here I've drawn three outlines for three featured buildings. Inn The Inn has a main building, a stables and an outhouse/privy. The whole area is surrounded by a wall or fence, and the central area has a courtyard. The negative space (the courtyard) will stand out in a top down map. Temple Temples are fancy. They're meant to impress, and they're meant to dominate. This meand buttresses and spires. I've avoided anything that might look like a cross - as that's always going to break any sense of disbelief - but the same principles apply. Add offshoots and extensions. If it's a lawful god, make the building symmetrical. If it's chaotic, make it a rambling sprawl, if it's militaristic, add towers and gates. Circular buildings and domes are a good choice here too, especially when using graphics tools that make Page 82

83 perfect circles easy. Castle There's a lot to be written about castle design, so I'm not even going to try here. I've gone with a simple keep/fortified manor house and a curtain wall. Tower guard the vulnerable corners, and there's a hefty gate guarding the entrance. 2. Add Detail Here we add some lines to give some sense of the detail. Our eyes are drawn to detail naturally, so if you add more detailing to your featured buildings, they'll stand out in a map. Here I've added lines to indicate thatching or tiles to the Inn. The temple also gets some tiles, as well as a turret or bell-tower at one end, and some little roof elements. The castle picks up walkways on the walls, detailing on the keep's roof and some internal buildings in the castle grounds (well, we all need somewhere to keep the foot soldiers, hawks and the horses). 3. Shading So this is going to be different depending on the medium your using, but it's the point where the building stops being a flat sketch and starts to take on some life. Pick a direction for the light, and shade in blocks away from that direction. Note that buildings cast geometric shadows, and that shadows have different depths. The Inn gets simple geometric shadows, and a lighter shadow on the right side of the roofline. The temple i more complex - I use the shadows to emphasise the height of the tower, and the height of the buttresses. The castle gets the most work - each tower gets a long shadow, and I also added a set of battlements to indicate the crenelations on the walls. Deeper shadows here and there help to call out specific architectural features. If you'd like to see these techniques in a finished map, check out my Iconic Town pack: New Map Pack The Iconic Town Fantastic Maps , 09:25 AM Page 83

84 Dungeon Walls This isn't really a tutorial, more a set of thoughts on different ways to indicate walls on a line map. 1. Hatching This just looks great. There's no doubt about it. If you want to see a great example of this style, check out +matt jackson's work. When I'm doing hatching I tend to do loose hatching first - with each set of lines blocking out a square of space. Then I go back in and fill in the remaining space with lines. The hatches are 2-3 blocks deep around the walls. After hatching the walls, I go back over the wall lines again to make them darker. Or you can do what Matt does, and use a heavier weight pen for the walls than for the hatching. 2. More basic hatching In this case I've gone more simple. This is a simple shading with 45 degree lines. I then go back over the region closer to the wall with another set of lines at right angles to the Page 84

85 first set. This helps darken the region close in and lends a sense of depth. The main advantage of this is speed. 3. Circles This style lends itself to dungeons in loose rock or earth. Draw dots around the walls, with a higher density close in and fewer dots further out. This can be very time consuming but it gives a nice effect. It's also the easiest style to encode in a photoshop or Gimp brush which speeds things up a lot , 06:14 AM Page 85

86 Labeling Locations Eric Quigley asked about labeling recently and that prompted me to think a little about how I actually go about labeling a map. Often it's the last thing to get done, but it's also the most important. A map without labels is just a pretty picture, it's not useful. So, it's worth taking some care getting labels right. This is a photoshop tutorial, but these techniques are almost identical in Gimp. Today I'll be covering labeling locations. So I won't be handling titles, terrain labels, rivers or any of that. Basically, if it's a place adventurers can pillage, this is how we'll label it. 1. The Font Pick something easy to read. I know we all like Deutsche Gothic and Pieces of Eight, but save those fonts for your title. The labels should be in something clean and simple. Here I've used Cochin, which is a nice serifed font that's a little unusual so doesn't immediately scream 'Times New Roman' at the viewer. Use different font weights to designate different locations. You can also use different capitalization. For example, all caps for Capital Cities, small caps for other cities, and capitalized lower case for everything else. In the Character Dialog in Photoshop there's a small caps option, which is a great thing to know about. 2. Colour Page 86

87 Don't use pure black. This I learned the hard way after doing the Midgard maps for Wolfgang Baur and Open Design. Black may read well on the screen, but it doesn't always print well. Here I've used a deep saturated brown. 3. Placement I try to line up labels centered on the icon if I can. However, if there's a lot of detail in the map, you want to move the label to the nearest uniform space. So, place the label over all forest, all plains, or all water. Try to avoid placing the text over a line, such as a forest edge, coastline or river. The line will mess up the lines of your text and make it hard to read. 4. A subtle glow Flat text on a map looks, well, flat. I add a gentle glow to the text to help pull it out from the background. I've given two examples here - one that looks good, and one that looks terrible. The glow on Holgren is an outer glow, with blend mode set to Screen and opacity set to 75% and a size of 5px. It's a very light yellow. You can see that the hard edge makes this look a bit nasty. Basically the sharp edge of the glow is competing with the sharp edge of the text, rather than complementing it. On Tranton, the glow is identical, but it has a size of 20px. This smoothes out the glow and has the effect of gently nudging the text out of the background. It'll also knock out some of the background detail, making it easier to read a label above a more complicated piece of terrain. It's a powerful technique, but can easily be over used! Be careful - in this case less is usually more. As always, throw any questions in the comments here and I'll do my best to answer them. Oh, and the map and icons are the Iconic Island. Happy labeling! , 04:36 AM Page 87

88 Placing icons on a map in Gimp Nikitas Thlimmenos was asking about how to place icons on a map, so here's the walkthrough! The map is the Iconic Island (Fantastic Maps - Iconic Island - Rite Publishing Fantastic Maps Tabletop Essentials RPGNow.com) as that's the map Nikitas Thlimmenos is using. There's a bare base map in the pack, and all the.pngs come as separate files that you can add. But this also works if you find the CSUAC bundle of pngs or trawl the Dunjinni forums for the amazing art assets there. You can set dress a dungeon pretty quickly this way. So, how do you add a.png icon to an existing map? 1. Open the map, and the objects, and copy Here I've got Gimp open as a full screen app (Window->Single Window Mode). The tools palette is on the left. The layers palette is top right, and the brush palette bottom right. We're basically only going to be interested in the layers palette. You can see the three icons along the top? Those are the three files I've got open. Furthest left is the base island map, then there are two icon files. The open skull has a grey hatched background - that indicates a transparent area. With one of the icons open, select all (cmd/ctrl + A) Page 88

89 and copy (cmd/ctrl + C). 2. Paste Switch to the map view and paste (cmd/ctrl+v). Notice that in the top right you now have a new layer called Floating Selection? On the screen, the pasted element will be surrounded by black and white 'marching ants' showing that it's the selected element. Move the pasted element around (pick the move tool from the tools palette - it looks like the four pointed star - or press M). Move your mouse over the pasted icon and click and drag to move it around. Once you're happy with the placement of the icon, under the layers palette click the new layer button (looks like a sheet of paper next to the folder icon under the list of layers). This will create a permanent layer for the icon. If you click he anchor instead, this would have embedded the icon in the base image - and that makes it much harder to edit later. 3. Add more icons Now go and find a different icon to place. Select all, copy, go back to your working map, and paste. As before, move it around and click the new layer icon when you're happy. You should see something like the layers in the first image of step 3. Now you can see how this could get expensive in layers pretty fast. To keep this under control, you can merge layers as you go along. To do this, right-click the upper of the two layers you want to merge, click merge down, and the two layers will merge. You'll see that the black and yellow box gets larger. This is the boundary of the layer, and it increases in size to accomodate the new content. 4. Go Wild! Here I've opened up all the icons. This way you can flick back and forth to find the icon you want, select-copy-paste into the map, and you'll have a fully iconed up map in no time. I hope that gives you the tools to add icons and objects to your maps. Let me know if you have any questions and I'll see about answering them. And if you pick up and use the Iconic Island, I'd love to see your results , 12:59 AM Page 89

90 How to draw forested hills Often hills are indicated on a map by drawing an outline, but when you have forest on top, that outline gets obscured. So how do you draw forested hills? The trick is to use the detail of the forest to indicate the hills, rather than obscure them. It s always useful to get some real world reference, even when doing line art maps. Here s a satellite photo of the Trossachs a forested region of hills in Scotland. Notice that it s the density of hard shadows on the trees that tells you where the hills are in the forest. 1. Draw the outline of the forest and the hills (separate layers) First, we need to know where everything is supposed to be. Draw the outline of your forest on one layer, and the outlines of your hills on another. If you re using paper, use Page 90

91 pencil for the hills and pen for the forest. We ll be erasing the hard hill outlines later. 2. Add in the forest detail on the shaded side of the hills (on a new layer) Here I m taking the direction of light to be from the top left, so any side of the hill away from that is in the shade. By placing tree details (short curving lines) close together, those sides are darker, and will give a sense of the 3D terrain. The densest lines should be on the steepest edge of the hill, and on the side furthest from the sun (in my case bottom right). Add similar details around the edge of the forest as well. 3. Erase the solid hill lines, and tidy up Now remove the solid hill lines. It suddenly looks a lot better your eye is reading the tree density as hill shadow, rather than relying on the lines! After removing the lines, you ll see areas that could take more detail. I ve added some tree details around the top-left of the hill shapes, to complete the outline, and deepened the detail in the shadow to really make the hills pop out. Long version here: , 08:31 AM Page 91

92 How to draw, shade, and colour an isometric mountain range I ve written up a couple of tutorials before on drawing isometric mountain ranges for fantasy maps but never more than the pen and ink stage. I ve had a few requests for how to take this to the next step and colour the mountain ranges. Here s a quick walkthrough of the four steps I take in my mountain ranges. 1. Illustrate the lines for the mountain range First off we always need some solid line art to underpin our mountain range. Here s the tutorial on the steps I take when I draw up a new mountain range. Note that here I m using a mid tone textured background. You can either create your own, or grab this one from here. 2. Block in the basic light and shade on an overlay layer Here I m taking light to be coming from the top left so the right hand side of the mountain range is in shade. I add a new layer, and call it my light and shade layer. I pick a hard round brush, with opacity set to pressure (so when I press hard I get a dark line, Page 92