Commit a03177c0 authored by Pat David's avatar Pat David

Finish removing script/style inline.

parent 41042a37
table { margin: 1rem auto; }
td { padding-right: 1rem; }
.color-ex {
text-align: center;
padding: 1rem;
}
.color080205255 {background-color: rgb(80, 205,255);}
.color255172080 {background-color: rgb(255,172,80); }
.color127127127 {background-color: rgb(127,127,127);}
.color220220220 {background-color: rgb(222,220,220);}
......@@ -77,10 +77,10 @@ You are working in an RGB world when you stare at your monitors. Every single pi
The variations in brightness of each of the sub-pixels will “mix” to produce the colors you finally see. The scales available in an 8-bit display are discrete levels from 0—255 for each color (2<sup>8</sup> = 256). So if all of the sub-pixel values are 0, the resulting color is black. If they are all 255, you’ll see white. Any other combination will produce some variation of a color.
<p class="color-ex" style="background-color: rgb(80,205,255); text-align: center; padding: 1rem;">
<p class="color-ex color080205255" >
80, 205, 255 for instance
</p>
<p class="color-ex" style="background-color: rgb(255,172,80); text-align: center; padding: 1rem;">
<p class="color-ex color255172080" >
or 255, 172, 80
</p>
......@@ -88,10 +88,10 @@ or 255, 172, 80
The important point to take away from this is to realize that when all three color channels are the same value, you’ll got a grey color. So a middle gray value of 127, 127, 127 would look like this:
<p class="color-ex" style="background-color: rgb(127,127,127); color: #222; text-align: center; padding: 1rem;">
<p class="color-ex color127127127" >
127, 127, 127
</p>
<p class="color-ex" style="background-color: rgb(222,220,220); text-align: center; padding: 1rem;">
<p class="color-ex color220220220" >
While this is a little brighter: 220, 220, 220
</p>
......@@ -201,7 +201,7 @@ The weighted function describing relative luminance is:
<figcaption>This is closer to how our eyes will actually perceive the brightness of each color</figcaption>
</figure>
<figure style="background-color:white;">
<figure>
<img src="{filename}rgb-mix-luminosity.png" alt="RGB Luminosity Mix" />
<figcaption>
Notice the overwhelming contribution from green
......
......@@ -97,7 +97,7 @@ I want to fill this selection with black, but before I do I need to make sure th
<figure>
<img src="{filename}Change-Foreground-Color.png" alt="Change-Foreground-Color"/>
<figcaption>
Click the <span style="color: #00FF00;">foreground color</span> to change.
Click the <span class='tGreen'>foreground color</span> to change.
</figcaption>
</figure>
......
......@@ -45,7 +45,7 @@ To begin creating the masks we will need to first get a luminosity representatio
Either through the menus, or by Right-Clicking on the base layer in the **Layer Dialog**:
<div class="MenuCmd"><span><span style="text-decoration: underline;">L</span>ayer → D<span style="text-decoration: underline;">u</span>plicate Layer</span></div>
<div class="MenuCmd"><span>Layer → Duplicate Layer</span></div>
<figure>
<img src="{filename}Layer-Duplicate.png" alt="Layer-Duplicate"/>
......@@ -75,9 +75,9 @@ The easiest way to do this is through the **Channels** Dialog. If you don't see
The <strong>Channels</strong> Dialog
</figcaption></figure>
On the <span style="color: #ff5500;">top half</span> of this window you’ll see the an entry for each channel in your image (Red, Green, Blue, and Alpha). On <span style="color: #00aaff;">the bottom</span> will be a list of any channels you have previously defined.
On the <span class='tOrange'>top half</span> of this window you’ll see the an entry for each channel in your image (Red, Green, Blue, and Alpha). On <span class='tBrightBlue'>the bottom</span> will be a list of any channels you have previously defined.
To create a new channel that will become your “Lights” channel, drag any one of the <span style="color: #ff5500;">RGB channels</span> down to the <span style="color: #00aaff;">lower window</span> (it doesn’t matter which - they all have the same data due to the desaturation operation).
To create a new channel that will become your “Lights” channel, drag any one of the <span class='tOrange'>RGB channels</span> down to the <span class='tBrightBlue'>lower window</span> (it doesn’t matter which - they all have the same data due to the desaturation operation).
Now rename this channel to something meaningful (like “**L**” for instance!), by double-clicking on its name (in my case it‘s called “Blue Channel Copy”) and entering a new one.
......
table.ptable {
background: #CCFFCC none;
max-width:34rem;
margin:1rem auto;
}
.ptable td.t20 {
width: 20%;
}
.ptable td.t40 {
width: 40%;
}
......@@ -64,15 +64,17 @@ The Gimp module provides tracing ability, which is a form of debugging. To activ
This will give the maximum amount of tracing information, displayed on the console window you start GIMP from. You can cut back on what all gets displayed by using an "or'ed" combination of the following other options in place of TRACE_ALL:
<table style="background: #CCFFCC none; max-width:34rem;margin:1rem auto;">
<link rel='stylesheet' type='text/css' href='index.css' />
<table class='ptable'>
<tbody>
<tr>
<td style="width: 20%;">TRACE_NONE</td>
<td class='t20'>TRACE_NONE</td>
<td style="width: 40%">turn off tracing</td>
<td class='t40'>turn off tracing</td>
</tr>
......
ol {
max-width: 35rem !important;
}
.italic {
font-style: italic;
}
.float-right { float: right; }
.bottom-margin { margin-bottom: 1rem; }
.top-margin-05 { margin-top: -0.5rem; }
.top-margin-1 { margin-top: 1rem; }
ol.lowerroman { list-style-type: lower-roman; }
......@@ -12,6 +12,7 @@ canonical: http://ninedegreesbelow.com/photography/gimp-tone-map-with-levels.htm
<span xmlns:dct="http://purl.org/dc/terms/">GIMP Tutorial - Tone Mapping Using GIMP Levels (text & images)</span> by [Elle Stone](http://ninedegreesbelow.com/) is licensed under a [Creative Commons Attribution-ShareAlike 3.0 Unported License](http://creativecommons.org/licenses/by-sa/3.0/).
</small>
<link rel='stylesheet' type='text/css' href='index.css'>
<!-- BEGIN ARTICLE -->
......@@ -30,7 +31,7 @@ This step-by-step tutorial shows you how to use GIMP's unbounded floating point
<figure>
<img src='power-lines.jpg' alt='power-lines' width='768' height='614' >
<figcaption>
<em style='font-weight: 400;'>Power lines at noon</em>, before and after tone mapping (aka "shadow recovery") using high bit depth GIMP's floating point "Colors/Exposure".<br>
<em><strong>Power lines at noon</strong></em>, before and after tone mapping (aka "shadow recovery") using high bit depth GIMP's floating point "Colors/Exposure".<br>
(Click to view):<br>
<span class='toggle-swap' data-fig-swap='before-auto-stretch-contrast.jpg'>Scene-referred interpolated raw file.</span><br>
<span class='toggle-swap' data-fig-swap='power-lines.jpg'>After tone mapping/shadow recovery using GIMP unbounded Levels.</span>
......@@ -69,7 +70,7 @@ Using high bit depth GIMP's "Colors/Exposure" to lighten the ground by one stop
This step-by-step example provides a sample image and is broken down into five steps, starting with downloading the image. Steps 3, 4, and 5 describe the actual procedure, so here's an overview:
<ol start='3' style='padding-left: 3rem; font-style: italic;' markdown=1 >
<ol start='3' class='italic' markdown=1 >
3. Duplicate the base layer and then use GIMP's unbounded Levels to add one stop of positive exposure compensation to the duplicated layer.
4. Add an inverse grayscale layer mask to the now much brighter duplicated layer.
5. Do "Auto/Stretch Contrast" on the layer mask and then fine-tune the mask until you are happy. Then make a "New from Visible" layer.
......@@ -77,7 +78,7 @@ This step-by-step example provides a sample image and is broken down into five s
---
<ol style='max-width: 35rem;' markdown=1>
<ol markdown=1>
<li><b>Download <a href="tree.png">tree.png</a></b>, which is a 16-bit integer sRGB image. High bit depth GIMP really is an "sRGB only" image editor, so it's best if you don't even try to edit in other RGB working spaces.</li>
......@@ -109,7 +110,7 @@ When using "Colors/Exposure" to add one stop of positive exposure compensation,
</li>
<li>
<img style='float: right;' src="add-inverse-grayscale-mask.jpg" alt="add-inverse-grayscale-mask" width='292' height='381'>
<img class='float-right' src="add-inverse-grayscale-mask.jpg" alt="add-inverse-grayscale-mask" width='292' height='381'>
<b>Add an inverse grayscale layer mask</b>: Right-click on the layer and select "Layer/Mask/Add Layer Mask", and when the "Add a mask to the Layer" dialog pops up, choose "Grayscale copy of layer" and check the "Invert mask" box.
<p>As shown in Figure 5 below, at this point the highlights will be brought back into the display range, meaning all RGB channel values are between 0.0f and 1.0f. But the image will probably look a little odd (sort of cloudy and flat), and depending on the image, the brightest highlights might actually have dark splotches&mdash;don't worry! this is temporary.</p>
......@@ -123,7 +124,7 @@ When using "Colors/Exposure" to add one stop of positive exposure compensation,
<li>
<img src="auto-stretch-contrast-mask.jpg" alt="auto-stretch-contrast-mask" style='float:right; margin-left: 1rem;' width='301' height='230' >
<img src="auto-stretch-contrast-mask.jpg" alt="auto-stretch-contrast-mask" class='float-right' width='301' height='230' >
<b>Click on the layer mask to select it for editing, and then select "Colors/Auto/Stretch Contrast"</b>:
<p>"Keep Colors" should be checked (though it doesn't really matter on grayscale images such as layer masks). Figure 6 below shows the final result:</p>
......@@ -158,20 +159,20 @@ That's the whole procedure for using "Colors/Exposure" to add a stop of positive
(Click to view):<br>
<span class='toggle-swap' data-fig-swap='apple-orchard-truck-from-camera.jpg'>1. Image from the camera, underexposed to avoid blowing out highlights..</span><br>
<noscript>
<img src='apple-orchard-truck-from-camera.jpg' alt='apple-orchard-truck-from-camera' style='margin-bottom:1rem;' width='593' height='395'>
<img src='apple-orchard-truck-from-camera.jpg' alt='apple-orchard-truck-from-camera' class='bottom-margin' width='593' height='395'>
</noscript>
<span class='toggle-swap' data-fig-swap='apple-orchard-truck-tone-mapped-using-gimp-colors-exposure.jpg'>2. After tone mapping/shadow recovery using high bit depth GIMP's floating point "Colors/Exposure".</span><br>
<noscript>
<img src='apple-orchard-truck-tone-mapped-using-gimp-colors-exposure.jpg' alt='apple-orchard-truck-tone-mapped-using-gimp-colors-exposure' style='margin-bottom:1rem;' width='593' height='395'>
<img src='apple-orchard-truck-tone-mapped-using-gimp-colors-exposure.jpg' alt='apple-orchard-truck-tone-mapped-using-gimp-colors-exposure' class='bottom-margin' width='593' height='395'>
</noscript>
<span class='toggle-swap' data-fig-swap='apple-orchard-truck-tone-mapped-using-gegl-mantuik.jpg'>3. For comparison, Mantuik tone-mapping using the GEGL default settings.</span><br>
<noscript>
<img src='apple-orchard-truck-tone-mapped-using-gegl-mantuik.jpg' alt='apple-orchard-truck-tone-mapped-using-gegl-mantuik' style='margin-bottom:1rem;' width='593' height='395'>
<img src='apple-orchard-truck-tone-mapped-using-gegl-mantuik.jpg' alt='apple-orchard-truck-tone-mapped-using-gegl-mantuik' class='bottom-margin' width='593' height='395'>
</noscript>
<p>Using GIMP's floating point "Colors/Exposure" plus layer masks to add two and a half stops of positive exposure compensation to the shadows and midtones of a "bright sun" photograph of an apple orchard truck.</p>
<p><img style='float:right;' src="orchard-truck-layer-stack.jpg" alt="orchard-truck-layer-stack" width='465' height='432'>To the right is a screenshot of the layer stack that I used to tone-map the photograph of the apple orchard truck. Tone-mapping by hand gives you complete control over the resulting image. Mantuik and other "automagic" tone-mapping algorithms are CPU-intensive, unpredictable, and often produce unnatural-looking results.</p>
<p><img class='float-right' src="orchard-truck-layer-stack.jpg" alt="orchard-truck-layer-stack" width='465' height='432'>To the right is a screenshot of the layer stack that I used to tone-map the photograph of the apple orchard truck. Tone-mapping by hand gives you complete control over the resulting image. Mantuik and other "automagic" tone-mapping algorithms are CPU-intensive, unpredictable, and often produce unnatural-looking results.</p>
</figcaption>
</figure>
</li>
......@@ -190,20 +191,20 @@ Before and after doing "Colors/Auto/Stretch Contrast" on the base layer, plus th
<span class='toggle-swap' data-fig-swap='after-auto-stretch-contrast.jpg'>2. After doing "Colors/Auto/Stretch Contrast".</span><br>
<span class='toggle-swap' data-fig-swap='power-lines.jpg'>3. Final "Power lines" image.</span>
<ol style='margin-top: 1rem;'>
<ol class='top-margin-1'>
<li>This scene-referred interpolated raw file from the PhotoFlow raw processor (which provides a GIMP plug-in for easy opening of raw files) has out-of-display-range RGB channel values that will be brought back into the display range by doing "Colors/Auto/Stretch Contrast".</li>
<noscript>
<img src='before-auto-stretch-contrast.jpg' alt='before-auto-stretch-contrast' style='margin-top:-0.5rem; margin-bottom:1rem;' width='593' height='474'>
<img src='before-auto-stretch-contrast.jpg' alt='before-auto-stretch-contrast' class='top-margin-05 bottom-margin' width='593' height='474'>
</noscript>
<li>After doing "Colors/Auto/Stretch Contrast", shadows are lighter and highlights are darker because the dynamic range has been compressed to fit within the display range. This looks like an editing step in the wrong direction! but actually it's necessary.</li>
<noscript>
<img src='after-auto-stretch-contrast.jpg' alt='after-auto-stretch-contrast' style='margin-top:-0.5rem; margin-bottom:1rem;' width='593' height='474'>
<img src='after-auto-stretch-contrast.jpg' alt='after-auto-stretch-contrast' class='top-margin-05 bottom-margin' width='593' height='474'>
</noscript>
<li>Here's the final "Power lines" image after tone mapping the scene-referred interpolated raw file using the procedure described in this tutorial.</li>
<noscript>
<img src='power-lines.jpg' alt='power-lines' style='margin-top:-0.5rem; margin-bottom:1rem;' width='593' height='474'>
<img src='power-lines.jpg' alt='power-lines' class='top-margin-05 bottom-margin' width='593' height='474'>
</noscript>
</ol>
......@@ -217,9 +218,9 @@ Before and after doing "Colors/Auto/Stretch Contrast" on the base layer, plus th
<li> <b>Dispensing with "useless" shadow and highlight information:</b> Sometimes interpolated raw files of photographs of high dynamic range scenes end up with a sprinkling of highlight and shadow pixels that contains essentially no useful information. The easiest thing to do with such pixels is to use "Colors/Exposure" to set the desired black and white points, and then clip the resulting out of gamut channel information.
<ol style="list-style-type: lower-roman">
<ol class='lowerroman'>
<li><i><b>Useless highlight information:</b></i>
<p><img style='float:right;' src="histogram-specular-highlights.jpg" alt="histogram-specular-highlights" width='374' height='322'>
<p><img class='float-right' src="histogram-specular-highlights.jpg" alt="histogram-specular-highlights" width='374' height='322'>
For the "Power lines" picture shown in Figure 8 above, after doing "Color/Auto/Stretch Contrast", a measly 48 pixels occupied nearly half the tonal range (see the histogram to the right). A little investigation with GIMP's Threshold tool revealed that all 48 pixels are the peak values of specular highlights on the ceramic insulators on the power line pole in the foreground.</p>
<p>In cases where nearly half the histogram is occupied by a sprinkling of specular highlights, clipping the pixels is often the best and easiest solution. For the "Power lines" image, the 48 pixels in question carried essentially zero information. So I used "Colors/Exposure" to raise the white point, and then used "Tools/GEGL Operation/Clip RGB" to actually clip the channel information in the highlights (this time making sure the "Clip high pixel values" box was checked). </p>
......@@ -246,13 +247,13 @@ For the "Power lines" picture shown in Figure 8 above, after doing "Color/Auto/S
<span class='toggle-swap' data-fig-swap='without-bilateral-smoothing-of-mask.jpg'>Without applying bilateral smoothing to the mask, micro contrast is flattened.</span><br>
<noscript>
<img src='without-bilateral-smoothing-of-mask.jpg' alt='without-bilateral-smoothing-of-mask' style='margin-bottom: 1rem;' width='593' height='474'>
<img src='without-bilateral-smoothing-of-mask.jpg' alt='without-bilateral-smoothing-of-mask' class='bottom-margin' width='593' height='474'>
</noscript>
<span class='toggle-swap' data-fig-swap='with-bilateral-smoothing-of-mask.jpg'>After applying bilateral smoothing to the mask, micro contrast is restored.</span>
<noscript>
<img src='with-bilateral-smoothing-of-mask.jpg' alt='with-bilateral-smoothing-of-mask' style='margin-bottom: 1rem;' width='593' height='474'>
<img src='with-bilateral-smoothing-of-mask.jpg' alt='with-bilateral-smoothing-of-mask' class='bottom-margin' width='593' height='474'>
</noscript>
<p>Adding exposure compensation combined with an inverse grayscale mask does flatten micro contrast, which might or might not be desireable depending on your artistic intentions for the image. To restore micro contrast, try using an edge-respecting blur such as G'MIC's bilateral smoothing filter. GIMP G'MIC doesn't work on layer masks. A workaround is to to turn the unblurred mask into a selection, save the selection as a channel, and then drag the channel to the layer stack for blurring.</p>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment