[gimp-web] Minor fixes for validation errors.
- From: Pat David <patdavid src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gimp-web] Minor fixes for validation errors.
- Date: Fri, 28 Feb 2014 19:59:11 +0000 (UTC)
commit 4dd6ea2f3fe9ea979ec3c05f29705ab935830b47
Author: Pat David <patdavid src gnome org>
Date: Fri Feb 28 13:57:21 2014 -0600
Minor fixes for validation errors.
Signed-off-by: Pat David <patdavid src gnome org>
tutorials/Floating_Logo/index.htrw | 48 +++++++++++-----------
tutorials/Luminosity_Masks/index.htrw | 72 ++++++++++++++++----------------
2 files changed, 60 insertions(+), 60 deletions(-)
---
diff --git a/tutorials/Floating_Logo/index.htrw b/tutorials/Floating_Logo/index.htrw
index 7a045fc..c1f2da1 100644
--- a/tutorials/Floating_Logo/index.htrw
+++ b/tutorials/Floating_Logo/index.htrw
@@ -25,7 +25,7 @@ The concepts are ones that you’ll likely come across multiple times while
<p>
Create a new image of appropriate size for your logo:
</p>
-<div class="MenuCmd"><span><u>F</u>ile → <u>N</u>ew…</span></div>
+<div class="MenuCmd"><span><span style="text-decoration: underline;">F</span>ile → <span
style="text-decoration: underline;">N</span>ew…</span></div>
<p>
This will open the “Create a New Image” dialog, with options for you to specify:
</p>
@@ -55,7 +55,7 @@ The “Change Foreground Color” dialog allows you to now set the foreg
<p>
With the foreground color set, we can now use the <b>Bucket Fill Tool</b> to fill in our image:
</p>
-<div class="MenuCmd"><span><u>T</u>ools → <u>P</u>aint Tools → <u>B</u>ucket Fill</span></div>
+<div class="MenuCmd"><span><span style="text-decoration: underline;">T</span>ools → <span
style="text-decoration: underline;">P</span>aint Tools → <span style="text-decoration:
underline;">B</span>ucket Fill</span></div>
<div class="centerImg"><img alt="GIMP bucket fill tool" src="Bucket-Fill-Tool.png" /><br />
<span class="caption">Activating the <b style="color: #00FF00;">Bucket Fill</b> tool.</span>
</div>
@@ -80,7 +80,7 @@ You can also use they keyboard shortcut “<b>X</b>” to swap the color
<p>
With the foreground color set to white, we can now use the <b>Text Tool</b> to add some text to our image:
</p>
-<div class="MenuCmd"><span><u>T</u>ools → Te<u>x</u>t</span></div>
+<div class="MenuCmd"><span><span style="text-decoration: underline;">T</span>ools → Te<span
style="text-decoration: underline;">x</span>t</span></div>
<div class="centerImg"><img alt="GIMP text tool" src="Text-Tool.png" /><br />
<span class="caption">Activating the <b style="color: #00FF00;">Text Tool</b>.</span>
</div>
@@ -127,7 +127,7 @@ Once we’ve gotten the text how we want it, we can now create a new layer f
<p>
Alternatively, you can also create a new layer from visible using the menu:
</p>
-<div class="MenuCmd"><span><u>L</u>ayer → New from <u>V</u>isible</span></div>
+<div class="MenuCmd"><span><span style="text-decoration: underline;">L</span>ayer → New from <span
style="text-decoration: underline;">V</span>isible</span></div>
<p>
At this point, our layer palette will have three layers on it, the background, the text (“PAT”),
and our new layer “Visible”:
</p>
@@ -143,7 +143,7 @@ Which is good, because we are about to blur this new layer a bit!
<p>
To apply a slight Gaussian blur to this layer, we simply invoke the command through the menu:
</p>
-<div class="MenuCmd"><span>Filte<u>r</u>s → <u>B</u>lur → <u>G</u>aussian Blur…</span></div>
+<div class="MenuCmd"><span>Filte<span style="text-decoration: underline;">r</span>s → <span
style="text-decoration: underline;">B</span>lur → <span style="text-decoration:
underline;">G</span>aussian Blur…</span></div>
<p>
This will invoke the <b>Gaussian Blur</b> dialog, where we can specify how much blur we want to apply:
</p>
@@ -151,7 +151,7 @@ This will invoke the <b>Gaussian Blur</b> dialog, where we can specify how much
<span class="caption"></span>
</div>
<p>
-The defaults were pretty good, but I wanted just a tad more blur, so I increased the <b>Blur Radius</b> to
7. When you’re done, just hit “<u>O</u>K”.
+The defaults were pretty good, but I wanted just a tad more blur, so I increased the <b>Blur Radius</b> to
7. When you’re done, just hit “<span style="text-decoration: underline;">O</span>K”.
</p>
<h2 id="addcolor" class="hilite">Adding Some Color</h2>
<p>
@@ -160,7 +160,7 @@ Now that we have our text done, it’s time to add a splash of color!
<p>
We are going to add a new layer to our image first:
</p>
-<div class="MenuCmd"><span><u>L</u>ayer → <u>N</u>ew Layer…</span></div>
+<div class="MenuCmd"><span><span style="text-decoration: underline;">L</span>ayer → <span
style="text-decoration: underline;">N</span>ew Layer…</span></div>
<p>
Or by Right-Clicking on the “Visible” layer in the layer palette, and choosing “<b>New
Layer…</b>” from the context menu:
</p>
@@ -168,14 +168,14 @@ Or by Right-Clicking on the “Visible” layer in the layer palette, an
<span class="caption">New Layer using the Right-Click context menu.</span>
</div>
<p>
-The “<b>Create a New Layer</b>” dialog will appear - it doesn’t matter what it gets filled
with, so you can leave it at whatever <b>Layer Fill Type</b> it’s set at (White by default I believe).
Hit <b><u>O</u>K</b> to create the new layer.
+The “<b>Create a New Layer</b>” dialog will appear - it doesn’t matter what it gets filled
with, so you can leave it at whatever <b>Layer Fill Type</b> it’s set at (White by default I believe).
Hit <b><span style="text-decoration: underline;">O</span>K</b> to create the new layer.
</p>
<p>
We are now going to fill this new layer with some color to add some interest. To do this we will use the
<b>Plasma</b> plugin:
</p>
-<div class="MenuCmd"><span>Filte<u>r</u>s → <u>R</u>ender → <u>C</u>louds →
<u>P</u>lasma…</span></div>
+<div class="MenuCmd"><span>Filte<span style="text-decoration: underline;">r</span>s → <span
style="text-decoration: underline;">R</span>ender → <span style="text-decoration:
underline;">C</span>louds → <span style="text-decoration: underline;">P</span>lasma…</span></div>
<p>
-I just left the default values and hit <b><u>O</u>K</b>, but feel free to fiddle with the values. Our
layers now look like this:
+I just left the default values and hit <b><span style="text-decoration: underline;">O</span>K</b>, but feel
free to fiddle with the values. Our layers now look like this:
</p>
<div class="centerImg"><img alt="GIMP plasma layer" src="Layer-Plasma.png" /><br />
<span class="caption"></span>
@@ -191,7 +191,7 @@ Here is what my canvas looks like right now (with the plasma layer on top and vi
<p>
Now we’re going to use the text we created earlier to generate a fake 3D shape on this plasma layer.
The process is known as “bump mapping”. I won’t get into the technical details of how this
works, as it is best seen rather than explained. Open the <b>Bump Map</b> dialog through the menu:
</p>
-<div class="MenuCmd"><span>Filte<u>r</u>s → <u>M</u>ap → <u>B</u>ump Map…</span></div>
+<div class="MenuCmd"><span>Filte<span style="text-decoration: underline;">r</span>s → <span
style="text-decoration: underline;">M</span>ap → <span style="text-decoration: underline;">B</span>ump
Map…</span></div>
<p>
The <b>Bump Map</b> dialog gives a good preview of what the plugin does:
</p>
@@ -205,15 +205,15 @@ So we’ll click on the spinner for the <span style="color: #00FF00;">Bump m
</p>
<p>
As before, feel free to play with the options.
-The only one that I changed was the <b style="color: red;"><u>D</u>epth</b> to increase the illustion of
depth (I finally set the value to 6 in my example).
-Once it looks good, we’ll hit the <b><u>O</u>K</b> button to apply it to the layer.
+The only one that I changed was the <b style="color: red;"><span style="text-decoration:
underline;">D</span>epth</b> to increase the illustion of depth (I finally set the value to 6 in my example).
+Once it looks good, we’ll hit the <b><span style="text-decoration: underline;">O</span>K</b> button to
apply it to the layer.
</p>
<h2 class="hilite">Apply a Layer Mask</h2>
<p>
Now we are going to use a <b>Layer Mask</b> to isolate our bump mapped text. First we need to add a
<b>Layer Mask</b> to the plasma layer:
</p>
-<div class="MenuCmd"><span><u>L</u>ayer → <u>M</u>ask → Add Layer Mask…</span></div>
+<div class="MenuCmd"><span><span style="text-decoration: underline;">L</span>ayer → <span
style="text-decoration: underline;">M</span>ask → Add Layer Mask…</span></div>
<p>
Or Right-Click on the plasma layer and choose “<span style="color:#00FF00;">Add Layer
Mask…</span>” from the context menu:
</p>
@@ -221,7 +221,7 @@ Or Right-Click on the plasma layer and choose “<span style="color:#00FF00;
<span class="caption"></span>
</div>
<p>
-When the “Add a Mask to the Layer” dialog comes up, set the <b>Initialize Layer Mask to:</b>
<u>W</u>hite (full opacity).
+When the “Add a Mask to the Layer” dialog comes up, set the <b>Initialize Layer Mask to:</b>
<span style="text-decoration: underline;">W</span>hite (full opacity).
</p>
<p>
Once you’ve added a mask to the plasma layer, your layers should now look like this:
@@ -241,7 +241,7 @@ We are going to copy the “Visible” layer, and paste it into the laye
<p>
With the layer active, we want to now copy it:
</p>
-<div class="MenuCmd"><span><u>E</u>dit → <u>C</u>opy</span></div>
+<div class="MenuCmd"><span><span style="text-decoration: underline;">E</span>dit → <span
style="text-decoration: underline;">C</span>opy</span></div>
<p>
Then we want to make the plasma layer mask active by Left-Clicking on the <b>mask</b>:
</p>
@@ -251,7 +251,7 @@ Then we want to make the plasma layer mask active by Left-Clicking on the <b>mas
<p>
With the mask active again, we now want to paste the “Visible” layer back into the image:
</p>
-<div class="MenuCmd"><span><u>E</u>dit → <u>P</u>aste</span></div>
+<div class="MenuCmd"><span><span style="text-decoration: underline;">E</span>dit → <span
style="text-decoration: underline;">P</span>aste</span></div>
<p>
This will now insert a <i>Floating Selection (Pasted Layer)</i> into your image:
</p>
@@ -261,7 +261,7 @@ This will now insert a <i>Floating Selection (Pasted Layer)</i> into your image:
<p>
To get this <i>Floating Selection </i> into the mask, we need to <b>Anchor</b> it:
</p>
-<div class="MenuCmd"><span><u>L</u>ayer → <u>A</u>nchor Layer</span></div>
+<div class="MenuCmd"><span><span style="text-decoration: underline;">L</span>ayer → <span
style="text-decoration: underline;">A</span>nchor Layer</span></div>
<p>
This will <b>Anchor</b> the selection down onto the mask. Our image and layers should now look something
like this:
</p>
@@ -294,7 +294,7 @@ To make it sharper, we are going to adjust the levels on the mask for that layer
To do this, we first make sure the layer mask is active by clicking on it.
Then we can open the <b>Adjust Color Levels</b> dialog through the menu:
</p>
-<div class="MenuCmd"><span><u>C</u>olors → <u>L</u>evels…</span></div>
+<div class="MenuCmd"><span><span style="text-decoration: underline;">C</span>olors → <span
style="text-decoration: underline;">L</span>evels…</span></div>
<p>
With the <b>Adjust Color Levels</b> dialog, we now want to sharpen up the edges of the mask a little bit:
</p>
@@ -317,9 +317,9 @@ Now we may want to get a little fancier and add an effect of a drop shadow behin
<p>
Make a copy of your “Visible” layer that had your original blurred text on it. Select the layer
first to activate it, then you can do:
</p>
-<div class="MenuCmd"><span><u>L</u>ayer → D<u>u</u>plicate Layer</span></div>
+<div class="MenuCmd"><span><span style="text-decoration: underline;">L</span>ayer → D<span
style="text-decoration: underline;">u</span>plicate Layer</span></div>
<p>
-Or Right-Click on the “Visible” layer, and choose “<span style="color:
#00FF00;">D<u>u</u>plicate Layer</span>”:
+Or Right-Click on the “Visible” layer, and choose “<span style="color: #00FF00;">D<span
style="text-decoration: underline;">u</span>plicate Layer</span>”:
</p>
<div class="centerImg"><img alt="GIMP context duplicate layer" src="Duplicate-Layer.png" /><br />
<span class="caption"></span>
@@ -334,15 +334,15 @@ This will create a new layer called “Visible copy”. Move this layer
<p>
This layer will become our shadow, but we need to modify a couple of things first. We’ll first invert
the colors of the layer to make the text black using:
</p>
-<div class="MenuCmd"><span><u>C</u>olors → In<u>v</u>ert</span></div>
+<div class="MenuCmd"><span><span style="text-decoration: underline;">C</span>olors → In<span
style="text-decoration: underline;">v</span>ert</span></div>
<p>
Then we need to change the layer so that all of the white areas will be transparent. This can be found in
the menu:
</p>
-<div class="MenuCmd"><span><u>L</u>ayer → Tr<u>a</u>nsparency → Color to
<u>A</u>lpha…</span></div>
+<div class="MenuCmd"><span><span style="text-decoration: underline;">L</span>ayer → Tr<span
style="text-decoration: underline;">a</span>nsparency → Color to <span style="text-decoration:
underline;">A</span>lpha…</span></div>
<p>
The layer should now have black text over a transparent background. We’ll now just want to shift this
layer a bit to simulate a height by offseting it down and to the right a bit. To do this we can use the
<b>Move Tool</b>:
</p>
-<div class="MenuCmd"><span><u>T</u>ools → <u>T</u>ransfom Tools → <u>M</u>ove</span></div>
+<div class="MenuCmd"><span><span style="text-decoration: underline;">T</span>ools → <span
style="text-decoration: underline;">T</span>ransfom Tools → <span style="text-decoration:
underline;">M</span>ove</span></div>
<div class="centerImg"><img alt="GIMP move tool" src="Move-Tool.png" /><br />
<span class="caption">Activate the <b>Move Tool</b>.</span>
</div>
diff --git a/tutorials/Luminosity_Masks/index.htrw b/tutorials/Luminosity_Masks/index.htrw
index 15bf9bd..a2d7bca 100644
--- a/tutorials/Luminosity_Masks/index.htrw
+++ b/tutorials/Luminosity_Masks/index.htrw
@@ -1,6 +1,6 @@
<!--#include virtual="/includes/wgo-xhtml-init.xhtml" -->
<title>GIMP - Luminosity Masks</title>
-<link rel="stylesheet" type="text/css" href="styles.css">
+<link rel="stylesheet" type="text/css" href="styles.css" />
<!--#include virtual="/includes/wgo-look-feel.xhtml" -->
<!--#include virtual="/includes/wgo-page-init.xhtml" -->
@@ -22,12 +22,12 @@ This tutorial will assume you are already familiar with layer masks. If not (or
<p>
For this tutorial I'll be using this image by the West Arctic National Parklands:
</p>
-<div class="caption"><a href="Mountains-Full-Size.jpg"><img src="Mountains.jpg" /></a><br/><span><a
style="font-style: italic;" href="http://www.flickr.com/photos/nps_wear/8517263428/";>Mountains as Far as the
Eye Can See</a> (<a href="http://creativecommons.org/licenses/by/2.0/";>cc-by</a>)</span></div>
+<div class="caption"><a href="Mountains-Full-Size.jpg"><img src="Mountains.jpg" alt="Mountains"
/></a><br/><span><a style="font-style: italic;"
href="http://www.flickr.com/photos/nps_wear/8517263428/";>Mountains as Far as the Eye Can See</a> (<a
href="http://creativecommons.org/licenses/by/2.0/";>cc-by</a>)</span></div>
<p>
After going through this tutorial, we will generate channels in GIMP corresponding to these six different
luminosity regions in the image:
</p>
-<div class="caption"><img src="All-Masks.jpg" /><br/><span >Example luminosity masks. Lights (left), Mids
(center), and Darks (right)</span></div>
+<div class="caption"><img src="All-Masks.jpg" alt="All-Masks" /><br/><span >Example luminosity masks.
Lights (left), Mids (center), and Darks (right)</span></div>
<h2>Creating the Masks</h2>
<p>
@@ -37,15 +37,15 @@ To begin creating the masks we will need to first get a luminosity representatio
<p>
Either through the menus, or by Right-Clicking on the base layer in the <b>Layer Dialog</b>:
</p>
-<div class="MenuCmd"><span><u>L</u>ayer → D<u>u</u>plicate Layer</span></div>
-<div class="caption"><img src="Layer-Duplicate.png" /><br/><span></span></div>
+<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="caption"><img src="Layer-Duplicate.png" alt="Layer-Duplicate" /><br/><span></span></div>
<h3>Desaturate the Duplicated Layer</h3>
<p>
Now desaturate the duplicated layer using <b>Luminosity</b> as the method:
</p>
<div class="MenuCmd"><span>Colors → Desaturate…</span></div>
-<div class="caption"><img src="Layer-Desaturate.png" /><br/><span></span></div>
+<div class="caption"><img src="Layer-Desaturate.png" alt="Layer-Desaturate" /><br/><span></span></div>
<p>
This desaturate copy of your color image represents the “Lights” channel. Now we want to create
a new channel based on thsi layer.
</p>
@@ -56,7 +56,7 @@ This desaturate copy of your color image represents the “Lights” cha
The easiest way to do this is through the <b>Channels</b> Dialog. If you don't see it, you can open it by
going to:
</p>
<div class="MenuCmd"><span>Windows → Dockable Dialogs → Channels</span></div>
-<div class="caption"><img src="Channels-Dialog.png" /><br/><span>The <b>Channels</b> Dialog</span></div>
+<div class="caption"><img src="Channels-Dialog.png" alt="Channels-Dialog" /><br/><span>The <b>Channels</b>
Dialog</span></div>
<p>
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.
</p>
@@ -69,7 +69,7 @@ Now rename this channel to something meaningful (like “<b>L</b>” for
<p>
This now gives us our “<b>Lights</b>” channel, <b>L </b>:
</p>
-<div class="caption"><img src="L-Channel.png" /><br/><span></span></div>
+<div class="caption"><img src="L-Channel.png" alt="L-Channel" /><br/><span></span></div>
<p>
With the “Lights” channel created, we can use it to create the inverse, the “Darks”
channel.
</p>
@@ -96,7 +96,7 @@ Remember that you should be seeing the “marching ants” around your s
<p>
With the entire image selected, we just have to subtract the “Lights” channel. In the
<b>Channels</b> dialog, just Right-Click on the “Lights” channel, and choose “<b>Subtract
from Selection</b>”:
</p>
-<div class="caption"><img src="L-Channel-Subtract.png" /><br/><span>Subtracting the <b>L</b>
channel</span></div>
+<div class="caption"><img src="L-Channel-Subtract.png" alt="L-Channel-Subtract" /><br/><span>Subtracting the
<b>L</b> channel</span></div>
<p>
You’ll now see a new selection on your image. This selection represents the inverse of the “Lights”
channel…
</p>
@@ -120,11 +120,11 @@ Once you’ve subtracted the “Lights” channel again, don’t forget to save
<p>
I’ll usually make 3 levels of “Darks” channels: <b>D</b>, <b>DD</b>, and <b>DDD</b>:
</p>
-<div class="caption"><img src="D-Channels.png" /><br/><span>Three levels of Dark masks created</span></div>
+<div class="caption"><img src="D-Channels.png" alt="D-Channels" /><br/><span>Three levels of Dark masks
created</span></div>
<p>
Here is what the three different channels of Darks look like:
</p>
-<div class="caption"><img src="Darks-All.jpg" /><br/><span>The <b>D</b>, <b>DD</b>, and <b>DDD</b> channels,
respectively</span></div>
+<div class="caption"><img src="Darks-All.jpg" alt="Darks-All" /><br/><span>The <b>D</b>, <b>DD</b>, and
<b>DDD</b> channels, respectively</span></div>
<h3>Create the Lighter Masks</h3>
<p>
@@ -138,25 +138,25 @@ The process is identical to creating the darker channels, just in reverse.
<p>
To get started, activate the “Lights” channel as a selection (Right-Click on the
“Lights” Channel):
</p>
-<div class="caption"><img src="L-Channel-Activate.png" /><br/><span></span></div>
+<div class="caption"><img src="L-Channel-Activate.png" alt="L-Channel-Activate" /><br/><span></span></div>
<p>
With the “Lights” channel as a selection, now all we have to do is <b>Subtract</b> the “Darks” channel from
it. Then save that selection as a new channel (which will become our “LL” channel, and so on…):
</p>
-<div class="caption"><img src="D-Subtract.png" /><br/><span>Subtracting the <b>D</b> channel from the
<b>L</b> selection</span></div>
+<div class="caption"><img src="D-Subtract.png" alt="D-Subtract" /><br/><span>Subtracting the <b>D</b>
channel from the <b>L</b> selection</span></div>
<p>
To get an even lighter channel, you can subtract <b>D</b> one more time from the selection so far as well.
</p>
<p>
Here are what the three channels look like, starting with <b>L</b> up to <b>LLL</b>:
</p>
-<div class="caption"><img src="Lights-All.jpg" /><br/><span>The <b>L</b>, <b>LL</b>, and <b>LLL</b>
channels, respectively</span></div>
+<div class="caption"><img src="Lights-All.jpg" alt="Lights-All" /><br/><span>The <b>L</b>, <b>LL</b>, and
<b>LLL</b> channels, respectively</span></div>
<h3>Mid Tones Channels</h3>
<p>
By this point, we’ve got 6 new channels, three each for light and dark tones:
</p>
-<div class="caption"><img src="L+D.png" /><br/><span></span></div>
+<div class="caption"><img src="L+D.png" alt="L+D" /><br/><span></span></div>
<p>
Now we can generate our mid-tone channels from these.
</p>
@@ -184,7 +184,7 @@ You can repeat for each of the other levels, creating an MM and MMM if you'd lik
<p>
Now remember, the mid-tones channels are intended to isolate mid values as a mask, so they can look a little
strange at first glance. Here's what the basic mid-tones mask looks like:
</p>
-<div class="caption"><img src="Mid.jpg" /><br/><span>Basic Mid-Tones channel</span></div>
+<div class="caption"><img src="Mid.jpg" alt="Mid" /><br/><span>Basic Mid-Tones channel</span></div>
<p>
Remember, black tones in this mask represent full transparency to the layer below, while white represents
full opacity, from the associated layer.
</p>
@@ -197,14 +197,14 @@ Remember, black tones in this mask represent full transparency to the layer belo
The basic idea behind creating these channels is that you can now mask particular tonal ranges in your
images, and the mask will be self-feathering (due to how we created them). So we can now isolate specific
tones in the image for manipulation.
</p>
<p>
-<a href="http://blog.patdavid.net/2011/10/getting-around-in-gimp-luminosity-masks.html";>Previously</a>, I
had shown how this could be used to do some simple split-toning of an image. In that case I worked on a B&W
image, and tinted it. Here I'll do the same with our image we’ve been working on so far...
-<p>
+<a href="http://blog.patdavid.net/2011/10/getting-around-in-gimp-luminosity-masks.html";>Previously</a>, I
had shown how this could be used to do some simple split-toning of an image. In that case I worked on a
B&W image, and tinted it. Here I'll do the same with our image we’ve been working on so far...
+</p>
<h3>Split Toning</h3>
<p>
Using the image I've been working through so far, we have the base layer to start with:
</p>
-<div class="caption"><img src="Split-Base.png" /><br/><span></span></div>
+<div class="caption"><img src="Split-Base.png" alt="Split-Base" /><br/><span></span></div>
<h4>Create Duplicates</h4>
<p>
@@ -214,7 +214,7 @@ We are going to want two duplicates of this base layer. One to tone the lighter
<p>
Then rename the copy something descriptive. In my example, I'll call this layer “Dark” (original, I know):
</p>
-<div class="caption"><img src="Split-Dark.png" /><br/><span></span></div>
+<div class="caption"><img src="Split-Dark.png" alt="Split-Dark" /><br/><span></span></div>
<h4>Add a Mask</h4>
<p>
@@ -224,7 +224,7 @@ Now we can add a layer mask to this layer. You can either Right-Click the layer,
<p>
You’ll then be presented with options about how to initialize the mask. You’ll want to <b>Initialize Layer
Mask to:</b> “Channel”, then choose one of your luminosity masks from the drop-down. In my case, I’ll use the
<b>DD</b> mask we previously made:
</p>
-<div class="caption"><img src="AddLayerMask.png" /><br/><span></span></div>
+<div class="caption"><img src="AddLayerMask.png" alt="AddLayerMask" /><br/><span></span></div>
<h4>Adjust the Layer</h4>
<img style="float: right;" src="Dark-Active.png"/>
@@ -245,18 +245,18 @@ So I’ll use the <b>Colorize</b> option to tone the entire layer a new color:
<p>
To get a Teal-ish color, I'll pull the Hue slider over to about 200:
</p>
-<div class="caption"><img src="Colorize-200.png" /><br/><span></span></div>
+<div class="caption"><img src="Colorize-200.png" alt="Colorize-200" /><br/><span></span></div>
<p>
Now, pay attention to what’s happening on your image canvas at this point. Drag the Hue slider around and
see how it changes the colors in your image. Especially note that the color shifts will be restricted to the
darker tones thanks to the DD mask being used!
</p>
<p>
To illustrate, here are four images where the <b>Hue</b> has been changed in each one. Notice how the color
shifts are constrained to darker tones due to the <b>DD</b> mask being active:
</p>
-<div class="caption"><img src="All-Hues.jpg" /><br/><span></span></div>
+<div class="caption"><img src="All-Hues.jpg" alt="All-Hues" /><br/><span></span></div>
<p>
So after I choose a new Hue of 200 for my layer, I should be seeing this:
</p>
-<div class="caption"><img src="Dark-Tinted.png" /><br/><span></span></div>
+<div class="caption"><img src="Dark-Tinted.png" alt="Dark-Tinted" /><br/><span></span></div>
<h4>Repeat for Light Tones</h4>
<p>
@@ -265,15 +265,15 @@ Now just repeat the above steps, but this time for the light tones. So duplicate
<p>
For the lighter tones, I chose a Hue of around 25 instead (more orange-ish than blue):
</p>
-<div class="caption"><img src="Light-Tinted.png" /><br/><span></span></div>
+<div class="caption"><img src="Light-Tinted.png" alt="Light-Tinted" /><br/><span></span></div>
<p>
In the end, here are the results that I achieved:
</p>
-<div class="caption"><img src="Mountains-split.jpg" /><br/><span></span></div>
+<div class="caption"><img src="Mountains-split.jpg" alt="Mountains-split" /><br/><span></span></div>
<p>
Compared to the original we started with:
</p>
-<div class="caption"><img src="Mountains.jpg" /><br/><span></span></div>
+<div class="caption"><img src="Mountains.jpg" alt="Mountains" /><br/><span></span></div>
<p>
The real power here comes from experimentation. I encourage you to try using a different mask to restrict
the changes to different areas (try the LLL for instance). You can also adjust the opacity of the layers now
to modify how strongly the color tones will effect those areas as well. Play!
</p>
@@ -309,35 +309,35 @@ To illustrate, I’m going to apply a fairly aggressive compression to the curve
<p>
When I say aggressive, here is what I’m referring to:
</p>
-<div class="caption"><img src="Mid-Curve.png" /><br/><span></span></div>
+<div class="caption"><img src="Mid-Curve.png" alt="Mid-Curve" /><br/><span></span></div>
<p>
Here is the effect it has on the image when using the <b>M</b> mid-tones mask:
</p>
-<div class="caption"><img src="Mid-Boost.jpg" /><br/><span></span></div>
+<div class="caption"><img src="Mid-Boost.jpg" alt="Mid-Boost" /><br/><span></span></div>
<p>
Compared to the original we started with:
</p>
-<div class="caption"><img src="Mountains.jpg" /><br/><span></span></div>
+<div class="caption"><img src="Mountains.jpg" alt="Mountains" /><br/><span></span></div>
<p>
As you can see, there is an increase in contrast across the image, as well a nice little boost to
saturation. You don't need to worry about blowing out highlights or losing shadow detail, because the mask
will not allow you to modify those values.
</p>
<h4>More Samples of the Mid-Tones Mask in use</h4>
-<div class="caption"><img src="stignygaard-3654106828-original.jpg" /><br/><span>Original<br/><a
href="http://www.flickr.com/photos/stignygaard/3654106828/";>Brorfelde landscape</a> by <a
href="http://www.flickr.com/photos/stignygaard";>Stig Nygaard</a> (<a
href="http://creativecommons.org/licenses/by/2.0/";>cc-by</a>)</span></div>
-<div class="caption"><img src="stignygaard-3654106828.png" /><br/><span>After an aggressive curve + Mid-Tone
mask</span></div>
+<div class="caption"><img src="stignygaard-3654106828-original.jpg" alt="stignygaard-3654106828-original"
/><br/><span>Original<br/><a href="http://www.flickr.com/photos/stignygaard/3654106828/";>Brorfelde
landscape</a> by <a href="http://www.flickr.com/photos/stignygaard";>Stig Nygaard</a> (<a
href="http://creativecommons.org/licenses/by/2.0/";>cc-by</a>)</span></div>
+<div class="caption"><img src="stignygaard-3654106828.png" alt="stignygaard-3654106828" /><br/><span>After
an aggressive curve + Mid-Tone mask</span></div>
<br/>
<br/>
-<div class="caption"><img src="Landscapes.jpg" /><br/><span>Original<br/><a
href="http://www.flickr.com/photos/thomasjhannigan/8387450301/";>Landscapes</a> by <a
href="http://www.flickr.com/photos/thomasjhannigan/";>Tom Hannigan</a> (<a
href="http://creativecommons.org/licenses/by/2.0/";>cc-by</a>)</span></div>
-<div class="caption"><img src="Landscapes-Mid-Mask.jpg" /><br/><span>After an aggressive curve + Mid-Tone
mask</span></div>
+<div class="caption"><img src="Landscapes.jpg" alt="Landscapes" /><br/><span>Original<br/><a
href="http://www.flickr.com/photos/thomasjhannigan/8387450301/";>Landscapes</a> by <a
href="http://www.flickr.com/photos/thomasjhannigan/";>Tom Hannigan</a> (<a
href="http://creativecommons.org/licenses/by/2.0/";>cc-by</a>)</span></div>
+<div class="caption"><img src="Landscapes-Mid-Mask.jpg" alt="Landscapes-Mid-Mask" /><br/><span>After an
aggressive curve + Mid-Tone mask</span></div>
<br/>
<br/>
-<div class="caption"><img src="Craters-of-the-Moon.jpg" /><br/><span>Original<br/><a
href="http://www.flickr.com/photos/72213316 N00/3725266971/">Stitched photos of the Idaho landscape near
Craters of the Moon National Monument</a><br>by <a href="http://www.flickr.com/photos/72213316 N00/">Frank
Kovalchek</a> (<a href="http://creativecommons.org/licenses/by/2.0/";>cc-by</a>)</a></span></div>
-<div class="caption"><img src="Craters-of-the-Moon-Mid-Mask.jpg" /><br/><span>After an aggressive curve +
Mid-Tone mask</span></div>
+<div class="caption"><img src="Craters-of-the-Moon.jpg" alt="Craters-of-the-Moon"
/><br/><span>Original<br/><a href="http://www.flickr.com/photos/72213316 N00/3725266971/">Stitched photos of
the Idaho landscape near Craters of the Moon National Monument</a><br/>by <a
href="http://www.flickr.com/photos/72213316 N00/">Frank Kovalchek</a> (<a
href="http://creativecommons.org/licenses/by/2.0/";>cc-by</a>)</span></div>
+<div class="caption"><img src="Craters-of-the-Moon-Mid-Mask.jpg" alt="Craters-of-the-Moon-Mid-Mask"
/><br/><span>After an aggressive curve + Mid-Tone mask</span></div>
<h2>In Conclusion</h2>
<p>
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
