diff --git a/www/contribute/how-tos/how-to-create-svgs-from-maps-with-several-colors.php b/www/contribute/how-tos/how-to-create-svgs-from-maps-with-several-colors.php index 3a30f5b9..58857879 100644 --- a/www/contribute/how-tos/how-to-create-svgs-from-maps-with-several-colors.php +++ b/www/contribute/how-tos/how-to-create-svgs-from-maps-with-several-colors.php @@ -8,54 +8,62 @@ require_once('Core.php');

  1. Finding the best quality source scan

    -

    You always want to start with the very best scan of the image you can locate. Here's a JPG of the scan from “Through the Brazilian Wilderness”:

    +

    You always want to start with the very best scan of the image you can locate. Here's the top portion of the scan from “Through the Brazilian Wilderness”:

    - The source map of Brazil showing both black and red linework. + Part of the source map of Brazil showing both black and red linework.

    As you can see, there is a red line showing the journey, and an accompanying legend.

  2. Process with a suitable bitmap editor

    -

    I use an editor for macOS called Acorn, but most other graphic editors would be suitable. The essential requirement is for it to have a function which will let you replace one color with another, and that it support multiple layers.

    -

    Open the source file in your editor and immediately duplicate the image layer. If you can rename the layers, call one of them “red-layer” and the other “black-layer”.

    -

    We are going to use the Replace Color function to replace the colors we don’t want in each layer. See this initial image which shows just a small portion of the map, with the two layers we’ve created.

    +

    What we need to do before trying to trace the map is to separate out the red lines showing the route from the black lines of the underlying map. We need to end up with two images, one with the red and one with the black.

    +

    To do this, I duplicate the source image and then replace the colors I don't want in each one with the background color. To demonstrate, I'll use the open-source GIMP graphics program, but any graphics program which can replace one color with another would be suitable.

    +

    Open the source file in your editor and immediately duplicate the image layer. If you can rename the layers, call one of them “red-layer” and the other “black-layer”.

    - The image open in Acorn, showing the duplicated layers. + The image open in GIMP, showing the duplicated layers.
    -

    Lock and hide “red-layer” and work on “black-layer”. Now apply the Replace Color to replace red with the background color. In the image below I’ve decreased the tolerance just enough to show you what I’m doing. You will want to increase the tolerance until the red is no longer visible at all.

    +

    Lock and hide “red-layer” and work on “black-layer”. Now we need to use the Select by Color tool (Select -> By Color) to select as much of the red as we can. To do this, I’ve zoomed in quite closely to ensure I can pick the right color and adjust the tolerance up until we can select all of the red we can see. For this image, I’ve use a tolerance of 252 (the maximum).

    - The replace color function in action showing the red lines almost gone before tolerance is increased. + The select by color function in GIMP showing the red lines selected.
    -

    Now work on “red-layer” and do the opposite: replace color to remove the black lines.

    +

    Now we use the Colorize (Colors -> Colorize) tool to replace the red with the background color. To be honest, GIMP isn’t great at this process, so we may need to do some manual clean-up as well. It doesn’t have to be perfect: we just need what remains of the red line to be faint enough, so it won’t be picked up during the tracing step.

    - The replace color function in action showing the black lines almost gone before tolerance is increased. + The GIMP colorize function in action showing the red lines almost gone.
    -

    Tip: it’s a good idea to retain some “anchor points” at the corners of your image, the same location in each layer, so that when you vectorize, each vector will be of the same outside dimensions. The four corners of the maps would be good for this.

    +

    Now lock and hide "black-layer" and work on “red-layer” and do the opposite: use the above procedure to remove the black lines.

    +

    Tip: it’s a really good idea to retain some “anchor points” at the corners of your image, the same location in each layer, so that when you vectorize, each vector will be of the same outside dimensions. The four corners of a map would be good for this. After tracing, we can remove these anchors from the red layer.

    - The replace color function in action showing the black lines almost gone before tolerance is increased. + Showing a map corner copied from the black layer onto the red layer to ensure the dimensions after tracing are the same.
    -

    When that’s done to your satisfaction, export each layer separately as a JPG or PNG image, with a suitable name.

    +

    When that’s done to your satisfaction, export each layer separately as a PNG image, with a suitable name such as “red-layer.png” and “black-layer.png”.

  3. Vectorize the images

    -

    I use a program called simply “Image Vectorizer” for macOS, but Inkscape would be fine for this.

    -

    Use the program to vectorize each layer image separately. Save the SVG output as appropriately-named files, say “red-layer.svg” and “black-layer.svg”.

    +

    You can use the open-source application Inkscape to trace the bitmaps you've created and turn them into vectors, and export them as an SVG.

    +

    Use File -> Import in Inkscape to open both the red and black PNG images, which will appear as separate layers. Rename the layers appropriately.

    +

    Then use the Path -> Trace Bitmap tool on each layer separately, as in the screenshot below. These will appear as additional layers. Name these appropriately and then delete the bitmap layers.

    +
    + Shows the tracing tool being used on the red layer in Inkscape. +
  4. -

    Import the SVGs into vector editor and color one layer

    -

    I use Affinity Designer for this, but I imagine that any good vector-based editor should work.

    -

    Import each SVG onto its own layer, and position each layer carefully so they overlap exactly. Then open up “red-layer” and apply color to all of the components. If necessary, you can then edit out the anchor points you placed at the corners of each layer.

    +

    Color one layer and export as a single SVG

    +

    Now select the “red-vector” layer and apply color to all of the components. If necessary, you can then edit out the anchor points you placed at the corners of the red layer.

    - Modifying the red layer to apply color. + Applying color to the red layer in Inkscape.
    -

    Now export the combined image as a single SVG file, and apply the various SVG optimizations we prefer.

    +

    Now make both layers visible and export the combined image as a Plain SVG file, and then apply to that file the various SVG optimizations we prefer.

    - Combining the two layers for export. + Shows the export of a combined SVG file in Inkscape.

  5. That’s it, you’re done!

    6. +
  6. +

    Note

    +

    Inkscape does have a “multi-color” trace function, which in theory ought to eliminate the above steps we needed to carry out in GIMP but in practice I haven’t been able to get this to work in any satisfactory manner.

    +
diff --git a/www/contribute/how-tos/images/map-example-0.jpg b/www/contribute/how-tos/images/map-example-0.jpg index 61501bb0..31ff46c7 100644 Binary files a/www/contribute/how-tos/images/map-example-0.jpg and b/www/contribute/how-tos/images/map-example-0.jpg differ diff --git a/www/contribute/how-tos/images/map-example-1.jpg b/www/contribute/how-tos/images/map-example-1.jpg index 67e05338..282ff068 100644 Binary files a/www/contribute/how-tos/images/map-example-1.jpg and b/www/contribute/how-tos/images/map-example-1.jpg differ diff --git a/www/contribute/how-tos/images/map-example-2.jpg b/www/contribute/how-tos/images/map-example-2.jpg index e685633a..b9591172 100644 Binary files a/www/contribute/how-tos/images/map-example-2.jpg and b/www/contribute/how-tos/images/map-example-2.jpg differ diff --git a/www/contribute/how-tos/images/map-example-3.jpg b/www/contribute/how-tos/images/map-example-3.jpg index bd4d5c1b..faa4223b 100644 Binary files a/www/contribute/how-tos/images/map-example-3.jpg and b/www/contribute/how-tos/images/map-example-3.jpg differ diff --git a/www/contribute/how-tos/images/map-example-4.jpg b/www/contribute/how-tos/images/map-example-4.jpg index e5b328fe..46451d2d 100644 Binary files a/www/contribute/how-tos/images/map-example-4.jpg and b/www/contribute/how-tos/images/map-example-4.jpg differ diff --git a/www/contribute/how-tos/images/map-example-5.jpg b/www/contribute/how-tos/images/map-example-5.jpg index 69d8f46d..951f3ae2 100644 Binary files a/www/contribute/how-tos/images/map-example-5.jpg and b/www/contribute/how-tos/images/map-example-5.jpg differ diff --git a/www/contribute/how-tos/images/map-example-6.jpg b/www/contribute/how-tos/images/map-example-6.jpg index ef38c8ce..400898d7 100644 Binary files a/www/contribute/how-tos/images/map-example-6.jpg and b/www/contribute/how-tos/images/map-example-6.jpg differ diff --git a/www/contribute/how-tos/images/map-example-7.jpg b/www/contribute/how-tos/images/map-example-7.jpg index 75ff14f2..bcac10a0 100644 Binary files a/www/contribute/how-tos/images/map-example-7.jpg and b/www/contribute/how-tos/images/map-example-7.jpg differ