[gimp-help-2] Re-format Curves tool examples
- From: Ulf-D. Ehlert <ulfehlert src gnome org>
- To: svn-commits-list gnome org
- Subject: [gimp-help-2] Re-format Curves tool examples
- Date: Thu, 23 Apr 2009 15:31:46 -0400 (EDT)
commit ef9860867051cdfa59ba024eb4270079991aa5ba
Author: Ulf-D. Ehlert <ulfehlert svn gnome org>
Date: Thu Apr 23 18:30:04 2009 +0200
Re-format Curves tool examples
Use more sections (replacing variablelist),
enhance CSS stylesheets for <simplesect> and <h6>.
---
ChangeLog | 10 +
src/toolbox/tool-curves.xml | 397 ++++++++++++++++++++------------------
stylesheets/gimp-help-screen.css | 41 +++-
stylesheets/gimp22.css | 31 +++-
4 files changed, 276 insertions(+), 203 deletions(-)
diff --git a/ChangeLog b/ChangeLog
index d5344b6..94ec20f 100644
--- a/ChangeLog
+++ b/ChangeLog
@@ -1,3 +1,13 @@
+2009-04-23 Ulf-D. Ehlert <ulfehlert svn gnome org>
+
+ Re-format Curves tool examples
+
+ * src/toolbox/tool-curves.xml: Use more sections
+ (replacing variablelist)
+ * stylesheets/gimp-help-screen.css
+ * stylesheets/gimp22.css: enhance CSS stylesheets
+ for <simplesect> and <h6>.
+
2009-04-21 Ulf-D. Ehlert <ulfehlert svn gnome org>
Replace ".svn" with ".git" for some 'make' commands
diff --git a/src/toolbox/tool-curves.xml b/src/toolbox/tool-curves.xml
index 677767e..86bbb79 100644
--- a/src/toolbox/tool-curves.xml
+++ b/src/toolbox/tool-curves.xml
@@ -1,5 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE sect2 PUBLIC "-//OASIS//DTD DocBook XML V4.3//EN" "http://www.docbook.org/xml/4.3/docbookx.dtd";>
+<!DOCTYPE sect2 PUBLIC "-//OASIS//DTD DocBook XML V4.3//EN"
+ "http://www.docbook.org/xml/4.3/docbookx.dtd";>
<!-- section history:
2009-03-11 j.h: revised for v2.6. Added Presets
2008-02-03 ude: updated 'de'
@@ -13,6 +14,7 @@
-->
<sect2 id="gimp-tool-curves">
<title>Curves</title>
+
<indexterm>
<primary>Tools</primary>
<secondary>Curves</secondary>
@@ -20,6 +22,7 @@
<indexterm>
<primary>Curves</primary>
</indexterm>
+
<para>
The Curves tool is the most sophisticated tool for changing the color,
brightness, contrast or transparency of the active layer or a selection.
@@ -27,9 +30,10 @@
Curves tool allows you to work on any tonal range. It works on RGB
images.
</para>
+
<sect3>
<title>Activating the Tool</title>
- <para>You can get to this tools in several ways :</para>
+ <para>You can get to this tool in several ways:</para>
<itemizedlist>
<listitem>
<para>
@@ -115,10 +119,8 @@
<varlistentry>
<term>Channel</term>
<listitem>
- <para>
- There are five options:
- </para>
<variablelist>
+ <para>There are five options:</para>
<varlistentry>
<term>Value</term>
<listitem>
@@ -180,13 +182,8 @@
<listitem>
<itemizedlist>
<listitem>
- <para><emphasis>The vertical gradient</emphasis>: it represents the
- the destination, the output tonal scale. It ranges from 0
- (black) to 255 (white), from Shadows to Highlights.
- </para>
- </listitem>
- <listitem>
- <para><emphasis>The horizontal gradient</emphasis>: it represents
+ <para>
+ <emphasis>The horizontal gradient</emphasis>: it represents
the input tonal scale. It, too, ranges from 0 (black) to 255
(white), from Shadows to Highlights. When you
adjust the curve, it splits up into two parts; the upper part
@@ -195,7 +192,15 @@
</para>
</listitem>
<listitem>
- <para><emphasis>The chart</emphasis>: the curve is drawn on a grid
+ <para>
+ <emphasis>The vertical gradient</emphasis>: it represents the
+ the destination, the output tonal scale. It ranges from 0
+ (black) to 255 (white), from Shadows to Highlights.
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ <emphasis>The chart</emphasis>: the curve is drawn on a grid
and goes from the bottom left corner to the top right corner.
The pointer x/y position is permanently displayed in the top
left part of the grid. By default, this curve is straight,
@@ -253,27 +258,30 @@
</listitem>
</varlistentry>
<varlistentry>
- <term>All Channels</term>
- <listitem>
- <para><guilabel>Open</guilabel>: This button allows you to select
- a file holding curve settings.
- </para>
- <para><guilabel>Save</guilabel>: Allows you to save any curves
- you have set to a file that can be loaded later.
- </para>
- </listitem>
- </varlistentry>
- <varlistentry>
<term>Curve type</term>
<listitem>
- <para><guilabel>Smooth</guilabel>: This the default mode. It
- constrains the curve type to a smooth line with tension. It
- provides a more realistic render than the following.
- </para>
- <para><guilabel>Free Hand</guilabel>: With this mode, you can draw
- a broken line that you can smooth by clicking the
- <guibutton>Curve Type</guibutton> button again.
- </para>
+ <variablelist>
+ <varlistentry>
+ <term>Smooth</term>
+ <listitem>
+ <para>
+ This the default mode. It constrains the curve type to a
+ smooth line with tension. It provides a more realistic
+ render than the following.
+ </para>
+ </listitem>
+ </varlistentry>
+ <varlistentry>
+ <term>Free Hand</term>
+ <listitem>
+ <para>
+ With this mode, you can draw a broken line that you can
+ smooth by clicking the <guibutton>Curve Type</guibutton>
+ button again.
+ </para>
+ </listitem>
+ </varlistentry>
+ </variablelist>
</listitem>
</varlistentry>
<varlistentry>
@@ -287,9 +295,7 @@
</varlistentry>
</variablelist>
<variablelist>
- <title>
- <phrase>Tool Options dialog</phrase>
- </title>
+ <title>Tool Options dialog</title>
<para>
Although this tool is not present in Tool box, nevertheless it has a
Tool Option Dialog under the Toolbox. These options are described
@@ -308,10 +314,10 @@
<term>Sample Average</term>
<listitem>
<para>
- This slider sets the <quote>radius</quote> of the color-picking
- area. This area appears as a more or less enlarged square
- when you maintain the click on a pixel. Here, the eye-dropper is
- used to locate a pixel: radius = 1 seems the best.
+ This slider sets the <quote>radius</quote> of the color-picking
+ area. This area appears as a more or less enlarged square when you
+ maintain the click on a pixel. Here, the eye-dropper is used to
+ locate a pixel: radius = 1 seems the best.
</para>
</listitem>
</varlistentry>
@@ -320,159 +326,176 @@
<sect3>
<title>Using the <quote>Curves</quote> tool</title>
- <variablelist>
- <varlistentry>
- <term>Summary and basic shapes</term>
- <listitem>
- <para>
- We create anchors and segments on the curve and we move them to
- shape the curve. This curve maps <quote>input</quote> tones of
- the active layer or selection to <quote>output</quote> tones.
- </para>
- <figure>
- <title>How the Curves tool works</title>
- <mediaobject>
- <imageobject>
- <imagedata fileref="images/toolbox/curves-work.png" format="PNG"/>
- </imageobject>
- <caption>
- <para>
- Moving the anchor of a pixel upwards makes this pixel
- brighter.
- </para>
- </caption>
- </mediaobject>
- </figure>
- <figure>
- <title>Making the curve more horizontal</title>
- <mediaobject>
- <imageobject>
- <imagedata fileref="images/toolbox/curves-horiz-1.png" format="PNG"/>
- </imageobject>
- <caption>
- <para>
- Making the curve more horizontal forces all the input tonal
- range to occupy a shrunk output tonal range.
- </para>
- </caption>
- </mediaobject>
- <mediaobject>
- <imageobject>
- <imagedata fileref="images/toolbox/curves-horiz-2.png" format="PNG"/>
- </imageobject>
- <caption>
- <para>
- The histogram shows the compression of pixels into the
- output range. Darkest and brightest pixels disappeared:
- contrast decreases.
- </para>
- </caption>
- </mediaobject>
- </figure>
- <figure>
- <title>Making the curve more vertical</title>
- <mediaobject>
- <imageobject>
- <imagedata fileref="images/toolbox/curves-vert-1.png" format="PNG"/>
- </imageobject>
- <caption>
- <para>
- Moving the upper end point to the left and the lower end
- point to the right is the same as moving the white slider to
- the left and the black slider to the right in the Levels
- tool: all pixels whose value is more than the white point
- (the flat part of the curve) are made white (more colored /
- more opaque according to the selected channel). All pixels
- whose value is less than the black point (the lower
- flattened curve) are made black (black / completely
- transparent).
- Pixels corresponding to points of the curve that have moved
- up are made lighter. Pixels corresponding to points of the
- curve that have moved down are made darker (green arrows).
- All these pixels will be extended to the whole output tonal
- range.
- </para>
- </caption>
- </mediaobject>
- <mediaobject>
- <imageobject>
- <imagedata fileref="images/toolbox/curves-vert-2.png" format="PNG"/>
- </imageobject>
- <caption>
- <para>
- The histogram shows the extension of values, from black (0)
- to White (255): contrast is increased. Since the Value
- channel is selected, changes affect all color channels and
- colors increase.
- </para>
- </caption>
- </mediaobject>
- </figure>
- </listitem>
- </varlistentry>
- <varlistentry>
- <term>Practical cases</term>
- <listitem>
- <figure>
- <title>Invert colors</title>
- <mediaobject>
- <imageobject>
- <imagedata fileref="images/toolbox/curves-invert.png" format="PNG"/>
- </imageobject>
- <caption>
- <para>
- Black is made White (fully colored / fully opaque). White
- is made black (black, fully transparent). All pixels adopt
- the complementary color. Why that? Because subtracting
- the channel values from 255 gives the complementary color. For
- example: 19;197;248 a sky blue gives 255-19; 255-197;
- 255-248 = 236;58;7, a bright red.
- </para>
- </caption>
- </mediaobject>
- </figure>
- <figure>
- <title>Enhance contrast</title>
- <mediaobject>
- <imageobject>
- <imagedata fileref="images/toolbox/curves-H-S.png" format="PNG"/>
- </imageobject>
- <caption>
- <para>
- Contrast is increased in mid tones because the curve is
- steeper there. Highlights and Shadows are increased but
- contrast is slightly less in these areas because the curve
- is flatter.
- </para>
- </caption>
- </mediaobject>
- </figure>
- <figure>
- <title>Working on color channels</title>
- <mediaobject>
- <imageobject>
- <imagedata fileref="images/toolbox/curves-lighten-1.png" format="PNG"/>
- </imageobject>
- <caption>
- <para>
- For every channel, we moved the white point horizontally to
- the left, to the first Highlights. This lightens Highlights
- up. Then we shaped the curve to lighten Mid tons and
- Shadows while keeping black.
- </para>
- </caption>
- </mediaobject>
- </figure>
+
+ <sect4>
+ <title>Summary and basic shapes</title>
+
+ <para>
+ We create anchors and segments on the curve and we move them to
+ shape the curve. This curve maps <quote>input</quote> tones of
+ the active layer or selection to <quote>output</quote> tones.
+ </para>
+
+ <simplesect role="NotInToc">
+ <title>How the Curves tool works</title>
+
+ <para>
+ Moving the anchor of a pixel upwards makes this pixel brighter.
+ </para>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/toolbox/curves-work.png" format="PNG"/>
+ </imageobject>
+ <caption>
+ <para lang="en">Moving the anchor upwards</para>
+ </caption>
+ </mediaobject>
+ </simplesect>
+
+ <simplesect role="NotInToc">
+ <title>Making the curve more horizontal</title>
+
+ <para>
+ Making the curve more horizontal forces all the input tonal range to
+ occupy a shrunk output tonal range.
+ </para>
+ <para>
+ The histogram shows the compression of pixels into the output range.
+ Darkest and brightest pixels disappeared: contrast decreases.
+ </para>
+ <figure>
+ <title>Making the curve more horizontal</title>
<mediaobject>
<imageobject>
- <imagedata fileref="images/toolbox/curves-lighten-2.png" format="PNG"/>
+ <imagedata fileref="images/toolbox/curves-horiz-1.png" format="PNG"/>
</imageobject>
<caption>
- <para>The original image and the result.</para>
+ <para>Make the curve more horizontal</para>
</caption>
</mediaobject>
- </listitem>
- </varlistentry>
- </variablelist>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/toolbox/curves-horiz-2.png" format="PNG"/>
+ </imageobject>
+ <caption>
+ <para>The resulting histogram</para>
+ </caption>
+ </mediaobject>
+ </figure>
+ </simplesect>
+
+ <simplesect role="NotInToc">
+ <title>Making the curve more vertical</title>
+
+ <para>
+ Moving the upper end point to the left and the lower end point to
+ the right is the same as moving the white slider to the left and the
+ black slider to the right in the Levels tool: all pixels whose value
+ is more than the white point (the flat part of the curve) are made
+ white (more colored / more opaque according to the selected
+ channel). All pixels whose value is less than the black point (the
+ lower flattened curve) are made black (black / completely
+ transparent). Pixels corresponding to points of the curve that have
+ moved up are made lighter. Pixels corresponding to points of the
+ curve that have moved down are made darker (green arrows). All
+ these pixels will be extended to the whole output tonal range.
+ </para>
+ <para>
+ The histogram shows the extension of values, from black (0) to White
+ (255): contrast is increased. Since the Value channel is selected,
+ changes affect all color channels and colors increase.
+ </para>
+ <figure>
+ <title>Making the curve more vertical</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="PNG"
+ fileref="images/toolbox/curves-vert-1.png"/>
+ </imageobject>
+ <caption>
+ <para>Make the curve more vertical</para>
+ </caption>
+ </mediaobject>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="PNG"
+ fileref="images/toolbox/curves-vert-2.png"/>
+ </imageobject>
+ <caption>
+ <para>Result and its histogram</para>
+ </caption>
+ </mediaobject>
+ </figure>
+ </simplesect>
+ </sect4>
+
+ <sect4>
+ <title>Practical cases</title>
+
+ <simplesect role="NotInToc">
+ <title>Invert colors</title>
+
+ <mediaobject>
+ <imageobject>
+ <imagedata format="PNG"
+ fileref="images/toolbox/curves-invert.png"/>
+ </imageobject>
+ <caption>
+ <para>Inverted curve</para>
+ </caption>
+ </mediaobject>
+ <para>
+ Black is made White (fully colored / fully opaque). White is made
+ black (black, fully transparent). All pixels adopt the complementary
+ color. Why that? Because subtracting the channel values from 255
+ gives the complementary color. For example: 19;197;248 a sky blue
+ gives 255-19; 255-197; 255-248 = 236;58;7, a bright red.
+ </para>
+ </simplesect>
+
+ <simplesect role="NotInToc">
+ <title>Enhance contrast</title>
+
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/toolbox/curves-H-S.png" format="PNG"/>
+ </imageobject>
+ <caption>
+ <para>Contrast enhanced</para>
+ </caption>
+ </mediaobject>
+ <para>
+ Contrast is increased in mid tones because the curve is steeper
+ there. Highlights and Shadows are increased but contrast is slightly
+ less in these areas because the curve is flatter.
+ </para>
+ </simplesect>
+
+ <simplesect role="NotInToc">
+ <title>Working on color channels</title>
+
+ <mediaobject>
+ <imageobject>
+ <imagedata format="PNG"
+ fileref="images/toolbox/curves-lighten-1.png"/>
+ </imageobject>
+ </mediaobject>
+ <para>
+ For every channel, we moved the white point horizontally to the
+ left, to the first Highlights. This lightens Highlights up. Then we
+ shaped the curve to lighten Mid tons and Shadows while keeping
+ black.
+ </para>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="PNG"
+ fileref="images/toolbox/curves-lighten-2.png"/>
+ </imageobject>
+ <caption>
+ <para>The original image and the result</para>
+ </caption>
+ </mediaobject>
+ </simplesect>
+ </sect4>
</sect3>
</sect2>
diff --git a/stylesheets/gimp-help-screen.css b/stylesheets/gimp-help-screen.css
index 315db02..ecfbc57 100644
--- a/stylesheets/gimp-help-screen.css
+++ b/stylesheets/gimp-help-screen.css
@@ -34,7 +34,7 @@ body {
margin-bottom: 2em;
padding: 0 1em;
}
-h1,h2,h3,h4,h5,h6,h7 {
+h1,h2,h3,h4,h5,h6 {
clear: both;
}
h1 {
@@ -86,10 +86,10 @@ h5 {
border-bottom: 1px solid black;
}
h6 {
- margin: 1em 0 0em 0em;
- padding: 1em 0 0em 0em;
- font-size: 80%;
- font-weight: normal;
+ margin: 1.5em 0 1.0em 0em;
+ padding: 0;
+ font-size: 105%;
+ font-weight: bolder;
}
.authorgroup {
float: right;
@@ -186,7 +186,8 @@ img {
.mediaobject {
width: 600px;
}
-/* this class must be dimensioned to allow a children positioning in the relevant containing block */
+/* this class must be dimensioned to allow a children positioning */
+/* in the relevant containing block */
.mediaobject img,.mediaobjectco img {
max-width: 36em;
}
@@ -254,11 +255,28 @@ div.informalfigure p.title b,div.informalexample p.title b,div.informaltable p.t
div.informalequation {
padding-left: 4em;
}
+/* TODO/CHECK: padding twice, is this correct/intended? */
.mediaobject .caption,.mediaobject .caption p {
text-align: center;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
+.simplesect .mediaobject {
+ padding-top: 0.5em;
+ padding-bottom: 1em;
+}
+.simplesect .mediaobject .caption {
+ padding-top: 0;
+ padding-bottom: 0;
+}
+.simplesect .mediaobject .caption p {
+ padding-top: 1em;
+ padding-bottom: 0;
+}
+/* avoid a large gap */
+.simplesect .mediaobject + p {
+ margin-top: 0;
+}
.epigraph {
padding-left: 55%;
margin-bottom: 1em;
@@ -484,9 +502,15 @@ a:hover,a:visited {
color: #fcaf3e;
background: transparent;
}
-h1,h2,h3,h4,h5,h6,h7,h8 {
+h1,h2,h3,h4,h5,h6 {
background-color: transparent;
}
+h1,h2,h3,h4,h5,div.toc {
+ color: #999
+}
+h6 {
+ color: #99b;
+}
hr {
border-color: #eeeeec;
}
@@ -623,9 +647,6 @@ background-attachment: fixed;
}
*/
-h1,h2,h3,h4,h5,h6,h7,div.toc {
- color: #999
-}
div.preface .titlepage .title,div.colophon .title,div.chapter .titlepage .title
{
background-image: url("images/title-bg.png");
diff --git a/stylesheets/gimp22.css b/stylesheets/gimp22.css
index 1a868f0..fc1e2e9 100644
--- a/stylesheets/gimp22.css
+++ b/stylesheets/gimp22.css
@@ -24,7 +24,7 @@
margin: 0 auto;
margin-bottom: 2em;
}
- h1,h2,h3,h4,h5,h6,h7 {
+ h1,h2,h3,h4,h5,h6 {
clear: both;
}
h1 {
@@ -76,10 +76,10 @@
border-bottom: 1px solid black;
}
h6 {
- margin: 1em 0em 0em 0em;
- padding: 1em 0em 0em 0em;
- font-size: 80%;
- font-weight: normal;
+ margin: 1.5em 0 1.0em 0em;
+ padding: 0;
+ font-size: 105%;
+ font-weight: bolder;
}
.authorgroup {
float: right;
@@ -247,6 +247,22 @@
padding-top: 0.5em;
padding-bottom: 0.5em;
}
+ .simplesect .mediaobject {
+ padding-top: 0.5em;
+ padding-bottom: 1em;
+ }
+ .simplesect .mediaobject .caption {
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+ .simplesect .mediaobject .caption p {
+ padding-top: 1em;
+ padding-bottom: 0em;
+ }
+ /* avoid a large gap */
+ .simplesect .mediaobject + p {
+ margin-top: 0;
+ }
.epigraph {
padding-left: 55%;
margin-bottom: 1em;
@@ -449,9 +465,12 @@
background: transparent;
color: darkviolet;
}
- h1,h2,h3,h4,h5,h6,h7,h8 {
+ h1,h2,h3,h4,h5,h6 {
background-color: transparent;
}
+ h6 {
+ color: #044;
+ }
hr {
border-color: #aaa;
}
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
