[gimp-web/gimp-web-static] Started porting ContrastMask tutorial
- From: Pat David <patdavid src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gimp-web/gimp-web-static] Started porting ContrastMask tutorial
- Date: Tue, 22 Sep 2015 21:57:03 +0000 (UTC)
commit 1e765fb74916e144904436f96e8385d5c2d50c53
Author: Pat David <patdavid gmail com>
Date: Tue Sep 22 16:56:55 2015 -0500
Started porting ContrastMask tutorial
content/js/push-menu.js | 50 ++++++++
content/tutorials/ContrastMask/after.jpg | Bin 0 -> 49269 bytes
content/tutorials/ContrastMask/before.jpg | Bin 0 -> 58292 bytes
content/tutorials/ContrastMask/contrastdialog.jpg | Bin 0 -> 11747 bytes
content/tutorials/ContrastMask/editlayerattr.jpg | Bin 0 -> 6825 bytes
content/tutorials/ContrastMask/histogram-after.jpg | Bin 0 -> 16222 bytes
.../tutorials/ContrastMask/histogram-before.jpg | Bin 0 -> 15518 bytes
.../histogram-typcontrastreduction.jpg | Bin 0 -> 17907 bytes
content/tutorials/ContrastMask/image2.jpg | Bin 0 -> 40072 bytes
content/tutorials/ContrastMask/image3.jpg | Bin 0 -> 39863 bytes
content/tutorials/ContrastMask/image4.jpg | Bin 0 -> 52895 bytes
content/tutorials/ContrastMask/image5.jpg | Bin 0 -> 54983 bytes
.../ContrastMask/imagewtypcontrastreduction.jpg | Bin 0 -> 49810 bytes
content/tutorials/ContrastMask/index.md | 122 ++++++++++++++++++++
content/tutorials/ContrastMask/layers2.jpg | Bin 0 -> 24532 bytes
content/tutorials/ContrastMask/layers3.jpg | Bin 0 -> 24269 bytes
content/tutorials/ContrastMask/layers4.jpg | Bin 0 -> 23951 bytes
content/tutorials/ContrastMask/layers5.jpg | Bin 0 -> 22476 bytes
content/tutorials/ContrastMask/nd-filter-1.jpg | Bin 0 -> 40959 bytes
content/tutorials/ContrastMask/nd-original-1.jpg | Bin 0 -> 37878 bytes
content/tutorials/ContrastMask/original.jpg | Bin 0 -> 51079 bytes
content/tutorials/ContrastMask/tree.jpg | Bin 0 -> 61414 bytes
content/tutorials/ContrastMask/treewcmask.jpg | Bin 0 -> 67713 bytes
content/tutorials/ContrastMask/utsunset-wcmask.jpg | Bin 0 -> 41628 bytes
content/tutorials/ContrastMask/utsunset-whmask.jpg | Bin 0 -> 41438 bytes
25 files changed, 172 insertions(+), 0 deletions(-)
---
diff --git a/content/js/push-menu.js b/content/js/push-menu.js
index 9196713..39068c3 100644
--- a/content/js/push-menu.js
+++ b/content/js/push-menu.js
@@ -30,3 +30,53 @@ var toggle = function(e){
navel.addEventListener("touchstart", toggle, false);
navel.addEventListener("click", toggle, false);
+
+
+/* Scroll detection for showing/hiding navigation strip
+ * on mobile
+ */
+
+var didScroll = false;
+var navbar = document.getElementById('navstrip');
+var navHeight = navbar.offsetHeight;
+var delta = 10;
+var lastScrollTop = 0;
+
+window.onscroll = doScroll;
+
+function doScroll(){
+ /*
+ if( window.innerWidth >= 1024 ){
+ }else{
+ didScroll = true;
+ }
+ */
+ if( window.innerWidth < 1024) didScroll = true;
+}
+
+setInterval( function() {
+ if( didScroll ) {
+ didScroll = false;
+ var st = window.pageYOffset;
+
+ if(Math.abs(lastScrollTop - st) <= delta)
+ return;
+
+ // If scroll past navbar, add class .nav-up
+ if ( st > lastScrollTop ){
+ //scroll down
+ navbar.className = navbar.className.replace('nav-down','nav-up');
+ //b.backgroundPositionY = parseInt( b.backgroundPositionY ) + 4 + '%';
+ }else{
+ //scroll up?
+ navbar.className = navbar.className.replace('nav-up','nav-down');
+ //b.backgroundPositionY = parseInt( b.backgroundPositionY ) - 4 + '%';
+ }
+ lastScrollTop = st;
+ }
+}, 250);
+
+
+
+
+
diff --git a/content/tutorials/ContrastMask/after.jpg b/content/tutorials/ContrastMask/after.jpg
new file mode 100644
index 0000000..f42bb22
Binary files /dev/null and b/content/tutorials/ContrastMask/after.jpg differ
diff --git a/content/tutorials/ContrastMask/before.jpg b/content/tutorials/ContrastMask/before.jpg
new file mode 100644
index 0000000..0713fee
Binary files /dev/null and b/content/tutorials/ContrastMask/before.jpg differ
diff --git a/content/tutorials/ContrastMask/contrastdialog.jpg
b/content/tutorials/ContrastMask/contrastdialog.jpg
new file mode 100644
index 0000000..16781f8
Binary files /dev/null and b/content/tutorials/ContrastMask/contrastdialog.jpg differ
diff --git a/content/tutorials/ContrastMask/editlayerattr.jpg
b/content/tutorials/ContrastMask/editlayerattr.jpg
new file mode 100644
index 0000000..8956e81
Binary files /dev/null and b/content/tutorials/ContrastMask/editlayerattr.jpg differ
diff --git a/content/tutorials/ContrastMask/histogram-after.jpg
b/content/tutorials/ContrastMask/histogram-after.jpg
new file mode 100644
index 0000000..955048c
Binary files /dev/null and b/content/tutorials/ContrastMask/histogram-after.jpg differ
diff --git a/content/tutorials/ContrastMask/histogram-before.jpg
b/content/tutorials/ContrastMask/histogram-before.jpg
new file mode 100644
index 0000000..3eeb116
Binary files /dev/null and b/content/tutorials/ContrastMask/histogram-before.jpg differ
diff --git a/content/tutorials/ContrastMask/histogram-typcontrastreduction.jpg
b/content/tutorials/ContrastMask/histogram-typcontrastreduction.jpg
new file mode 100644
index 0000000..5857c75
Binary files /dev/null and b/content/tutorials/ContrastMask/histogram-typcontrastreduction.jpg differ
diff --git a/content/tutorials/ContrastMask/image2.jpg b/content/tutorials/ContrastMask/image2.jpg
new file mode 100644
index 0000000..2a98e6e
Binary files /dev/null and b/content/tutorials/ContrastMask/image2.jpg differ
diff --git a/content/tutorials/ContrastMask/image3.jpg b/content/tutorials/ContrastMask/image3.jpg
new file mode 100644
index 0000000..1c3b312
Binary files /dev/null and b/content/tutorials/ContrastMask/image3.jpg differ
diff --git a/content/tutorials/ContrastMask/image4.jpg b/content/tutorials/ContrastMask/image4.jpg
new file mode 100644
index 0000000..c428ea1
Binary files /dev/null and b/content/tutorials/ContrastMask/image4.jpg differ
diff --git a/content/tutorials/ContrastMask/image5.jpg b/content/tutorials/ContrastMask/image5.jpg
new file mode 100644
index 0000000..fae17bc
Binary files /dev/null and b/content/tutorials/ContrastMask/image5.jpg differ
diff --git a/content/tutorials/ContrastMask/imagewtypcontrastreduction.jpg
b/content/tutorials/ContrastMask/imagewtypcontrastreduction.jpg
new file mode 100644
index 0000000..480b34d
Binary files /dev/null and b/content/tutorials/ContrastMask/imagewtypcontrastreduction.jpg differ
diff --git a/content/tutorials/ContrastMask/index.md b/content/tutorials/ContrastMask/index.md
new file mode 100644
index 0000000..7b188a5
--- /dev/null
+++ b/content/tutorials/ContrastMask/index.md
@@ -0,0 +1,122 @@
+Title: Creating a Contrast Mask
+Date: 2002
+Modified: 2015-08-28T15:01:29-05:00
+Author: Marco (LM) Lamberto
+
+
+Text and images Copyright (C) 2002 [Eric R. Jeschke](mailto:ericNOSPAM redskiesatnight com) and may not be
used without permission of the author.
+
+## Intention
+
+ 
+
+In this tutorial I'll show you how to do create a contrast mask for your image in GIMP. A contrast mask
allows you to reduce overall contrast, simultaneously bringing out more detail in highlights and shadows.
This may be necessary to obtain a decent print, because prints on paper do not have as much dynamic range as
a monitor; if you don't control the contrast, detail in the highlights may blow out and detail in the shadows
can block up and become muddy or even black. You can of course modify your image directly in GIMP to decrease
contrast, but the advantage of the contrast mask technique is that it allows you much more precise control,
and gives better results.
+
+The basic technique is to create a layer above the image that contains a B&W negative of the image. The
images are combined in overlay mode: dark parts with light, light parts with dark. All the while your
original image remains blissfully unchanged on its layer.
+
+Giving credit where credit is due: I did not come up with this method. I adapted it for GIMP from a
Photoshop tutorial on the [luminous-landscape.com web site](http://www.luminous-landscape.com/) (great
photography web site BTW; I recommend it).
+
+The contrast mask technique does some similar things for the exposure as the digital split ND filter and the
blended exposures techniques. If you feel your image has exposure problems you might want to consider those
techniques as well. Each one has different strengths. Occasionally this technique gives unacceptable color
shifts in certain images. Sometimes it is just the ticket. Experiment to see if it can work for your
particular image.
+
+## The Procedure
+
+
+
+Here is the original example image, loaded into GIMP. The red leaves are a little too dark to make out the
detail; if printed, the result would be pretty dark and muddy. At the same time, the yellow flowers have a
couple of specular highlights that would probably blow out the detail if printed.
+
+We want to brighten the dark areas a little and darken the light areas a little. In other words, reduce
contrast.
+
+## Step 1
+
+
+
+Open the Layers dialog. Right-click on the Background layer and select Duplicate (there is also a button for
this in the bottom button bar of the Layers dialog.
+
+## Step 2
+
+ 
+
+Now double-click on the duplicate layer and rename the new layer "Contrast Mask". (This step is not strictly
necessary, but it is helpful to prevent confusion about what is on each layer, especially if you add some
additional layers for other editing purposes).
+
+## Step 3
+
+
+
+Select the Contrast Mask layer. Go to the image window and right-click, selecting <span
class="filter"><Image> Image -> Colors -> Desaturate</span>. The image should look B&W.
+
+## Step 4
+
+
+
+Right-click and select <span class="filter"><Image> Image -> Colors -> Invert</span>. You now have a B&W
negative image of your original. We're going to combine this with the original (light with dark, dark with
light) to reduce the overall contrast.
+
+## Step 5
+
+ 
+
+Go back to the Layers dialog and in the "Mode" drop-down box, select "Overlay". The result may look better
in terms of contrast, but degraded in terms of overall sharpness.
+
+Don't worry, we're not done yet.
+
+## Step 6
+
+ 
+
+Go back to the image window and right click, selecting <span class="filter"><Image> Filters -> Blur ->
Gaussian Blur</span>. You will need to experiment to find the best value, but typically a value between 10
and 30 will do nicely. After blurring the contrast mask the overall image should now look much sharper.
+
+Click on the "eye" next to the Contrast Mask layer in the Layers dialog to rapidly compare the image with
and without the mask. Similarly, turn off the Background layer if you want to view the mask to do further
work on it.
+
+The image at top left is the original, the top right is with the contrast mask.
+
+## Step 7
+
+ 
+
+It is informative to see how this technique compares to the conventional technique of using the contrast
dialog to adjust contrast. I've tried to adjust the contrast to have the leaves appear about the same. I
think the image with the contrast mask has a lot more pop! This one looks kind of flat by comparison.
+
+## Step 8
+
+ 
+
+To see why this is so, compare the histograms of the images. The top one is for the original image, the
middle is for the image with the contrast mask, and the bottom one is for the original image with the
conventional contrast adjustment.
+
+Note how the typical contrast adjustment has lost a lot of values at both ends, but the mask technique
basically preserved the entire scale.
+
+## Step 9
+
+
+
+You'll have to flatten the image if you are saving it to a typical image format like TIFF or JPEG (but not
if you are saving to GIMP's native XCF format). To do that, right-click on the image and select <span
class="filter"><Image> Layers -> Flatten Image</span>.
+
+## Fine Tuning
+
+Now that your contrast mask is created, it's time to fine tune it. Here are some things you can do:
+
+* Use the "Opacity" slider in the Layers dialog to decrease the effect of the contrast mask overall.
+* Apply Levels or Curves to the contrast mask to open up the shadows or reduce the highlights further.
+* Apply the dodge and burn tools to the contrast mask.
+* Apply a layer mask to the contrast mask and use it to select only parts of the contrast mask; e.g. if
you only want the contrast mask to apply to certain areas of the image (see my example of this below).
+
+## Tips
+
+* See [this article](http://www.vinberg.nu/photography/articles/contrast_masking.htm) for some informative
tests on the effects of the Gaussian Blur step on the contrast mask.
+
+## Other Examples
+
+ 
+
+With a contrast mask as described above. Notice how the sky has recovered some blue, and the detail visible
under the tree!
+
+ 
+
+Here's an example of how this technique overlaps with the digital split ND filter approach. Which do you
prefer?
+
+ 
+
+With a digital split ND filter. (left image)
+With a contrast mask as described above, plus a layer mask with a gradient fill, so the contrast mask is
mostly applied to the area below the cliffs. (right image)
+
+Note particularly the change in the color of the cliffs and the light part of the sky just above the cliffs,
in the image using the full contrast mask (upper right). This shows how a contrast mask affects all parts of
the image, unless you selectively disable part of the mask, as I did in the lower right. Note also that with
the split nd filter (lower left) I was able to brighten the foreground more; I could apply a general levels
tweak to the contrast mask to achieve the same thing, but it seems like more work. This illustrates a general
point for me: the digital split ND filter technique is the easier approach when you're already satisfied with
half of the image, whereas the contrast mask is a better starting point if the overall image needs contrast
reduction on both the dark and light sides.
+
+The original tutorial used to appear on
[gimpguru](https://web.archive.org/web/20141019034305/http://gimpguru.org/tutorials/contrastmask/).
+
diff --git a/content/tutorials/ContrastMask/layers2.jpg b/content/tutorials/ContrastMask/layers2.jpg
new file mode 100644
index 0000000..17d3fdf
Binary files /dev/null and b/content/tutorials/ContrastMask/layers2.jpg differ
diff --git a/content/tutorials/ContrastMask/layers3.jpg b/content/tutorials/ContrastMask/layers3.jpg
new file mode 100644
index 0000000..c9a0b8f
Binary files /dev/null and b/content/tutorials/ContrastMask/layers3.jpg differ
diff --git a/content/tutorials/ContrastMask/layers4.jpg b/content/tutorials/ContrastMask/layers4.jpg
new file mode 100644
index 0000000..19e8ec1
Binary files /dev/null and b/content/tutorials/ContrastMask/layers4.jpg differ
diff --git a/content/tutorials/ContrastMask/layers5.jpg b/content/tutorials/ContrastMask/layers5.jpg
new file mode 100644
index 0000000..831a8de
Binary files /dev/null and b/content/tutorials/ContrastMask/layers5.jpg differ
diff --git a/content/tutorials/ContrastMask/nd-filter-1.jpg b/content/tutorials/ContrastMask/nd-filter-1.jpg
new file mode 100644
index 0000000..fdd212f
Binary files /dev/null and b/content/tutorials/ContrastMask/nd-filter-1.jpg differ
diff --git a/content/tutorials/ContrastMask/nd-original-1.jpg
b/content/tutorials/ContrastMask/nd-original-1.jpg
new file mode 100644
index 0000000..f1a1d56
Binary files /dev/null and b/content/tutorials/ContrastMask/nd-original-1.jpg differ
diff --git a/content/tutorials/ContrastMask/original.jpg b/content/tutorials/ContrastMask/original.jpg
new file mode 100644
index 0000000..aa3e656
Binary files /dev/null and b/content/tutorials/ContrastMask/original.jpg differ
diff --git a/content/tutorials/ContrastMask/tree.jpg b/content/tutorials/ContrastMask/tree.jpg
new file mode 100644
index 0000000..8d56db4
Binary files /dev/null and b/content/tutorials/ContrastMask/tree.jpg differ
diff --git a/content/tutorials/ContrastMask/treewcmask.jpg b/content/tutorials/ContrastMask/treewcmask.jpg
new file mode 100644
index 0000000..42b26ab
Binary files /dev/null and b/content/tutorials/ContrastMask/treewcmask.jpg differ
diff --git a/content/tutorials/ContrastMask/utsunset-wcmask.jpg
b/content/tutorials/ContrastMask/utsunset-wcmask.jpg
new file mode 100644
index 0000000..6666d1d
Binary files /dev/null and b/content/tutorials/ContrastMask/utsunset-wcmask.jpg differ
diff --git a/content/tutorials/ContrastMask/utsunset-whmask.jpg
b/content/tutorials/ContrastMask/utsunset-whmask.jpg
new file mode 100644
index 0000000..808ce76
Binary files /dev/null and b/content/tutorials/ContrastMask/utsunset-whmask.jpg differ
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
