standardebooks/web
1
0
Fork 0
mirror of https://github.com/standardebooks/web.git synced 2025-07-13 10:02:02 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Tweak map how to and add to how-to index

Browse source
This commit is contained in:
Alex Cabal 2023-09-14 10:20:55 -05:00
parent 913c4998b0
commit de8a124ccf
2 changed files with 12 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

18
www/contribute/how-tos/how-to-create-svgs-from-maps-with-several-colors.php
View file

@ -4,11 +4,11 @@ require_once('Core.php');
<main class="manual">
<article class="step-by-step-guide">
<h1>How to create SVGs from maps with several colors</h1>
<p>It’s not unusual to find a map which has an additional line or lines in color showing the route of a journey. We want to preserve this color in the final SVG of the map we include with the book. We will use as an example a map reproduced in “Through the Brazilian Wilderness” by Theodore Roosevelt</p>
<p>It’s not unusual to find a map which has an additional line or lines in color showing the route of a journey. We want to preserve this color in the final SVG of the map we include with the book. We will use as an example a map reproduced in <i>Through the Brazilian Wilderness</i> by Theodore Roosevelt</p>
<ol>
<li>
<h2>Finding the best quality source scan</h2>
<p>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”:</p>
<h2>Find the best quality source scan</h2>
<p>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 <i>Through the Brazilian Wilderness</i>:</p>
<figure class="full-width">
<img src="images/map-example-0.jpg" alt="Part of the source map of Brazil showing both black and red linework."/>
</figure>
@ -17,16 +17,16 @@ require_once('Core.php');
<li>
<h2>Process with a suitable bitmap editor</h2>
<p>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.</p>
<p>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.</p>
<p>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 <a href="https://www.gimp.org/">GIMP graphics program</a>, but any graphics program which can replace one color with another would be suitable.</p>
<p>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”.</p>
<figure class="full-width">
<img src="images/map-example-1.jpg" alt="The image open in GIMP, showing the duplicated layers."/>
</figure>
<p>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 used a tolerance of 252 (the maximum).</p>
<p>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 used a tolerance of 252 (the maximum).</p>
<figure class="full-width">
<img src="images/map-example-2.jpg" alt="The select by color function in GIMP showing the red lines selected."/>
</figure>
<p>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.</p>
<p>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.</p>
<figure class="full-width">
<img src="images/map-example-3.jpg" alt="The GIMP colorize function in action showing the red lines almost gone."/>
</figure>
@ -39,9 +39,9 @@ require_once('Core.php');
</li>
<li>
<h2>Vectorize the images</h2>
<p>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.</p>
<p>Use File -> Import in Inkscape to open both the red and black PNG images, which will appear as separate layers. Rename the layers appropriately.</p>
<p>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.</p>
<p>You can use the open-source application <a href="https://inkscape.org/">Inkscape</a> to trace the bitmaps you’ve created and turn them into vectors, and export them as an SVG.</p>
<p>Use File → Import in Inkscape to open both the red and black PNG images, which will appear as separate layers. Rename the layers appropriately.</p>
<p>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.</p>
<figure class="full-width">
<img src="images/map-example-5.jpg" alt="Shows the tracing tool being used on the red layer in Inkscape."/>
</figure>

3
www/contribute/how-tos/index.php
View file

@ -15,6 +15,9 @@
<li>
<p><a href="/contribute/how-tos/how-to-create-figures-for-music-scores">How to create figures for music scores</a></p>
</li>
<li>
<p><a href="/contribute/how-tos/how-to-create-svgs-from-maps-with-several-colors">How to create SVGs from maps with several colors</a></p>
</li>
<li>
<p><a href="/contribute/how-tos/how-to-review-an-ebook-production-for-publication">How to review an ebook production for publication</a></p>
</li>