Tutorial

Creating slippery maps

2014-09-13T05:00:00Z

Recently, I answered a question about creating an online map of someone's fantasy world. I mentioned slippery maps which is the generic name for maps like Google Maps or MapQuest where you can drag around the map, zoom into it, and maybe set up bookmarks.

If you just want to look at the results, head over to the website.

Now, a lot of things changed since 2006 when I last created a map. Then, I needed to create some PHP code to manage it and spent better part of a week trying to jam Google Map's API into something that would work.

Today, things are a lot different and a lot easier to create something that looks good. It also doesn't require a PHP host or a database to run. But, to answer the question I gave in more detail, this is a short tutorials on how to create a slippery map of a fantasy world.

Zoom Levels and Tiles

Probably the best way to understand slippery maps is to understand zoom levels. The lowest detail, highest area is zoom zero (Z0). This represents the entire world as a single 256 pixel square tile.

A zoom level starts with zero (Z0) which represents the entire world in a single tile.

Each zoom level higher doubles the image size. So Z1 is a 512 pixel square image and Z2 is a 1,024 pixel square image. Google Maps allows up to Z18 which is an image 67,108,864 pixels on a side. At that level, we can see the driveway leading into most houses but the image requires at least 16 petabytes to load into memory at once.

I don't about you, but I'd love to have a 16 PiB RAM machine, but that isn't going to happen. Not to mention, you'd have to download all 16 PiB to actually see it.

So, to break it into smaller parts that are easier to download, display, and manage, slippery maps use 256 pixel square tiles. Each of those images are broken down into these consistent-sized tiles which are then downloaded as the library needs it.

Since we aren't using a full image, we have to know where in the bigger image we need to retrieve these images. And this introduces the coordinate system for slipper maps. The basic coordinate is a (z, x, y) where z is the zoom level. Both x and y are the zero-based index from the upper-left of the image.

Z0 would only have a single image (0, 0, 0). Z1 would have four: (1, 0, 0), (1, 0, 1), (1, 1, 0), and (1, 1, 1). Z2 would have sixteen and so on.

When a slippery map needs to retrieve the image, it maps the coordinate system into a URL of some sort. For example: http://exalted-map.mfgames.com/creation/z0/x0y0.png.

The final component of a slippery map is a layer. This can be raster data, such as satellite or a political map. It can also be vector data, such as a map of all streets in a tile. In the above example, the layer is actually creation. There is also creation-geo which is a second raster layer that doesn't have cities, geomancy, or boundaries on it.

The only limitation on how far you allow zooming or which layers is time. It does take a fair amount of time to create and manage tiles. The higher the acceptable zoom level, the more work and disk space is required to keep those tiles and to make them look good.

Starting points

Because the Javascript can't create the tiles for me, and I'm not using PHP, I need to pre-render the individual tiles at all the zoom levels I need which will then be uploaded to my website.

For me, the best place to start is with a relatively large map in Mercator project.

I'm not going to use a proper Mercator projected map since I'm going to put my Exalted Map of Creation back online and I already had most of the work done. This is a flat map without projection, so most of the coordinates are hacked to get things to work.

I decided to focus on a zoom level five for the map which requires me to start with a 8,192 pixel square. Fortunately, SVG scales very well so I have a relatively sharp image at that level.

What doesn't work is that my map of Creation isn't square. I'm cheating and just putting black bars on the top and bottom, but I highly recommend you use a properly projected map that fills the tile completely.

I do host a full version of the map on my website (there is also z0 through z4, there is also creation-geo for maps without markers). Feel free to download or use that, or even hotlink. It's there until I run out of bandwidth or something goes wrong.

The next step is to create 256 pixel square tiles from the image and give them a consistent name. Now, the tedious approach is to manually slice out each one and save it to the disk. For the larger map, that can take hours.

I happen to be lazy, I don't do tedious things like this when I can find a tool to do it for me. Fortunately ImageMagick has all the tools I need. This runs under Windows (you have to double up on the % though for the DOS command prompt) also, for those who don't use Linux.

$ convert map-z5.png -crop 256x256 -set filename:tile "x%[fx:page.x/256]y%[fx:page.y/256]" +repage +adjoin "z5/%[filename:tile].png"
$

This basically creates 1024 tile images in exalted-map/z5 where the name is xMyN.png where M and N are numbers from 0 to 31. This means that you can get a tile just from the middle by using something like exalted-map/z5/x15y15.png.

Now, if you can't guess from the above path, I'm putting all the zoom levels above five (four through zero) in the same structure.

$ convert -scale 50% map-z5.png map-z4.png
$ convert map-z4.png -crop 256x256 -set filename:tile "x%[fx:page.x/256]y%[fx:page.y/256]" +repage +adjoin "z4/%[filename:tile].png"
$

This is all in a makefile so I can just type make and have it generate all six zoom levels in a single command. Now, if you have a custom map for a different zoom level, then don't scale it from the higher level (z5 to z4). I'm only going to have the one for each layer, so I'm just scaling the entire thing from Z5.

Putting it up

Now that I have the tiles at all the zoom levels (Z0 through Z5) generated, I need to put them somewhere that can be accessed via a HTTP request. If you can't guess, I have a host at http://exalted-map.mfgames.com/.

The tiles have to have a consistent name for the slippery map to work. I decided to use the pattern:

http://exalted-map.mfgames.com/{layer}/z{zoom}/x{x}y{y}.png

At the moment, I'm allow providing two layers: creation and creation-geo.

The above URL is important for when we hook up a library to our URL, but the important part is that you can go to any image on that map and have it produce the correct results.

Creating the HTML

I decided to use OpenLayers 3 as my Javascript library. This is a pretty solid library, though there are others that can do much of the same functionality.

On the quickstart directions, they have a very basic HTML page that uses OpenLayers 3 and has the basic page. Take that HTML file and throw it up on a website (maybe at the root above the layers).

If you load the page, you should see MapQuest map. But we don't really want to see that, we want to see our own map. To do that, we change the layer:

layers: [
  new ol.layer.Tile({
    source: new ol.source.XYZ({
      layer: 'creation-geo',
      url: 'http://exalted-map.mfgames.com/creation-geo/z{z}/x{x}y{y}.png'
    })
  })
],

Refresh the page and you have a basic slippery map.

Icons and Locations

Getting locations to show up in the map is a bit harder. In OpenLayers 3, there are a lot of ways of doing it and I haven't quite found a perfect way. But, a “good enough” approach uses KML and a bit of magic.

This is the basic KML file. It just lists points on a map along with their icons. If you follow the icon links, you can find the icon images, they aren't that impressive (though I did make them in Inkscape).

<kml>
  <Document>
	<name>Exalted Canon Locations</name>
    <description>Created from stephenls map data.</description>
    <Folder>
      <name>Locations</name>
      <description>Locations</description>

      <Style id="style-canon-gate">
        <IconStyle>
          <scale>1.0</scale>
          <Icon>
            <href>http://exalted-map.mfgames.com/icons/canon-gate.png</href>
          </Icon>
        </IconStyle>
      </Style>
      <Style id="style-canon">
        <IconStyle>
          <scale>1.0</scale>
          <Icon>
            <href>http://exalted-map.mfgames.com/icons/canon.png</href>
          </Icon>
        </IconStyle>
      </Style>

      <Folder>
        <name>POI</name>
        <Placemark>
		  <name>Imperial Mountain</name>
          <styleUrl>#style-canon</styleUrl>
          <Point>
            <coordinates>-20, 12</coordinates>
          </Point>
        </Placemark>
	  </Folder>

	  <Folder>
		<name>Gates</name>
		<description>Celestial Gates</description>
        <Placemark>
		  <name>Celestial Gate #10</name>
          <styleUrl>#style-canon-gate</styleUrl>
          <Point>
            <coordinates>22.7673, 8</coordinates>
          </Point>
        </Placemark>
	  </Folder>
	</Folder>
  </Document>
</kml>

I uploaded the KML file to the site under http://exalted-map.mfgames.com/canon.kml. If you can't guess, the library needs to download it to use it.

Adding the KML file to the map is pretty easy, you do it as a second layer.

var creationGeography = new ol.layer.Tile({
    source: new ol.source.XYZ({
        // attributes: Always give credits
        url: "http://exalted-map.mfgames.com/creation-geo/z{z}/x{x}y{y}.png",
    }),
});

var canonLocations = new ol.layer.Vector({
    source: new ol.source.KML({
        projection: "EPSG:3857",
        url: "canon.kml",
    }),
});

var map = new ol.Map({
    target: "map",
    layers: [creationGeography, canonLocations],
    view: new ol.View({
        center: [0, 0],
        zoom: 3,
    }),
});

You'll notice I refactored the geography stuff out into a variable to make it easier to read. I do that a lot as I'm working and puzzling through things.

When you upload and refresh, you'll see pretty icons for all of the canon locations. The reason I'm using ‘canon’ is because I had a secondary layer called ‘sepia’ for my Sepia Throne campaign. We had a tendency to create new locations, destroy cities, and we also used 108 celestial gates instead of the 56 in the canon world. (The 108 came from the 108 Stars of Destiny.)

Clickable labels

And the final part. It isn't obvious from the icons which gate it is, so it would be nice if you could click on it and get a bit more information. To do that, we are going to show a bootstrap popup of the KML name, which should be enough.

This needs three parts. The first is to add Bootstrap and jQuery to your webpage. View source at the map to find examples if you don't know how.

The second is to add a popup element in the map.

<div id="map" class="map">
    <div id="popup"></div>
</div>

And finally, a bit more Javascript.

var element = document.getElementById("popup");

var popup = new ol.Overlay({
    element: element,
    positioning: "bottom-center",
    stopEvent: false,
});

map.addOverlay(popup);

// display popup on click
map.on("click", function (evt) {
    var feature = map.forEachFeatureAtPixel(
        evt.pixel,
        function (feature, layer) {
            return feature;
        }
    );

    if (feature) {
        var geometry = feature.getGeometry();
        var coord = geometry.getCoordinates();
        popup.setPosition(coord);

        $(element).popover("destroy");
        $(element).popover({
            placement: "auto",
            html: true,
            content: feature.get("name").replace(/ /g, "&#160;"),
        });
        $(element).popover("show");
    } else {
        $(element).popover("destroy");
    }

    feature = null;
});

Conclusions

There are a few more things I'd like to do, but… it's good enough for now. If you want to see a full version, check out the source of http://exalted-map.mfgames.com/index.html and http://exalted-map.mfgames.com/map.js. That should give you a rough idea of how to do it, along with poor comments on what we're doing.

I don't like using the KML approach, but I couldn't easily figure out how to do it via JSON or creating the features manually. For some reason, ol.geom.Point wasn't working with a ol.Feature and I didn't know why. This works for now, but if I was going to add the rest of the points, I'd find a cleaner way of doing it.

The main reason I don't want to use KML is because I want to have a link to a wiki site of some sort, or maybe some additional text. These are things easily done via JSON but not KML.

Miwāfu Glyphs Redux - Basic Font

2014-08-20T05:00:00Z

Fonts can be a scary beast. Like very other technical field, it has its own language and organization. Free programs for creating fonts are… let's call them difficult to use, but once you get into them, they are very powerful and capable (much like what I'm trying with Author Intrusion).

Series

This is going to be broken into multiple posts about the steps of making a font.

2014-08-17 Miwāfu Glyphs Redux - Redrawing - Since I picked up a few new calligraphy pens for my birthday, I tried to write out Miwāfu and found that it was a bit more difficult than I thought. So I redrew them until they weren't difficult.
2014-08-18 Miwāfu Glyphs Redux - Scanning - After drawing out the Miwāfu glyphs by hand, I had to scan them in and get them ready for us.
2014-08-19 Miwāfu Glyphs Redux - Vectors - Once I got a clean raster version of the glyphs, I use Inkscape to create a vector format which is suitable for importing into FontForge. Part 3 of creating a Miwāfu font.
2014-08-20 Miwāfu Glyphs Redux - Basic Font - Continuing my series of making a conscript, this describes the steps of going from a cleaned up vector version of the script to a basic font.

Unicode

While there are many different codes for fonts, these days Unicode is pretty much the one and only one to use. Unicode has more than enough code points and the organization to allow for conscripts (constructed scripts).

Unicode provides three areas for private use (creatively called Private Use Area or PUA). The first is E000-F8FF and has 6,400 points (somewhere you can place a glyph). The other two are at F0000-FFFFD and 100000-10FFFD and have 65k points each.

The PUA can be used by a lot of places: alternative characters, Easter eggs, swashes, non-standard ligatures, and conscripts.

ConScript Unicode Registry

The ConScript, or CSUR, is an attempt to organize the various use of conscripts in the private use areas. Basically, it's an informal “reservation” for a script to avoid someone else using those ranges.

Font creators don't have to use the the CSUR to figure out the fonts, but I consider it polite not to use one of the reserved ranges for my own private space. Of course, if the script gets popular, it will probably be moved around, but at least I'm not stepping on known toes.

Where to put everything

I'm starting my glyphs at F2000 which is currently not reserved. I need 46 glyphs at this point, though I would normally pad it to 64 characters to handle some of the custom characters that exist in the world (and to give me breathing room).

F2000: MIWĀFU-W
F2001: MIWĀFU-R
F2002: MIWĀFU-M
F2003: MIWĀFU-N
F2004: MIWĀFU-H
F2005: MIWĀFU-F
F2006: MIWĀFU-P
F2007: MIWĀFU-B
F2008: MIWĀFU-S
F2009: MIWĀFU-Z
F200A: MIWĀFU-T
F200B: MIWĀFU-D
F200C: MIWĀFU-K
F200D: MIWĀFU-G
F200E: MIWĀFU-OPEN-QUOTE
F200F: MIWĀFU-CLOSE-QUOTE
F2010: MIWĀFU-OPEN-NESTED-QUOTE
F2011: MIWĀFU-CLOSE-NESTED-QUOTE
F2012: MIWĀFU-OPEN-NUMBER
F2013: MIWĀFU-CLOSE-NUMBER
F2014: MIWĀFU-1
F2015: MIWĀFU-2
F2016: MIWĀFU-3
F2017: MIWĀFU-4
F2018: MIWĀFU-5
F2019: MIWĀFU-6
F201A: MIWĀFU-7
F201B: MIWĀFU-8
F201C: MIWĀFU-9
F201D: MIWĀFU-0
F201E: MIWĀFU-A-INLINE
F201F: MIWĀFU-E-INLINE
F2020: MIWĀFU-I-INLINE
F2021: MIWĀFU-O-INLINE
F2022: MIWĀFU-U-INLINE
F2023: MIWĀFU-RISING-INLINE
F2024: MIWĀFU-FALLING-INLINE
F2025: MIWĀFU-WAVE-INLINE
F2026: MIWĀFU-A-DIACRITIC
F2027: MIWĀFU-E-DIACRITIC
F2028: MIWĀFU-I-DIACRITIC
F2029: MIWĀFU-O-DIACRITIC
F202A: MIWĀFU-U-DIACRITIC
F202B: MIWĀFU-RISING-DIACRITIC
F202C: MIWĀFU-FALLING-DIACRITIC
F202D: MIWĀFU-WAVE-DIACRITIC
F202E: MIWĀFU-Y-INLINE
F202F: MIWĀFU-Y-DIACRITIC

This is somewhat close to how Unicode describes a character. I'm just making it look close to that.

Creating the font

FontForge is a powerful program that doesn't always work the way you expect it to. The creator ended up making their own widget set because nothing at the time could handle the full Unicode range. But, this also means that it occasionally doesn't have the polish one would expect out of a standard program. It is easy enough to work with, but it has quirks.

It is also free and the work of love, so frankly, I can't complain about it.

The first thing to do is start up FontForge and create a new font. This will then give a huge list of boxes with Xs in them. Don't panic, those are just empty places for glyphs and correspond to Unicode points.

Go into Element / Font Info and populate the first three fields. These can't have any fancy characters (ANSI only) and the top two can't have spaces in the names. I use “MF” for “Moonfire” in all my fonts, mainly because of ego.

Creating the slots

Because I'm not starting with a Latin font, I clear out the entire font first. I select Encoding / Remove Unused Slots which removes all the slots. Then, I select Encoding / Add Encoding Slots and create 46, which is the number of glyphs I want.

I haven't found an easy way of creating and naming a range of fonts easily. So, I go through each one, one glyph at a time.

Populating each slot

Start by naming the slot. This consists of right-clicking the first cell and selecting Glyph Info.... In the dialog, fill in the first two fields.

In the first one (Glyph Name), we need an identifier field. I'm using the uppercase letter and “.miw” to indicate this is a Miwāfu glyph. Having “.miw” will make it easier to merge this font later with a more complete one.

In Unicode Value, put the hex value with “U+” in the beginning. If you just put “F2000”, FontForge will crash. But “U+F2000” works just fine.

Click “OK” and go back to the glyph list.

Don't bother saving at this point, FontForge will forget your info until you put an image into the slot.

Double-click on the glyph which will bring up an editor.

Go into Inkscape, select the first glyph and paste it in. This will probably be not the right size. You can scale it inside the program, but that rarely works for me. Instead, I scale the image in Inkscape until I can just paste the glyph into the editor and move it around.

Once I position the glyph, I adjust the right vertical bar to give a small amount of space to the right of the glyph. This is the default spacing between the slots, but it's kind of a art form to find the right spacing (it can also be easily changed later).

Go ahead and close the editor and save. And do it for the next glyph, and the next…

See you in an hour or so. Don't forget to save frequently.

Create the font

Once all the glyphs are put into the font, I can create the font. I like OTF format over TTF, but either works. To generate the fonts, we use File / Generate Fonts.

Unless you've done this before, are lucky, or know what you are doing, chances are you'll get an error message like this. I usually do, but most of the time, the problems are fixable. Control-E in the editor is good for finding errors. Moving points around and drawing fixes some of the other problems.

Eventually, you can plug at it and get through all of the errors. Don't skip them, FontForge is telling you for a reason. Once you finish, you'll have an OTF or TTF font wherever you saved it.

Testing it out

And since we're finally at a point of seeing it in a word processor, we can use LibreOffice after installing the font into your system.

And… after all of these posts, I can finally show a couple names from my novels.

In the future

There is a lot here and things to do. I have a basic font, but the diacritics are not working nor is the accent. The next step will be how to get those working in the font and see if I can get the eastern version rendering properly.

I also have to tweak the kerning and spacing between the characters so it looks a bit more even on screen. For example, “Y” should be a bit further down and nestled underneath the vowel.

Well, this is a point where I need to stop for now. I have to work on Author Intrusion for a little bit.

Miwāfu Glyphs Redux - Vectors

2014-08-19T05:00:00Z

It is very easy to copy SVG images from Inkscape into FontForge. The previous parts of creating a font for Miwāfu was to prepare an image suitable for importing into Inkscape.

Series

This is going to be broken into multiple posts about the steps of making a font.

2014-08-17 Miwāfu Glyphs Redux - Redrawing - Since I picked up a few new calligraphy pens for my birthday, I tried to write out Miwāfu and found that it was a bit more difficult than I thought. So I redrew them until they weren't difficult.
2014-08-18 Miwāfu Glyphs Redux - Scanning - After drawing out the Miwāfu glyphs by hand, I had to scan them in and get them ready for us.
2014-08-19 Miwāfu Glyphs Redux - Vectors - Once I got a clean raster version of the glyphs, I use Inkscape to create a vector format which is suitable for importing into FontForge. Part 3 of creating a Miwāfu font.
2014-08-20 Miwāfu Glyphs Redux - Basic Font - Continuing my series of making a conscript, this describes the steps of going from a cleaned up vector version of the script to a basic font.

Import the image into Inkscape

Again, this is a relatively simple process. Using the final image from the previous step, we import it into Inkscape as an image. It doesn't matter if you link or embed, but I usually link to avoid bloating the SVG file.

Tracing the bitmap

Because I cleaned up the image in Gimp, it is easy to turn the raster image into a SVG image. Select the bitmap then choose Trace Bitmap from the menu.

There is a quirk after you click “OK” on this dialog. It works for a few moments and then looks like you have to click OK again. Just close the window.

Cleaning up the images

The resulting item looks just like an image. Just use control and an arrow key to move one out of the way and delete the image behind the vector version. Once you are down to one image, select the traced outline and use Break Apart (Control-K).

The resulting image will have each glyph as a separate image, but all of the loops will be filled in. To fix this, click on the filled-in bowl, then control-click on the outline. Use Subtract (Control-Minus) to remove the bowl from the outline.

Cleaning up individual glyphs

This is the next tedious part of the process. I started by throwing everything on a baseline, just to make it easier to scroll.

Then, starting on the left side, I go through each glyph and clean it up before moving the next. I was going with an easier approach, so I use Simplify Path (Control-L) to remove many of the control points and smooth out the lines. After doing that, I tried to remove other control points (F2 lets you see those) to create a simple glyph.

I took a couple passes going back and forth until I was pretty happy with the results. Then, I reorganized the glyphs again just to make it easier for creating the final arrangement.

After a bit more, I had this for the end of this step:

You may notice that the heights of the individual glyphs varies a lot. I did this for a few reasons, mainly for comprehension. I love Cherokee as a script, but it shows some aspects of being a constructed script. Everything has roughly the same height and it comes off as a block of text. I wanted something more flowing.

The bottom row has two versions because the lower set is the diacritic version (western) and the upper set is the inline (eastern).

In the future

One of the drawbacks of simplify path is that you lose a bit of the sharpness of the image. I would probably go with a different approach if I was creating the font again.

Also, if this was a non-handwriting font, I would be starting in Inkscape (or a C# program). I have an idea for a parametric font, but this “perfect” idea means that I will probably never finish it.

Miwāfu Glyphs Redux - Scanning

2014-08-18T05:00:00Z

I don't write out things by hand very often. The little imperfections always annoy me, which is why I'd rather create a font that write it out. That way, I can also use the font on the Fedran website to show characters in their native language.

Series

This is going to be broken into multiple posts about the steps of making a font.

2014-08-17 Miwāfu Glyphs Redux - Redrawing - Since I picked up a few new calligraphy pens for my birthday, I tried to write out Miwāfu and found that it was a bit more difficult than I thought. So I redrew them until they weren't difficult.
2014-08-18 Miwāfu Glyphs Redux - Scanning - After drawing out the Miwāfu glyphs by hand, I had to scan them in and get them ready for us.
2014-08-19 Miwāfu Glyphs Redux - Vectors - Once I got a clean raster version of the glyphs, I use Inkscape to create a vector format which is suitable for importing into FontForge. Part 3 of creating a Miwāfu font.
2014-08-20 Miwāfu Glyphs Redux - Basic Font - Continuing my series of making a conscript, this describes the steps of going from a cleaned up vector version of the script to a basic font.

Scanning the file

The process of scanning in hand-drawn images is fairly simple one. I have a Canon all-in-one printers/scanner which writes out scanned images as PDF to a SD card. I threw everything into a single PDF and then broke it out into individual PNG files using an overly complicated process.

I should have just scanned each page individually, but it was late and I wanted to go to bed.

Removing blue lines

The first thing I did was open the scanned images into Gimp. I use single window mode (from the Windows menu) because it plays better with my monitor.

The next is to create a white layer and put it below everything. This will let me use Cut instead of fill to remove elements.

After selecting the main layer again, select by color (right-click, Select, By Color…) and set the threshold to 40.0.

With those settings, just click on the blue line and cut (Control-X). Because we put a white layer behind it, it will delete to white instead of transparent.

After doing this a few times, I get a white background image with the glyphs nice and stark on the page.

Sharpen the images

Once I have the guide lines removed, I made the text easier to trace. The first thing is to convert the image into grayscale and back to RGB. This removes any errant blue lines and darkens everything black.

Once that is done, I jack up the contrast to deepen the black even more.

Smooth out the edges

The result is actually good enough for the next step for making a vector version. However, I ended up using the “Oilify” filter to smooth out the edges so the glyphs look reasonable even in Gimp. I like Oilify because it smooths out the rough edges of an image and gives a more newspaper printed appearance to the images.

The final result is a fairly dark glyph that is easily designed to be scanned.

Culling the herd

The final step was to go through all of the duplicated glyphs and find the best one of the lot. This was actually a couple hours of shifting images around, removing the ones that don't quite fit, and trying to decide the right shapes to use. Once that was done, I had a single image with one of each glyph.

In the future

The blue lines I used were a little too dark, which increased the complexity of removing the trace lines. I would use a lighter shade next time.

I also didn't need to use the oilify since I was scanning into the next step. The result is that the glyphs got a bit more blurred than needed, plus it distorted the shapes (which was magnified by other things I did later).

Miwāfu Glyphs Redux - Redrawing

2014-08-17T05:00:00Z

My dad gave me a little bit of money for my birthday and, after many years of being reminded not to spend it on bills, I gladly went out and bought some DVDs and a set of calligraphy pens.

I've really been in the mood to create a font for my conlang lately. I'm pretty sure it was entirely because of this, which is a beautiful set of calligraphy for someone's constructed language by someone far more talented than me. Even knowing they have higher skills, more artistic talent, and a more developed conlang doesn't stop me from wanting to follow in their footsteps. I mean, the only way to get better at something like this is to actually do it.

Series

This is going to be broken into multiple posts about the steps of making a font.

2014-08-17 Miwāfu Glyphs Redux - Redrawing - Since I picked up a few new calligraphy pens for my birthday, I tried to write out Miwāfu and found that it was a bit more difficult than I thought. So I redrew them until they weren't difficult.
2014-08-18 Miwāfu Glyphs Redux - Scanning - After drawing out the Miwāfu glyphs by hand, I had to scan them in and get them ready for us.
2014-08-19 Miwāfu Glyphs Redux - Vectors - Once I got a clean raster version of the glyphs, I use Inkscape to create a vector format which is suitable for importing into FontForge. Part 3 of creating a Miwāfu font.
2014-08-20 Miwāfu Glyphs Redux - Basic Font - Continuing my series of making a conscript, this describes the steps of going from a cleaned up vector version of the script to a basic font.

Calligraphy

I haven't touched calligraphy in a very long time. My mother used to have some pens that I would occasionally play with. I didn't expect much coming back to it, I didn't have the muscle memory or the skill.

But, I do remember the joy of trying to get curved, balanced lines. And that part is what I was looking for (and got).

Starting with the old

Back in 2012, I came up with a set of glyphs that I was pretty happy with at the time. However, in the two years since, they felt off but I couldn't figure out why. Trying to draw them out by hand helped me figure out the flaws: they were created on a computer.

A calligraphy pen is kept at a steady angle for the entire character. The glyphs I created were just put together the way I thought looked good on the computer. More importantly, they had shapes that were easy to draw in Inkscape instead of written on the page.

When I actually tried to draw them, my hand refused to move in the ways needed to match the screen. Plus, it didn't feel “balanced” to me. So, I decided to draw the glyphs until I came up with a more natural version.

I started with a cheap fountain pen but later switched to a marker-style pen. I found that I like the marker version slightly better, mainly for coverage, but neither compare to my precious Pentel A55 pencil which is completely unsuited for this endeavor.

Below are the progression of the images starting with the old versions. You can probably guess that this was done over time (a week) with random bits of plain white paper.

Coming up with the new

As you might tell from the above images, I played around a lot with the feel but started with the old ones. Mostly, it was changing the shape and arrangement while keeping the shapes distinct enough that they couldn't easily be confused with the other. The reason there were so many different variants was because I kept drawing it to see if it was a weakness in my muscles or a difficulty in the shape. Frequently, it was a combination of both.

Eventually, I came up with a new set of glyphs that felt pretty good to actually draw by hand. Around page five of my tests, I started to organize my symbols instead of just randomly drawing on the page.

I even made a few attempts to write names in it (mostly character names). On the next image was my attempt, though there was some discussions with a friend at the writing group about different scripts in our world (he's a former military translator and a micro-polyglot).

One cool thing came out of here is a bit of world-building. There are two ways of putting in the vowels, diacritics or succeeding. Since I've always said that Miwāfu's script was created by researchers and missionaries from Tarsan, the original language used diacritics. And since the desert folk hate agreeing with anything, the eastern part of the desert rebuked the diacritics and went with their own way of writing vowels.

Practice sheets

Once I thought I was done with the glyphs, I banged up a quick practice sheet in Inkscape using blue lines and printed off a few copies. Then, with my trusty new calligraphy marker, I just spent a few days drawing in boxes, working each one until it felt good but also looked “mostly right.”

I say “thought” because I still ended up changing fonts after drawing them a few dozen times.

In the end, I figured I had a pretty good set of glyphs of various quality. I scanned them in and then promptly went to bed. Mainly because the next step requires a lot of thinking.

In the future

The biggest thing about these glyphs and my effort is simply practice. I haven't used calligraphy pens enough to be good at them, nor can I do the little swashes and flairs that I see others doing. This is obviously something I can improve, but it is a matter of time and desire.

Making a cover for Sand and Blood

2013-07-22T05:00:00Z

I love making things. There is something about being able to point to something (electronically or literally) and be able to say "I did this." I get it every time I run a program I write, read one of my old stories, or point to a bookshelf that I made years ago. Yes, I constantly see the flaws in it, but most other people don't seem to notice, so I think I'm getting better at it.

When I decided to make the cover for Sand and Blood, it was a chance to have fun and create a cover for the book. I know that my preferred type of cover won't work at this point, but there are actually multiple parts to creating a cover. My inability to draw and paint a cover is just one fraction of the greater whole.

I also like helping others and getting help myself. At work, I mentor others in programming techniques and design, but I also learn constantly from others. But, I don't work well with classes and the such. Instead, I prefer tutorials and the power of Google to learn. Give me ideas or suggestions.

This is a writeup of how I made the cover. It's in a partial tutorial form, mainly with some screen shots to show what I've done. It won't be step-by-step, though, so it isn't what I call a proper tutorials.

Programs

The starting point is the programs. While I'm capable at Photoshop and Illustrator, along with probably a dozen other graphics programs, I decided to stick with a limited number of programs and get really good at them. In my case, I use Gimp and Inkscape for a number of reasons:

They are Open Source Software (OSS)
They run on every platform I use (Windows, Linux)
They both have great communities
They don't cost me anything (I do donate to OSS projects though)

In general, I use Inkscape to create covers. Because it is a vector-based program, it handles scaling and resizing a lot better than Gimp does. It also avoids some of the artifacts with the text when I create a cover at full size (2,500 pixels or greater) and then scale down to a proper thumbnail (say 300 pixels).

Sizes and Arrangement

I'm working on both a print and ebook version of Sand and Blood, so I have to take both into consideration while creating covers. For print books, the most common format in the US is the trade paperback size. This is the taller of the two basic sizes and the most common you'll see from self-publishers.

I'm somewhat of a geek and love the ISO paper standard (the math behind it is sexy). I know (being based in the US) that ISO paper sizes are rare, but that still doesn't mean I can't like them. The Print on Demand (POD) printer I'm planning on using does have ISO paper sizes and A5 is very close to the trade paperback format. Naturally, I'm going to pick that for the size of the printed book. It also means that the cover is going to use the A5 ratio (though I suspect almost no one will notice unless it's pointed out).

Size	Metric	Imperial	Ratio
Trade	152.4 x 228.6 mm	6.0 x 9.0 in	0.666
A5	148.0 x 210.0 mm	5.8 x 8.3 in	0.705

The other component to printed books is the size of the spine. There are a couple ways of handling it, but since I'm aiming toward a wrap-around cover, I need to take that into account when I figure out the actual size of the cover.

Sand and Blood is about 68,808 words before I get it back from the editor. Using an average of 250 words per page, this means the book will be about 276 pages. Using a random spine calculator, it comes out to 13.7 mm (0.539 in). I use a rough estimate because the typesetting isn't quite done at this point (I haven't gotten through the editor), so I'm going to pad the sizes as I go.

Taking everything in above, the front cover is going to be 148 x 210 mm and the entire cover, including spine, would be 311 x 210 mm (actually, the math says 309.7 mm, but I'm bumping it up just in case).

Ratios

The last major component to the covers I'm making is where I'm putting the title and byline. This is optional for most people, but I really like it when the titles all line up. After hundreds of hours of sorting books (as penalty chores), it's the little things that really appeal to me. So, when working on Casting Call, I came with a ratio on the cover to place everything. Naturally, given my geekish nature, it is based on the Golden Mean (1.618).

The text on the cover verses pure image is with a 1:1.618 ratio. Of the "1", it is split 1:1.618 with the title being the larger section and the byline being the smallest part. If we shuffle this around a little bit, we get these expressions:

bylineHeight: 1
titleHeight: 1.618 * bylineHeight
totalTextHeight: (1 + 1.618) * bylineHeight
totalHeight: (1 + 1.618) * totalTextHeight

Expanding this out, I'll get the following heights:

textHeight: totalHeight / 2.618
titleHeight: 1.618 * textHeight / 2.618
bylineHeight: textHeight / 2.618
graphicsHeight = totalHeight - titleHeight - bylineHeight
textHeight (again): 1.618 * (totalHeight / 2.618) / 2.618
bylineHeight (again): (totalHeight / 2.618) / 2.618

Putting in the height of 210 mm, I get this:

titleHeight = 49.57 mm
bylineHeight = 30.64 mm
graphicsHeight = 129.79 mm

Blocking everything off

Now that I have all of our sizes and ratios, I can start actually making the cover. I start with creating an Inkscape document with the proper size. I also create a number of guidelines to block out the regions of the page.

After a lot of years of being unable to do math properly, I set up the first layer to have some notes on the sizes I'm using. Just in case I need to know what numbers I was using then.

This is a wrap-around cover, so the right side will be the front cover and the left will be the back. The middle section is the spine. I add labels to the various sections, just to make it easier since I frequently get interrupted at home while doing stuff like this.

To make things a little easier, I create a couple extra layers.

The first is the create various screens and masks. This makes it easier to focus on "just" the front cover verses paying attention to the cover as a whole. We do this by creating a "screen" which hides everything but the front cover. This will be called "Front Screen" and it won't have any contents.

I'm also going to create an error layer. This just has a bright purple background and will tell us if we have some area on the cover we haven't covered yet.

The third layer (Front Sizing) is to make it easier to export the front cover from inside Inkscape. When I export the front, we just activate that layer, select all (Control A), and then export the bitmap.

Create the Front Screen layer on top of the notes layer.
Create the Error layer below the notes
Create the Front Sizing layer below everything
Activate the Front Sizing layer
Create a new box somewhere and use the toolbar to set the X, Y, Width, and Height manually. Once you enter the values, it should be a plain box where the cover would be.
- X: 161.7 mm (148 mm plus the spine of 13.7 mm)
- Y: 0 mm
- Width: 148.0 mm
- Height: 210.0 mm
Duplicate the box (select it and Control-D)
Move the duplicate to the Front Screen layer (Control-PageUp a few times)
Activate the Front Screen layer
Create a huge box that covers everything on the document
Move the huge box down to the bottom (from the menu if you want)
Select the huge box and the duplicated box you put in the Front Screen layer
Subtract the one box from the other (Control-Minus or Path / Difference). This should create a large box with a hole in it that only shows the cover.
Make the huge box with a hole's color to white, this will match the bulk of the websites your cover will be shown.
Lock and hide the Front Screen. Whenever you want to see the cover only, just unhide the front screen.
Activate the Error layer
Draw a random box and use the settings to control its dimensions:
- X: 0 mm
- Y: 0 mm
- Width: 311 mm (or whatever the width of your document)
- Height: 210 mm
Change the fill to bright purple
Lock the Error layer

At this point, I just have a great big purple rectangle on the screen. This is useful when we're working so we can tell where our cover doesn't quite line up on the edges or if we're missing something.

The Front Sizing layer won't be visible at all. You'll notice that I didn't say hide or lock it. Inkscape won't let you select if the layer is hidden or locked and we need to be able to select to do an easy export of the front cover.

Text

Once I have everything blocked out, I start with the text layer. Mostly, I just put the text where I think its going to go but with the intent of moving it around until everything looks right. Because of that, I make each word of the title (Sand and Blood) separate text objects. Also keep in mind that printing has a bit of variance, so its best not to put anything right against the edge of anything (say about 4-5 mm from any edge) since the printing may cut it off.

I do this on a dedicated Text layer which will be on top of everything but the screen.

When creating the text, I found it is important that you use a good stroke with the fill. If you look at other covers, you'll notice that very few of them use a solid fill on the text without a stroke. If you do, it makes it harder to read the text with a background behind it.

In this case, I'm using Underwood Champion because it has a nice rough edges and handles the glyphs I need. The font has a 0.4 mm stroke on it just to keep the text isolated. Over time, this changed through various fonts as I iteratively moved and shuffled things around. In the later images, the font is Impact with a 0.3 mm stroke.

Note: The black filled bowls for the spine are an artifact of Inkscape at the zoom that I use for screenshots. The final image won't have those.

It is important to note that this text is not the final. It is just to make sure all the elements are on the screen in the right size and proportions while figuring out the images. Don't get too hung up on the font choice or placement.

The background image

This is the fun (and frustrating) part. We're going to put in the image. With a properly designed background image, you'll find that this will be very easy. The more your image doesn't fit with the cover, the more you'll have to shift and move things around. In general, its a matter of finding the best combination of a good looking and the least amount of error space.

I do the rough sizing and arrangement in Inkscape, mainly because it is easy to move things around and see them in context with the text. There are others who are good enough to do that in Gimp, but I'm not. So, this step is to figure out where we want to scale and where to crop.

This is also the point where I have to be careful not to scale up the image too far. The print cover is at 300 dpi. This is very important because an image that looks good on the screen (72-90 dpi) will look fuzzy in print.

My source image is 2,800 x 4,200 pixels. This gives me a fair amount of flexibility if I have to scale or shift things around. While I can scale it to the point its less than 300 dpi, the further I get below that point, the worse the image will look like.

The first attempt at the image is one that just fills the front page with the image I got. This image would great if I was only doing an ebook. It is the image as Mr. Howard intended and it fits well.

The drawback is the printed version. When you look at it including the back cover, there is a lot of purple space that I have to fill in with something. I could go with the simple approach of making everything black, but I always felt it looked less than professional. There are very few books that have photographic or illustrated covers with solid color backs.

This second version is the natural scale of the image at 300 dpi. As you can tell, the image goes along the spine and a decent amount into the back of the cover. Since this is 300 dpi, I don't want to make it much larger otherwise the print version will suffer.

The actual answer is somewhere in between. That is more of an art form to find the right balance of color, content, and composition. You'll see later, I made the girl more central so the peak of her head lines up with the small "and".

Overall, this is probably the best I'll be able to get without ruining the image. The hard part is figuring out what to do with that last part of the back cover. Fortunately, back covers are usually covered in a blurb and other elements, so we'll be able to cheat a bit there.

One thing to consider while working with wrap-around covers is to occasionally look at the front cover too. This is important because that is the image we'll see in the ebook store, but also what people will see on a shelf (in the chance you get your book face forward).

As I mentioned before, this is really easy to make this view. Make the "Cover Sizing" layer active and select all. Inkscape's Export dialog will automatically change it from "Page" to "Selection", but when it exports, it will use the visible part of the image. So, instead of getting a solid color box (which is what is selected), I get the complete front cover.

In this case, I think the composition of the front cover is pretty balanced here. Chimípu, the woman on the cover, is somewhat left of the front cover (like most fantasy books these days). From last post, I made more of her visible from feedback I got.

The title and the byline help balance out the image. I added the series title and volume in the upper right to help with the balance. I also made it black (though it will lighten up later), so draw less attention to it instead of the title. We want the reader to see the woman first, title second, and then the byline so that will pretty much tell us how to arrange the front cover.

Note: When I commissioned this piece, I should have insisted on a lot more on the left side of the image. But, for an artist who is used to doing portraits, it kind of goes against their sense of composition and balance. So, it "feels wrong" to have so much dead space.

Getting rid of that purple

So, we still are working on getting rid of the purple (and I've tweaked it a few more times over my lunch break). There are a few ways of doing this. Each one has its own drawbacks:

Scale the image larger and just span it. This works up to the point I start dipping below the 300 dpi layer. And, since the main character is in the center, her face moves over to the spine and we're just looking at part of her face (and none of the nifty fighting spike).
Scale the left side of the image out to fit the rest. This is actually what I planned on doing originally, but it skewed the image so badly that it looked horrible. Plus, it changed the nice curve of the background into a flat section with a sharp line where it changed. It wasn't pretty and I won't make screenshots of that.
Cover it up.

Actually, covering it up is my plan at the moment. This benefits me in a couple ways. One, it is very hard to read text on a noisy background. While there are readers out there that have sharp eyes and the ability to tell the difference between #223344FF and #223544FF, I can't. If you look the back of most books, you might notice they either have a flat shaded gradient over the image or an opaque image that gives a "flat" area to put the blurb.
I decided to start with a slightly burnt paper background. It seemed like an easier way and didn't quite look as plain as a straight gradient. The paper came from iStockPhoto (I had some credits) and I basically trimmed off the white space using Gimp so it had a transparent edge. From there, I inserted it into Inkscape using File / Import... and arranged it to take.

In the above image, I created a placeholder blurb and also a white space for the UPC code. This way, I know where everything lines up as I fill in the gaps.

Iterative development

If you can't tell from the progression of images, things change constantly. Like writing, the editing process will result in a different font, layout. The background image will shift around until I'm happy.

The important part is to realize this isn't something that should be done in a single day. Sleep on it, play around. Let it sit for a few days and then come back. Creating a cover works just like writing and editing. It takes time and experience.

Mistakes

No cover is perfect and this one isn't either. And being the one who makes it, I'm probably going to be my worst critique. And I'm also rather opinionated of what I like in book covers.

There were a few things, moving forward, I can do better next time. The biggest is the cover. The commissioned image was actually an impulse purchase of mine, and it was given to someone who didn't have a lot of time before they ran off to a convention (actually, the commission was to pay for said trip). My original request was a bit too vague, but I also wasn't picky enough about what I needed during the process.

One of the reasons that I want to learn how to draw is to make my own covers because I'm passionate about these topics and I can redo it if I didn't get it right. But, my skill at drawing isn't sufficient for this and I'm not going to get a second commissioned image for this cover. Instead, I decided to work with what I got and I think I did a decent job of it.

The key part is learning what made my life difficult this time and make sure the next commissioned cover works better.