Inkscape and maps.

Map-making with Inkscape : Tutorials

Since many people juge Inkscape as too difficult to be used, i make this short tutorial.

Please forgive my eventual language problems here.

Okay, this is a tutorial about Inkscape, why and how. There's surely better and more complete ones on Internet, but i've tried to make this one on a AH novice point-of-view.

WHY?

First Inkscape is a vector graphic software. It means that if you're drawing something, you can change all or part of the final result, size, color, font, etc; without loss of resolution or pixxelisation. You can move elements as easily you can move an icon on your desktop.

That's make this software the better one for begginers, anxious map-makers or corrections obsessives.

Inkscape produce .svg files. If you need all of part of one of your previous work, you can import it in a new file, even if you have make another draw without loosing it.
You can aslo import other pictures files, but they will keep their properties.

As Wikipedia have tons of svg maps or flags, you can save them to modify, take part of them, or entierly cannibalize them.

Inkscape have many other possibilites, as editiong your own fonts, exporting your work, part of totally, in .png; etc.

Did i mention that Inkscape, not only was free, but was open-source with an active communauty? It makes that if a important bug is detected on this software, you have good chances that it would be resolved by communauty quickly.

WHY NOT?

Well, Inksape have its weakness.

First, the vectors line can have issues. Not showing or only partially. It can be easily fixed tough, but it's sometimes hard to notice it.

Then, effects on Inkscape are really jiggery-pokery. If you want, you'll have to use Gimp or PaintShopPro for that.

Inkscape is aslo a major memory's eater. Be sure to not run another software in the same time, or to not take memory for too many things.
Depsite that, it would crash sometimes, so be sure to save your map.
Okay, Inkscape make automatic save (in other files) but nothing more irritating than Inkscape crashing when saving, with impossibility to use an automatic save, loosing 4 hours of work.

HOW

So you want to make a map?

1 - Find a basemap. We could have used a wikipedia map, but it would be more complete by creating one. Just skip many steps regarding creation of a basemap if you want to cannibalize wikipedia.

Let's use this Corsica's map
corsica_%20map.jpg
*

It's a good basemap because : it's show riviers and relief
Let's say we want to make a map of the Napoleonic Kingdom of Corsica in 1845, in a ATL where Napoleon was exiled not in Elba but in Corsica.

2. Save this basemap on your computer, and open it with Inkscape. Choose the option "Incoporate the file". It would allow you to keep this map, even if you delete accidently the original file.

3.Select the pencil tool. This one :
S5770.png
. Pencil tool allow you to draw continuous line. Each time you click left, it would create a node. Each node marks the beggining of a new sub-line. For now, know that you have several kind of node, especially the square one and the diamond shape one.

4.Drawn the coastlines. It's boring, but necessary. Put nodes at each place you'll curve the path (the line) in some times. Like this.
PEfhV.png

Go on.

You'll end with something like this.
0Pmbg.png

Obviously not perfect, but you'll have the general shape of the island.

5. Now, we need to curve this paths. Use this tool.
vRpJ5.png
.
Make sure that every node is in diamond shape. If it's not, left click+CTRL on it. To resume, square node makes the sub-path interreact, the diamond block each other.

Now select a sub-path. And curve in the direction you want to.
4UHve.png

See that little blue lines? it's tool for helping you to curve more precisly the path.

Continue like this. And when you'll be close to ending your coastlines, be sure to put the end of your last sub-path at the beggining of the other, marked by a little empty square that will became red when you can click on it.
B1chg.png

That's better isn't?

Congratulations, now do the same with the islands.

6.Now it's done, it's time to make the lakes/body of water
Drawn the body of water like islands. But when it's done, use this tool
8iLrc.png
, and click on the basemap, within what you've just drawn. It would copy the color of the basemap at this place for your water. Of course, you could have use too the color panel, at the down.
Don't forget : left click in the color panel is for objects, Right click is for all the object : what is within the paths except the paths themselves.

4QzFG.png


Make the same thing for all water bodies.

7. Now we drawn rivers.
Just like we draw coastlines, but this time, we will not join the endings.

e7cww.png

Well..It looks quite too big isn't?
Don't worry, it would be soon fixed.

Select the line, and right click here
VX0jh.png


Choose 0,1, the smallest possible pre-defined size.
(Personally i've choose to put all the other pahts to 0,5, but the choice is yours)

8Resm.png


Repeat this, i'll drink a beer the time you'll finish the rivers.

8. Now you have a map with coast, islands, lakes and rivers. Maybe you want to add relief?, as you drawn coastlines, drawn the relief.
Once done, color the object and supress the paths.
Remember the place you decreased the paths? Make the same and choose supress.

Of course, you can follow all the relief lines, but i'm lacking time and motivation.
I wont show you the result, because we don't need relief for the next steps.

Real 8. Put the cities.
Select this tool
bbA8K.png
. It makes rounds. Make sure you select CTRL+Left click in order to make regular rounds. Normally you would have a circle plus a round path. Put the line to 1, and color the path to black, the circle to white.

Put in at the place of a city in the base map.
pscyX.png

Repeat by copying the round (CTRL+C) and paste on the place you want (CTRL+V)

Now the names. Use this tool
syC2F.png
and tape the name of the city.
It's likely that nor the size or the font would be conveniant. Clik on this, up menu.
MUgYc.png
. Then you could change everything.

The problem now, is that the name of the city is quite bad placed, and you have hard times to center it.

Click here.
BWpCs.png
. In the window that just opened, choose the option "Last selectionned". It means that every placement would be made relativly to the last object you select.
Click on the text to select it, then select+SHIFT to select the round, while keep the text selected.

npzXS.png

Select first the one, that will center the text, and the second that will place the text right up the circle. Of course there's other types of placement, and i encourage you to test them.

I advise you to use scaling often, to place well texts, borders, etc.

Now you have this.
ZOUje.png

Repeat for all cities.
Now you have this
G8OWh.png


9. Sea.
Yes, we need sea here. it's simple, make a big blue square with the square icon.

Yes it looks like a giant blue blob that hide all the work. But don't worry, it's time to learn the wonders of scales.
Click here after having selected your blue blob.
9ht0T.png

1 is for putting the blue square all under all what you drawn, 2 is for slowly up it, scale by scale.

Stop when you'll have this
ouH5g.png

Now color the island in white, by selecting and choosing a color for the object.
It would gave this
0ydDU.png


TIP : Scaling the objects is an important tool for Inkscape. Get used to use it really often


10. Borders.

Now, we want to made borders of departements. For this time we'll follow the relief.

Wait a minute. Haven't we colored all the map, hiding all the base map? Yes we did, and it's why we need to dissimule both the coloration of island and sea.

First remove the coloration of the island. And now select the sea and click here
7vBDP.png

This number is the % of opacity. Choose 20%, it would revel enough of the basemap.

TIP : Opacity could be a cheap but effective tool for effects.

Now time to put borders. Make like rivers.
If you want to follow a river, select the one you want, copy paste, use the placement tool to put it on the first river, change the size of the second river, and continue to drawn using the pencil.

Maybe a straight line is not the best to use. Click here.
ozxJ2.png

TIP : You can modify color and style of object and paths here
You'll have many options, but click on the path's style button, and you'll have the choice of size, color or shaping. Use the shape you want.

Proceed like this for all your borders, when finished replace the opacity of sea at normal, and recolor the island.

You should have something like this

WgghG.png


10. Names. We have borders...but they're corresponding to what? It's probably better to name them. Use text tool you used for cities.

Hmm. It looks bad.
mVyPn.png

We need to improve the name of départements.
Use the pen tool.
dd

Contrary to the pencil, it would only make one path, no consecutive.
Draw a line for each text. Now curve the path following the position you want for the text.

Now, clik on "Text" in the menu. Choose the option "Put the text following the path". And, magic! It's follow the path. You have only to adjust the text or the path to improve.
Make sure to supress the size of the path once the work done. Be careful, don't supress the path itself, it would cancel the text changes.

COntinue like that.

And voila!
mwWHY.png


11. Size. It's okay, but it's small...
Let's up that.

First, we need to group all these objects. Click outside the drawnings, and select them all in one square by clinging shift. Then : CLTRL+G, they will be considered as linked and when you make a change, all of them will be concerned.

Now, size. You see this numbers?
F4sjC.png

First, clik on the lock to preserve the proportions of your picture.
Then, instead of px, choose "%". Choose H (or whatever the letter right to the lock) and instead of 100,000, put 150. It would up the size of 150%.

TIP : for degroup, it's CTRL+SHIFT+G

12. Legend.
Well we need a legend. Use what you learn here to make one.
Remember, make a square, put paths, copy paste, text etc.

Here's an exemple of a finished map.
uH6iJ.png


12. At this point.
Select all the islands and make an union.
Go in the "path" submenu and choose "union" or CTRL + "+".
You can have issues with islands disappearing but with the scaling tool it would be okay.

At the contrary of group, union merge all the paths and objects, making them loose their own properties.

Group the others objects between them, names of towns, towns, names of departements, etc.


I hope it was useful. Of course it's a basic help, so ther's many things not mentioned here. I would likely make some adds concerning tips, if you're asking for it. (Like "How can i make this sort of things")
Thanks for correction, Nugax and Ares
 
Last edited:
Uh the effects in Inkscape aren't limited at all - they just need a lot more jiggery-pokery than the other programs. Just look at all the stuff on the Filters and Extensions drop downs.
 
Uh the effects in Inkscape aren't limited at all - they just need a lot more jiggery-pokery than the other programs. Just look at all the stuff on the Filters and Extensions drop downs.
It was more or less what i meant, but i didn't have the word for. Effects are still more simple to be used with Gimp, in my opinion.
 
Nice! I've had Inkscape installed for some time, though I've never been able to make heads or tails out of it. This will surely help. So, I hereby bestow upon this tutorial the Medal of Conspicuous Merit of the Aretian Offensive!

EDIT: You're using a French version of this, aren't you? I've seen several places where the names of things are wrong; this is very confusing. 'Put the text following the line', for example, should be 'Put on Path'. No offence at all, just saying.
 
Last edited:
Nice! I've had Inkscape installed for some time, though I've never been able to make heads or tails out of it. This will surely help. So, I hereby bestow upon this tutorial the Medal of Conspicuous Merit of the Aretian Offensive!

EDIT: You're using a French version of this, aren't you? I've seen several places where the names of things are wrong; this is very confusing. 'Put the text following the line', for example, should be 'Put on Path'. No offence at all, just saying.
Yes sorry for that, i would correct it right now.
 
This should be useful. I love Inkscape, and I'm glad that it can be made more usable. Hopefully this will make people stop posting so many .jpgs.
 
Today's update :
HOW TO MAKE GOODLOOKING COASTLINES

So you have now a map of Corsica. But the coastlines seems to need some decorum.
Thanks to the paths and the modifications that they can handle, you can do a quick and goodlooking effect.

1.Copy/Paste the island.
CTRL+C and CTLR+V, as in the 90% of software.
Supress the object color, but preserve the path.

2.Open the "Path" submenu, and choose "Outsate" or CTRL+)
TM15M.png

It would, well, outsate the path.

Repeat the operation three times.

3.Center the paths
Use the placment tool to center the three paths. Make sure you selected "Last selected" and you have selected the three paths by cliking on it with Left Click + SHIFT.

You'll have something like this.
f8Gwy.png

Now color the paths as you want to, or resize them.
I've used a degrade of colors personally.

4. It's done!
1fGi6.png

Thanks Martin23230 for his useful information. Now, you don't need any longer to annoy yourself with my longer method.
Tutorial updated.
 
Last edited:
Very good. I would suggest union-ing the small islands and the mainland of Corsica before doing the outsetting* though, so you don't get the lines overlapping, though doing it after is fine.

*Dilater is called "Outset" in the English version BTW, though dilating the path sounds much better.

Anyway, a great tutorial!
 
How does one makes the arrows, like the ones shown in Eagles and Hawks that display movements of troops?
 
How does one makes the arrows, like the ones shown in Eagles and Hawks that display movements of troops?

Okay. Glad that my maps can inspire somebody else.

Arrows

1.Draw a path.

2.Press SHIFT+CTRL+F for the properties
FuaJX.png

Choose a terminal marker.

Choose the style of the path, or its size.

3.It is done
FPOit.png


Personally, i refine a little.

3a. Convert path to object.
It would allow you to put color on the path itself (without loosing the contour line). Besideds the arrow's head would be colorable too now.
Go in "path" submenu, and choose "Contour as path" or press CTRL+ALT+C.

3b.Modify the objects as you want
Color, size, contour.
If you want to modify or just the path or just the arrow's head, remember that the objects are grouped.

You don't need to degroup them for modifications, just double-clik on the element you want to select.

733vm.png


4. It's finally done!
K7tnJ.png
 
Depends of what you call frontlines.

It is that?

Frontlines, occupations,

1.Drawn the lines, as you drawn borders.
You may have to color the path in a different way, for better indentification.Choose a different style for each frontline, for identify the datation of each.
bfviZ.png


2.Drawn the current occupied zone.
Connect the two extremities of the path, as you did for the island, and color it.
0FNxj.png

Err...Is the sea supposed to be occupied too?

3. Cut the undesirable part of the object.
Select both the island and the occupation zone.Go in "path" submenu (you're going used to that, isn't?) and choose "Divison" or press CTLR + /

H53PL.png

Hey! We have lost everything!

Don't worry, copy what you've now, and CTRL+Z for cancel.
Now, paste the selection.
Replace it, color it, etc.
ucMHB.png


4. It is done!
It is definitly too elements now, sow i size up the map.
yauS6.png
 
Okay. Glad that my maps can inspire somebody else.

This is really interesting. How do you have an arrow that gets larger as it nears the arrowhead? I am speaking of such arrows as used in Eagles and Hawks, since those seem best for what I am trying to do.
 
This is really interesting. How do you have an arrow that gets larger as it nears the arrowhead? I am speaking of such arrows as used in Eagles and Hawks, since those seem best for what I am trying to do.
Ho, you mean in the old maps?
Well, it's quite simple.
1.Create an arrow as described.

2.Once you have converted the path as an object, delete all nods of the path except the two close to the arrow head, and one to the opposite.

3. Now you can curve the object you've now, for making a curved arrow.
TIP (that (i'll precise in the first tutorial) : There's plenty of ways to make a map. Some habits you take can be replaced with faster techniques, but the majority depend of your own style. What i propose is not, far from that, the perfect way to draw, it's only what i do.
Then it's up to you to find your own style.
 
Great tutorial mon ami, I knew some of the basics of inkscape already but not everything you mentionned here so the nex stuff is welcome!

It is also possible to draw coastlines in Google Earth and to convert the kmz paths into svg files, but the converter is kind of temperamental and more importantly Mercator based.
 
It is also possible to draw coastlines in Google Earth and to convert the kmz paths into svg files, but the converter is kind of temperamental and more importantly Mercator based.

Yeah, very imprecise. But if you just need rough lines, it's okay.

By the way. Don't use the tool "Vectorize this bitmap" in "Path" for maps. It would convert the file in .svg but the result would be unworkable. Use it only for black and white image you need, or for some simple colored image you want to modify the size.
 
One more question, and I promise this will be my last one(your maps in Eagles and hawks are just so awesome): How does one make the battle marker(The crossed swords that serve to mark battles).
 
Top