[gimp-web] Fixing some build warnings.
- From: Jehan <jehanp src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gimp-web] Fixing some build warnings.
- Date: Thu, 22 Jul 2021 12:28:44 +0000 (UTC)
commit 44dc7c3d29f5a46640b9ef180b21080943757839
Author: nmat <nmat users noreply github com>
Date: Wed Jul 21 21:07:59 2021 +0200
Fixing some build warnings.
content/about/index.md | 2 +-
content/about/meta/file-list.md | 9 +-
content/about/meta/git-workflow.md | 2 +-
content/bugs/report.md | 6 +-
content/news/2016/2016-01-12 LGM/index.md | 6 +-
.../2016/2016-07-13 GIMP 2.9.4 Released/index.md | 16 +--
.../news/2016/2016-10-06 Dialog Defaults/index.md | 8 +-
.../2017/2017-08-24 GIMP 2.9.6 Released/index.md | 24 ++--
.../2017/2017-12-12 GIMP 2.9.8 Released/index.md | 8 +-
content/news/2018/2018-01-09_LGM_SCaLE/index.md | 2 +-
content/news/2018/2018-04-03 SCaLE Report/index.md | 2 +-
content/release-notes/gimp-2.10.md | 4 +-
content/release-notes/gimp-2.4-cm.md | 2 +-
content/release-notes/gimp-2.4.md | 26 ++--
content/release-notes/gimp-2.6.md | 24 ++--
content/release-notes/gimp-2.7.md | 26 ++--
content/release-notes/gimp-2.8.md | 26 ++--
content/tutorials/3d_Logo/index.md | 58 ++++----
content/tutorials/Advanced_Animations/index.md | 12 +-
content/tutorials/Anti-Aliased_Threshold/index.md | 10 +-
content/tutorials/Asset_Folders/index.md | 8 +-
.../tutorials/Automate_Editing_in_GIMP/index.md | 16 +--
content/tutorials/AutomatedJpgToXcf/index.md | 4 +-
content/tutorials/Basic_Color_Curves/index.md | 94 ++++++-------
content/tutorials/Basic_Perl/index.md | 22 +--
content/tutorials/Basic_Scheme/index.md | 9 +-
content/tutorials/Basic_Scheme2/index.md | 4 +-
content/tutorials/Bezier_Selections/index.md | 7 +-
content/tutorials/Blending_Exposures/index.md | 63 +++++----
content/tutorials/Blown_Out_Highlights/index.md | 70 +++++-----
content/tutorials/Blur_Overlays/index.md | 66 ++++-----
content/tutorials/Borders_On_Selections/index.md | 17 ++-
.../tutorials/Changing_Background_Color_1/index.md | 39 +++---
.../tutorials/Changing_Background_Color_2/index.md | 17 ++-
content/tutorials/Color2BW/index.md | 54 ++++----
content/tutorials/Coloring_A_BW_Sketch/index.md | 13 +-
content/tutorials/ContrastMask/index.md | 48 +++----
content/tutorials/Creating_Icons/index.md | 37 +++---
content/tutorials/Custom_Brushes/index.md | 12 +-
.../Digital_Black_and_White_Conversion/index.md | 148 ++++++++++-----------
content/tutorials/Draw_A_Paint_Brush/index.md | 50 +++----
content/tutorials/Drawing_Shapes/index.md | 20 +--
content/tutorials/Film_Grain/index.md | 16 +--
content/tutorials/Floating_Logo/index.md | 70 +++++-----
content/tutorials/GIMP_Quickies/index.md | 28 ++--
content/tutorials/Golden_Text/index.md | 22 +--
content/tutorials/Heart_Shape/index.md | 20 +--
content/tutorials/Image_Map/index.md | 8 +-
content/tutorials/Image_Pipes/index.md | 21 ++-
content/tutorials/Image_Pipes2/index.md | 20 +--
content/tutorials/Layer_Masks/index.md | 32 ++---
content/tutorials/Lite_Quickies/index.md | 34 ++---
content/tutorials/Luminosity_Masks/index.md | 68 +++++-----
content/tutorials/Photo_To_Sketch/index.md | 23 ++--
content/tutorials/Quickmask/index.md | 22 +--
content/tutorials/Red_Eye_Removal/index.md | 13 +-
content/tutorials/Reducing_CCD_Noise/index.md | 22 +--
content/tutorials/Selective_Color/index.md | 26 ++--
content/tutorials/Selective_Gaussian_Blur/index.md | 20 +--
content/tutorials/Sepia_Toning/index.md | 50 +++----
content/tutorials/Simple_Animations/index.md | 19 ++-
content/tutorials/Sketch_Effect/index.md | 29 ++--
content/tutorials/Smart_Sharpening/index.md | 92 ++++++-------
content/tutorials/Smart_Sharpening/shortcuts.md | 18 +--
content/tutorials/Smart_Sharpening/warp-sharp.md | 24 ++--
content/tutorials/Straight_Line/index.md | 24 ++--
content/tutorials/The_Basics/index.md | 33 +++--
content/tutorials/Tileable_Textures/index.md | 25 ++--
content/tutorials/Using_GAP/index.md | 9 +-
content/tutorials/template/index.md | 4 +-
70 files changed, 932 insertions(+), 951 deletions(-)
---
diff --git a/content/about/index.md b/content/about/index.md
index e4939540..6b6135d3 100644
--- a/content/about/index.md
+++ b/content/about/index.md
@@ -52,7 +52,7 @@ There is a nice [Frequently Asked Questions (FAQ)][] page.
[GIMP Issues]: https://gitlab.gnome.org/GNOME/gimp/issues
[The GIMP Toolkit]: //www.gtk.org
[GNU Project]: //www.gnu.org
-[GNU General]: {filename}COPYING
+[GNU General]: {static}COPYING
## GIMP RSS Feeds
diff --git a/content/about/meta/file-list.md b/content/about/meta/file-list.md
index 44e40454..334a4aa4 100644
--- a/content/about/meta/file-list.md
+++ b/content/about/meta/file-list.md
@@ -222,10 +222,10 @@ The main page links go to legacy WGO, the link icon (if there) will go to the po
<del><http://www.gimp.org/unix/gimprc.html></del> [<i class="fa
fa-link"></i>]({filename}../../unix/gimprc.md)
<http://www.gimp.org/unix/gtkrc.html>
<http://www.gimp.org/unix/index.html> (Obsoleted? Directs to downloads page...)
-<del><http://www.gimp.org/unix/man-gimp-2.0.html></del> [<i class="fa
fa-link"></i>]({filename}../../unix/man-gimp-2.0.html)
-<del><http://www.gimp.org/unix/man-gimprc-2.0.html></del> [<i class="fa
fa-link"></i>]({filename}../../unix/man-gimprc-2.0.html)
-<del><http://www.gimp.org/unix/man-gimp-remote-2.0.html></del> [<i class="fa
fa-link"></i>]({filename}../../unix/man-gimp-remote-2.0.html)
-<del><http://www.gimp.org/unix/man-gimptool-2.0.html></del> [<i class="fa
fa-link"></i>]({filename}../../unix/man-gimptool-2.0.html)
+<del><http://www.gimp.org/unix/man-gimp-2.0.html></del> [<i class="fa
fa-link"></i>]({static}../../unix/man-gimp-2.0.html)
+<del><http://www.gimp.org/unix/man-gimprc-2.0.html></del> [<i class="fa
fa-link"></i>]({static}../../unix/man-gimprc-2.0.html)
+<del><http://www.gimp.org/unix/man-gimp-remote-2.0.html></del> [<i class="fa
fa-link"></i>]({static}../../unix/man-gimp-remote-2.0.html)
+<del><http://www.gimp.org/unix/man-gimptool-2.0.html></del> [<i class="fa
fa-link"></i>]({static}../../unix/man-gimptool-2.0.html)
<http://www.gimp.org/unix/user_install.html>
<del><http://www.gimp.org/unix/howtos/bugzilla.html></del> [<i class="fa
fa-link"></i>]({filename}../../unix/howtos/bugzilla.md)
<del><http://www.gimp.org/unix/howtos/gimp-midi.html> </del> [<i class="fa
fa-link"></i>]({filename}../../unix/howtos/gimp-midi.md)
@@ -233,4 +233,3 @@ The main page links go to legacy WGO, the link icon (if there) will go to the po
<del><http://www.gimp.org/unix/howtos/tile_cache.html> </del> [<i class="fa
fa-link"></i>]({filename}../../unix/howtos/tile_cache.md)
<http://www.gimp.org/windows/index.html> (Obsoleted? Directs to downloads page...)
-
diff --git a/content/about/meta/git-workflow.md b/content/about/meta/git-workflow.md
index 81cef355..23e2242a 100644
--- a/content/about/meta/git-workflow.md
+++ b/content/about/meta/git-workflow.md
@@ -4,7 +4,7 @@ Author: Pat David
Summary: What the workflow should be with branches test and master.
<figure>
-<img src="{filename}git.png" title="If that doesn't fix it, git.txt contains the phone number of a friend of
mine who understands git. Just wait through a few minutes of 'It's really pretty simple, just think of
branches as...' and eventually you'll learn the commands that will fix everything." alt="Git">
+<img src="{static}git.png" title="If that doesn't fix it, git.txt contains the phone number of a friend of
mine who understands git. Just wait through a few minutes of 'It's really pretty simple, just think of
branches as...' and eventually you'll learn the commands that will fix everything." alt="Git">
<figcaption>
Obligatory <a href="https://xkcd.com/1597/";>XKCD</a>.
(<a class='cc' href='https://creativecommons.org/licenses/by-nc/2.5/' title='Creative Commons
Attribution-NonCommercial'>cbn</a>)
diff --git a/content/bugs/report.md b/content/bugs/report.md
index aba4651c..07728962 100644
--- a/content/bugs/report.md
+++ b/content/bugs/report.md
@@ -35,13 +35,13 @@ The goal of the following is to give the developers as much information about wh
4. Select "New issue".
<figure>
- <img src="{filename}new-issue.png">
+ <img src="{static}new-issue.png">
</figure>
Choose a template to pre-populate the _Description_ field with important information to help the
developers track down the problem:
<figure>
- <img src="{filename}new-issue-template.png">
+ <img src="{static}new-issue-template.png">
</figure>
Give your bug a good Title and if you chose a template you should see some text in the Description field
already.
@@ -49,7 +49,7 @@ The goal of the following is to give the developers as much information about wh
5. Here in the Description you'll have to tell the developers everything about your system, your version of
GIMP, and your bug. Just do your best to tell them about it. A crappy bug report is better than no report at
all, but if you write down everything clearly you'll be going a long way to helping get the bug addressed.
<figure>
- <img src="{filename}new-issue-description.png">
+ <img src="{static}new-issue-description.png">
</figure>
Remember, try to be as clear and concise as possible! This is immensely helpful in tracking down what
the problem is and how to possibly fix it.
diff --git a/content/news/2016/2016-01-12 LGM/index.md b/content/news/2016/2016-01-12 LGM/index.md
index 0e1b2740..8d6fdca9 100644
--- a/content/news/2016/2016-01-12 LGM/index.md
+++ b/content/news/2016/2016-01-12 LGM/index.md
@@ -10,7 +10,7 @@ Come and meet developers of free graphics software, participate in a workshop, o
<figure>
<a href='https://www.westminster.ac.uk/'>
- <img src="{filename}banner_glitch_1.png" alt="LGM2016 glitch banner" width='500' height='400' />
+ <img src="{static}banner_glitch_1.png" alt="LGM2016 glitch banner" width='500' height='400' />
</a>
</figure>
@@ -21,7 +21,7 @@ There's also an opportunity to meet some of the GIMP team as well!
This year the host is the [Westminster School of Media Arts and Design][westminster], University of
Westminster at their Harrow Campus:
<a href='https://www.westminster.ac.uk/' title='University of Westminster'>
-<img src='{filename}UoW-logo.jpg' alt='University of Westminster Logo' width='326' height='78' />
+<img src='{static}UoW-logo.jpg' alt='University of Westminster Logo' width='326' height='78' />
</a>
Harrow Campus
@@ -61,7 +61,7 @@ At the 2014 LGM in Leipzig, Germany, members of the GIMP team were cornered for
Here are just _some_ of the faces you might get to see at LGM 2016!
<figure>
-<img src='{filename}GIMP-team.jpg' alt='GIMP team montage image by Pat David'/>
+<img src='{static}GIMP-team.jpg' alt='GIMP team montage image by Pat David'/>
<figcaption>
Bring this image along as a reference when you want to buy a round of drinks!<br/>
For complaints, see <a href='https://www.flickr.com/photos/patdavid/17387973489'>this guy</a>.
diff --git a/content/news/2016/2016-07-13 GIMP 2.9.4 Released/index.md b/content/news/2016/2016-07-13 GIMP
2.9.4 Released/index.md
index 4482a4a0..7684192d 100644
--- a/content/news/2016/2016-07-13 GIMP 2.9.4 Released/index.md
+++ b/content/news/2016/2016-07-13 GIMP 2.9.4 Released/index.md
@@ -14,7 +14,7 @@ GIMP 2.9.4 is quite reliable for production work, but there are still loose ends
The new version features several new themes by Benoit Touchette in various shades of gray: Lighter, Light,
Gray, Dark, Darker. The system theme has been preserved for users who prefer a completely consistent look of
user interfaces across all desktop applications.
<figure>
- <img src="{filename}gimp-2-9-4-themes.jpg" alt="New User Interface Themes" width='975' height='390' />
+ <img src="{static}gimp-2-9-4-themes.jpg" alt="New User Interface Themes" width='975' height='390' />
</figure>
Note that we still consider this feature a work in progress, as dark themes still need some fine-tuning
(especially regarding the color of inactive menu items).
@@ -46,7 +46,7 @@ Additionally, there's now a `View > Color Management` submenu where you can enab
The _Color Management_ section of the _Preferences_ dialog has been reorganized to reflect recent changes
and provide more consistent wording of options.
<figure>
- <img src="{filename}gimp-2-9-4-preferences-cms.png" alt="Color Management Preferences" width='975'
height='920' />
+ <img src="{static}gimp-2-9-4-preferences-cms.png" alt="Color Management Preferences" width='975'
height='920' />
</figure>
Since color management comes with a speed penalty (at least with LittleCMS), there's a new option that
enables you to choose either better color fidelity of faster processing depending on the kind of work you
usually do.
@@ -62,7 +62,7 @@ The _Posterize_ and _Desaturate_ color tools have been converted to regular GEGL
A way more noticeable new feature, however, is split preview for GEGL-based filters. You can compare
before/after versions right on canvas and move a "curtain" around to see more of "before" or "after", and
swap their positions (`Shift + click` on the guide). You can also switch between vertical and horizontal
division (`Ctrl + click`).
<figure>
- <img src="{filename}gimp-2-9-4-gegl-curtain.jpg" alt="GEGL preview curtain - original image by Aryeom
Han" width='975' height='548' />
+ <img src="{static}gimp-2-9-4-gegl-curtain.jpg" alt="GEGL preview curtain - original image by Aryeom Han"
width='975' height='548' />
</figure>
## darktable as Raw Processing Plug-in
@@ -97,7 +97,7 @@ Another major new feature is symmetric painting mode, also developed by Jehan Pa
Quick _1-minute_ test by Aryeom Han:
<figure>
- <img src="{filename}gimp-2-9-4-symmetry.png" alt="Symmetry painting" width='975' height='1440' />
+ <img src="{static}gimp-2-9-4-symmetry.png" alt="Symmetry painting" width='975' height='1440' />
</figure>
### Tool Options
@@ -117,13 +117,13 @@ _Note_: the `Primary` modifier is usually `Ctrl` or `Cmd`, depending on your pla
For cases when your selection has a lot of small unselected regions, you can now use the `Select > Remove
Holes` command.
<figure>
- <img src="{filename}gimp-2-9-4-remove-holes.jpg" alt="Removing holes in selection" width='975'
height='1110' />
+ <img src="{static}gimp-2-9-4-remove-holes.jpg" alt="Removing holes in selection" width='975'
height='1110' />
</figure>
The `Select > Border...` dialog now provides several border style options: hard, smooth, and feathered.
_Feathered_ creates a selection which goes gradually from 1 to 0 the farther you get from the middle of the
border. _Smooth_ preserves partial selection (antialiasing) along the edges of the selection.
<figure>
- <img src="{filename}gimp-2-9-4-border-style.png" alt="Border styles selection" width='975' height='648'
/>
+ <img src="{static}gimp-2-9-4-border-style.png" alt="Border styles selection" width='975' height='648' />
</figure>
## Better Tools
@@ -131,7 +131,7 @@ The `Select > Border...` dialog now provides several border style options: hard,
The _Fuzzy Select_ and _Bucket Fill_ tools got a new feature for selecting/filling diagonally neighboring
pixels.
<figure>
- <img src="{filename}gimp-2-9-4-diagonal-neighbors.png" alt="Diagonal neighbors selection" width='975'
height='648' />
+ <img src="{static}gimp-2-9-4-diagonal-neighbors.png" alt="Diagonal neighbors selection" width='975'
height='648' />
</figure>
The _Blend_ tool got shapeburst fills resurrected, and allows the placement of their handles on the canvas,
outside of the image area. Additionally, the Blend tool now displays its progress thanks to a new GEGL
feature available in several GEGL operations including `gegl:distance-transform`.
@@ -139,7 +139,7 @@ The _Blend_ tool got shapeburst fills resurrected, and allows the placement of t
The _Text_ tool now fully supports advanced input methods for CJK and other non-western languages. Minimal
support already existed, but the pre-edit text was displayed in a floating pop-up instead of inline, within
the text tool box, and without any preview styling. It is now displayed just as expected, depending on your
platform and Input Method Engine. Several input method-related bugs and crashes have also been fixed.
<figure>
- <img src="{filename}gimp-2-9-4-ime.png" alt="Input Method Engine support in text tool" width='417'
height='240' />
+ <img src="{static}gimp-2-9-4-ime.png" alt="Input Method Engine support in text tool" width='417'
height='240' />
</figure>
## Batch Processing on Command Line
diff --git a/content/news/2016/2016-10-06 Dialog Defaults/index.md b/content/news/2016/2016-10-06 Dialog
Defaults/index.md
index fe71c2c9..a9646909 100644
--- a/content/news/2016/2016-10-06 Dialog Defaults/index.md
+++ b/content/news/2016/2016-10-06 Dialog Defaults/index.md
@@ -10,19 +10,19 @@ Until fairly recently GIMP didn't do a very good job of remembering all the type
Upcoming v2.10 has some major improvements in that department.
<figure>
- <img src="{filename}gimp-2-9-5-filter-named-presets.jpg" alt="Adding a named preset for the Unsharp Mask
filter in GIMP" width='975' height='442' />
+ <img src="{static}gimp-2-9-5-filter-named-presets.jpg" alt="Adding a named preset for the Unsharp Mask
filter in GIMP" width='975' height='442' />
</figure>
Early in the current development cycle we started porting existing GIMP filters to GEGL operations and using
the GEGL tool skeleton to wrap their GUIs into. This made it possible to automatically save each used
combination as preset with a timestamp for a name, or manually—as a named preset. If you've been using
v2.9.2 or v2.9.4, you most likely benefit from that already.
<figure>
- <img src="{filename}gimp-2-9-5-masks-in-xcf.jpg" alt="Using masks for digital photrography in GIMP"
width='975' height='596' />
+ <img src="{static}gimp-2-9-5-masks-in-xcf.jpg" alt="Using masks for digital photrography in GIMP"
width='975' height='596' />
</figure>
The second part of improvements started with reviewing a
[patch](https://bugzilla.gnome.org/show_bug.cgi?id=759601) submitted by Benoit Touchette. As a professional
photographer, he regularly works on hundreds of photos daily and has an extensive use of masks, so he needs
to get from A to B extremely fast. Benoit came up with a clever idea to simplify adding new masks: clicking
on layers' previews. Various modifier keys would additionally define whether you apply and remove the mask or
just drop the mask entirely.
<figure>
- <img src="{filename}gimp-2-9-5-easy-mask-create-tooltip.jpg" alt="Tooltips for handling masks quickly in
GIMP" width='975' height='536' />
+ <img src="{static}gimp-2-9-5-easy-mask-create-tooltip.jpg" alt="Tooltips for handling masks quickly in
GIMP" width='975' height='536' />
</figure>
The difficult part was to come up with a way to remember the last used mask initiation setting not just
within one session, but across sessions. So instead of creating a special case for just the _Add Layer Mask_
dialog, Michael Natterer added a whole new infrastructure to automatically save and load the settings of
dialogs.
@@ -45,7 +45,7 @@ All the dialog defaults are stored in the _gimprc_ configuration file. To give y
The options are preserved for dialogs like _New Channel_, _Feather Selection_, _Stroke Path_ and others. To
give you visual control over the settings, Michael created a new page in the _Preferences_ dialog called
_Dialog Defaults_.
<figure>
- <img src="{filename}gimp-2-9-5-prefs-dialog-defaults.png" alt="Dialog Defaults preferences page in GIMP
2.9.5" width='805' height='638' />
+ <img src="{static}gimp-2-9-5-prefs-dialog-defaults.png" alt="Dialog Defaults preferences page in GIMP
2.9.5" width='805' height='638' />
</figure>
You may have noticed a few more new things about the _Preferences_ dialog. There is now a scrollbar on large
pages to make the dialog fit small screens like the still popular 1366x768 on lower-end laptops (quite a few
GIMP users reported that _Preferences_ was getting too big). Additionally, some pages now feature a reset
button that restores default settings.
diff --git a/content/news/2017/2017-08-24 GIMP 2.9.6 Released/index.md b/content/news/2017/2017-08-24 GIMP
2.9.6 Released/index.md
index 7d9c4308..12785a46 100644
--- a/content/news/2017/2017-08-24 GIMP 2.9.6 Released/index.md
+++ b/content/news/2017/2017-08-24 GIMP 2.9.6 Released/index.md
@@ -28,7 +28,7 @@ be bothered to report bugs. For that, please tweak the amount of threads on the
*System Resources* page of the *Preferences* dialog.
<figure>
- <img src="{filename}gimp-2-9-6-system-resources.png" alt="Setting amount of threads in GIMP 2.9.6"
width='772' height='660' />
+ <img src="{static}gimp-2-9-6-system-resources.png" alt="Setting amount of threads in GIMP 2.9.6"
width='772' height='660' />
</figure>
## GUI, Usability, and Configurability
@@ -40,7 +40,7 @@ to create, apply, or remove masks. There’s a new button in the *Layers*
dockable dialog for that as well.
<figure>
- <img src="{filename}gimp-2-9-6-create-mask.png" alt="Easily create new mask with GIMP 2.9.6" width='418'
height='431' />
+ <img src="{static}gimp-2-9-6-create-mask.png" alt="Easily create new mask with GIMP 2.9.6" width='418'
height='431' />
</figure>
To make that feature possible, Michael Natterer introduced saving of last
@@ -48,7 +48,7 @@ dialogs' settings across sessions and made these defaults configurable via the
new *Interface / Dialog Defaults* page in the *Preferences* dialog.
<figure>
- <img src="{filename}gimp-2-9-6-dialog-defaults.png" alt="Configurable Dialog Defaults in GIMP 2.9.6"
width='772' height='660' />
+ <img src="{static}gimp-2-9-6-dialog-defaults.png" alt="Configurable Dialog Defaults in GIMP 2.9.6"
width='772' height='660' />
</figure>
Additionally, the *Preferences* dialog got a vertical scrollbar where
@@ -60,7 +60,7 @@ in the list have been saved, and a *Save As* button for every opened image
(clicking an image in the list will raise it easy checks).
<figure>
- <img src="{filename}gimp-2-9-6-fill-with.png" alt="Configurable Fill With option in GIMP 2.9.6"
width='361' height='597' />
+ <img src="{static}gimp-2-9-6-fill-with.png" alt="Configurable Fill With option in GIMP 2.9.6"
width='361' height='597' />
</figure>
Yet another new feature is an option (on the screenshot above) to choose fill
@@ -75,7 +75,7 @@ and a switch for icon sizes on the *Icon Theme* page of the *Preferences*
dialog.
<figure>
- <img src="{filename}gimp-2-9-6-icon-themes.png" alt="Configurable icon size in GIMP 2.9.6" width='772'
height='660' />
+ <img src="{static}gimp-2-9-6-icon-themes.png" alt="Configurable icon size in GIMP 2.9.6" width='772'
height='660' />
</figure>
## On-canvas Interaction Changes
@@ -136,7 +136,7 @@ user-submitted PSD file that has TEXTURES layer group in the Pass Through mode,
as opened in GIMP 2.9.4 (left) and GIMP 2.9.6 (right).
<figure>
- <img src="{filename}gimp-2-9-6-pass-through.jpg" alt="Pass Through mode vs no Pass Through mode"
width='960' height='586' />
+ <img src="{static}gimp-2-9-6-pass-through.jpg" alt="Pass Through mode vs no Pass Through mode"
width='960' height='586' />
</figure>
Newly added color tags simplify managing large projects with a lot of layers
@@ -144,7 +144,7 @@ and layer groups. The screenshot below is a real-life PSD file opened in GIMP
2.9.6.
<figure>
- <img src="{filename}gimp-2-9-6-color-tags-psd-xcf.png" alt="New User Interface Themes" width='468'
height='674' />
+ <img src="{static}gimp-2-9-6-color-tags-psd-xcf.png" alt="New User Interface Themes" width='468'
height='674' />
</figure>
To make more use of that feature, we need someone to step up and implement
@@ -157,7 +157,7 @@ opacity, and offset, toggling visibility, link status, various locks,
color tags.
<figure>
- <img src="{filename}gimp-2-9-6-layer-attributes-dialog.png" alt="Updated Layer Attributes dialog"
width='608' height='579' />
+ <img src="{static}gimp-2-9-6-layer-attributes-dialog.png" alt="Updated Layer Attributes dialog"
width='608' height='579' />
</figure>
## CIE LCH and CIE LAB
@@ -178,7 +178,7 @@ Finally, both the *Color Picker* and the *Sample Points* dialog now display
pixel values in CIE LAB and CIE LCH.
<figure>
- <img src="{filename}gimp-2-9-6-sample-points-lch-lab.jpg" alt="Sample points in LCH and LAB, GIMP 2.9.6"
width='767' height='355' />
+ <img src="{static}gimp-2-9-6-sample-points-lch-lab.jpg" alt="Sample points in LCH and LAB, GIMP 2.9.6"
width='767' height='355' />
</figure>
## Tools
@@ -261,7 +261,7 @@ Last year, we replaced it with a pre-existing plug-in initially written by
through the years. We now ship it by default as part of GIMP.
<figure>
- <img src="{filename}gimp-2-9-6-webp-exporting.jpg" alt="WebP exporting in GIMP 2.9.6" width='772'
height='561' />
+ <img src="{static}gimp-2-9-6-webp-exporting.jpg" alt="WebP exporting in GIMP 2.9.6" width='772'
height='561' />
</figure>
The new plug-in received additional contributions from Benoit Touchette and
@@ -275,7 +275,7 @@ uses Exiv2 to display Exif, XMP, IPTC, and DICOM metadata (the latter
is displayed on the XMP tab).
<figure>
- <img src="{filename}gimp-2-9-6-metadata-viewer.jpg" alt="Metadata viewer in GIMP 2.9.6" width='772'
height='601' />
+ <img src="{static}gimp-2-9-6-metadata-viewer.jpg" alt="Metadata viewer in GIMP 2.9.6" width='772'
height='601' />
</figure>
Moreover, Benoit implemented a much anticipated metadata editor that
@@ -283,7 +283,7 @@ supports adding/editing writing XMP, IPTC, DICOM, and GPS/Exif metadata,
as well as loading/exporting metadata from/to XMP files.
<figure>
- <img src="{filename}gimp-2-9-6-metadata-editor.jpg" alt="Metadata editor in GIMP 2.9.6" width='772'
height='608' />
+ <img src="{static}gimp-2-9-6-metadata-editor.jpg" alt="Metadata editor in GIMP 2.9.6" width='772'
height='608' />
</figure>
## Filters
diff --git a/content/news/2017/2017-12-12 GIMP 2.9.8 Released/index.md b/content/news/2017/2017-12-12 GIMP
2.9.8 Released/index.md
index 3a81ae0d..2f593b94 100644
--- a/content/news/2017/2017-12-12 GIMP 2.9.8 Released/index.md
+++ b/content/news/2017/2017-12-12 GIMP 2.9.8 Released/index.md
@@ -122,7 +122,7 @@ around the screen so that you could continue adjusting the value without
interruptions.
<figure>
- <img src="{filename}spinscale.png" alt="spinscale widget highlighting lower area" width='308'
height='52' />
+ <img src="{static}spinscale.png" alt="spinscale widget highlighting lower area" width='308' height='52'
/>
</figure>
When using transform tools, you can now press a modifier key before or after
@@ -137,7 +137,7 @@ value and flip icon. Clicking on these canvas statuses will respectively raise
the _Select Rotation Angle_ dialog or unflip the canvas.
<figure>
- <img src="{filename}gimp-2-9-8-canvas-rotation-flip-status.png" alt="Status about canvas rotation and
flip" width='528' height='36' />
+ <img src="{static}gimp-2-9-8-canvas-rotation-flip-status.png" alt="Status about canvas rotation and
flip" width='528' height='36' />
</figure>
## Help Manuals
@@ -147,7 +147,7 @@ allow selection of the preferred manual language in the _Preferences_ dialog
(_Interface > Help System_).
<figure>
-<img src="{filename}gimp-2-9-8-help-localization.png" alt='manual localization in preferences' width='831'
height='420'>
+<img src="{static}gimp-2-9-8-help-localization.png" alt='manual localization in preferences' width='831'
height='420'>
<figcaption>
Manual localization settings in GIMP's preferences
</figcaption>
@@ -186,7 +186,7 @@ GIMP now supports both the SRTM-1 and SRTM-3 types (as far as we know, the
only two variants) which will be imported as grayscale RGB images.
<figure>
-<img src="{filename}gimp-2-9-8-import-hgt.jpg" alt='Importing HGT files in GIMP' width='830' height='538'>
+<img src="{static}gimp-2-9-8-import-hgt.jpg" alt='Importing HGT files in GIMP' width='830' height='538'>
<figcaption>
NASA HGT file import followed by appropriate "Gradient Map" filtering
</figcaption>
diff --git a/content/news/2018/2018-01-09_LGM_SCaLE/index.md b/content/news/2018/2018-01-09_LGM_SCaLE/index.md
index 2bb085be..2f26c1c6 100644
--- a/content/news/2018/2018-01-09_LGM_SCaLE/index.md
+++ b/content/news/2018/2018-01-09_LGM_SCaLE/index.md
@@ -31,7 +31,7 @@ The main programme this year is focusing on:
## Libre Graphics at Southern California Linux Expo
<figure>
-<img src="{attach}SCaLE_16x_Logo.png" alt="SCaLE 16x Logo">
+<img src="{static}SCaLE_16x_Logo.png" alt="SCaLE 16x Logo">
</figure>
For the first time this year there will be a dedicated _Libre Graphics_ track at the [Southern California
Linux Expo][] (SCaLE) 16x!
diff --git a/content/news/2018/2018-04-03 SCaLE Report/index.md b/content/news/2018/2018-04-03 SCaLE
Report/index.md
index b7b1df82..157ce772 100644
--- a/content/news/2018/2018-04-03 SCaLE Report/index.md
+++ b/content/news/2018/2018-04-03 SCaLE Report/index.md
@@ -10,7 +10,7 @@ I am finally back and have a moment to write a bit about the wonderful time I ha
[scale16x]: https://www.socallinuxexpo.org/scale/16x "Southern California Linux Expo"
<figure>
-<img src="{filename}../2018-01-09_LGM_SCaLE/SCaLE_16x_Logo.png" alt="SCaLE 16x Logo">
+<img src="{static}../2018-01-09_LGM_SCaLE/SCaLE_16x_Logo.png" alt="SCaLE 16x Logo">
</figure>
SCaLE has been held annualy in southern California for many years (the "16x" indicates this is the sixteenth
annual meeting - though they've been holding meetings for longer as a LUG).
diff --git a/content/release-notes/gimp-2.10.md b/content/release-notes/gimp-2.10.md
index 358da2fd..82505928 100644
--- a/content/release-notes/gimp-2.10.md
+++ b/content/release-notes/gimp-2.10.md
@@ -22,7 +22,7 @@ symbolic icons enabled by default. This is meant to somewhat dim the environment
and shift the focus towards content.
<figure>
- <img src="{filename}images/2.10-update-ui.jpg" alt="GIMP 2.10 with dark UI theme and symbolic icon
theme" width='960' height='587' />
+ <img src="{static}images/2.10-update-ui.jpg" alt="GIMP 2.10 with dark UI theme and symbolic icon theme"
width='960' height='587' />
</figure>
There are now 4 user interface themes available in GIMP: Dark (default), Gray,
@@ -492,7 +492,7 @@ GIMP now ships with plug-ins for viewing and editing Exif, XMP, IPTC, GPS, and
DICOM metadata. They are available via the _Image > Metadata_ submenu.
<figure>
-<img src="{filename}images/2.10-metadata-editor.png" alt="Metadata Editor" width="650" height="713" />
+<img src="{static}images/2.10-metadata-editor.png" alt="Metadata Editor" width="650" height="713" />
</figure>
GIMP will also preserve existing metadata in TIFF, PNG, JPEG, and WebP files.
diff --git a/content/release-notes/gimp-2.4-cm.md b/content/release-notes/gimp-2.4-cm.md
index c9628a81..50c45425 100644
--- a/content/release-notes/gimp-2.4-cm.md
+++ b/content/release-notes/gimp-2.4-cm.md
@@ -8,7 +8,7 @@ Status: hidden
Many devices you use in your design or photography workflow, like digital photo cameras, scanners, displays,
printers etc., have their own color reproduction characteristics. If those are not taken into account during
opening, editing and saving, harmful adjustments can be done to images. With GIMP 2.4 this has changed: now
you can have reliable output for both Web and print.
<figure>
-<img src="{filename}images/color-management.png" alt="color management" class='graybackground' />
+<img src="{static}images/color-management.png" alt="color management" class='graybackground' />
</figure>
## Color Managed Workflow
diff --git a/content/release-notes/gimp-2.4.md b/content/release-notes/gimp-2.4.md
index b2831267..d7683213 100644
--- a/content/release-notes/gimp-2.4.md
+++ b/content/release-notes/gimp-2.4.md
@@ -12,7 +12,7 @@ Status: hidden
A whole new default icon theme has been created for 2.4\. The icons comply with the [Tango style
guidelines](http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines) so GIMP doesn't feel out of place on
any of the supported platforms. Regardless of whether you run GIMP under Microsoft Windows, Mac OS X or
GNU/Linux ([GNOME](https://www.gnome.org/), [KDE](https://www.kde.org/) or [Xfce](https://www.xfce.org/)),
GIMP provides a polished, consistent look.
<figure>
-<img src="{filename}images/2.4-refreshed-look.png" alt="Refreshed Look"/>
+<img src="{static}images/2.4-refreshed-look.png" alt="Refreshed Look"/>
</figure>
Additionally the icons also have enhanced usability on dark widget themes, which is a common setting among
digital artists.
@@ -22,7 +22,7 @@ For artists preferring more desaturated color theme for their icons, an [alterna
### Scalable Brushes
<figure>
-<img src="{filename}images/2.4-scalable-brushes.png" alt="Scalable Brushes"/>
+<img src="{static}images/2.4-scalable-brushes.png" alt="Scalable Brushes"/>
</figure>
The tool options now include a brush size slider that affects both the parametric and bitmap brushes. This
has been an oft-requested feature from both digital painters and photo editors.
@@ -32,7 +32,7 @@ Unlike previous versions of GIMP, regardless of whether you're using a bitmap br
### Selection Tools
<figure>
-<img src="{filename}images/2.4-selection-tools.png" alt="Selection Tools"/>
+<img src="{static}images/2.4-selection-tools.png" alt="Selection Tools"/>
</figure>
The selection tools have been rewritten from scratch to allow resizing of existing selections. Additionally
the rectangular selection tool includes a setting for creating rounded corners as this has been identified as
a very common task among web designers.
@@ -44,7 +44,7 @@ While the tools have been redesigned to make them easier to understand for the n
### Foreground Select Tool
<figure>
-<img src="{filename}images/2.4-video-fgselect.jpg" alt="Foreground Select Demo"/>
+<img src="{static}images/2.4-video-fgselect.jpg" alt="Foreground Select Demo"/>
</figure>
Selecting individual objects on images is easier now with a new foreground select tool. It is done in two
steps. First, you make select region of interest which contains the entire object. Then you paint over
selected area with a brush, not crossing object’s border. Release mouse button when you’re done and look, if
there are dark blue spots on your objects. If there are some, paint with a brush over them again and release
to refine selection. When there are no more blue areas inside the object, press Enter and there you have a
perfectly selected object.
@@ -54,7 +54,7 @@ Selecting individual objects on images is easier now with a new foreground selec
### Align Tool
<figure>
-<img src="{filename}images/2.4-align-tool.png" alt="Align Tool"/>
+<img src="{static}images/2.4-align-tool.png" alt="Align Tool"/>
</figure>
While GIMP has provided a grid and guideline functionality, the actual alignment of objects had to be done
manually. In a few clicks, the new Align Tool allows you to align or distribute a list of layers, paths or
guides. You can align these objects with another object, with the selection or with the image.
@@ -68,7 +68,7 @@ In the new version of GIMP, some menu entries have changed their names and posit
### Improved display when zooming in or out
<figure>
-<img src="{filename}images/2.4-zoom-display.png" alt="Zoomed out display"/>
+<img src="{static}images/2.4-zoom-display.png" alt="Zoomed out display"/>
</figure>
Previous versions of GIMP used a fast but inaccurate way of displaying images at various zoom levels. When
zooming out, some rows and columns of pixels where simply omitted from the display. The result was sometimes
confusing, especially if the image contained many thin lines or small features. GIMP 2.4 avoids these
problems and provides a better view of the zoomed-out images.
@@ -93,7 +93,7 @@ Whether painting or touching up photos, fullscreen editing keeps all the distrac
### Color Management and Soft-proofing
<figure>
-<img src="{filename}images/2.4-color-management.png" alt="Color Management"/>
+<img src="{static}images/2.4-color-management.png" alt="Color Management"/>
</figure>
GIMP now provides full support for color profiles allowing precise color modification throughout the whole
'digital darkroom' process.
@@ -103,7 +103,7 @@ For more information, see [color management](gimp-2.4-cm.html).
### New Crop Tool
<figure>
-<img src="{filename}images/2.4-crop-tool.png" alt="Crop Tool"/>
+<img src="{static}images/2.4-crop-tool.png" alt="Crop Tool"/>
</figure>
Just like the selection tools, the new crop tool has been enhanced since the last release. The resize
handles actually resize the crop rectangle instead of providing both resize and move functionality. The tool
behaves more naturally and consistently with other GIMP tools.
@@ -113,7 +113,7 @@ To move, simply drag the rectangle clicking within the area. Resizing is possibl
### Improved Printing
<figure>
-<img src="{filename}images/gimp-24-print-dark.png" alt="Improved Printing"/>
+<img src="{static}images/gimp-24-print-dark.png" alt="Improved Printing"/>
</figure>
Printing has been largely improved. GIMP makes use of the advancements in the gtk+ printing API so that you
can control all aspects of the printout with an easy to understand interface and immediate preview.
@@ -125,7 +125,7 @@ While numerous red-eye workflows exist already, GIMP now features a very conveni
### Perspective Clone
<figure>
-<img src="{filename}images/2.4-video-perspective.jpg" alt="Perspective Clone Demo"/>
+<img src="{static}images/2.4-video-perspective.jpg" alt="Perspective Clone Demo"/>
</figure>
A common task in image editing is to copy pixels from somewhere in an image to somewhere else. Traditionally
this has been done using the Clone Tool. To make it easy to perform cloning while taking the perspective of
an image into account, a new Perspective Clone Tool has been added to GIMP.
@@ -135,7 +135,7 @@ A common task in image editing is to copy pixels from somewhere in an image to s
### Lens Distortion
<figure>
-<img src="{filename}images/2.4-video-lens.jpg" alt="Lens Distortion Demo"/>
+<img src="{static}images/2.4-video-lens.jpg" alt="Lens Distortion Demo"/>
</figure>
A very common problem exposing itself especially when using cheaper lenses or expensive lenses pushed to
their limits, is barrel distortion and vignetting. Luckily GIMP provides a brand new filter to compensate for
both problems. Saving photographer's pocket is our mission!
@@ -151,7 +151,7 @@ When editing photographs, it is usually better to work with a lossless image for
In addition to all the above, GIMP has been improved in other areas. For instance, better status information
and some hints have been added in the status bar of the image windows. You can easily discover new features
and new shortcuts by trying the various keys and modifiers that are suggested while you are using the tools.
<figure>
-<img src="{filename}images/2.4-statusbar-tips.png" alt="Hints in the status bar"/>
+<img src="{static}images/2.4-statusbar-tips.png" alt="Hints in the status bar"/>
</figure>
A number of changes has gone into plug-ins and scripts. First of all, a new preview widget for plug-ins was
introduced. Now you can zoom in and out using the mouse wheel or +/- buttons in plug-in dialogs and pan
around.
@@ -161,7 +161,7 @@ Several plug-ins like Gaussian Blur, Selective Gaussian Blur and Value Invert ha
You will also note that the new Screenshot plug-in offers more sophisticated options and is far easier to
use.
<figure>
-<img src="{filename}images/2.4-screenshot-plugin.png" alt="Screenshot plug-in"/>
+<img src="{static}images/2.4-screenshot-plugin.png" alt="Screenshot plug-in"/>
</figure>
GIMP 2.4 features a brand new Scheme interpreter that provides better debugging, handles UTF-8 coded
characters and strings, has regex based pattern matching and many more useful features that power users were
requesting. The latter will be pleased to find out that plug-ins and scripts can register menu entries in the
<Brushes>, <Gradients>, <Palettes>, <Patterns> and <Fonts> menus now. Also, a
fair amount of new scripts were added: reversing the order of layers, sorting color palettes etc. A few
scripts that were using incorrect or deprecated constructs may have to be updated. A [Script-Fu migration
guide](/docs/script-fu-update.html) lists the most common errors and how to fix them.
diff --git a/content/release-notes/gimp-2.6.md b/content/release-notes/gimp-2.6.md
index b54141ed..896b3c5c 100644
--- a/content/release-notes/gimp-2.6.md
+++ b/content/release-notes/gimp-2.6.md
@@ -15,7 +15,7 @@ GIMP 2.6 is an important release from a development point of view. It features
### Toolbox Menubar Removed
<figure>
-<img src="{filename}images/2.6-empty-image-window.png" alt="Empty Image Window screenshot"/>
+<img src="{static}images/2.6-empty-image-window.png" alt="Empty Image Window screenshot"/>
</figure>
The toolbox menubar has been removed and merged with the image window menubar. To be able to do this a
window called the _empty image window_ has been introduced. It hosts the menubar and keeps the application
instance alive when no images are opened. It also acts as a drag and drop target. When opening the first
image the empty image window is transformed into a normal image window, and when closing the last image, that
window becomes the empty image window.
@@ -27,7 +27,7 @@ With the empty image window acting as a natural main window, the default window
### Ability to Pan Beyond Image Border
<figure>
-<img src="{filename}images/2.6-scroll-beyond-border.png" alt="Scroll Beyond Border illustration"/>
+<img src="{static}images/2.6-scroll-beyond-border.png" alt="Scroll Beyond Border illustration"/>
</figure>
It is now possible to pan beyond the image border, making image window navigation much less constrained. It
is no longer a problem to use the edge of a brush on the edge of an image while being zoomed in, and one can
adapt the canvas to any utility windows covering parts of the image window.
@@ -46,7 +46,7 @@ It is now possible to pan beyond the image border, making image window navigatio
### Improved Free Select Tool
<figure>
-<img src="{filename}images/2.6-new-free-select-tool.png" alt="New Free Select Tool in action"/>
+<img src="{static}images/2.6-new-free-select-tool.png" alt="New Free Select Tool in action"/>
</figure>
The freehand select tool has been enhanced to support polygonal selections. It also allows mixing free hand
segments with polygonal segments, editing of existing segments, applying angle-constraints to segments, and
of course the normal selection tool operations like add and subtract. Altoghether this ends up making the
Free Select Tool a very versatile, powerful and easy-to-use selection tool.
@@ -54,7 +54,7 @@ The freehand select tool has been enhanced to support polygonal selections. It a
### Brush Dynamics
<figure>
-<img src="{filename}images/2.6-brush-dynamics.jpg" alt="Brush Dynamics illustration"/>
+<img src="{static}images/2.6-brush-dynamics.jpg" alt="Brush Dynamics illustration"/>
</figure>
Brush dynamics let you map different brush parameters, commonly at least size and opacity, to one or more of
three input dynamics: pressure, velocity and random. Velocity and random are usable with a mouse. The Ink
tool, that supported velocity before, has been overhauled and now handles velocity-dependent painting much
better.
@@ -64,7 +64,7 @@ Brush dynamics have enabled a new feature in stroking paths. There is now a chec
### Minor Changes
<figure>
-<img src="{filename}images/2.6-text-tool-and-rectangle-handles.png" alt="Text Tool bounding box and outside
rectangle handles screenshot"/>
+<img src="{static}images/2.6-text-tool-and-rectangle-handles.png" alt="Text Tool bounding box and outside
rectangle handles screenshot"/>
</figure>
* Added a bounding box for the Text Tool that supports automatic wrapping of text within that bounding box.
@@ -90,7 +90,7 @@ Brush dynamics have enabled a new feature in stroking paths. There is now a chec
Important progress towards high bit-depth and non-destructive editing in GIMP has been made. Most color
operations in GIMP are now ported to the powerful graph based image processing framework
[GEGL](http://www.gegl.org/), meaning that the internal processing is being done in 32bit floating point
linear light RGBA. By default the legacy 8bit code paths are still used, but a curious user can turn on the
use of GEGL for the color operations with _Colors / Use GEGL_.
<figure>
-<img src="{filename}images/2.6-experimental-gegl-tool.png" alt="Experimental GEGL tool screenshot"/>
+<img src="{static}images/2.6-experimental-gegl-tool.png" alt="Experimental GEGL tool screenshot"/>
</figure>
In addition to porting color operations to GEGL, an experimental _GEGL Operation_ tool has been added, found
in the _Tools_ menu. It enables applying GEGL operations to an image and it gives on-canvas previews of the
results. The screenshot to the right shows this for a Gaussian Blur.
@@ -144,7 +144,7 @@ For the interested, here is roughly what is planned for GIMP 2.8, the next stab
## GIMP 2.6 Screenshots
<figure>
-<a href="../screenshots/gnome-1280x800-fresh-start.jpg"><img
src="{filename}../screenshots/gnome-1280x800-fresh-start.jpg" alt="First GIMP 2.6 startup"/></a>
+<a href="../screenshots/gnome-1280x800-fresh-start.jpg"><img
src="{static}/screenshots/gnome-1280x800-fresh-start.jpg" alt="First GIMP 2.6 startup"/></a>
<figcaption>
First startup of GIMP 2.6 on a 1280x800 GNOME desktop.
</figcaption>
@@ -152,7 +152,7 @@ First startup of GIMP 2.6 on a 1280x800 GNOME desktop.
<figure>
-<a href="../screenshots/alternative-2-6-ui-layout-example-one.jpg"><img
src="{filename}../screenshots/alternative-2-6-ui-layout-example-one.jpg" alt="Alternative UI example"/></a>
+<a href="../screenshots/alternative-2-6-ui-layout-example-one.jpg"><img
src="{static}/screenshots/alternative-2-6-ui-layout-example-one.jpg" alt="Alternative UI example"/></a>
<figcaption>
UI layout example: Tool Options moved out of the toolbox.
</figcaption>
@@ -160,7 +160,7 @@ UI layout example: Tool Options moved out of the toolbox.
<figure>
-<a href="../screenshots/alternative-2-6-ui-layout-example-two.jpg"><img
src="{filename}../screenshots/alternative-2-6-ui-layout-example-two.jpg" alt="Another alternative UI
example"/></a>
+<a href="../screenshots/alternative-2-6-ui-layout-example-two.jpg"><img
src="{static}/screenshots/alternative-2-6-ui-layout-example-two.jpg" alt="Another alternative UI
example"/></a>
<figcaption>
UI layout example: Using the image window as a background window.
</figcaption>
@@ -168,7 +168,7 @@ UI layout example: Using the image window as a background window.
<figure>
-<a href="../screenshots/2.6-brush-dynamics-example.jpg"><img
src="{filename}../screenshots/2.6-brush-dynamics-example.jpg" alt="Brush Dynamics at use"/></a>
+<a href="../screenshots/2.6-brush-dynamics-example.jpg"><img
src="{static}/screenshots/2.6-brush-dynamics-example.jpg" alt="Brush Dynamics at use"/></a>
<figcaption>
Demonstrating the kind of effects the new Brush Dynamics can create.
</figcaption>
@@ -176,7 +176,7 @@ Demonstrating the kind of effects the new Brush Dynamics can create.
<figure>
-<a href="../screenshots/on-canvas-preview-of-gaussian-blur-in-2-6.jpg"><img
src="{filename}../screenshots/on-canvas-preview-of-gaussian-blur-in-2-6.jpg" alt="On-canvas Gaussian
Blur"/></a>
+<a href="../screenshots/on-canvas-preview-of-gaussian-blur-in-2-6.jpg"><img
src="{static}/screenshots/on-canvas-preview-of-gaussian-blur-in-2-6.jpg" alt="On-canvas Gaussian Blur"/></a>
<figcaption>
Full screenshot of on-canvas preview of Gaussian Blur using the experimental GEGL Operation tool.
</figcaption>
@@ -187,7 +187,7 @@ Full screenshot of on-canvas preview of Gaussian Blur using the experimental GEG
## We Hope You Enjoy GIMP 2.6!
<figure markdown="span">
-<img src="{filename}images/2.6-lgm-2008-groupshot.jpg" alt="LGM 2008 shot of the GIMP team"/>
+<img src="{static}images/2.6-lgm-2008-groupshot.jpg" alt="LGM 2008 shot of the GIMP team"/>
<figcaption>
A picture of (mostly) GIMP developers, taken by [Garrett
LeSage](https://www.flickr.com/photos/garrett/2733807768/) at [Libre Graphics Meeting
2008](https://www.libregraphicsmeeting.org/2008/), licenced under
[CC-By](https://creativecommons.org/licenses/by/2.0/deed.en)
</figcaption>
diff --git a/content/release-notes/gimp-2.7.md b/content/release-notes/gimp-2.7.md
index fa8d7559..2e0590c6 100644
--- a/content/release-notes/gimp-2.7.md
+++ b/content/release-notes/gimp-2.7.md
@@ -16,7 +16,7 @@ GIMP 2.7 is the result of three years of hard work and collaborative developmen
### Single-Window Mode
<figure>
-<img src="{filename}images/2.8-single-window-mode.png" alt="Single-window mode screenshot" width="300"
height="200" />
+<img src="{static}images/2.8-single-window-mode.png" alt="Single-window mode screenshot" width="300"
height="200" />
</figure>
GIMP 2.7 introduces an optional single-window mode. You can toggle between the default multi-window mode and
the new single-window mode through the _Single-window mode_ checkbox in the _Windows_ menu. In single-window
mode, GIMP will put dockable dialogs and images in a single, tabbed image window. The single-window mode
setting is of course preserved if you quit and start GIMP again. Single-window mode removes the necessity for
users of having to deal with multiple windows.
@@ -26,7 +26,7 @@ GIMP 2.7 introduces an optional single-window mode. You can toggle between the
### Multi-Column Dock Windows
<figure>
-<img src="{filename}images/2.8-multi-column-dock-windows.png" alt="Multi-column dock windows screenshot" />
+<img src="{static}images/2.8-multi-column-dock-windows.png" alt="Multi-column dock windows screenshot" />
</figure>
GIMP 2.7 allows dockable dialogs in a dock window to be placed in multiple columns. To create a new column
in a dock window, drag and drop a dockable dialog on the vertical edges of the dock window. This is an
appealing feature for multi-monitor users where one screen can have a big dock window with all the dialogs
and the tools, while all images are on other displays.
@@ -36,7 +36,7 @@ GIMP 2.7 allows dockable dialogs in a dock window to be placed in multiple colu
### More Screen Real Estate For Dockable Dialogs
<figure>
-<img src="{filename}images/2.8-removed-docking-bars.png" alt="Removed docking bars screenshot" />
+<img src="{static}images/2.8-removed-docking-bars.png" alt="Removed docking bars screenshot" />
</figure>
The docking bars have been removed and replaced with overlaid highlights. The dockable drag handle has been
removed and the dockable menu button has been moved up to the tabs. A new Automatic tab style has been added
which makes dockable tabs use the available space.
@@ -45,7 +45,7 @@ The docking bars have been removed and replaced with overlaid highlights. The do
### Save And Export
<figure>
-<img src="{filename}images/2.8-save-and-export.png" alt="Save and export screenshot" />
+<img src="{static}images/2.8-save-and-export.png" alt="Save and export screenshot" />
</figure>
A rather big conceptual change is that saving and exporting images now are clearly separated activities.
Saving an image can only be done in the XCF format which is GIMP's native file format, able to save all kinds
of information necessary for works in progress.
@@ -57,7 +57,7 @@ To export into other formats _File->Export..._ needs to be used. This distinctio
### Layer Groups
<figure>
-<img src="{filename}images/2.8-layer-groups.png" alt="Layer groups screenshot" />
+<img src="{static}images/2.8-layer-groups.png" alt="Layer groups screenshot" />
</figure>
For complex compositions, a flat layer structure is very limiting. GIMP 2.7 lets users organize their
compositions better through the introduction of layer groups which allow layers to be organized in tree-like
structures. Layer groups are fully scriptable through the GIMP plug-in API.
@@ -66,7 +66,7 @@ For complex compositions, a flat layer structure is very limiting. GIMP 2.7 let
### Tools Drawn With Cairo
<figure>
-<img src="{filename}images/2.8-tools-drawn-with-cairo.png" alt="Tools drawn with cairo screenshot" />
+<img src="{static}images/2.8-tools-drawn-with-cairo.png" alt="Tools drawn with cairo screenshot" />
</figure>
All tools rendering on canvas have been ported to Cairo to provide smooth antialiased graphics and make
GIMP's look and feel match modern users expectations. All but a few plug-ins have been ported over to Cairo
as well. Additionally all tools now use an on-canvas progress indicator instead of the one in the statusbar.
@@ -75,7 +75,7 @@ All tools rendering on canvas have been ported to Cairo to provide smooth antial
### On-Canvas Text Editing
<figure>
-<img src="{filename}images/2.8-on-canvas-text-editing.png" alt="On-canvas text editing screenshot" />
+<img src="{static}images/2.8-on-canvas-text-editing.png" alt="On-canvas text editing screenshot" />
</figure>
Text editing with the Text Tool is now performed on-canvas instead of in a separate window. The editing
on-canvas is rather sophisticated: apart from the usual text formatting features like font family, style and
size selectors you get numeric control over baseline offset and kerning, as well as the ability to change
text color for a selection. You can also use a combination of Alt and arrow keys to change baseline offset
and kerning. This feature was originally developed during Google Summer of Code 2008 and heavily improved
since.
@@ -89,7 +89,7 @@ Since the keyboard shortcuts Ctrl+E and Ctrl+Shift+E have been repurposed for th
### Simple Math In Size Entries
<figure>
-<img src="{filename}images/2.8-math-in-size-entries.png" alt="Math in size entries screenshot" />
+<img src="{static}images/2.8-math-in-size-entries.png" alt="Math in size entries screenshot" />
</figure>
Enhancements have also been made to the size entry widget, which is used for inputting most of the x, y,
width, height parameters. For example, in the scale dialog it is now possible to write '50%' in the Width
field to scale the image to 50% of the width. Expressions such as '30in + 40px' and '4 \* 5.4in' work, too.
@@ -121,7 +121,7 @@ Enhancements have also been made to the size entry widget, which is used for inp
### Brush System Improvements
<figure>
-<img src="{filename}images/2.8-brush-system-improvements.png" alt="Brush system improvements screenshot" />
+<img src="{static}images/2.8-brush-system-improvements.png" alt="Brush system improvements screenshot" />
</figure>
The brush dynamics engine has been expanded considerably, making almost all aspects of the brush engine
drivable by a multitude of inputs, all of them configurable with their own response curve.
@@ -139,7 +139,7 @@ This new feature completely replaces the previously existing tool presets system
### Cage Transform Tool
<figure>
-<img src="{filename}images/2.8-cage-transform-tool.png" alt="Cage transform tool screenshot" />
+<img src="{static}images/2.8-cage-transform-tool.png" alt="Cage transform tool screenshot" />
</figure>
A completely new _Cage transform_ tool has been added thanks to the excellent work of one of our Google
Summer of Code 2010 students. The tool implements an innovative approach to free transformation and makes it
possible to easily warp parts of objects using an adjustable user-defined polygonal frame.
@@ -159,7 +159,7 @@ Last, but not least, a Web-page plug-in was added to render any web page into an
### For Tablet Users
<figure>
-<img src="{filename}images/2.8-for-stylus-users.png" alt="For stylus users screenshot" />
+<img src="{static}images/2.8-for-stylus-users.png" alt="For stylus users screenshot" />
</figure>
A new experimental widget was added to meet the requirements of graphic tablets users. The widget combines a
slider, a label and a numeric value control which simplifies adjusting a value using a stylus, better
visualizes the current value and provides a more compact UI. It is now used in the Tools Options dockable
dialog for opacity control and most options of brush based tools.
@@ -172,7 +172,7 @@ People with Intuos tablets and either Artpen or Airbrush styluses will be glad t
### Resource Tagging
<figure>
-<img src="{filename}images/2.8-resource-tagging-brushes.png" alt="Resource tagging screenshot with brushes"
/>
+<img src="{static}images/2.8-resource-tagging-brushes.png" alt="Resource tagging screenshot with brushes" />
</figure>
It is now possible to tag GIMP resources such as brushes and patterns to group them. The tagging is
performed from the respective dockables e.g. the _Brushes_ dockable, and it is possible to filter resources
based on these tags.
@@ -231,7 +231,7 @@ The GIMP developers now maintain a roadmap for GIMP development found here: [htt
## GIMP 2.7 Screenshots
<figure>
-<img src="{filename}../screenshots/1280x800-fresh-start.jpg" alt="First GIMP 2.8 startup" />
+<img src="{static}/screenshots/1280x800-fresh-start.jpg" alt="First GIMP 2.8 startup" />
<figcaption>
First startup of GIMP 2.8 on a 1280x800 desktop.
</figcaption>
diff --git a/content/release-notes/gimp-2.8.md b/content/release-notes/gimp-2.8.md
index 5237463c..2f445d47 100644
--- a/content/release-notes/gimp-2.8.md
+++ b/content/release-notes/gimp-2.8.md
@@ -13,7 +13,7 @@ GIMP 2.8 is the result of three years of hard work and collaborative developmen
### Single-Window Mode
<figure>
-<img src="{filename}images/2.8-single-window-mode.png" alt="Single-window mode screenshot" />
+<img src="{static}images/2.8-single-window-mode.png" alt="Single-window mode screenshot" />
</figure>
GIMP 2.8 introduces an optional single-window mode. You can toggle between the default multi-window mode and
the new single-window mode through the _Single-window mode_ checkbox in the _Windows_ menu. In single-window
mode, GIMP will put dockable dialogs and images in a single, tabbed image window. The single-window mode
setting is of course preserved if you quit and start GIMP again. Single-window mode removes the necessity for
users of having to deal with multiple windows.
@@ -23,7 +23,7 @@ GIMP 2.8 introduces an optional single-window mode. You can toggle between the
### Multi-Column Dock Windows
<figure>
-<img src="{filename}images/2.8-multi-column-dock-windows.png" alt="Multi-column dock windows screenshot" />
+<img src="{static}images/2.8-multi-column-dock-windows.png" alt="Multi-column dock windows screenshot" />
</figure>
GIMP 2.8 allows dockable dialogs in a dock window to be placed in multiple columns. To create a new column
in a dock window, drag and drop a dockable dialog on the vertical edges of the dock window. This is an
appealing feature for multi-monitor users where one screen can have a big dock window with all the dialogs
and the tools, while all images are on other displays.
@@ -33,7 +33,7 @@ GIMP 2.8 allows dockable dialogs in a dock window to be placed in multiple colu
### More Screen Real Estate For Dockable Dialogs
<figure>
-<img src="{filename}images/2.8-removed-docking-bars.png" alt="Removed docking bars screenshot" />
+<img src="{static}images/2.8-removed-docking-bars.png" alt="Removed docking bars screenshot" />
</figure>
The docking bars have been removed and replaced with overlaid highlights. The dockable drag handle has been
removed and the dockable menu button has been moved up to the tabs. A new Automatic tab style has been added
which makes dockable tabs use the available space.
@@ -42,7 +42,7 @@ The docking bars have been removed and replaced with overlaid highlights. The do
### Save And Export
<figure>
-<img src="{filename}images/2.8-save-and-export.png" alt="Save and export screenshot" />
+<img src="{static}images/2.8-save-and-export.png" alt="Save and export screenshot" />
</figure>
A rather big conceptual change is that saving and exporting images now are clearly separated activities.
Saving an image can only be done in the XCF format which is GIMP's native file format, able to save all kinds
of information necessary for works in progress.
@@ -54,7 +54,7 @@ To export into other formats _File->Export..._ needs to be used. This distinctio
### Layer Groups
<figure>
-<img src="{filename}images/2.8-layer-groups.png" alt="Layer groups screenshot" />
+<img src="{static}images/2.8-layer-groups.png" alt="Layer groups screenshot" />
</figure>
For complex compositions, a flat layer structure is very limiting. GIMP 2.8 lets users organize their
compositions better through the introduction of layer groups which allow layers to be organized in tree-like
structures. Layer groups are fully scriptable through the GIMP plug-in API.
@@ -63,7 +63,7 @@ For complex compositions, a flat layer structure is very limiting. GIMP 2.8 let
### Tools Drawn With Cairo
<figure>
-<img src="{filename}images/2.8-tools-drawn-with-cairo.png" alt="Tools drawn with cairo screenshot" />
+<img src="{static}images/2.8-tools-drawn-with-cairo.png" alt="Tools drawn with cairo screenshot" />
</figure>
All tools rendering on canvas have been ported to Cairo to provide smooth antialiased graphics and make
GIMP's look and feel match modern users expectations. All but a few plug-ins have been ported over to Cairo
as well. Additionally all tools now use an on-canvas progress indicator instead of the one in the statusbar.
@@ -72,7 +72,7 @@ All tools rendering on canvas have been ported to Cairo to provide smooth antial
### On-Canvas Text Editing
<figure>
-<img src="{filename}images/2.8-on-canvas-text-editing.png" alt="On-canvas text editing screenshot" />
+<img src="{static}images/2.8-on-canvas-text-editing.png" alt="On-canvas text editing screenshot" />
</figure>
Text editing with the Text Tool is now performed on-canvas instead of in a separate window. The editing
on-canvas is rather sophisticated: apart from the usual text formatting features like font family, style and
size selectors you get numeric control over baseline offset and kerning, as well as the ability to change
text color for a selection. You can also use a combination of Alt and arrow keys to change baseline offset
and kerning. This feature was originally developed during Google Summer of Code 2008 and heavily improved
since.
@@ -86,7 +86,7 @@ Since the keyboard shortcuts Ctrl+E and Ctrl+Shift+E have been repurposed for th
### Simple Math In Size Entries
<figure>
-<img src="{filename}images/2.8-math-in-size-entries.png" alt="Math in size entries screenshot" />
+<img src="{static}images/2.8-math-in-size-entries.png" alt="Math in size entries screenshot" />
</figure>
Enhancements have also been made to the size entry widget, which is used for inputting most of the x, y,
width, height parameters. For example, in the scale dialog it is now possible to write '50%' in the Width
field to scale the image to 50% of the width. Expressions such as '30in + 40px' and '4 * 5.4in' work, too.
@@ -118,7 +118,7 @@ Enhancements have also been made to the size entry widget, which is used for inp
### Brush System Improvements
<figure>
-<img src="{filename}images/2.8-brush-system-improvements.png" alt="Brush system improvements screenshot" />
+<img src="{static}images/2.8-brush-system-improvements.png" alt="Brush system improvements screenshot" />
</figure>
The brush dynamics engine has been expanded considerably, making almost all aspects of the brush engine
drivable by a multitude of inputs, all of them configurable with their own response curve.
@@ -136,7 +136,7 @@ This new feature completely replaces the previously existing tool presets system
### Cage Transform Tool
<figure>
-<img src="{filename}images/2.8-cage-transform-tool.png" alt="Cage transform tool screenshot" />
+<img src="{static}images/2.8-cage-transform-tool.png" alt="Cage transform tool screenshot" />
</figure>
A completely new _Cage transform_ tool has been added thanks to the excellent work of one of our Google
Summer of Code 2010 students. The tool implements an innovative approach to free transformation and makes it
possible to easily warp parts of objects using an adjustable user-defined polygonal frame.
@@ -156,7 +156,7 @@ Last, but not least, a Web-page plug-in was added to render any web page into an
### For Tablet Users
<figure>
-<img src="{filename}images/2.8-for-stylus-users.png" alt="For stylus users screenshot" />
+<img src="{static}images/2.8-for-stylus-users.png" alt="For stylus users screenshot" />
</figure>
A new experimental widget was added to meet the requirements of graphic tablets users. The widget combines a
slider, a label and a numeric value control which simplifies adjusting a value using a stylus, better
visualizes the current value and provides a more compact UI. It is now used in the Tools Options dockable
dialog for opacity control and most options of brush based tools.
@@ -169,7 +169,7 @@ People with Intuos tablets and either Artpen or Airbrush styluses will be glad t
### Resource Tagging
<figure>
-<img src="{filename}images/2.8-resource-tagging-brushes.png" alt="Resource tagging screenshot with brushes"
/>
+<img src="{static}images/2.8-resource-tagging-brushes.png" alt="Resource tagging screenshot with brushes" />
</figure>
It is now possible to tag GIMP resources such as brushes and patterns to group them. The tagging is
performed from the respective dockables e.g. the _Brushes_ dockable, and it is possible to filter resources
based on these tags.
@@ -229,7 +229,7 @@ The GIMP developers now maintain a roadmap for GIMP development found here: [htt
## GIMP 2.8 Screenshots
<figure>
-<img src="{filename}../screenshots/1280x800-fresh-start.jpg" alt="First GIMP 2.8 startup" />
+<img src="{static}/screenshots/1280x800-fresh-start.jpg" alt="First GIMP 2.8 startup" />
<figcaption>
First startup of GIMP 2.8 on a 1280x800 desktop.
</figcaption>
diff --git a/content/tutorials/3d_Logo/index.md b/content/tutorials/3d_Logo/index.md
index 9ff53536..2beda721 100644
--- a/content/tutorials/3d_Logo/index.md
+++ b/content/tutorials/3d_Logo/index.md
@@ -15,7 +15,7 @@ This tutorial is aimed squarely at the novice GIMP user. The more experienced us
## Step 1
<figure>
-<img src="{filename}logo-00.png" alt="Floating Logo" />
+<img src="{static}logo-00.png" alt="Floating Logo" />
</figure>
@@ -24,7 +24,7 @@ Fire up GIMP and create a new image. I used a white background at 500px by 200px
## Step 2
<figure>
-<img src="{filename}logo-01.png" alt="Floating Logo" />
+<img src="{static}logo-01.png" alt="Floating Logo" />
</figure>
Start by laying down some text that is wider than 400px and not too thin. I've used a font called Pricedown.
The text should be created as a new layer. If you use GIMP FreeType then it is done for you, otherwise click
the New Layer button in the Layers, Channels, & Paths dialog (looks like a blank piece of paper). It will
help to change the layer size to that of the image. Do so by accessing the Layers menu (right click or
Control+Click on the layer you wish to operate on) and select Layer to Imagesize.
@@ -32,7 +32,7 @@ Start by laying down some text that is wider than 400px and not too thin. I've u
## Step 3
<figure>
-<img src="{filename}logo-02.png" alt="Floating Logo" />
+<img src="{static}logo-02.png" alt="Floating Logo" />
</figure>
Duplicate the text layer (text) twice. One for the highlight effect (highlight) and one for the shaded part
of the effect (lowlight). The highlight layer needs to be white, so select that layer, check the Keep Trans.
box on the Layers, Channels, & Paths dialog, and fill it with white. You can do this easily by dragging the
white color swatch from the toolbox over to the image (assuming that the highlight layer is currently
selected). Keep Trans. means "Keep Transparency"; this will ensure that any transformations or fills made to
that layer will only affect the non-transparent part of the image.
@@ -40,7 +40,7 @@ Duplicate the text layer (text) twice. One for the highlight effect (highlight)
## Step 4
<figure>
-<img src="{filename}logo-03.png" alt="Floating Logo" />
+<img src="{static}logo-03.png" alt="Floating Logo" />
</figure>
Duplicate the text layer again and move it to the top of the Layers stack (use the little up facing arrow
head on the Layers, Channels, & Paths dialog). Make sure that Keep Trans. is un-checked and then blur it. I
used Gaussian Blur (RLE) at 10 pixels. When I did the original logo, it was set lower than this to make the
effect less rounded.
@@ -50,7 +50,7 @@ You will need to make sure that the layer boundary is larger than the layer so t
## Step 5
<figure>
-<img src="{filename}logo-04.png" alt="Floating Logo" />
+<img src="{static}logo-04.png" alt="Floating Logo" />
</figure>
Duplicate the blurred layer once (tmp1 and tmp2). These layers are used to create the edge lighting for the
text.
@@ -58,7 +58,7 @@ Duplicate the blurred layer once (tmp1 and tmp2). These layers are used to creat
## Step 6
<figure>
-<img src="{filename}logo-05.png" alt="Floating Logo" />
+<img src="{static}logo-05.png" alt="Floating Logo" />
</figure>
Nudge one of the blurred layers (tmp1) down and to the right about 5 pixels. The precise number of pixels
depends on how blurred and thus how round the text will appear to be, so use your best judgement. You can
nudge layers my using the Move tool and the cursor keys on your keyboard. It doesn't matter which of the
blurred layers you use in this step, as long as you know which one you didn't move \x{2013} you'll be needing
to do a very similar thing to that one soon.
@@ -66,7 +66,7 @@ Nudge one of the blurred layers (tmp1) down and to the right about 5 pixels. The
## Step 7
<figure>
-<img src="{filename}logo-06.png" alt="Floating Logo" />
+<img src="{static}logo-06.png" alt="Floating Logo" />
</figure>
Now create a selection using the blurred layer (the one you moved in step 6) using Alpha to Selection. This
selection is a precise selection based on the layer and includes alpha (transparency) information. Handy
stuff. You'll notice that I've turned off the layer below (the other blurred layer). This was done to make
sure I could see how far I moved this layer during step 6.
@@ -74,7 +74,7 @@ Now create a selection using the blurred layer (the one you moved in step 6) usi
## Step 8
<figure>
-<img src="{filename}logo-07.png" alt="Floating Logo" />
+<img src="{static}logo-07.png" alt="Floating Logo" />
</figure>
Now that the layer is selected...
@@ -82,7 +82,7 @@ Now that the layer is selected...
## Step 9
<figure>
-<img src="{filename}logo-08.png" alt="Floating Logo" />
+<img src="{static}logo-08.png" alt="Floating Logo" />
</figure>
Select the highlight layer and...
@@ -90,7 +90,7 @@ Select the highlight layer and...
## Step 10
<figure>
-<img src="{filename}logo-09.png" alt="Floating Logo" />
+<img src="{static}logo-09.png" alt="Floating Logo" />
</figure>
Cut (edit/cut or <kbd>CTRL+X</kbd> on PC or <kbd>Command+X</kbd> on Mac). This will remove the blurred
layers selection from the highlight layer. You could do this with channel masks, but I'm a man of simple
needs and wants. There's another step after this that I haven't documented, but that's because it's the same
thing again (steps 6-10) but with the other layer (tmp2: see steps 5 and 6). Move (nudge) that layer in the
opposite direction (up and to the left about 5 pixels), then make the cut from the lowlight layer. Once
you're done, delete the two blurred layers (tmp1 and tmp2).
@@ -98,7 +98,7 @@ Cut (edit/cut or <kbd>CTRL+X</kbd> on PC or <kbd>Command+X</kbd> on Mac). This w
## Step 11
<figure>
-<img src="{filename}logo-10.png" alt="Floating Logo" />
+<img src="{static}logo-10.png" alt="Floating Logo" />
</figure>
I like to take quasi-breaks while doing some images, and this is one of those times. A good time to roll a
cigarette or grab a cup coffee. I also tend to clean up temporary layers occasionally.
@@ -106,7 +106,7 @@ I like to take quasi-breaks while doing some images, and this is one of those ti
## Step 12
<figure>
-<img src="{filename}logo-11.png" alt="Floating Logo" />
+<img src="{static}logo-11.png" alt="Floating Logo" />
</figure>
Now we'll add the first elements of 3D-ness to the logo. The original text layer is the base layer for any
color you want to add. I'll use grey70, but you could just as easily use any old color you like. It's a good
idea to play with this as you can get some funky plastic logos too. Make sure Keep Trans. is checked when you
fill the layer.
@@ -114,7 +114,7 @@ Now we'll add the first elements of 3D-ness to the logo. The original text layer
## Step 13
<figure>
-<img src="{filename}logo-12.png" alt="Floating Logo" />
+<img src="{static}logo-12.png" alt="Floating Logo" />
</figure>
As you can see, it's starting to look like something now.
@@ -122,7 +122,7 @@ As you can see, it's starting to look like something now.
## Step 14
<figure>
-<img src="{filename}logo-13.png" alt="Floating Logo" />
+<img src="{static}logo-13.png" alt="Floating Logo" />
</figure>
Click the blank piece of paper on the Layers, Channels, & Paths dialog and make a new transparent layer
called outline. Move this new layer down the layers stack until it's underneath the original text layer.
@@ -130,7 +130,7 @@ Click the blank piece of paper on the Layers, Channels, & Paths dialog and make
## Step 15
<figure>
-<img src="{filename}logo-14.png" alt="Floating Logo" />
+<img src="{static}logo-14.png" alt="Floating Logo" />
</figure>
Select the original text layer (the one you added some color to) and do the Alpha to Selection trick again.
Right click on the image and use <span class="filter"><Image> Select -> Grow</span>. This will make the new
selection larger by a number of pixels - I used a value of 2 pixels. Once you have a selection, be sure to
reselect the new layer (outline) so that you can fill it (step 17). And below is what it looks like.
@@ -138,7 +138,7 @@ Select the original text layer (the one you added some color to) and do the Alph
## Step 16
<figure>
-<img src="{filename}logo-15.png" alt="Floating Logo" />
+<img src="{static}logo-15.png" alt="Floating Logo" />
</figure>
And this is what it looks like.
@@ -146,7 +146,7 @@ And this is what it looks like.
## Step 17
<figure>
-<img src="{filename}logo-16.png" alt="Floating Logo" />
+<img src="{static}logo-16.png" alt="Floating Logo" />
</figure>
Fill the layer with black and deselect (<kbd>CTRL+SHIFT+A</kbd> on PC or <kbd>Command+SHIFT+A</kbd> on Mac).
As you can see, the image now has more background contrast. Now, duplicate that layer and lower the copy
below the original outline layer. Make sure that Keep Trans. is not checked, and blur it. I like soft
shadows, so I used a Gaussian Blur (RLE) of about 30 pixels. Drop the Opacity of the layer down to about 50
and nudge it to the right and down until it looks okay.
@@ -156,7 +156,7 @@ A nice way to fill selection areas or layers that have Keep Trans. selected, is
## Step 18
<figure>
-<img src="{filename}logo-17.png" alt="Floating Logo" />
+<img src="{static}logo-17.png" alt="Floating Logo" />
</figure>
This is what the Layers, Channels, & Paths dialog should look like.
@@ -164,7 +164,7 @@ This is what the Layers, Channels, & Paths dialog should look like.
## Step 19
<figure>
-<img src="{filename}logo-18.png" alt="Floating Logo" />
+<img src="{static}logo-18.png" alt="Floating Logo" />
</figure>
I've duplicated the highlight and lowlight layers and made them all blend with the lower layers using the
Overlay mode. This helps to make the edges more 3D.
@@ -172,7 +172,7 @@ I've duplicated the highlight and lowlight layers and made them all blend with t
## Step 20
<figure>
-<img src="{filename}logo-19.png" alt="Floating Logo" />
+<img src="{static}logo-19.png" alt="Floating Logo" />
</figure>
Create a new transparent layer called rust and select the bezier tool (shown here as the depressed button).
@@ -180,7 +180,7 @@ Create a new transparent layer called rust and select the bezier tool (shown her
## Step 21
<figure>
-<img src="{filename}logo-20.png" alt="Floating Logo" />
+<img src="{static}logo-20.png" alt="Floating Logo" />
</figure>
Rust isn't uniform and I've decided to only worry about the lower half of the letters. Use the bezier tool
on the new rust layer to start a selection that looks like...
@@ -188,7 +188,7 @@ Rust isn't uniform and I've decided to only worry about the lower half of the le
## Step 22
<figure>
-<img src="{filename}logo-21.png" alt="Floating Logo" />
+<img src="{static}logo-21.png" alt="Floating Logo" />
</figure>
This. Click inside the bezier path once you close it (close it by clicking one the first node). This will
create a selection. Use <span class="filter"><Image> Select -> Feather</span> to feather (blur) the
selection. I used a value of about 10 pixels.
@@ -196,7 +196,7 @@ This. Click inside the bezier path once you close it (close it by clicking one t
## Step 23
<figure>
-<img src="{filename}logo-22.png" alt="Floating Logo" />
+<img src="{static}logo-22.png" alt="Floating Logo" />
</figure>
Pick a nice bright orange or brown color for the rust. My site logo used a reddy-borwn color, but here I've
chosen a bright orange. Fill the selection with it. Using the famed Alpha to Selection move, get the
selection for the original text layer. Once you have that selection area, click the rust layer to make it
active. Invert the selection (<kbd>CTRL+I</kbd> or <kbd>Command+I</kbd>) and Cut. This will leave only the
part of the rust layer that actually covers the letters and not the extra.
@@ -204,7 +204,7 @@ Pick a nice bright orange or brown color for the rust. My site logo used a reddy
## Step 24
<figure>
-<img src="{filename}logo-23.png" alt="Floating Logo" />
+<img src="{static}logo-23.png" alt="Floating Logo" />
</figure>
Change the Layer Mode of the rust layer to Muliply (Burn).
@@ -212,7 +212,7 @@ Change the Layer Mode of the rust layer to Muliply (Burn).
## Step 25
<figure>
-<img src="{filename}logo-24.png" alt="Floating Logo" />
+<img src="{static}logo-24.png" alt="Floating Logo" />
</figure>
The image should now look a little like this. Don't worry, it'll look better soon.
@@ -220,7 +220,7 @@ The image should now look a little like this. Don't worry, it'll look better soo
## Step 26
<figure>
-<img src="{filename}logo-25.png" alt="Floating Logo" />
+<img src="{static}logo-25.png" alt="Floating Logo" />
</figure>
With the rust layer selected, add a Layer Mask.
@@ -228,7 +228,7 @@ With the rust layer selected, add a Layer Mask.
## Step 27
<figure>
-<img src="{filename}logo-26.png" alt="Floating Logo" />
+<img src="{static}logo-26.png" alt="Floating Logo" />
</figure>
Making sure that you reset the color swatches on the toolbox, use the gradient tool to make a gradient in
the Layer Mask so it looks like this.
@@ -236,7 +236,7 @@ Making sure that you reset the color swatches on the toolbox, use the gradient t
## Step 28
<figure>
-<img src="{filename}logo-27.png" alt="Floating Logo" />
+<img src="{static}logo-27.png" alt="Floating Logo" />
</figure>
The image should now look like this.
@@ -244,7 +244,7 @@ The image should now look like this.
## Final
<figure>
-<img src="{filename}logo-28.png" alt="Floating Logo" />
+<img src="{static}logo-28.png" alt="Floating Logo" />
</figure>
With a little playing around you can get to this. I duplicated the rust layer and moved them (the original
rust and the copy) down the stack until the highlight and lowlight layers were above them. I also duplicated
the original text layer, switched on Keep Trans., and used <span class="filter"><Image> Render -> Clouds ->
Solid Noise</span> to add a bit of interest to the layer. Try using the Curves tool to help with this. You
may also notice that the outline layer is blurred. Sometimes this can help. The idea is, try stuff and find
out.
diff --git a/content/tutorials/Advanced_Animations/index.md b/content/tutorials/Advanced_Animations/index.md
index 1579d4f2..04a4e9a1 100644
--- a/content/tutorials/Advanced_Animations/index.md
+++ b/content/tutorials/Advanced_Animations/index.md
@@ -16,7 +16,7 @@ The key function of the GAP is the **move path** dialog. Please go to the "[Usin
## Step 1
<figure>
-<a href="gap-static.xcf.bz2"><img src="{filename}gap-static.png" alt="Floating Logo" /></a>
+<a href="gap-static.xcf.bz2"><img src="{static}gap-static.png" alt="Floating Logo" /></a>
</figure>
@@ -25,7 +25,7 @@ To make things easier, we'll start with a ready-to-go static image. To load it i
## Step 2
<figure>
-<img src="{filename}gap-duplicate.png" alt="GAP Animation Tutorial" />
+<img src="{static}gap-duplicate.png" alt="GAP Animation Tutorial" />
</figure>
Now drag the background layer from the static image to the GIMP toolbar. This will create a new white image
we'll use as a base for our animation. To be able to work with GAP you need to save it in GIMP's native
format, **.xcf**. Create a separate directory for the file, it will fill with many frame files soon. The file
needs to be named like this:
@@ -37,11 +37,11 @@ You can only change the **name** part. The rest needs to be exactly the way show
## Step 3
<figure>
-<img src="{filename}gap-source.png" alt="GAP Animation Tutorial" />
+<img src="{static}gap-source.png" alt="GAP Animation Tutorial" />
</figure>
<figure>
-<img src="{filename}gap-move.png" alt="GAP Animation Tutorial" />
+<img src="{static}gap-move.png" alt="GAP Animation Tutorial" />
</figure>
Now it's time to use the **move path** function. Make sure you have the static image open but use the
function on the white background image. In the dialog, select the logo image as source and make sure you set
the stepmode to **none**! Keep the mode as **normal** and choose some handle mode. I have used **center**, so
use that if you're going to stick with the parameters provided here.
@@ -53,11 +53,11 @@ Adding points to your animation creates linear time segments between those. If y
## Step 4
<figure>
-<img src="{filename}gap-navi.png" alt="GAP Animation Tutorial" />
+<img src="{static}gap-navi.png" alt="GAP Animation Tutorial" />
</figure>
<figure>
-<img src="{filename}gap-final.gif" alt="GAP Animation Tutorial" />
+<img src="{static}gap-final.gif" alt="GAP Animation Tutorial" />
</figure>
Now we have a rendered sequence of images. You can navigate them easily using the **video/VCR navigator**.
Pressing play on the navigator will call two functions, **frames to image** and **animation playback**, so
it's fast and convenient to use it to check the looks of your animation.
diff --git a/content/tutorials/Anti-Aliased_Threshold/index.md
b/content/tutorials/Anti-Aliased_Threshold/index.md
index dadaf000..4e2733d5 100644
--- a/content/tutorials/Anti-Aliased_Threshold/index.md
+++ b/content/tutorials/Anti-Aliased_Threshold/index.md
@@ -15,8 +15,8 @@ The threshold plug-in works by dividing the image into two parts, dark and light
## Problems with the threshold
<figure>
-<img src="{filename}original.jpg" alt="Antialiased Threshold Tutorial" />
-<img src="{filename}threshold.jpg" alt="Antialiased Threshold Tutorial" />
+<img src="{static}original.jpg" alt="Antialiased Threshold Tutorial" />
+<img src="{static}threshold.jpg" alt="Antialiased Threshold Tutorial" />
</figure>
@@ -25,8 +25,8 @@ On the left you we see the original image that is about to be thresholded, and o
## The Curves Trick
<figure>
-<img src="{filename}curves.png" alt="Antialiased Threshold Tutorial" />
-<img src="{filename}finished.jpg" alt="Antialiased Threshold Tutorial" />
+<img src="{static}curves.png" alt="Antialiased Threshold Tutorial" />
+<img src="{static}finished.jpg" alt="Antialiased Threshold Tutorial" />
</figure>
First duplicate the image layer by going to the layers dialog, making sure the image layer is selected, and
clicking the duplicate button (fourth from the left). We can use the original layer for some color tricks
later. Now the next thing is to desaturate the image (<span class="filter"><Image> Layers -> Colors ->
Desaturate</span>). This way the colors will not interfere with the fake thresholding. When the layer is
grayscale, select the curves editor (<span class="filter"><Image> Layers -> Colors -> Curves</span>). Now we
can play with the Value "channel". The image on the left displays the settings used for the example image.
The space between the two dots determines how much aa the resulting image will have. The wider the gap, the
more grayscale values it will have, and vice versa. The resulting image can be seen on the right.
@@ -34,7 +34,7 @@ First duplicate the image layer by going to the layers dialog, making sure the i
## A neat addition
<figure>
-<img src="{filename}effect.jpg" alt="Antialiased Threshold Tutorial" />
+<img src="{static}effect.jpg" alt="Antialiased Threshold Tutorial" />
</figure>
If you now take the original image layer, move it over the new one (make sure it has an alpha channel), and
change its mode to "Color" in the layers dialog, you get nice results displayed above.
diff --git a/content/tutorials/Asset_Folders/index.md b/content/tutorials/Asset_Folders/index.md
index db2c3d89..a179ab90 100644
--- a/content/tutorials/Asset_Folders/index.md
+++ b/content/tutorials/Asset_Folders/index.md
@@ -22,13 +22,13 @@ To open it, go to:
Which will open the GIMP preferences dialog:
<figure>
-<img src='{filename}GIMP-Preferences.png' alt='GIMP Preferences Dialog'>
+<img src='{static}GIMP-Preferences.png' alt='GIMP Preferences Dialog'>
</figure>
Expanding the **Folders** (click the "+") in the left pane of the dialog will expose the various asset
folder locations:
<figure>
-<img src='{filename}GIMP-Preferences-Folders.png' alt='GIMP Preferences Folders Dialog'>
+<img src='{static}GIMP-Preferences-Folders.png' alt='GIMP Preferences Folders Dialog'>
</figure>
Selecting one of the options on the left will show the current paths that GIMP will search for that option.
@@ -56,7 +56,7 @@ You can also use a folder as part of a file-syncing service to make scripts and
On the right side of the dialog there are a series of buttons that allow you to manage the folders in the
list:
<figure>
-<img src='{filename}GIMP-Preferences-Define.png' alt='GIMP Preferences Define Folders Dialog'>
+<img src='{static}GIMP-Preferences-Define.png' alt='GIMP Preferences Define Folders Dialog'>
</figure>
@@ -70,7 +70,7 @@ Then use the file chooser button on the far right to navigate your file system a
For example, I've navigated to, and chosen, the folder `F:\Personal\github\test-gimp-scripts`:
<figure>
-<img src='{filename}GIMP-Preferences-Folders-New.png' alt='GIMP Preferences Define New Folders'>
+<img src='{static}GIMP-Preferences-Folders-New.png' alt='GIMP Preferences Define New Folders'>
</figure>
If you're happy with your choice, you can press the **OK** button to save your changes.
diff --git a/content/tutorials/Automate_Editing_in_GIMP/index.md
b/content/tutorials/Automate_Editing_in_GIMP/index.md
index ce7e1980..7c918a18 100644
--- a/content/tutorials/Automate_Editing_in_GIMP/index.md
+++ b/content/tutorials/Automate_Editing_in_GIMP/index.md
@@ -46,7 +46,7 @@ Suppose we wanted to set up the grid spacing so that it is centered on the image
<figure>
-<img src="{filename}CommandsPythonConsole.jpg" alt="CommandsPythonConsole.jpg" />
+<img src="{static}CommandsPythonConsole.jpg" alt="CommandsPythonConsole.jpg" />
<figcaption>
Commands in the Python Console
</figcaption>
@@ -75,7 +75,7 @@ Example "Exec" Loop:
<figure>
-<img src="{filename}CommanderMacroSubMenu.jpg" alt="CommanderMacroSubMenu.jpg" />
+<img src="{static}CommanderMacroSubMenu.jpg" alt="CommanderMacroSubMenu.jpg" />
<figcaption>
Commander Macro Sub-Menu
</figcaption>
@@ -147,7 +147,7 @@ Python has several built in data structures such as dictionaries, lists to name
3. The input / output format is XML, which is not only hierarchical, but it is text so it is human readable
and portable to any platform (computer / OS).
<figure>
-<img src="{filename}XmlHierarchyContainers.jpg" alt="XmlHierarchyContainers.jpg" />
+<img src="{static}XmlHierarchyContainers.jpg" alt="XmlHierarchyContainers.jpg" />
<figcaption>
XML Hierarchy - Containers
</figcaption>
@@ -223,7 +223,7 @@ After all of the \*.def files are read into the tree and written back out in the
_\* The XML above was run through an online XML pretty printer for readability. The XML from ElementTree is
functional, but hard to read._
<figure markdown="span">
-<img src="{filename}PseudoCodetoXmlFunction.jpg" alt="PseudoCodetoXmlFunction.jpg" />
+<img src="{static}PseudoCodetoXmlFunction.jpg" alt="PseudoCodetoXmlFunction.jpg" />
<figcaption>
Creating XML from \*.def files
</figcaption>
@@ -232,7 +232,7 @@ Creating XML from \*.def files
The Xml generator can be called from a GUI menu.
<figure>
-<img src="{filename}PseudoCodeImported.jpg" alt="PseudoCodeImported.jpg" />
+<img src="{static}PseudoCodeImported.jpg" alt="PseudoCodeImported.jpg" />
<figcaption>
Xml files built
</figcaption>
@@ -365,7 +365,7 @@ The mechanics for creating XML from pseudo code for the workflows, properties, a
The export XCF to JPG function in the “Automation” menu opens each xcf file in the source / work directory
and looks at the properties of the image. If the image is “Finished”, at the end of the flow, it is exported.
The images that are still being work on are left alone.
<figure>
-<img src="{filename}RunningAutoUpdate.jpg" alt="RunningAutoUpdate.jpg" />
+<img src="{static}RunningAutoUpdate.jpg" alt="RunningAutoUpdate.jpg" />
<figcaption>
Running AutoUpdate
</figcaption>
@@ -392,7 +392,7 @@ There are three properties that are assigned by the automation scripts and are n
You can see all of the properties and current assigned values for a particular image using the menu function
“Automation” -> “A1) Display Assigned Parasites (File)”.
<figure>
-<img src="{filename}ParasitesImage.jpg" alt="ParasitesImage.jpg" />
+<img src="{static}ParasitesImage.jpg" alt="ParasitesImage.jpg" />
<figcaption>
Assigned Parasites
</figcaption>
@@ -644,7 +644,7 @@ _Example – Running your own Functions in the Python-Fu Console_
The screen shot below illustrates the process on the Windows version of Gimp / Python Console (TestXmlGen is
pictured, TestXmlRead produces several pages of output):
<figure>
-<img src="{filename}Appendix-testing-in-python-console.JPG" alt="Appendix-testing-in-python-console.JPG" />
+<img src="{static}Appendix-testing-in-python-console.JPG" alt="Appendix-testing-in-python-console.JPG" />
<figcaption>
Image - Running your code in the Gimp Python Console
</figcaption>
diff --git a/content/tutorials/AutomatedJpgToXcf/index.md b/content/tutorials/AutomatedJpgToXcf/index.md
index 5a489098..aef0e01d 100644
--- a/content/tutorials/AutomatedJpgToXcf/index.md
+++ b/content/tutorials/AutomatedJpgToXcf/index.md
@@ -8,7 +8,7 @@ Template: page_author
## Motivation
<figure>
-<img src="{filename}gimp_jpg_to_xcf_popup.jpg" alt="gimp_jpg_to_xcf_popup.jpg" />
+<img src="{static}gimp_jpg_to_xcf_popup.jpg" alt="gimp_jpg_to_xcf_popup.jpg" />
</figure>
While it is easy to do, opening a Jpeg file and saving it in the native GIMP \*.xcf format is tedious and
time consuming. You may also want to perform the same operation, like setting the grid spacing as an example,
on all of the images that you import as part of the process. Automating the parts of the editing process that
are the same for each image saves time, produces consistent results, and allows you to focus your attention
on the part of the image editing process that really needs your attention.
@@ -67,7 +67,7 @@ The image below shows menu items with and without an image loaded. The menu item
#### Function Menus
<figure>
-<img src="{filename}gimp_menu_compare.jpg" alt="Menu Compare - Image types" />
+<img src="{static}gimp_menu_compare.jpg" alt="Menu Compare - Image types" />
</figure>
Our **second requirement**, to be able to use the GUI to browse to our Jpeg source file directory and our
Xcf target file directory is handled first in the registration block by using the "**SF-DIRNAME**" widgets to
label the GUI selection fields and pass the collected results as inputs to the script (above). Once we have
the path names to our source and target directories we will use the "**file-glob**" (os.listdir in python-fu)
function within the main program to create a list of all of the image files in those directories.
diff --git a/content/tutorials/Basic_Color_Curves/index.md b/content/tutorials/Basic_Color_Curves/index.md
index f8a700dd..941e5a1f 100644
--- a/content/tutorials/Basic_Color_Curves/index.md
+++ b/content/tutorials/Basic_Color_Curves/index.md
@@ -19,7 +19,7 @@ Instead, we are going to take a look at the use of the **Curves** tool in [GIMP]
First there’s something you need to consider if you haven’t before, and that’s what goes into representing a
colored pixel on your screen.
<figure>
-<img src="{filename}curves-house-square-full.jpg" alt="PIXLS.US House Zoom Example" />
+<img src="{static}curves-house-square-full.jpg" alt="PIXLS.US House Zoom Example" />
<figcaption>
Open up an image in GIMP.
</figcaption>
@@ -27,21 +27,21 @@ Open up an image in GIMP.
<figure>
-<img src="{filename}curves-house-square-zoom-1.jpg" alt="PIXLS.US House Zoom Example" />
+<img src="{static}curves-house-square-zoom-1.jpg" alt="PIXLS.US House Zoom Example" />
<figcaption>
Now zoom in.
</figcaption>
</figure>
<figure>
-<img src="{filename}curves-house-square-zoom-2.jpg" alt="PIXLS.US House Zoom Example" />
+<img src="{static}curves-house-square-zoom-2.jpg" alt="PIXLS.US House Zoom Example" />
<figcaption>
Nope - don’t be shy now, zoom in more!
</figcaption>
</figure>
<figure>
-<img src="{filename}curves-house-square-zoom-3.png" alt="PIXLS.US House Zoom Example" />
+<img src="{static}curves-house-square-zoom-3.png" alt="PIXLS.US House Zoom Example" />
<figcaption>
Aaand there’s your pixel. So let’s investigate what goes into making your pixel.
</figcaption>
@@ -57,7 +57,7 @@ If all three channels have the same value, then you will get a shade of gray (12
So now let’s see what goes into making up your pixel:
<figure>
-<img src="{filename}curves-your-pixel-info.png" alt="GIMP Color Picker Pixel View" >
+<img src="{static}curves-your-pixel-info.png" alt="GIMP Color Picker Pixel View" >
<figcaption>
The RGB components that mix into your final <span class='tBrightBlue'>blue pixel</span>.
</figcaption>
@@ -70,7 +70,7 @@ As you can see, there is more blue than anything else (it is a blue-ish pixel af
So let’s leave your pixel alone for the time being, and actually have a look at the **Curves** dialog. I’ll
be using this wonderful image by [Eric](https://www.flickr.com/photos/qsimple/) from
[Flickr](https://www.flickr.com).
<figure markdown="span">
-<img src="{filename}flickr-qsimple-5636649561-original.jpg" alt="Hollow Moon by Eric qsimple Flickr" >
+<img src="{static}flickr-qsimple-5636649561-original.jpg" alt="Hollow Moon by Eric qsimple Flickr" >
<figcaption>
[Hollow Moon](https://www.flickr.com/photos/qsimple/5636649561/) by
[qsimple/Eric](https://www.flickr.com/photos/qsimple/) on [Flickr](https://www.flickr.com).
([cc-by-nc-sa](https://creativecommons.org/licenses/by-nc-sa/2.0/))
</figcaption>
@@ -81,7 +81,7 @@ Opening up my **Curves** dialog shows me the following:
<div class="MenuCmd"><span>Colors → Curves…</span></div>
<figure>
-<img src="{filename}curves-dialog-original.png" alt="GIMP Base Curves Dialog" />
+<img src="{static}curves-dialog-original.png" alt="GIMP Base Curves Dialog" />
</figure>
We can see that I start off with the curve for the **Value** of the pixels. I could also use the drop down
for **“Channel”** to change to red, green or blue curves if I wanted to. For now let’s look at **Value**,
though.
@@ -89,7 +89,7 @@ We can see that I start off with the curve for the **Value** of the pixels. I co
In the main area of the dialog I am presented with a linear curve, behind which I will see a histogram of
the value data for the entire image (showing the amount of each value across my image). Notice a spike in the
high values on the right, and a small gap at the brightest values.
<figure>
-<img src="{filename}curves-dialog-original-IO.png" alt="GIMP Base Curves Dialog Input Output" />
+<img src="{static}curves-dialog-original-IO.png" alt="GIMP Base Curves Dialog Input Output" />
</figure>
What we can do right now is to adjust the values of each pixel in the image using this curve. The best way
to visualize it is to remember that the bottom range from black to white represents the <span
class='tBrightBlue'>**_current_** value of the pixels</span>, and the left range is the <span
class='tOrange'>value to be mapped to</span>.
@@ -97,7 +97,7 @@ What we can do right now is to adjust the values of each pixel in the image usin
So to show an example of how this curve will affect your image, suppose I wanted to remap all the values in
the image that were in the midtones, and to make them all lighter. I can do this by clicking on the curve
near the midtones, and dragging the curve higher in the Y direction:
<figure>
-<img src="{filename}curves-dialog-midtones.png" alt="GIMP Base Curves Dialog Push Midtones" />
+<img src="{static}curves-dialog-midtones.png" alt="GIMP Base Curves Dialog Push Midtones" />
</figure>
What this curve does is takes the values around the midtones, and pushes their values to be much lighter
than they were. In this case, values around <span class='tBrightBlue'>128</span> were re-mapped to now be
closer to <span class='tOrange'>192</span>.
@@ -105,8 +105,8 @@ What this curve does is takes the values around the midtones, and pushes their v
Because the curve is set **Smooth**, there will be a gradual transition for all the tones surrounding my
point to be pulled in the same direction (this makes for a smoother fall-off as opposed to an abrupt change
at one value). Because there is only a single point in the curve right now, this means that all values will
be pulled higher.
<figure>
-<noscript><img alt="Hollow Moon Example" class="comp" src="{filename}flickr-qsimple-5636649561-original.jpg"
/></noscript>
-<img class="comp" alt="Hollow Moon Example Pushed Midtones"
data-swap-src="{filename}flickr-qsimple-5636649561-original.jpg"
src="{filename}flickr-qsimple-5636649561-mid-boostl.jpg" />
+<noscript><img alt="Hollow Moon Example" class="comp" src="{static}flickr-qsimple-5636649561-original.jpg"
/></noscript>
+<img class="comp" alt="Hollow Moon Example Pushed Midtones"
data-swap-src="{static}flickr-qsimple-5636649561-original.jpg"
src="{static}flickr-qsimple-5636649561-mid-boostl.jpg" />
<figcaption>
The results of pushing the midtones of the value curve higher<br/>
(click to compare to original).
@@ -119,7 +119,7 @@ Care should be taken when fiddling with these curves to not blow things out or d
A very common curve adjustment you may hear about is to apply a slight “S” curve to your values. The effect
of this curve would be to darken the dark tones, and to lighten the light tones - in effect increasing global
contrast on your image. For instance, if I click on another point in the curves, and adjust the points to
form a shape like so:
<figure>
-<img src="{filename}curves-dialog-slight-s.png" alt="GIMP Base Curves Dialog S shaped curve" >
+<img src="{static}curves-dialog-slight-s.png" alt="GIMP Base Curves Dialog S shaped curve" >
<figcaption>
A slight “S” curve
</figcaption>
@@ -128,8 +128,8 @@ A slight “S” curve
This will now cause dark values to become even darker, while the light values get a small boost. The curve
still passes through the midpoint, so middle tones will stay closer to what they were.
<figure>
-<noscript><img class="comp" src="{filename}flickr-qsimple-5636649561-original.jpg" alt="Hollow Moon Example"
/></noscript>
-<img alt="Hollow Moon Example S curve applied"
data-swap-src="{filename}flickr-qsimple-5636649561-original.jpg" class="comp"
src="{filename}flickr-qsimple-5636649561-slight-s.jpg" />
+<noscript><img class="comp" src="{static}flickr-qsimple-5636649561-original.jpg" alt="Hollow Moon Example"
/></noscript>
+<img alt="Hollow Moon Example S curve applied"
data-swap-src="{static}flickr-qsimple-5636649561-original.jpg" class="comp"
src="{static}flickr-qsimple-5636649561-slight-s.jpg" />
<figcaption>Slight “S” curve increases global contrast (click for original).
<noscript><br /> (Original on left)</noscript>
</figcaption>
@@ -138,7 +138,7 @@ This will now cause dark values to become even darker, while the light values ge
In general, I find it easiest to visualize in terms of which regions in the curve will effect different
tones in your image. Here is a quick way to visualize it (that is true for value as well as RGB curves):
<figure>
-<img src="{filename}curves-dialog-darksmidslights.png" alt="GIMP Base Curves darks mids lights zones" />
+<img src="{static}curves-dialog-darksmidslights.png" alt="GIMP Base Curves darks mids lights zones" />
</figure>
If there is one thing you take away from reading this, let it be the image above.
@@ -150,7 +150,7 @@ So how does this apply to other channels? Let’s have a look.
The exact same theory applies in the RGB channels as it did with values. The relative positions of the
darks, midtones, and lights are still the same in the curve dialog. The primary difference now is that you
can control the contribution of color in specific tonal regions of your image.
<figure>
-<img src="{filename}curves-dialog-value-rgb-select.png" alt="RGB Select" >
+<img src="{static}curves-dialog-value-rgb-select.png" alt="RGB Select" >
<figcaption>
Value, Red, Green, Blue channel picker.
</figcaption>
@@ -165,15 +165,15 @@ For example, perhaps we wanted to “cool” down the shadows of our image. “C
To try this, let’s adjust the **Blue** channel to be a little more prominent in the darker tones of our
image, but to get back to normal around the midtones and lighter.
<figure>
-<img src="{filename}curves-dialog-darks-blue-boost.png" alt="Darks Blue Boost" >
+<img src="{static}curves-dialog-darks-blue-boost.png" alt="Darks Blue Boost" >
<figcaption>
Boosting blues in darker tones
</figcaption>
</figure>
<figure>
-<noscript><img alt="Original" class="comp" src="{filename}flickr-qsimple-5636649561-original.jpg"
/></noscript>
-<img alt="Dark Blue Boost" class="comp" data-swap-src="{filename}flickr-qsimple-5636649561-original.jpg"
src="{filename}flickr-qsimple-5636649561-dark-blue-boost.jpg" />
+<noscript><img alt="Original" class="comp" src="{static}flickr-qsimple-5636649561-original.jpg" /></noscript>
+<img alt="Dark Blue Boost" class="comp" data-swap-src="{static}flickr-qsimple-5636649561-original.jpg"
src="{static}flickr-qsimple-5636649561-dark-blue-boost.jpg" />
<figcaption>Pushing up blues in darker tones (click for original).
<noscript><br /> (Original on left)</noscript>
</figcaption>
@@ -184,7 +184,7 @@ Now, here’s a question: If I wanted to “cool” the darker tones with more b
Well, there’s no “Yellow” curve to modify, so how to approach that? Have a look at this HSV color wheel
below:
<figure>
-<img src="{filename}Color_circle.png" alt="Color Circle Hue" />
+<img src="{static}Color_circle.png" alt="Color Circle Hue" />
</figure>
The thing to look out for here is that opposite your blue tones on this wheel, you’ll find yellow. In fact,
for each of the Red, Green, and Blue channels, the opposite colors on the color wheel will show you what an
absence of that color will do to your image. So remember:
@@ -196,12 +196,12 @@ What this means to you while manipulating curves is that if you drag a curve for
So to boost the blues in the dark tones, but increase the yellow in the lighter tones, you could create a
sort of “reverse” S-curve in the blue channel:
<figure>
-<img src="{filename}curves-dialog-darks-blue-boost-add-yellow.png" alt="Blue Boost add Yellow" />
+<img src="{static}curves-dialog-darks-blue-boost-add-yellow.png" alt="Blue Boost add Yellow" />
</figure>
<figure>
-<noscript><img alt="Original" class="comp" src="{filename}flickr-qsimple-5636649561-original.jpg"
/></noscript>
-<img alt="Blue boost add yellow" data-swap-src="{filename}flickr-qsimple-5636649561-original.jpg"
class="comp" src="{filename}flickr-qsimple-5636649561-dark-blue-boost-add-yellow.jpg" />
+<noscript><img alt="Original" class="comp" src="{static}flickr-qsimple-5636649561-original.jpg" /></noscript>
+<img alt="Blue boost add yellow" data-swap-src="{static}flickr-qsimple-5636649561-original.jpg" class="comp"
src="{static}flickr-qsimple-5636649561-dark-blue-boost-add-yellow.jpg" />
<figcaption>Boost blues in darks, boost yellow in high tones (click for original).
<noscript><br /> (Original on left)</noscript>
</figcaption>
@@ -210,12 +210,12 @@ So to boost the blues in the dark tones, but increase the yellow in the lighter
In the green channel for instance, you can begin to introduce more magenta into the tones by decreasing the
curve. So dropping the green curve in the dark tones, and letting it settle back to normal towards the high
tones will produce results like this:
<figure>
-<img src="{filename}curves-dialog-darks-green-suppress.png" alt="Darks Green Suppress" />
+<img src="{static}curves-dialog-darks-green-suppress.png" alt="Darks Green Suppress" />
</figure>
<figure markdown='span'>
-<noscript><img alt="Original" class="comp" src="{filename}flickr-qsimple-5636649561-original.jpg"
/></noscript>
-<img alt="Dark green suppress" data-swap-src="{filename}flickr-qsimple-5636649561-original.jpg" class="comp"
src="{filename}flickr-qsimple-5636649561-dark-green-suppresst.jpg" />
+<noscript><img alt="Original" class="comp" src="{static}flickr-qsimple-5636649561-original.jpg" /></noscript>
+<img alt="Dark green suppress" data-swap-src="{static}flickr-qsimple-5636649561-original.jpg" class="comp"
src="{static}flickr-qsimple-5636649561-dark-green-suppresst.jpg" />
<figcaption>Suppressing the **green** channel in darks/mids adds a bit of **magenta**
(click for original).
<noscript><br /> (Original on left)</noscript>
@@ -235,7 +235,7 @@ _Grading_ is a term for color toning on film, and Todd’s post is a funny look
The general thought here is that caucasian skin tones trend towards orange, and if you have a look at a
complementary color on the color wheel, you’ll notice that directly opposite orange is a teal color.
<figure markdown='span'>
-<img src="{filename}Kuler_orange_teal.jpg" alt="Kuler Example" >
+<img src="{static}Kuler_orange_teal.jpg" alt="Kuler Example" >
<figcaption>
Screenshot from [Kuler](https://color.adobe.com) borrowed from Todd.
</figcaption>
@@ -250,13 +250,13 @@ Quick disclaimer - I am purposefully exaggerating these modifications to illustr
So I know that I want to see my skin tones head into an orange-ish color. In my image the skin tones are in
the upper mids/low highs range of values, so I will start around there.
<figure>
-<img src="{filename}curves-dialog-orangeteal-red-high.png" alt="orangeteal red high" />
+<img src="{static}curves-dialog-orangeteal-red-high.png" alt="orangeteal red high" />
</figure>
What I’ve done is put a point around the low midtones to anchor the curve closer to normal for those tones.
This lets me fiddle with the red channel and to isolate it roughly to the mid and high tones only. The skin
tones in this image in the red channel will fall toward the upper end of the mids, so I’ve boosted the reds
there. Things may look a little weird at first:
<figure>
-<img src="{filename}flickr-qsimple-5636649561-orangeteal-red-highs.jpg" alt="orangeteal red highs" />
+<img src="{static}flickr-qsimple-5636649561-orangeteal-red-highs.jpg" alt="orangeteal red highs" />
</figure>
If you look back at the color wheel again, you’ll notice that between red and green, there is a yellow, and
if you go a bit closer towards red the yellow turns to more of an orange. What this means is that if we add
some more green to those same tones, the overall colors will start to shift towards an orange.
@@ -264,21 +264,21 @@ If you look back at the color wheel again, you’ll notice that between red and
So we can switch to the green channel now, put a point in the lower midtones again to hold things around
normal, and slightly boost the green. Don’t boost it all the way to the reds, but about 2/3<sup>rds</sup> or
so to taste.
<figure>
-<img src="{filename}curves-dialog-orangeteal-green-high.png" alt="orangeteal green high" />
+<img src="{static}curves-dialog-orangeteal-green-high.png" alt="orangeteal green high" />
</figure>
<figure>
-<img src="{filename}flickr-qsimple-5636649561-orangeteal-green-highs.jpg" alt="orangeteal green high" />
+<img src="{static}flickr-qsimple-5636649561-orangeteal-green-highs.jpg" alt="orangeteal green high" />
</figure>
This puts a little more red/orange-y color into the tones around the skin. You could further adjust this by
perhaps including a bit more yellow as well. To do this, I would again put an anchor point in the low mid
tones on the blue channel, then slightly drop the blue curve in the upper tones to introduce a bit of yellow.
<figure>
-<img src="{filename}curves-dialog-orangeteal-blue-high.png" alt="orangeteal blue high" />
+<img src="{static}curves-dialog-orangeteal-blue-high.png" alt="orangeteal blue high" />
</figure>
<figure>
-<img src="{filename}flickr-qsimple-5636649561-orangeteal-blue-highs.jpg" alt="orangeteal blue high" />
+<img src="{static}flickr-qsimple-5636649561-orangeteal-blue-highs.jpg" alt="orangeteal blue high" />
</figure>
Remember, we’re experimenting here so feel free to try things out as we move along. I may consider the upper
tones to be finished at the moment, and now I would want to look at introducing a more blue/teal color into
the darker tones.
@@ -286,31 +286,31 @@ Remember, we’re experimenting here so feel free to try things out as we move a
I can start by boosting a bit of blues in the dark tones. I’m going to use the anchor point I already
created, and just push things up a bit.
<figure>
-<img src="{filename}curves-dialog-orangeteal-blue-low.png" alt="orangeteal blue low" />
+<img src="{static}curves-dialog-orangeteal-blue-low.png" alt="orangeteal blue low" />
</figure>
<figure>
-<img src="{filename}flickr-qsimple-5636649561-orangeteal-blue-lows.jpg" alt="orangeteal blue low" />
+<img src="{static}flickr-qsimple-5636649561-orangeteal-blue-lows.jpg" alt="orangeteal blue low" />
</figure>
Now I want to make the darker tones a bit more teal in color. Remember the color wheel - **teal** is the
absence of red - so we will drop down the red channel in the lower tones as well.
<figure>
-<img src="{filename}curves-dialog-orangeteal-red-low.png" alt="orangeteal red low" />
+<img src="{static}curves-dialog-orangeteal-red-low.png" alt="orangeteal red low" />
</figure>
<figure>
-<img src="{filename}flickr-qsimple-5636649561-orangeteal-red-lows.jpg" alt="orangeteal red low" />
+<img src="{static}flickr-qsimple-5636649561-orangeteal-red-lows.jpg" alt="orangeteal red low" />
</figure>
And finally to push a very slight magenta into the dark tones as well, I’ll push down the green channel a
bit.
<figure>
-<img src="{filename}curves-dialog-orangeteal-green-low.png" alt="orangeteal green low" />
+<img src="{static}curves-dialog-orangeteal-green-low.png" alt="orangeteal green low" />
</figure>
<figure>
-<img src="{filename}flickr-qsimple-5636649561-orangeteal-green-lows.jpg" alt="orangeteal green low" />
+<img src="{static}flickr-qsimple-5636649561-orangeteal-green-lows.jpg" alt="orangeteal green low" />
</figure>
If I wanted to go a step further, I could also put an anchor point up close to the highest values to keep
the brightest parts of the image closer to a white instead of carrying over a color cast from our previous
operations.
@@ -318,14 +318,14 @@ If I wanted to go a step further, I could also put an anchor point up close to t
If your previous operations also darkened the image a bit, you could also now revisit the **Value** channel,
and make modifications there as well. In my case I bumped the midtones of the image just a bit to brighten
things up slightly.
<figure>
-<img src="{filename}curves-dialog-orangeteal-value-final.png" alt="orangeteal value final" />
+<img src="{static}curves-dialog-orangeteal-value-final.png" alt="orangeteal value final" />
</figure>
Finally to end up at something like this.
<figure>
-<noscript><img alt="Original" class="comp" src="{filename}flickr-qsimple-5636649561-original.jpg"
/></noscript>
-<img alt="orangeteal value final" data-swap-src="{filename}flickr-qsimple-5636649561-original.jpg"
class="comp" src="{filename}flickr-qsimple-5636649561-orangeteal-value-final.jpg" />
+<noscript><img alt="Original" class="comp" src="{static}flickr-qsimple-5636649561-original.jpg" /></noscript>
+<img alt="orangeteal value final" data-swap-src="{static}flickr-qsimple-5636649561-original.jpg"
class="comp" src="{static}flickr-qsimple-5636649561-orangeteal-value-final.jpg" />
<figcaption>After fooling around a bit - disgusting, isn’t it?
(click for original).
<noscript><br /> (Original on left)</noscript>
@@ -370,12 +370,12 @@ for ( var i = 0; i < imgs.length; i++ ){
var datasrc = decodeURI( img.src );
var dataswap = img.getAttribute('data-swap-src');
- if( datasrc.toLowerCase().indexOf('{filename}') !== -1 ){
- // {filename} is in src
- imgs[i].src = datasrc.replace( /.*{filename}/i, dataswap.replace( /[^\/]*$/, '' ) );
- }else if( dataswap.toLowerCase().indexOf('{filename}') !== -1 ){
+ if( datasrc.toLowerCase().indexOf('{static}') !== -1 ){
+ // {static} is in src
+ imgs[i].src = datasrc.replace( /.*{static}/i, dataswap.replace( /[^\/]*$/, '' ) );
+ }else if( dataswap.toLowerCase().indexOf('{static}') !== -1 ){
// {filename is in data-swap-src
- imgs[i].setAttribute( 'data-swap-src', dataswap.replace( /.*{filename}/i, datasrc.replace(
/[^\/]*$/, '' ) ) );
+ imgs[i].setAttribute( 'data-swap-src', dataswap.replace( /.*{static}/i, datasrc.replace( /[^\/]*$/,
'' ) ) );
}
imgs[i].setAttribute('data-swap', imgs[i].getAttribute('data-swap-src') );
diff --git a/content/tutorials/Basic_Perl/index.md b/content/tutorials/Basic_Perl/index.md
index 882590ce..2c87b9d2 100644
--- a/content/tutorials/Basic_Perl/index.md
+++ b/content/tutorials/Basic_Perl/index.md
@@ -222,7 +222,7 @@ This field is only used for scripts that are in the "<Image>" hieararchy.
<td valign="top">PF_SLIDER
PF_SPINNER</td>
<td valign="top">An integer value through a slider and a spinner interface. The range parameter
should be specified and is interpreted as minimum, maximum, and step, e.g. [0,100,1].</td>
- <td valign="top"></td>
+ <td valign="top"></td>
</tr>
<tr>
<td valign="top">PF_FONT</td>
@@ -259,17 +259,17 @@ This field is only used for scripts that are in the "<Image>" hieararchy.
</tr>
<tr>
<td valign="top">PF_BRUSH</td>
- <td valign="top"></td>
+ <td valign="top"></td>
<td valign="top">A brush</td>
</tr>
<tr>
<td valign="top">PF_GRADIENT</td>
- <td valign="top"></td>
+ <td valign="top"></td>
<td valign="top">A gradient</td>
</tr>
<tr>
<td valign="top">PF_PATTERN</td>
- <td valign="top"></td>
+ <td valign="top"></td>
<td valign="top">A pattern</td>
</tr>
</tbody>
@@ -411,19 +411,19 @@ Then start GIMP. It is generally a good idea to test the syntax of the script wi
The script is now accessible through the menu system through the **File/Create/Tutorial** top menu:
<figure>
-<img src="{filename}uni-menu.png" alt="uni-menu.png" />
+<img src="{static}uni-menu.png" alt="uni-menu.png" />
</figure>
When choosing this menu entry the following screen is popped up:
<figure>
-<img src="{filename}uni-entry.png" alt="uni-entry.png" />
+<img src="{static}uni-entry.png" alt="uni-entry.png" />
</figure>
Choosing the default values results in the image:
<figure>
-<img src="{filename}uni-result.png" alt="uni-result.png" />
+<img src="{static}uni-result.png" alt="uni-result.png" />
</figure>
## 6. Object oriented syntax
@@ -626,7 +626,7 @@ A simple use of this function which selects a rectangle in the middle of an imag
The result when run on our previous image:
<figure>
-<img src="{filename}paint-select.png" alt="paint-select.png" />
+<img src="{static}paint-select.png" alt="paint-select.png" />
</figure>
### 7.1. Complex selections
@@ -721,7 +721,7 @@ In perl it is trivial to write loops that together with the various selection to
The result:
<figure>
-<img src="{filename}circles.png" alt="circles.png" />
+<img src="{static}circles.png" alt="circles.png" />
</figure>
## 8. Creating text
@@ -801,7 +801,7 @@ Here is an example of a script that creates an image containing "Hello world".
The result:
<figure>
-<img src="{filename}hello-world1.png" alt="hello-world1.png" />
+<img src="{static}hello-world1.png" alt="hello-world1.png" />
</figure>
One thing to note in this script is that the text that is created on line 15 is a _floating layer_, that
needs to be anchored to its parent layer. This is done in line 16 through the call to
<tt>gimp_floating_sel_anchor()</tt>.
@@ -900,7 +900,7 @@ Note the special syntax of <tt>gimp_image_text_fontname</tt> in line 14 in <tt>b
The dialog and the resulting image:
<figure>
-<img src="{filename}basic-logo-dialog.png" alt="basic-logo-dialog.png" />
+<img src="{static}basic-logo-dialog.png" alt="basic-logo-dialog.png" />
</figure>
## 9. Floating selections
diff --git a/content/tutorials/Basic_Scheme/index.md b/content/tutorials/Basic_Scheme/index.md
index 7e59ea2d..3d8e7c32 100644
--- a/content/tutorials/Basic_Scheme/index.md
+++ b/content/tutorials/Basic_Scheme/index.md
@@ -136,7 +136,7 @@ produces a new GIMP image of type RGB and size 100x150.
All the functions of the PDB may be accessed through the Procedure Browser that is available from the main
menu through <span class="filter">Xtns ->Procedure Browser</span>.... E.g. the Procedure Browser entry for
uni-img, which we will define in the example below looks like this:
<figure>
-<img src="{filename}pdb-uni-entry.png" alt="pdb-uni-entry.png" />
+<img src="{static}pdb-uni-entry.png" alt="pdb-uni-entry.png" />
</figure>
For the Script-Fu programmer this information shows that uni-img may be called with three parameters of the
types INT32, STRING and COLOR. The different types will be explained below.
@@ -236,19 +236,19 @@ The following script **uni.scm** receives two parameters from the user, the size
To test the script save it in $HOME/.gimp-2.2/scripts/uni.scm and then select <span class="filter">Xtns ->
Script-Fu -> Refresh</span>:
<figure>
-<img src="{filename}refresh.png" alt="refresh.png" />
+<img src="{static}refresh.png" alt="refresh.png" />
</figure>
The script **Uniform image** should now appear in the pulldown menu <span class="filter">Xtns -> Script-Fu
-> Tutorials -> Uniform image</span>. Selecting this script results in the following popup:
<figure>
-<img src="{filename}uni-img.png" alt="uni-img.png" />
+<img src="{static}uni-img.png" alt="uni-img.png" />
</figure>
Accepting these default parameters through the **OK** button gives us the following new image:
<figure>
-<img src="{filename}uni-result.png" alt="uni-result.png" />
+<img src="{static}uni-result.png" alt="uni-result.png" />
</figure>
It is also possible to access this script through the Script-Fu console by typing the command
@@ -527,4 +527,3 @@ In the following example the selection is copied, pasted into the same layer, of
The original tutorial can be found [here](http://imagic.weizmann.ac.il/~dov/gimp/scheme-tut.html).
-
diff --git a/content/tutorials/Basic_Scheme2/index.md b/content/tutorials/Basic_Scheme2/index.md
index 476ef5cc..8b9dfb4e 100644
--- a/content/tutorials/Basic_Scheme2/index.md
+++ b/content/tutorials/Basic_Scheme2/index.md
@@ -77,7 +77,7 @@ Although each function is documented, the sheer number of them can be overwhelmi
In the _Procedure Browser_, type the word "new" into the text input box in the bottom left corner and then
click on the _Search by Name_ button. The list should be much smaller now; the first five functions happen to
be especially interesting. This search is demonstrated in _Figure One below_
<figure>
-<img src="{filename}power_01.jpg" alt="Figure One" />
+<img src="{static}power_01.jpg" alt="Figure One" />
<figcaption>
Figure One: The five constructor functions are listed in the top left of the window.
</figcaption>
@@ -128,7 +128,7 @@ If you wanted to affect only the "blueness" of an image, you could disable the r
There are many, many functions in the GIMP API for manipulating drawables. On lines 16 to 22,
<small>gimp-paintbrush-default</small> is used to draw a line on <small>layer</small>. Since this function
needs an array of (x,y) coordinates, the <small>cons-array</small> function is used to allocate an array of
doubles and the <small>aset</small> function is used to fill it with values. Before the line is drawn, we
change our default foreground color to a bright red using <small>gimp-palette-set-foreground</small>. If
you've typed everything in correctly, you should have something that looks like _Figure Two showed below_.
<figure>
-<img src="{filename}power_02.jpg" alt="power_02.jpg" />
+<img src="{static}power_02.jpg" alt="power_02.jpg" />
<figcaption>
Figure Two: A simple drawing.
<figcaption>
diff --git a/content/tutorials/Bezier_Selections/index.md b/content/tutorials/Bezier_Selections/index.md
index f5c9b30a..1c58c619 100644
--- a/content/tutorials/Bezier_Selections/index.md
+++ b/content/tutorials/Bezier_Selections/index.md
@@ -13,17 +13,17 @@ The Path tool (previously known as Bezier Selection) is a powerful tool in GIMP.
## What is it?
<figure>
-<img src="{filename}bezier_box.png" alt="bezier_box.png" />
+<img src="{static}bezier_box.png" alt="bezier_box.png" />
</figure>
-The Path tool can make complex selections by specifying certain
points that are connected together with a curve. So to make a box you would specify four points, one for each
corner of the box. Example in image above. The great thing is the corners don't have to be 90 degrees.
+The Path tool can make complex selections by specifying certain
points that are connected together with a curve. So to make a box you would specify four points, one for each
corner of the box. Example in image above. The great thing is the corners don't have to be 90 degrees.
In older GIMP versions (1.2.x), you had to close all paths by joining the last point of the path to the
first one. This is not necessary anymore in 2.0 and later versions, but this is still useful to create closed
shapes such as a box. So after creating the fourth point, press and hold the Ctrl key and click on the first
point to close the path. Of course you can have as many points as you need.
Finally, click the "Stroke Path" button (in the Path Options dialog) or use the menu Edit->Stroke Path... to
draw the new shape. You can also use the button "Create Selection from Path" if you want to have a selection
that you can fill or stroke.
## Modifying the curves
<figure>
-<img src="{filename}bezier_curve.png" alt="bezier_curve.png" />
+<img src="{static}bezier_curve.png" alt="bezier_curve.png" />
</figure>
Straight lines alone are a useful thing, but it's not all. Actually they are not lines but curves. Cool
anti-aliased smooth curves.
@@ -40,4 +40,3 @@ The curves can be modified quite flexibly by adjusting the 'handles' of the near
The original tutorial can be found [here](http://www.tigert.com/gimp/tutorials/bezier/).
It was updated for GIMP 2.0 by Raphaël Quinet.
-
diff --git a/content/tutorials/Blending_Exposures/index.md b/content/tutorials/Blending_Exposures/index.md
index b00bb6ca..9f90348b 100644
--- a/content/tutorials/Blending_Exposures/index.md
+++ b/content/tutorials/Blending_Exposures/index.md
@@ -9,13 +9,13 @@ Text and images Copyright (C) 2002 [Eric R. Jeschke](mailto:ericNOSPAM@redskiesa
## Intention
<figure>
-<img src="{filename}before-light.jpg" alt="before-light.jpg" />
+<img src="{static}before-light.jpg" alt="before-light.jpg" />
</figure>
<figure>
-<img src="{filename}before-dark.jpg" alt="before-dark.jpg" />
+<img src="{static}before-dark.jpg" alt="before-dark.jpg" />
</figure>
<figure>
-<img src="{filename}after.jpg" alt="after.jpg" />
+<img src="{static}after.jpg" alt="after.jpg" />
</figure>
In this tutorial I'll show you how to do blend two different exposures of the same scene that you would like
to combine to get the best parts of both images. This procedure works best if you have:
@@ -35,10 +35,10 @@ The basic technique is to create a layer above the image that contains the other
## Step 1
<figure>
-<img src="{filename}image-original-light.jpg" alt="image-original-light.jpg" />
+<img src="{static}image-original-light.jpg" alt="image-original-light.jpg" />
</figure>
<figure>
-<img src="{filename}image-original-dark.jpg" alt="image-original-dark.jpg" />
+<img src="{static}image-original-dark.jpg" alt="image-original-dark.jpg" />
</figure>
@@ -47,39 +47,39 @@ Here are the two exposures, loaded into GIMP. I am going to sandwich these on di
## Step 2
<figure>
-<img src="{filename}layers1.jpg" alt="layers1.jpg" />
+<img src="{static}layers1.jpg" alt="layers1.jpg" />
</figure>
<figure>
-<img src="{filename}newlayeroptions.jpg" alt="newlayeroptions.jpg" />
+<img src="{static}newlayeroptions.jpg" alt="newlayeroptions.jpg" />
</figure>
<figure>
-<img src="{filename}layers2.jpg" alt="layers2.jpg" />
+<img src="{static}layers2.jpg" alt="layers2.jpg" />
</figure>
The first decision is which one goes on top. In this case I have decided to put the lighter image on top and
the darker one on the bottom. The reason is because I hand-held the shots, and they are far from aligned. I'm
going to have to move the bottom image until the arch is aligned as best I can get it. Also, the top image is
the composition I want anyway, and I'll have less painting to do that way.
-Go the image that is going to be on the bottom. Open the Layers dialog (<kbd>Ctrl+L</kbd>) and click on the
new layer button () to create a new layer.
+Go the image that is going to be on the bottom. Open the Layers dialog (<kbd>Ctrl+L</kbd>) and click on the
new layer button () to create a new layer.
## Step 3
<figure>
-<img src="{filename}layers3.jpg" alt="layers3.jpg" />
+<img src="{static}layers3.jpg" alt="layers3.jpg" />
</figure>
<figure>
-<img src="{filename}layers4.jpg" alt="layers4.jpg" />
+<img src="{static}layers4.jpg" alt="layers4.jpg" />
</figure>
-Go to the image that is going to be on top. Select all and copy (<kbd>Ctrl+A</kbd> then <kbd>Ctrl+C</kbd>).
In the Layers dialog, make sure the new layer is selected, then go to the bottom image window and paste
(<kbd>Ctrl+V</kbd>). In the Layers dialog, click on the anchor button () to
anchor the floating image.
+Go to the image that is going to be on top. Select all and copy (<kbd>Ctrl+A</kbd> then <kbd>Ctrl+C</kbd>).
In the Layers dialog, make sure the new layer is selected, then go to the bottom image window and paste
(<kbd>Ctrl+V</kbd>). In the Layers dialog, click on the anchor button () to
anchor the floating image.
## Step 4
<figure>
-<img src="{filename}layers5.jpg" alt="layers5.jpg" />
+<img src="{static}layers5.jpg" alt="layers5.jpg" />
</figure>
<figure>
-<img src="{filename}image-composite-paste.jpg" alt="image-composite-paste.jpg" />
+<img src="{static}image-composite-paste.jpg" alt="image-composite-paste.jpg" />
</figure>
@@ -90,15 +90,15 @@ If they are perfectly aligned you can skip the next step. Unless you used a digi
## Step 5
<figure>
-<img src="{filename}layers6.jpg" alt="layers6.jpg" />
+<img src="{static}layers6.jpg" alt="layers6.jpg" />
</figure>
<figure>
-<img src="{filename}image-composite-move.jpg" alt="image-composite-move.jpg" />
+<img src="{static}image-composite-move.jpg" alt="image-composite-move.jpg" />
</figure>
<figure>
-<img src="{filename}image-composite-align.jpg" alt="image-composite-align.jpg" />
+<img src="{static}image-composite-align.jpg" alt="image-composite-align.jpg" />
</figure>
@@ -110,50 +110,50 @@ When you get close to alignment, zoom in to get a good close-up view and get the
## Step 6
-
+
In the Layers dialog, right-click on the upper layer and select Add Layer Mask. In the Add Mask Options
dialog, select White (Full Opacity) and click OK.
## Step 7
<figure>
-<img src="{filename}image-select1.jpg" alt="image-select1.jpg" />
+<img src="{static}image-select1.jpg" alt="image-select1.jpg" />
</figure>
<figure>
-<img src="{filename}image-fill.jpg" alt="image-fill.jpg" />
+<img src="{static}image-fill.jpg" alt="image-fill.jpg" />
</figure>
Now I want to paint black (transparency) onto the layer mask wherever I want the lower image to show through.
-To minimize painting time, use the hand-select ("lasso" ) tool to select a
large, hand-drawn region just inside all the borders of the area you want to paint, as shown at right. Then
using the fill tool () fill the selection with black.
+To minimize painting time, use the hand-select ("lasso" ) tool to select a large,
hand-drawn region just inside all the borders of the area you want to paint, as shown at right. Then using
the fill tool () fill the selection with black.
## Step 8
<figure>
-<img src="{filename}brushes1.jpg" alt="brushes1.jpg" />
+<img src="{static}brushes1.jpg" alt="brushes1.jpg" />
</figure>
<figure>
-<img src="{filename}image-paint1.jpg" alt="image-paint1.jpg" />
+<img src="{static}image-paint1.jpg" alt="image-paint1.jpg" />
</figure>
-Next, I select a large opaque brush from the Brushes dialog (Dialogs/Brushes), select the Paint tool
() and begin painting into the mask close to the boundaries of the blend.
+Next, I select a large opaque brush from the Brushes dialog (Dialogs/Brushes), select the Paint tool
() and begin painting into the mask close to the boundaries of the blend.
Notice that I still have the opacity cranked down on the upper layer so that I can see both layers.
## Step 9
<figure>
-<img src="{filename}brushes2.jpg" alt="brushes2.jpg" />
+<img src="{static}brushes2.jpg" alt="brushes2.jpg" />
</figure>
<figure>
-<img src="{filename}image-paint2.jpg" alt="image-paint2.jpg" />
+<img src="{static}image-paint2.jpg" alt="image-paint2.jpg" />
</figure>
<figure>
-<img src="{filename}image-donepainting.jpg" alt="image-donepainting.jpg" />
+<img src="{static}image-donepainting.jpg" alt="image-donepainting.jpg" />
</figure>
@@ -164,16 +164,16 @@ While I'm painting, I'll zoom in and out frequently ("=" key to zoom in, "-" key
## Step 10
<figure>
-<img src="{filename}image-preclone.jpg" alt="image-preclone.jpg" />
+<img src="{static}image-preclone.jpg" alt="image-preclone.jpg" />
</figure>
<figure>
-<img src="{filename}image-postclone.jpg" alt="image-postclone.jpg" />
+<img src="{static}image-postclone.jpg" alt="image-postclone.jpg" />
</figure>
Now the most painstaking part: blending the seams. This is a little tricky due to the different tonalities
of the two exposures.
-For blending work, the Clone (), Smudge (),
Airbrush () and Blur () are my tools of
choice.
+For blending work, the Clone (), Smudge (), Airbrush
() and Blur () are my tools of choice.
Since I'm not sure if these tools have the ability to work across layers (as they do in Photoshop), I
duplicate the image (<kbd>Ctrl+D</kbd>) and flatten the duplicate (<span class="filter"><Image> Layers ->
Flatten Image</span>) and work on it. This has the additional benefit that if I ever mess up the blending job
too badly I can always easily start over at this step.
@@ -186,7 +186,7 @@ Here I've used primarily clone and a touch of smudge to blend the seams of the t
## Final Step
<figure>
-<img src="{filename}image-finished.jpg" alt="image-finished.jpg" />
+<img src="{static}image-finished.jpg" alt="image-finished.jpg" />
</figure>
@@ -199,4 +199,3 @@ Finished. The image still has some problems with blown out highlights in the sun
* [Digital Photography For What it's Worth.](http://www.cliffshade.com/dpfwiw/)
The original tutorial used to appear on
[gimpguru](https://web.archive.org/web/20140704035059/http://gimpguru.org/tutorials/blendingexposures/).
-
diff --git a/content/tutorials/Blown_Out_Highlights/index.md b/content/tutorials/Blown_Out_Highlights/index.md
index 9f07576c..158ce48d 100644
--- a/content/tutorials/Blown_Out_Highlights/index.md
+++ b/content/tutorials/Blown_Out_Highlights/index.md
@@ -8,8 +8,8 @@ Author: Eric R. Jeschke
## Intention
<figure>
-<img src="{filename}before.jpg" alt="Before">
-<img src="{filename}after.jpg" alt="After">
+<img src="{static}before.jpg" alt="Before">
+<img src="{static}after.jpg" alt="After">
</figure>
In this tutorial I'll show you how to salvage an image that has blown out highlights. This is a problem that
is familiar to photographers shooting transparency film, which has an effective contrast range of about 5
stops. If you are not careful with your exposure you can easily lose all detail in your highlight areas, with
no way to get it back: they "blow out" to clear (white).
@@ -23,7 +23,7 @@ The basic technique is to graft matching areas of the image into the burned out
## Step 1
<figure>
-<img src="{filename}original.jpg" alt="original.jpg"/>
+<img src="{static}original.jpg" alt="original.jpg"/>
</figure>
Here is the original image.
@@ -37,7 +37,7 @@ Great image...could I rescue it?
## Step 2
<figure>
-<img src="{filename}colorpicker1.jpg" alt="colorpicker1.jpg"/>
+<img src="{static}colorpicker1.jpg" alt="colorpicker1.jpg"/>
</figure>
Using the color picker tool, you can see that there is no usable information left in the highlight. Pure
white, of course, is 255/255/255.
@@ -47,8 +47,8 @@ If there had been some detail left here I might have tried a variation on the co
## Step 3
<figure>
-<img src="{filename}threshold.jpg" alt="threshold.jpg"/>
-<img src="{filename}threshold-image.jpg" alt="threshold-image.jpg"/>
+<img src="{static}threshold.jpg" alt="threshold.jpg"/>
+<img src="{static}threshold-image.jpg" alt="threshold-image.jpg"/>
</figure>
@@ -63,13 +63,13 @@ This causes all the pixels in the image from 250-255 to go white and all the oth
## Step 4
<figure>
-<img src="{filename}channels1.jpg" alt="channels1.jpg"/>
-<img src="{filename}newchanneloptions.jpg" alt="newchanneloptions.jpg"/>
+<img src="{static}channels1.jpg" alt="channels1.jpg"/>
+<img src="{static}newchanneloptions.jpg" alt="newchanneloptions.jpg"/>
</figure>
<figure>
-<img src="{filename}channels2.jpg" alt="channels2.jpg"/>
-<img src="{filename}image-channel.jpg" alt="image-channel.jpg"/>
+<img src="{static}channels2.jpg" alt="channels2.jpg"/>
+<img src="{static}image-channel.jpg" alt="image-channel.jpg"/>
</figure>
Go back to the original image, and bring up the Layers and Channels dialog (<span class="filter"><Image>
Layers -> Layers, Channels & Paths</span>, or <kbd>Ctrl+L</kbd>). Click on the Channels tab and add a new
channel by clicking on the new channel button.
@@ -77,15 +77,15 @@ Go back to the original image, and bring up the Layers and Channels dialog (<spa
## Step 5
<figure>
-<img src="{filename}image-channel-paste.jpg" alt="image-channel-paste.jpg"/>
+<img src="{static}image-channel-paste.jpg" alt="image-channel-paste.jpg"/>
</figure><figure>
-<img src="{filename}channels3.jpg" alt="channels3.jpg"/>
+<img src="{static}channels3.jpg" alt="channels3.jpg"/>
</figure>
<figure>
-<img src="{filename}layers1.jpg" alt="layers1.jpg"/>
+<img src="{static}layers1.jpg" alt="layers1.jpg"/>
</figure><figure>
-<img src="{filename}layers2.jpg" alt="layers2.jpg"/>
+<img src="{static}layers2.jpg" alt="layers2.jpg"/>
</figure>
Go back to the threshold image, <span class="filter"><Image> Select -> All</span> (<kbd>Ctrl+A</kbd>) and
<span class="filter"><Image> Edit -> Copy</span> (<kbd>Ctrl+C</kbd>).
@@ -99,9 +99,9 @@ You can close the threshold image now.
## Step 6
<figure>
-<img src="{filename}featherselection.jpg" alt="featherselection.jpg"/>
+<img src="{static}featherselection.jpg" alt="featherselection.jpg"/>
</figure><figure>
-<img src="{filename}image2.jpg" alt="image2.jpg"/>
+<img src="{static}image2.jpg" alt="image2.jpg"/>
</figure>
Click on the Channels tab again, and right click on the new channel and select Channel to Selection
(<kbd>Ctrl+S</kbd>). You may want to also click on the eye beside the channel to turn off visibility of the
channel.
@@ -113,11 +113,11 @@ Finally (important!), click back on the Layers tab and select the Background lay
## Step 7
<figure>
-<img src="{filename}tooloptions-clone.jpg" alt="tooloptions-clone.jpg"/>
+<img src="{static}tooloptions-clone.jpg" alt="tooloptions-clone.jpg"/>
</figure><figure>
-<img src="{filename}brushes1.jpg" alt="brushes1.jpg"/>
+<img src="{static}brushes1.jpg" alt="brushes1.jpg"/>
</figure><figure>
-<img src="{filename}image3.jpg" alt="image3.jpg"/>
+<img src="{static}image3.jpg" alt="image3.jpg"/>
</figure>
Now the real work begins.
@@ -133,33 +133,33 @@ Zoom in and clone until you have the area filled with a realistic facimile of th
## Step 8
<figure>
-<img src="{filename}tooloptions-colorpicker.jpg" alt="tooloptions-colorpicker.jpg"/>
-<img src="{filename}colorpicker2.jpg" alt="colorpicker2.jpg"/>
-<img src="{filename}tooloptions-airbrush.jpg" alt="tooloptions-airbrush.jpg"/>
+<img src="{static}tooloptions-colorpicker.jpg" alt="tooloptions-colorpicker.jpg"/>
+<img src="{static}colorpicker2.jpg" alt="colorpicker2.jpg"/>
+<img src="{static}tooloptions-airbrush.jpg" alt="tooloptions-airbrush.jpg"/>
</figure>
<figure>
-<img src="{filename}brushes2.jpg" alt="brushes2.jpg"/>
-<img src="{filename}tooloptions-smudge.jpg" alt="tooloptions-smudge.jpg"/>
-<img src="{filename}tooloptions-convolve.jpg" alt="tooloptions-convolve.jpg"/>
+<img src="{static}brushes2.jpg" alt="brushes2.jpg"/>
+<img src="{static}tooloptions-smudge.jpg" alt="tooloptions-smudge.jpg"/>
+<img src="{static}tooloptions-convolve.jpg" alt="tooloptions-convolve.jpg"/>
</figure>
<figure>
-<img src="{filename}brushes3.jpg" alt="brushes3.jpg"/>
-<img src="{filename}brushes4.jpg" alt="brushes4.jpg"/>
+<img src="{static}brushes3.jpg" alt="brushes3.jpg"/>
+<img src="{static}brushes4.jpg" alt="brushes4.jpg"/>
</figure>
<figure>
-<img src="{filename}image4.jpg" alt="image4.jpg"/>
-<img src="{filename}image5.jpg" alt="image5.jpg"/>
+<img src="{static}image4.jpg" alt="image4.jpg"/>
+<img src="{static}image5.jpg" alt="image5.jpg"/>
</figure>
This step is where the most difficult work occurs. I must by necessity abbreviate this step, since it
involves iterations of applying the following tools:
-*  smudge
-*  clone
-*  airbrush (w/color picker)
-*  convolve (blur)
+*  smudge
+*  clone
+*  airbrush (w/color picker)
+*  convolve (blur)
Basically, smudge is your friend after a serious cloning job like this to clean up the transitions. Smudge
around all the edges of the clone. The clone tool can also be used again here and there for "mop-up" work.
@@ -178,14 +178,14 @@ Right Image: zoomed view after the clone (previous step) and after this step.
## Step 9
<figure>
-<img src="{filename}before-512x384.jpg" alt="before-512x384.jpg"/>
+<img src="{static}before-512x384.jpg" alt="before-512x384.jpg"/>
<figcaption>
Original
</figcaption>
</figure>
<figure>
-<img src="{filename}after-512x384.jpg" alt="after-512x384.jpg"/>
+<img src="{static}after-512x384.jpg" alt="after-512x384.jpg"/>
<figcaption>
Finished
</figcaption>
diff --git a/content/tutorials/Blur_Overlays/index.md b/content/tutorials/Blur_Overlays/index.md
index e980f23a..7d47ae8c 100644
--- a/content/tutorials/Blur_Overlays/index.md
+++ b/content/tutorials/Blur_Overlays/index.md
@@ -9,8 +9,8 @@ Author: Eric R. Jeschke
## Intention
<figure>
-<img src="{filename}before.jpg" alt="before"/>
-<img src="{filename}after.jpg" alt="after"/>
+<img src="{static}before.jpg" alt="before"/>
+<img src="{static}after.jpg" alt="after"/>
</figure>
In this tutorial I'll show you how to do gaussian blur overlays using GIMP. This is an interesting technique
that intensifies and saturates the colors in the image, increases contrast, and adds a slightly hazy,
"dreamy" feel to the image.
@@ -22,7 +22,7 @@ Giving credit where credit is due: I did not come up with this method. I adapted
## The Procedure
<figure>
-<img src="{filename}image-original.jpg" alt="image-original.jpg"/>
+<img src="{static}image-original.jpg" alt="image-original.jpg"/>
</figure>
Here is the original example image, loaded into GIMP.
@@ -30,17 +30,17 @@ Here is the original example image, loaded into GIMP.
## Step 1
<figure>
-<img src="{filename}layers1.jpg" alt="layers1.jpg"/>
-<img src="{filename}layers2.jpg" alt="layers2.jpg"/>
+<img src="{static}layers1.jpg" alt="layers1.jpg"/>
+<img src="{static}layers2.jpg" alt="layers2.jpg"/>
</figure>
-Open the Layers dialog (if it is not already open, it can be accessed through: <span class="filter"><Image>
Windows → Dockable Dialogs → Layers</span>). 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 ().
+Open the Layers dialog (if it is not already open, it can be accessed through: <span class="filter"><Image>
Windows → Dockable Dialogs → Layers</span>). 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
<figure>
-<img src="{filename}editlayerattr.jpg" alt="editlayerattr.jpg"/>
-<img src="{filename}layers3.jpg" alt="layers3.jpg"/>
+<img src="{static}editlayerattr.jpg" alt="editlayerattr.jpg"/>
+<img src="{static}layers3.jpg" alt="layers3.jpg"/>
</figure>
Now double-click on the duplicate layer and rename the new layer "Blur Overlay". 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, or more importantly, if you save the file with layers and open
it six months later.
@@ -48,12 +48,12 @@ Now double-click on the duplicate layer and rename the new layer "Blur Overlay".
## Step 3
<figure>
-<img src="{filename}layers4.jpg" alt="layers4.jpg"/>
+<img src="{static}layers4.jpg" alt="layers4.jpg"/>
</figure>
<figure>
-<img src="{filename}levels.jpg" alt="levels.jpg"/>
-<img src="{filename}image-overlay.jpg" alt="image-overlay.jpg"/>
+<img src="{static}levels.jpg" alt="levels.jpg"/>
+<img src="{static}image-overlay.jpg" alt="image-overlay.jpg"/>
</figure>
In the Layers dialog, select the Blur Overlay layer. In the "Mode" drop-down box, select "Overlay".
@@ -66,8 +66,8 @@ Now go back to the image window and apply a Levels (<span class="filter"><Image>
## Step 4
<figure>
-<img src="{filename}gaussblur.jpg" alt="gaussblur.jpg"/>
-<img src="{filename}image-overlay-blur.jpg" alt="image-overlay-blur.jpg"/>
+<img src="{static}gaussblur.jpg" alt="gaussblur.jpg"/>
+<img src="{static}image-overlay-blur.jpg" alt="image-overlay-blur.jpg"/>
</figure>
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.
@@ -85,7 +85,7 @@ You might be able to apply a contrast mask to counteract this effect, but in mos
## Step 5
<figure>
-<img src="{filename}layers-duplicate.jpg" alt="layers-duplicate.jpg"/>
+<img src="{static}layers-duplicate.jpg" alt="layers-duplicate.jpg"/>
</figure>
Duplicate the image (<kbd>Ctrl+D</kbd>).
@@ -94,8 +94,8 @@ Flatten the duplicate (<span class="filter"><Image> Layers -> Flatten Image</spa
## Step 6
<figure>
-<img src="{filename}threshold.jpg" alt="threshold.jpg"/>
-<img src="{filename}image-threshold.jpg" alt="image-threshold.jpg"/>
+<img src="{static}threshold.jpg" alt="threshold.jpg"/>
+<img src="{static}image-threshold.jpg" alt="image-threshold.jpg"/>
</figure>
In the duplicate, run a threshold filter (<span class="filter"><Image> Image -> Colors -> Threshold</span>).
@@ -107,24 +107,24 @@ You only need to approximate this, since we're going to clean up the mask anyway
## Step 7
<figure>
-<img src="{filename}image-threshold-marqueeselect.jpg" alt="image-threshold-marqueeselect.jpg"/>
+<img src="{static}image-threshold-marqueeselect.jpg" alt="image-threshold-marqueeselect.jpg"/>
</figure>
<figure>
-<img src="{filename}gaussblur2.jpg" alt="gaussblur2.jpg"/>
-<img src="{filename}image-threshold-blur.jpg" alt="image-threshold-blur.jpg"/>
+<img src="{static}gaussblur2.jpg" alt="gaussblur2.jpg"/>
+<img src="{static}image-threshold-blur.jpg" alt="image-threshold-blur.jpg"/>
</figure>
-To clean up the mask, I switched to the paintbrush (), hit "x" in the mask
image to switch the foreground and background colors (Black/White to White/Black), selected a nice opaque
brush in the Brushes dialog and painted the few pixels of the sky white that hadn't been turned white (the
darkest parts of the clouds).
+To clean up the mask, I switched to the paintbrush (), hit "x" in the mask image
to switch the foreground and background colors (Black/White to White/Black), selected a nice opaque brush in
the Brushes dialog and painted the few pixels of the sky white that hadn't been turned white (the darkest
parts of the clouds).
-Now the black parts. I switched the fg/bg colors back to (Black/White). I could have painted black all over
the lake, but I had a faster idea in mind. I used the marquee selection tool
() to select the whole area and then using the fill tool
() I just clicked in the selection to fill it black in one fell swoop.
+Now the black parts. I switched the fg/bg colors back to (Black/White). I could have painted black all over
the lake, but I had a faster idea in mind. I used the marquee selection tool
() to select the whole area and then using the fill tool
() I just clicked in the selection to fill it black in one fell swoop.
I then "feathered" the mask so that it will blend the layers without a harsh transition by applying a 6
pixel gaussian blur to the mask.
## Step 8
<figure>
-<img src="{filename}image-threshold-blur-invert.jpg" alt="image-threshold-blur-invert.jpg"/>
+<img src="{static}image-threshold-blur-invert.jpg" alt="image-threshold-blur-invert.jpg"/>
</figure>
Invert the mask (<span class="filter"><Image> Image -> Colors -> Invert</span>), so that the white parts
correspond to the parts of the combined layers that you want to keep and the black parts correspond to the
parts that should only reflect the original image (the highlights).
@@ -132,34 +132,34 @@ Invert the mask (<span class="filter"><Image> Image -> Colors -> Invert</span>),
## Step 9
<figure>
-<img src="{filename}addmaskoptions.jpg" alt="addmaskoptions.jpg"/>
-<img src="{filename}layers5.jpg" alt="layers5.jpg"/>
+<img src="{static}addmaskoptions.jpg" alt="addmaskoptions.jpg"/>
+<img src="{static}layers5.jpg" alt="layers5.jpg"/>
</figure>
<figure>
-<img src="{filename}layers6.jpg" alt="layers6.jpg"/>
-<img src="{filename}layers7.jpg" alt="layers7.jpg"/>
+<img src="{static}layers6.jpg" alt="layers6.jpg"/>
+<img src="{static}layers7.jpg" alt="layers7.jpg"/>
</figure>
Go to the Layers dialog. Select the overlay blur image in the "Image" drop down box (if it is not selected
already).
Right-click on the Blur Overlay layer and select Add Layer Mask. In the Add Mask Options dialog, select
White (Full Opacity) and click OK.
-Now go back to the blurred threshold image, select all and copy (<kbd>Ctrl+A</kbd> then <kbd>Ctrl+C</kbd>).
Go back to the overlay blur image and paste (<kbd>Ctrl+V</kbd>). Go to the Layers dialog and click the anchor
button () to anchor the mask.
+Now go back to the blurred threshold image, select all and copy (<kbd>Ctrl+A</kbd> then <kbd>Ctrl+C</kbd>).
Go back to the overlay blur image and paste (<kbd>Ctrl+V</kbd>). Go to the Layers dialog and click the anchor
button () to anchor the mask.
**Tip:** <kbd>Ctrl-click</kbd> on the layer mask icon in the Layers dialog to toggle the effect of the layer
mask to compare the image with and without the highlight mask.
## Step 10
<figure>
-<img src="{filename}image-original.jpg" alt="image-original.jpg"/>
+<img src="{static}image-original.jpg" alt="image-original.jpg"/>
<figcaption>
Original
</figcaption>
</figure>
<figure>
-<img src="{filename}image-final.jpg" alt="image-final.jpg"/>
+<img src="{static}image-final.jpg" alt="image-final.jpg"/>
<figcaption>
Final
</figcaption>
@@ -176,15 +176,15 @@ Here's the result. Compare to the original image. I would flatten and apply a sm
## Other Examples
<figure>
-<img src="{filename}example2-before.jpg" alt="example2-before.jpg"/>
-<img src="{filename}example2-after.jpg" alt="example2-after.jpg"/>
+<img src="{static}example2-before.jpg" alt="example2-before.jpg"/>
+<img src="{static}example2-after.jpg" alt="example2-after.jpg"/>
</figure>
Using "Multiply" for the blending mode. (Final image on the right)
<figure>
-<img src="{filename}example3-before.jpg" alt="example3-before.jpg"/>
-<img src="{filename}example3-after.jpg" alt="example3-after.jpg"/>
+<img src="{static}example3-before.jpg" alt="example3-before.jpg"/>
+<img src="{static}example3-after.jpg" alt="example3-after.jpg"/>
</figure>
Using "Overlay" for the blending mode, plus a highlight mask for the sky and waterfall. (Final image on the
right)
diff --git a/content/tutorials/Borders_On_Selections/index.md
b/content/tutorials/Borders_On_Selections/index.md
index 3ba35634..da89c3fd 100644
--- a/content/tutorials/Borders_On_Selections/index.md
+++ b/content/tutorials/Borders_On_Selections/index.md
@@ -11,7 +11,7 @@ Author: Francisco Bustamante Hempe
Since GIMP is an image manipulation program and not a painting program it doesn't include tools to draw
shapes like squares and circles. However this doesn't mean you can't paint them, in fact there are some
interesting options regarding this subject when it comes to GIMP. The solution is to use the selection
stroking capabilities of GIMP.
<figure>
-<img src="{filename}img14_step1.png" alt="img14_step1.png"/>
+<img src="{static}img14_step1.png" alt="img14_step1.png"/>
</figure>
This option can be accesed on the image menu (right button click on the image), by going to <span
class="filter"><Image> Edit -> Stroke Selection</span>.
@@ -19,7 +19,7 @@ This option can be accesed on the image menu (right button click on the image),
## Step 1
<figure>
-<img src="{filename}img13_tools.png" alt="img13_tools.png"/>
+<img src="{static}img13_tools.png" alt="img13_tools.png"/>
</figure>
Before doing that however we need to make a selection with the shape we want. There are several ways to make
a selection, including all the tools in red shown above and select by color as explained on Selecting and
removing one color . When using the tools, holding shift at the beggining of the selection process will add
the selection to what is already selected, while holding the control key will substract from it.
@@ -27,7 +27,7 @@ Before doing that however we need to make a selection with the shape we want. Th
## Step 2
<figure>
-<img src="{filename}img16_step2.png" alt="img16_step2.png"/>
+<img src="{static}img16_step2.png" alt="img16_step2.png"/>
</figure>
Use the selection tools to create a selection with the desired shape.
@@ -35,7 +35,7 @@ Use the selection tools to create a selection with the desired shape.
## Step 3
<figure>
-<img src="{filename}img15_brushes.png" alt="img15_brushes.png"/>
+<img src="{static}img15_brushes.png" alt="img15_brushes.png"/>
</figure>
After you have the selection, choose a brush from the brush selection dialog. Choose also a color and you
can play with the spacing option for the brush. Brush selection dialog
@@ -43,7 +43,7 @@ After you have the selection, choose a brush from the brush selection dialog. Ch
## Step 4
<figure>
-<img src="{filename}img15b_stroke.png" alt="img15b_stroke.png"/>
+<img src="{static}img15b_stroke.png" alt="img15b_stroke.png"/>
</figure>
When all the options are selected you can click on <span class="filter"><Image> Edit -> Stroke</span>. You
will get a dialog allowing you to set many options for stroking your selection, including dashed lines and
other fancy features. If you select Stroke Using a Paint Tool, you will be able to use the brush that you
have selected.
@@ -51,7 +51,7 @@ When all the options are selected you can click on <span class="filter"><Image>
## Step 5
<figure>
-<img src="{filename}img17_result.png" alt="img17_result.png"/>
+<img src="{static}img17_result.png" alt="img17_result.png"/>
</figure>
When all the options are selected you can finally click on OK. Using a fuzzy brush and selecting a blue
color here is the result for the selection made above.
@@ -59,11 +59,10 @@ When all the options are selected you can finally click on OK. Using a fuzzy bru
## Examples
<figure>
-<img src="{filename}img18_example1.png" alt="img18_example1.png"/>
-<img src="{filename}img19_example2.jpg" alt="img19_example2.jpg"/>
+<img src="{static}img18_example1.png" alt="img18_example1.png"/>
+<img src="{static}img19_example2.jpg" alt="img19_example2.jpg"/>
</figure>
Playing around with the spacing options in the brush selection dialog, the color or using one of the
animated brushes you can get very interesting results.. here are some examples.
The original tutorial can be found [here](http://bitbit.org/cms.php/gimp/tutorials/stroke_selection.html)
(dead link).
-
diff --git a/content/tutorials/Changing_Background_Color_1/index.md
b/content/tutorials/Changing_Background_Color_1/index.md
index c454db3c..7971484e 100644
--- a/content/tutorials/Changing_Background_Color_1/index.md
+++ b/content/tutorials/Changing_Background_Color_1/index.md
@@ -7,28 +7,28 @@ Author: Seth Burgess
## Intention
- to 
+ to 
This tutorial shows you how you can efficiently replace the background of an image with another in GIMP,
through the use of the color to alpha plug-in. The aim is to show the advantages of using the color to alpha
plug-in over selection-based techniques. To illustrate this, this tutorial will use the above images as
source and destination. This tutorial doesn't address the complexities of handling real-world photos in this
manner, but does briefly discuss it at the end.
## Why Not a Selection
<figure>
-<img src="{filename}problem1.png" alt="problem1.png"/>
-<img src="{filename}problem2.png" alt="problem2.png"/>
-<img src="{filename}problem3.png" alt="problem3.png"/>
+<img src="{static}problem1.png" alt="problem1.png"/>
+<img src="{static}problem2.png" alt="problem2.png"/>
+<img src="{static}problem3.png" alt="problem3.png"/>
</figure>
<figure>
-<img src="{filename}problem1a.png" alt="problem1a.png"/>
-<img src="{filename}problem2a.png" alt="problem2a.png"/>
-<img src="{filename}problem3a.png" alt="problem3a.png"/>
+<img src="{static}problem1a.png" alt="problem1a.png"/>
+<img src="{static}problem2a.png" alt="problem2a.png"/>
+<img src="{static}problem3a.png" alt="problem3a.png"/>
</figure>
<figure>
-<img src="{filename}pr1.png" alt="pr1.png"/>
-<img src="{filename}pr2.png" alt="pr2.png"/>
-<img src="{filename}pr3.png" alt="pr3.png"/>
+<img src="{static}pr1.png" alt="pr1.png"/>
+<img src="{static}pr2.png" alt="pr2.png"/>
+<img src="{static}pr3.png" alt="pr3.png"/>
</figure>
The common approach to doing many things in GIMP is to first get a good selection. However, when removing an
anti-aliased object from its background is not a good idea, as shown above.
@@ -42,7 +42,7 @@ You can spend hours trying to find something that will work perfectly, but you w
## Step 1
<figure>
-<img src="{filename}menu.png" alt="menu.png"/>
+<img src="{static}menu.png" alt="menu.png"/>
</figure>
The first step is to activate the color to alpha plug-in. Its menu location is <span class="filter"><image>
Filters -> Colors -> Color To Alpha</span>, where <image> means to right click on the image. If its
grayed-out, it means that you have an indexed image. If its not there, upgrade your gimp to 1.2.x.
@@ -50,15 +50,15 @@ The first step is to activate the color to alpha plug-in. Its menu location is <
## Step 2
<figure>
-<img src="{filename}select_bg.png" alt="select_bg.png"/>
+<img src="{static}select_bg.png" alt="select_bg.png"/>
</figure>
-Next use the Color Picker Tool to select the background color.
+Next use the Color Picker Tool to select the background color.
## Step 3
<figure>
-<img src="{filename}dnd.png" alt="dnd.png"/>
+<img src="{static}dnd.png" alt="dnd.png"/>
</figure>
When you used the color picker to select the background, a window with the color popped up. Click, hold, and
drag from the color portion of this window to the color portion of the Color To Alpha plug-in. If using Gimp
for Windows, you'll have to right-click on the destination button and select the Foreground - drag n' drop
doesn't work. Click OK after the color indicator on the Color To Alpha plug-in is changed to blue.
@@ -66,8 +66,8 @@ When you used the color picker to select the background, a window with the color
## Step 4
<figure>
-<img src="{filename}pr_alpha.png" alt="pr_alpha.png"/>
-<img src="{filename}solution_zoom.png" alt="solution_zoom.png"/>
+<img src="{static}pr_alpha.png" alt="pr_alpha.png"/>
+<img src="{static}solution_zoom.png" alt="solution_zoom.png"/>
</figure>
There should now be a nice green and alpha image with no trace of the blue left. Next add the new background.
@@ -75,8 +75,8 @@ There should now be a nice green and alpha image with no trace of the blue left.
## Step 5
<figure>
-<img src="{filename}layer_create.png" alt="layer_create.png"/>
-<img src="{filename}layer_move.png" alt="layer_move.png"/>
+<img src="{static}layer_create.png" alt="layer_create.png"/>
+<img src="{static}layer_move.png" alt="layer_move.png"/>
</figure>
Now create a New Layer (have Foreground set to Red when you do this). Lower the newly created layer.
@@ -84,7 +84,7 @@ Now create a New Layer (have Foreground set to Red when you do this). Lower the
## Final
<figure>
-<img src="{filename}pr_red.png" alt="pr_red.png"/>
+<img src="{static}pr_red.png" alt="pr_red.png"/>
</figure>
The image should now be green on red, with no trace of blue!
@@ -100,4 +100,3 @@ The work arounds, respectively, are:
* Paint underneath the new image with the original color to bring it back to those portions that need it
The original tutorial can be found
[here](http://classic.gimp.org/~sjburges/color_to_alpha/demo/color2alpha.html).
-
diff --git a/content/tutorials/Changing_Background_Color_2/index.md
b/content/tutorials/Changing_Background_Color_2/index.md
index aa42eaf2..0c5a6c82 100644
--- a/content/tutorials/Changing_Background_Color_2/index.md
+++ b/content/tutorials/Changing_Background_Color_2/index.md
@@ -8,7 +8,7 @@ Author: Francisco Bustamante Hempe
## Intention
<figure>
-<img src="{filename}img1_initial.jpg" alt="img1_initial.jpg"/>
+<img src="{static}img1_initial.jpg" alt="img1_initial.jpg"/>
</figure>
Many times you have an image with a colored background, like the one above and you want to take out the
background to use the image's subject in a composition. With gimp there are many ways to achieve this, one of
which is using a plug-in specifically designed for this: [Changing Background Color
1](/tutorials/Changing_Background_Color_1/).
@@ -16,7 +16,7 @@ Many times you have an image with a colored background, like the one above and y
## Step 1
<figure>
-<img src="{filename}img3_step1.png" alt="img3_step1.png"/>
+<img src="{static}img3_step1.png" alt="img3_step1.png"/>
</figure>
In this tutorial I explore the select by color option to remove a particular color from the image. The first
step, after you have loaded the image of course, is to click on the Select By Color tool.
@@ -24,7 +24,7 @@ In this tutorial I explore the select by color option to remove a particular col
## Step 2
<figure>
-<img src="{filename}img4_step2.png" alt="img4_step2.png"/>
+<img src="{static}img4_step2.png" alt="img4_step2.png"/>
</figure>
Like other selection tools, this one provides several options that can be modified. The top row of buttons
sets the Selection Mode. We will use the add option, which means any color we click on will be added to the
selection. You can also use the Shift key to acheive the same result.
@@ -34,7 +34,7 @@ The other interesting setting is the Threshold. When you click on a color, the h
## Step 3
<figure>
-<img src="{filename}img5_step3.png" alt="img5_step3.png"/>
+<img src="{static}img5_step3.png" alt="img5_step3.png"/>
</figure>
Now it's time to start selecting the color you want to remove. Just start clicking on the color you don't
want and watch the selection update. If that didn't select all the color you want, continue clicking on the
unselected parts until you get the desired result.
@@ -42,7 +42,7 @@ Now it's time to start selecting the color you want to remove. Just start clicki
## Step 4
<figure>
-<img src="{filename}img6_step4.png" alt="img6_step4.png"/>
+<img src="{static}img6_step4.png" alt="img6_step4.png"/>
</figure>
Finally, there is one last step before you can remove the background. You have to add an alpha channel (a
common term for transparency in images) to your image. To do that you have to use the right button on the
mouse to get the image menu and go to layers and add alpha channel.
@@ -50,7 +50,7 @@ Finally, there is one last step before you can remove the background. You have t
## Step 5
<figure>
-<img src="{filename}img7_step5.png" alt="img7_step5.png"/>
+<img src="{static}img7_step5.png" alt="img7_step5.png"/>
</figure>
With the selection complete and with an alpha channel just choose from the image menu <span
class="filter"><Image> Edit -> Clear</span>, and the image background will be gone.
@@ -58,7 +58,7 @@ With the selection complete and with an alpha channel just choose from the image
## Step 6
<figure>
-<img src="{filename}img8_step6.png" alt="img8_step6.png"/>
+<img src="{static}img8_step6.png" alt="img8_step6.png"/>
</figure>
After the last step you should get something like this in Gimp.
@@ -67,7 +67,7 @@ You can now use this image in a composition or in a web page with a different ba
## Final
<figure>
-<img src="{filename}img2_final.png" alt="img2_final.png"/>
+<img src="{static}img2_final.png" alt="img2_final.png"/>
</figure>
Of course you still have to take care of the details if you want to merge an image perfectly into another.
@@ -75,4 +75,3 @@ Of course you still have to take care of the details if you want to merge an ima
The sunflower image was taken by the photographer Raymond Lofthouuse.
The original tutorial can be found [here](http://bitbit.org/cms.php/gimp/tutorials/remove_one_color.html)
(dead link).
-
diff --git a/content/tutorials/Color2BW/index.md b/content/tutorials/Color2BW/index.md
index 4887db53..acba7155 100644
--- a/content/tutorials/Color2BW/index.md
+++ b/content/tutorials/Color2BW/index.md
@@ -8,8 +8,8 @@ Author: Eric R. Jeschke
## Intention
<figure>
-<img src="{filename}before-384x288.jpg" alt="before-384x288.jpg"/>
-<img src="{filename}after-384x288.jpg" alt="after-384x288.jpg"/>
+<img src="{static}before-384x288.jpg" alt="before-384x288.jpg"/>
+<img src="{static}after-384x288.jpg" alt="after-384x288.jpg"/>
</figure>
In this tutorial I'll show you some different ways to convert color RGB images to B&W:
@@ -26,7 +26,7 @@ We'll examine each of these in turn.
## The Procedure
<figure>
-<img src="{filename}image-original-481x397.jpg" alt="image-original-481x397.jpg"/>
+<img src="{static}image-original-481x397.jpg" alt="image-original-481x397.jpg"/>
</figure>
Here is an example image, loaded into GIMP. I thought it might look nice as a black and white image.
@@ -34,9 +34,9 @@ Here is an example image, loaded into GIMP. I thought it might look nice as a bl
## <a name="grayscale">Via Grayscale</a>
<figure>
-<img src="{filename}image-grayscale-481x397.jpg" alt="image-grayscale-481x397.jpg"/>
+<img src="{static}image-grayscale-481x397.jpg" alt="image-grayscale-481x397.jpg"/>
</figure><figure>
-<img src="{filename}image-grayscale-zoom100-481x397.jpg" alt="image-grayscale-zoom100-481x397.jpg"/>
+<img src="{static}image-grayscale-zoom100-481x397.jpg" alt="image-grayscale-zoom100-481x397.jpg"/>
</figure>
Here is what I get if I use the standard mode change to grayscale from RGB.
@@ -48,9 +48,9 @@ I suspect GIMP uses a similar formula. My experiments with the Channel Mixer (mo
## <a name="desaturate">Via Desaturate</a>
<figure>
-<img src="{filename}image-desaturate-481x397.jpg" alt="image-desaturate-481x397.jpg"/>
+<img src="{static}image-desaturate-481x397.jpg" alt="image-desaturate-481x397.jpg"/>
</figure><figure>
-<img src="{filename}image-desaturate-zoom100-481x397.jpg" alt="image-desaturate-zoom100-481x397.jpg"/>
+<img src="{static}image-desaturate-zoom100-481x397.jpg" alt="image-desaturate-zoom100-481x397.jpg"/>
</figure>
Here is what I get if I use desaturate instead. Duplicate the original image (<kbd>Ctrl+D</kbd>) and
right-click on the copy. Select <span class="filter"><Image> Image -> Colors -> Desaturate</span>. Unlike the
grayscale mode change above, the channels are not remixed in different percentages, so we should expect
different results.
@@ -60,25 +60,25 @@ The result is visually different; note the increased contrast in the scales. Als
## <a name="decomposeRGB">Via Decompose RGB</a>
<figure>
-<img src="{filename}decompose-rgb-186x265.jpg" alt="decompose-rgb-186x265.jpg"/>
+<img src="{static}decompose-rgb-186x265.jpg" alt="decompose-rgb-186x265.jpg"/>
</figure>
<figure>
-<img src="{filename}image-red-481x397.jpg" alt="image-red-481x397.jpg"/>
+<img src="{static}image-red-481x397.jpg" alt="image-red-481x397.jpg"/>
</figure><figure>
-<img src="{filename}image-red-zoom100-481x397.jpg" alt="image-red-zoom100-481x397.jpg"/>
+<img src="{static}image-red-zoom100-481x397.jpg" alt="image-red-zoom100-481x397.jpg"/>
</figure>
<figure>
-<img src="{filename}image-green-481x397.jpg" alt="image-green-481x397.jpg"/>
+<img src="{static}image-green-481x397.jpg" alt="image-green-481x397.jpg"/>
</figure><figure>
-<img src="{filename}image-green-zoom100-481x397.jpg" alt="image-green-zoom100-481x397.jpg"/>
+<img src="{static}image-green-zoom100-481x397.jpg" alt="image-green-zoom100-481x397.jpg"/>
</figure>
<figure>
-<img src="{filename}image-blue-481x397.jpg" alt="image-blue-481x397.jpg"/>
+<img src="{static}image-blue-481x397.jpg" alt="image-blue-481x397.jpg"/>
</figure><figure>
-<img src="{filename}image-blue-zoom100-481x397.jpg" alt="image-blue-zoom100-481x397.jpg"/>
+<img src="{static}image-blue-zoom100-481x397.jpg" alt="image-blue-zoom100-481x397.jpg"/>
</figure>
A third method is to consider the red/green/blue channels of the image. Each one can be represented as an
independent grayscale image. Right-click on the original image and select <span class="filter"><Image> Image
-> Mode -> Decompose</span>. Select the RGB option and click OK.
@@ -90,8 +90,8 @@ Very often the green channel contains an excellent B&W version of the image. If
## <a name="decomposeHSV">Via Decompose HSV</a>
<figure>
-<img src="{filename}decompose-hsv-186x265.jpg" alt="decompose-hsv-186x265.jpg"/>
-<img src="{filename}image-value-481x397.jpg" alt="image-value-481x397.jpg"/>
+<img src="{static}decompose-hsv-186x265.jpg" alt="decompose-hsv-186x265.jpg"/>
+<img src="{static}image-value-481x397.jpg" alt="image-value-481x397.jpg"/>
</figure>
Another possibility is to decompose to Hue/Saturation/Value components and consider the Value image (the
other two are not usually useful for this purpose). Right-click on the original image and select <span
class="filter"><Image> Image -> Mode -> Decompose</span>. Select the HSV option and click OK.
@@ -99,8 +99,8 @@ Another possibility is to decompose to Hue/Saturation/Value components and consi
## <a name="decomposeLAB">Via Decompose LAB</a>
<figure>
-<img src="{filename}decompose-lab-186x265.jpg" alt="decompose-lab-186x265.jpg"/>
-<img src="{filename}image-lightness-481x397.jpg" alt="image-lightness-481x397.jpg"/>
+<img src="{static}decompose-lab-186x265.jpg" alt="decompose-lab-186x265.jpg"/>
+<img src="{static}image-lightness-481x397.jpg" alt="image-lightness-481x397.jpg"/>
</figure>
Yet another decompose option: LAB mode. Right-click on the original image and select Image/Mode/Decompose.
Select the LAB option and click OK.
@@ -114,8 +114,8 @@ Not often useful by itself, but it can be combined with other layers for interes
## <a name="decomposeCMYK">Via Decompose CMYK</a>
<figure>
-<img src="{filename}decompose-cmyk-186x265.jpg" alt="decompose-cmyk-186x265.jpg"/>
-<img src="{filename}image-black-481x397.jpg" alt="image-black-481x397.jpg"/>
+<img src="{static}decompose-cmyk-186x265.jpg" alt="decompose-cmyk-186x265.jpg"/>
+<img src="{static}image-black-481x397.jpg" alt="image-black-481x397.jpg"/>
</figure>
Just for fun I tried decomposing into CMYK. The Black channel is interesting: it resembles a negative.
@@ -123,13 +123,13 @@ Just for fun I tried decomposing into CMYK. The Black channel is interesting: it
## <a name="channelmixer">Via Channel Mixer</a>
<figure>
-<img src="{filename}channelmixer-481x307.jpg" alt="channelmixer-481x307.jpg"/>
+<img src="{static}channelmixer-481x307.jpg" alt="channelmixer-481x307.jpg"/>
</figure>
<figure>
-<img src="{filename}image-channelmixer-481x397.jpg" alt="image-channelmixer-481x397.jpg"/>
+<img src="{static}image-channelmixer-481x397.jpg" alt="image-channelmixer-481x397.jpg"/>
</figure><figure>
-<img src="{filename}image-channelmixer-zoom100-481x397.jpg" alt="image-channelmixer-zoom100-481x397.jpg"/>
+<img src="{static}image-channelmixer-zoom100-481x397.jpg" alt="image-channelmixer-zoom100-481x397.jpg"/>
</figure>
The final technique is the Channel Mixer filter. Right-click on the original image and select <span
class="filter"><Image> Filters -> Color -> Channel Mixer</span>.
@@ -158,18 +158,18 @@ The advantage of the channel mixer is (obviously) flexibility. I like to decompo
## Other Examples
<figure>
-<img src="{filename}middlesister-384x259.jpg" alt="middlesister-384x259.jpg"/>
+<img src="{static}middlesister-384x259.jpg" alt="middlesister-384x259.jpg"/>
</figure><figure>
-<img src="{filename}middlesister-bw-384x259.jpg" alt="middlesister-bw-384x259.jpg"/>
+<img src="{static}middlesister-bw-384x259.jpg" alt="middlesister-bw-384x259.jpg"/>
</figure>
**Left image**: The original image.
**Right image**: Converted using channel mixer (80% green, 20% red).
<figure>
-<img src="{filename}example2-before-384x288.jpg" alt="example2-before-384x288.jpg"/>
+<img src="{static}example2-before-384x288.jpg" alt="example2-before-384x288.jpg"/>
</figure><figure>
-<img src="{filename}example2-after-384x288.jpg" alt="example2-after-384x288.jpg"/>
+<img src="{static}example2-after-384x288.jpg" alt="example2-after-384x288.jpg"/>
</figure>
**Left image**: The original image.
diff --git a/content/tutorials/Coloring_A_BW_Sketch/index.md b/content/tutorials/Coloring_A_BW_Sketch/index.md
index 5fcb45c1..232c1960 100644
--- a/content/tutorials/Coloring_A_BW_Sketch/index.md
+++ b/content/tutorials/Coloring_A_BW_Sketch/index.md
@@ -13,7 +13,7 @@ First of all you have to acquire through a scanner or something similar your ske
## Step 1
<figure>
-<img src="{filename}hikachan_t0.jpg" alt="hikachan_t0.jpg"/>
+<img src="{static}hikachan_t0.jpg" alt="hikachan_t0.jpg"/>
</figure>
Create a new image of the wanted size and place below the sketch layer a pure white background layer. Now
turn the mode for the sketch layer into multiply. From now the sketch layer will stay forever over the others.
@@ -21,7 +21,7 @@ Create a new image of the wanted size and place below the sketch layer a pure wh
## Step 2
<figure>
-<img src="{filename}hikachan_t1.jpg" alt="hikachan_t1.jpg"/>
+<img src="{static}hikachan_t1.jpg" alt="hikachan_t1.jpg"/>
</figure>
Now let's start playing with colours!
@@ -30,7 +30,7 @@ Create a new layer and call it "Details". In this example I've used it for paint
## Step 3
<figure>
-<img src="{filename}hikachan_t2.jpg" alt="hikachan_t2.jpg"/>
+<img src="{static}hikachan_t2.jpg" alt="hikachan_t2.jpg"/>
</figure>
Create a "Skin" layer over the "Details" one. Here I've coloured the skin and the shoes with the paint tool
and the airbrush. For first you should fill with the base colour the shapes (use a paint tool), then apply
(with the airbrush) darker shades on the edges and brighter ones over the cheeks.
@@ -38,7 +38,7 @@ Create a "Skin" layer over the "Details" one. Here I've coloured the skin and th
## Step 4
<figure>
-<img src="{filename}hikachan_t3.jpg" alt="hikachan_t3.jpg"/>
+<img src="{static}hikachan_t3.jpg" alt="hikachan_t3.jpg"/>
</figure>
The "Details#2" layer is used for some extra details like the white text over the blue doughnut. I've used
it because I want be able to change and retouch the doughnut shading without the white text (that should stay
as brighter as possible).
@@ -46,7 +46,7 @@ The "Details#2" layer is used for some extra details like the white text over th
## Step 5
<figure>
-<img src="{filename}hikachan_t4.jpg" alt="hikachan_t4.jpg"/>
+<img src="{static}hikachan_t4.jpg" alt="hikachan_t4.jpg"/>
</figure>
The "Hairs" layer contains ... well, what do you think will contain a layer called "Hairs"? Yeah, right
answer! ;P Please notice only that this layer is below the sketch one but over the others, so the extra
painted zones of the "Skin" layer are covered by this one. I.e. you can add some shadows over the forehead by
painting over these zones.
@@ -54,10 +54,9 @@ The "Hairs" layer contains ... well, what do you think will contain a layer call
## Final
<figure>
-<img src="{filename}hikachan_t5.jpg" alt="hikachan_t5.jpg"/>
+<img src="{static}hikachan_t5.jpg" alt="hikachan_t5.jpg"/>
</figure>
Finally I've added a "Shadows" layer for making the doughnut and the other elements less flat. This is the
end. Still reading here? Now it's your turn! Quickly open GIMP and start playing! ;)
The original tutorial can be found [here](http://the.sunnyspot.org/slm/tut_skcol.html).
-
diff --git a/content/tutorials/ContrastMask/index.md b/content/tutorials/ContrastMask/index.md
index 488d2d3c..9f971ac2 100644
--- a/content/tutorials/ContrastMask/index.md
+++ b/content/tutorials/ContrastMask/index.md
@@ -9,8 +9,8 @@ Author: Eric R. Jeschke
## Intention
<figure>
-<img src='{filename}before.jpg' alt='before'/>
-<img src='{filename}after.jpg' alt='after'/>
+<img src='{static}before.jpg' alt='before'/>
+<img src='{static}after.jpg' alt='after'/>
</figure>
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.
@@ -24,7 +24,7 @@ The contrast mask technique does some similar things for the exposure as the dig
## The Procedure
<figure>
-<img src='{filename}original.jpg' alt='original.jpg'/>
+<img src='{static}original.jpg' alt='original.jpg'/>
</figure>
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.
@@ -34,7 +34,7 @@ We want to brighten the dark areas a little and darken the light areas a little.
## Step 1
<figure>
-<img src='{filename}layers2.jpg' alt='layers2.jpg'/>
+<img src='{static}layers2.jpg' alt='layers2.jpg'/>
</figure>
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.
@@ -42,8 +42,8 @@ Open the Layers dialog. Right-click on the Background layer and select Duplicate
## Step 2
<figure>
-<img src='{filename}editlayerattr.jpg' alt='editlayerattr'/>
-<img src='{filename}layers3.jpg' alt='layers3' />
+<img src='{static}editlayerattr.jpg' alt='editlayerattr'/>
+<img src='{static}layers3.jpg' alt='layers3' />
</figure>
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).
@@ -51,7 +51,7 @@ Now double-click on the duplicate layer and rename the new layer "Contrast Mask"
## Step 3
<figure>
-<img src='{filename}image2.jpg' alt='image2.jpg'/>
+<img src='{static}image2.jpg' alt='image2.jpg'/>
</figure>
Select the Contrast Mask layer. Go to the image window and right-click, selecting:
@@ -62,7 +62,7 @@ The image should look B&W.
## Step 4
<figure>
-<img src='{filename}image3.jpg' alt='image3.jpg'/>
+<img src='{static}image3.jpg' alt='image3.jpg'/>
</figure>
Right-click and select
@@ -73,8 +73,8 @@ You now have a B&W negative image of your original. We're going to combine this
## Step 5
<figure>
-<img src='{filename}layers4.jpg' alt='layers4'/>
-<img src='{filename}image4.jpg' alt='image4' />
+<img src='{static}layers4.jpg' alt='layers4'/>
+<img src='{static}image4.jpg' alt='image4' />
</figure>
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.
@@ -84,8 +84,8 @@ Don't worry, we're not done yet.
## Step 6
<figure>
-<img src='{filename}original.jpg' alt='original'/>
-<img src='{filename}image5.jpg' alt='image5' />
+<img src='{static}original.jpg' alt='original'/>
+<img src='{static}image5.jpg' alt='image5' />
</figure>
@@ -102,8 +102,8 @@ The image at top left is the original, the top right is with the contrast mask.
## Step 7
<figure>
-<img src='{filename}contrastdialog.jpg' alt='original'/>
-<img src='{filename}imagewtypcontrastreduction.jpg' alt='imagewtypcontrastreduction' />
+<img src='{static}contrastdialog.jpg' alt='original'/>
+<img src='{static}imagewtypcontrastreduction.jpg' alt='imagewtypcontrastreduction' />
</figure>
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.
@@ -111,9 +111,9 @@ It is informative to see how this technique compares to the conventional techniq
## Step 8
<figure>
-<img src='{filename}histogram-before.jpg' alt='Histogram-Before'/>
-<img src='{filename}histogram-after.jpg' alt='Histogram-After' />
-<img src='{filename}histogram-typcontrastreduction.jpg' alt='Historgram-Contrast-Reduction' />
+<img src='{static}histogram-before.jpg' alt='Histogram-Before'/>
+<img src='{static}histogram-after.jpg' alt='Histogram-After' />
+<img src='{static}histogram-typcontrastreduction.jpg' alt='Historgram-Contrast-Reduction' />
</figure>
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.
@@ -123,7 +123,7 @@ Note how the typical contrast adjustment has lost a lot of values at both ends,
## Step 9
<figure>
-<img src='{filename}layers5.jpg' alt='layers5.jpg'/>
+<img src='{static}layers5.jpg' alt='layers5.jpg'/>
</figure>
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
@@ -146,22 +146,22 @@ Now that your contrast mask is created, it's time to fine tune it. Here are some
## Other Examples
<figure>
-<img src="{filename}tree.jpg" alt="tree.jpg"/>
-<img src="{filename}treewcmask.jpg" alt="treewcmask.jpg"/>
+<img src="{static}tree.jpg" alt="tree.jpg"/>
+<img src="{static}treewcmask.jpg" alt="treewcmask.jpg"/>
</figure>
With a contrast mask as described above. Notice how the sky has recovered some blue, and the detail visible
under the tree!
<figure>
-<img src="{filename}nd-original-1.jpg" alt="nd-original-1.jpg"/>
-<img src="{filename}utsunset-wcmask.jpg" alt="utsunset-wcmask.jpg"/>
+<img src="{static}nd-original-1.jpg" alt="nd-original-1.jpg"/>
+<img src="{static}utsunset-wcmask.jpg" alt="utsunset-wcmask.jpg"/>
</figure>
Here's an example of how this technique overlaps with the digital split ND filter approach. Which do you
prefer?
<figure>
-<img src="{filename}nd-filter-1.jpg" alt="nd-filter-1.jpg"/>
-<img src="{filename}utsunset-whmask.jpg" alt="utsunset-whmask.jpg"/>
+<img src="{static}nd-filter-1.jpg" alt="nd-filter-1.jpg"/>
+<img src="{static}utsunset-whmask.jpg" alt="utsunset-whmask.jpg"/>
</figure>
With a digital split ND filter. (left image)
diff --git a/content/tutorials/Creating_Icons/index.md b/content/tutorials/Creating_Icons/index.md
index 7f57ab9a..ece9112f 100644
--- a/content/tutorials/Creating_Icons/index.md
+++ b/content/tutorials/Creating_Icons/index.md
@@ -16,7 +16,7 @@ As with any new task, it will help to have a little background information:
## Filenames and Structure
<figure>
-<img src="{filename}files.png" alt="files.png"/>
+<img src="{static}files.png" alt="files.png"/>
</figure>
GIMP enables you to save compressed files and work with them transparently, using the .xcf format. However,
since we're working with very small files, compression simply doesn't save enough space to justify the
effort. Especially since filemanagers like [Nautilus](http://nautilus.eazel.com/) have problems with creating
thumbnails for compressed images, it's best to accompany any .xcf files you produce with a .png version. (See
Image above)
@@ -25,7 +25,7 @@ Nautilus (gnome-vfs) can't yet handle compressed GIMP native files
## Choosing a Color Palette
<figure>
-<img src="{filename}palette.png" alt="palette.png"/>
+<img src="{static}palette.png" alt="palette.png"/>
</figure>
You may think palettes are only necessary in special cases like indexing colors of web images. However, if
you're going to create more than one icon, having a pre-selected palette can give your icons a more
consistent look and feel.
@@ -50,8 +50,8 @@ It seems at first that creating an icon is incredibly restrictive. After all, yo
## Antialiasing
<figure>
-<img src="{filename}aa1.png" alt="aa1.png" />
-<img src="{filename}aa2.png" alt="aa2.png" />
+<img src="{static}aa1.png" alt="aa1.png" />
+<img src="{static}aa2.png" alt="aa2.png" />
</figure>
One of the basic aspects of bitmap images is the negative effect of Aliasing.
@@ -80,7 +80,7 @@ In this small tutorial, Ximian artist Jakub Steiner will demonstrate most of the
## Basic Shape
<figure>
-<img src="{filename}rectangle.png" alt="rectangle.png"/>
+<img src="{static}rectangle.png" alt="rectangle.png"/>
</figure>
Normally, you'd use the bezier tool for shape editing, but a TV silhouette is simple enough that we'll just
start with the rectangle selection tool.
@@ -91,79 +91,78 @@ Drag the black preview rectangle from the toolbox, or press <kbd>Ctrl-+</kbd> to
## Making it Plastic
<figure>
-<img src="{filename}gradient.png" alt="gradient.png"/>
+<img src="{static}gradient.png" alt="gradient.png"/>
</figure>
Next, we're going to use alpha blending of a selection to give a more three dimensional appearance to the
silhouette.
Select the TV silhouette by right-clicking on the layer in the layer window and choosing Alpha to Selection.
Shrink the selection by _1 pixel_ and fill it with a linear gradient similar to the image above. Now you have
a dark grey shape with a black outline, and slightly shiny corners.
<figure>
-<img src="{filename}highlight.png" alt="highlight.png"/>
+<img src="{static}highlight.png" alt="highlight.png"/>
</figure>
Now it's time to add a bit more depth, using the highlight trick from the section called "Highlights And
Shadows". Use a white 1x1 pencil to create highlights, and a black one to create shadows. By setting opacity
of the brush to something like 20% you can get results similar to the image above.
## Modelling the Screen
<figure>
-<img src="{filename}screen.png" alt="screen.png"/>
+<img src="{static}screen.png" alt="screen.png"/>
</figure>
Of course, a television isn't just a single square with an outline. You can create the screen exactly the
same way you did the TV silhouette. Create a new layer, and add a smaller rectangular selection, positioned
inside the television one. Fill it with black, shrink the selection by 1 pixel and finally fill it with
linear gradient to form a screen like the one shown in image above.
<figure>
-<img src="{filename}reflection.png" alt="reflection.png"/>
+<img src="{static}reflection.png" alt="reflection.png"/>
</figure>
An important aspect of glass surfaces is the reflection. To make the television screen look shiny and
reflective, shrink the selection by another pixel and create a new layer. Now, pick the airbrush tool and a
mid-sized fuzzy brush. Paint a white reflection like the one in image above.
If you want to create horizontal monitor lines on the screen, you can use the interlace effect. To do so,
create a new layer above the current one. Render white horizontal lines with <span class="filter"><Image>
Filters -> Render -> Pattern -> Grid</span>. Make sure you set the layer mode to _Overlay_.
<figure>
-<img src="{filename}button.png" alt="button.png"/>
+<img src="{static}button.png" alt="button.png"/>
</figure>
After that, you'll want to create buttons. This is relatively simple: just create a circular selection with
the elipse tool and fill it with radial gradient (image above). Choosing a gradient instead of a solid fill
provides a bit of shine to the button, so even if it's just a few pixels across, it looks distinct and three
dimensional.
## Modelling the Remote Control
<figure>
-<img src="{filename}remote1.png" alt="remote1.png"/>
+<img src="{static}remote1.png" alt="remote1.png"/>
</figure>
This time we'll use the bezier selection tool to create the outline of an object. With a small shape, it can
sometimes be difficult to use the bezier tool, it's hard to create a small shape, because the nodes snap to
the pixel grid, but it's worth the effort because it makes the shape look sharp, like the one above. You can
look in the GIMP manual for more information about editing bezier paths and working with the bezier tool.
<figure>
-<img src="{filename}remote3.png" alt="remote3.png"/>
+<img src="{static}remote3.png" alt="remote3.png"/>
</figure>
To create a shadow for the remote, copy the path window and moving just one node. The shadow in this image
is done exactly this way.
<figure>
-<img src="{filename}remote4.png" alt="remote4.png"/>
+<img src="{static}remote4.png" alt="remote4.png"/>
</figure>
You can make almost any image, especially a small one, easier to understand by adding black object outlines
to enhance contrast. To do this, you'll use the opposite of technique you used to create the television
silhouette with its outline. First, right-click on the remote control layer and select <span
class="filter">Layers -> Alpha to selection</span>. Create a new empty layer below the remote control layer.
Increase the size of the selection by 1 pixel, and fill the selection with black.
<figure>
-<img src="{filename}remote5.png" alt="remote5.png"/>
+<img src="{static}remote5.png" alt="remote5.png"/>
</figure>
GIMP may not grow that selection perfectly, and you will probably have to alter the result manually. In this
case, we'll use the erase tool with a 1x1 pixel brush, and opacity between 60 and 70 percent. Choose the
"draw straight lines" option, and smooth the outline by drawing close to the border of the object.
<figure>
-<img src="{filename}remote6.png" alt="remote6.png"/>
+<img src="{static}remote6.png" alt="remote6.png"/>
</figure>
Now, to make the object a little more realistic, we'll use our highlight trick. Use the pencil tool with a
1x1 pixel brush and opacity set quite low, near 20%. The result makes the object very real.
<figure>
-<img src="{filename}remote8.png" alt="remote8.png"/>
+<img src="{static}remote8.png" alt="remote8.png"/>
</figure>
To create buttons on the remote control, use the same technique as you did to create the button on the TV:
Make a selection with the bezeier tool, then fill it with a gradient, and apply highlights and shadows with
the pencil tool as needed.
## Adding Glow
<figure>
-<img src="{filename}remote9.png" alt="remote9.png"/>
+<img src="{static}remote9.png" alt="remote9.png"/>
</figure>
For extra realism you can add a TV glow. Create a layer above the screen, but below the remote. Create a
rectangular selection of the screen, then increase its size by 6 pixels and fill it with blue. Now, shrink
that selection by 3 pixels and fill with white. Deselect the are with <kbd>Ctrl-Shift-A</kbd> and apply <span
class="filter"><Image> Filter -> Blur -> Gaussian Blur RLE</span> by about 5 pixels. Now set the layer mode
to _overlay_, creating the transparency effect.
## The Final Product
<figure>
-<img src="{filename}finished.png" alt="finished.png"/>
+<img src="{static}finished.png" alt="finished.png"/>
</figure>
Now, you've got a final product: a television, with remote.
-
diff --git a/content/tutorials/Custom_Brushes/index.md b/content/tutorials/Custom_Brushes/index.md
index 666ec1f5..fe42430b 100644
--- a/content/tutorials/Custom_Brushes/index.md
+++ b/content/tutorials/Custom_Brushes/index.md
@@ -14,14 +14,14 @@ Along with the brushes already included, you can create custom brushes using thr
## Step 1
<figure>
-<img src="{filename}thumb1.png" alt="thumb1.png"/>
+<img src="{static}thumb1.png" alt="thumb1.png"/>
</figure>
Create a new image the size of the brush you will be creating. For our example, we will be creating a 64x64
image. Create it with a transparent background.
## Step 2
<figure>
-<img src="{filename}thumb2.png" alt="thumb2.png"/>
+<img src="{static}thumb2.png" alt="thumb2.png"/>
</figure>
Go to the Layers dialog and create additional layers with the fill type Transparent (if necessary, delete or
clear the background layer if you forgot to make it transparent when creating the image).
Give them any name you want. We will be just naming them Layer1, Layer2, and Layer3. The layer name really
don't matter in this case.
@@ -29,14 +29,14 @@ Give them any name you want. We will be just naming them Layer1, Layer2, and Lay
## Step 3
<figure>
-<img src="{filename}thumb3.png" alt="thumb3.png"/>
+<img src="{static}thumb3.png" alt="thumb3.png"/>
</figure>
Draw the images you want in the layers that were already created. In our case we will be drawing a picture
of a happy face in 3 colours (red, green and yellow). At the end your layers should look something like this
(see image above). You can save a copy of your image in .xcf format now, in case you want to edit it later.
## Step 4
<figure>
-<img src="{filename}thumb4.png" alt="thumb4.png"/>
+<img src="{static}thumb4.png" alt="thumb4.png"/>
</figure>
The last step is to export your brush as a GIMP picture brush. The extension of this kind of brush is .GIH.
So right click on the image, then choose
@@ -50,12 +50,12 @@ The Export Image as Brush Pipe dialog will ask you how you want to export the im
## Final
<figure>
-<img src="{filename}thumb5.png" alt="thumb5.png"/>
+<img src="{static}thumb5.png" alt="thumb5.png"/>
</figure>
To see our brush, go to the Brushes dialog and hit the Refresh button. Our happy image should appear in the
dialog. If it doesn't, make sure you have saved the brush in the GIMP "brushes" folder and that it has an
extension of .GIH.
You will note that our little picture on the right has a little red triangle in the bottom right corner.
This tells us that the brush contains multiple pictures. You can click on the brush image and hold the mouse
button to see a preview of the brush. The brush animation will show you that it contains the three images.
Let's test our brush. Select our brush from the brush dialog, create a simple image and start drawing.
<figure>
-<img src="{filename}thumb6.png" alt="thumb6.png"/>
+<img src="{static}thumb6.png" alt="thumb6.png"/>
</figure>
diff --git a/content/tutorials/Digital_Black_and_White_Conversion/index.md
b/content/tutorials/Digital_Black_and_White_Conversion/index.md
index 2d64d770..77c5078f 100644
--- a/content/tutorials/Digital_Black_and_White_Conversion/index.md
+++ b/content/tutorials/Digital_Black_and_White_Conversion/index.md
@@ -13,7 +13,7 @@ Black and White photography is a big topic that deserves entire books devoted to
There are a few things you should focus on in regards to preparing your images for a B&W conversion. You
want to keep in mind that by removing color information you are effectively left with only tonal data (and
composition) to convey your intentions.
<figure>
-<img src="{filename}Into the Fog.jpg" alt="Into the Fog by Pat David" />
+<img src="{static}Into the Fog.jpg" alt="Into the Fog by Pat David" />
<figcaption markdown='1'>
<em>Into the Fog</em> by <a href="https://blog.patdavid.net";>Pat David</a> (<a
href="https://creativecommons.org/licenses/by-sa/4.0/";>cc-by-sa</a>)
</figcaption>
@@ -24,7 +24,7 @@ This can be both liberating and confining.
By liberating yourself of color data the focus is entirely on the subjects and composition (this is often
one of the primary reasons street photography is associated with B&W). Conversely, the subjects and
composition need to be much stronger to carry the result.
<figure>
-<img src="{filename}nautilus.jpg" alt="Chambered Nautilus by Pat David" />
+<img src="{static}nautilus.jpg" alt="Chambered Nautilus by Pat David" />
<figcaption>
Without color, the form and tones are all that’s left.<br/>
@@ -61,7 +61,7 @@ Before heading down that path, it may help to have a closer look at the tools be
You are working in an RGB world when you stare at your monitors. Every single pixel is composed of 3
sub-pixels of Red, Green, and Blue.
<figure>
-<img src="{filename}300px-TN_display_closeup_300X.jpg" alt="TN LCD Display 300X close up" />
+<img src="{static}300px-TN_display_closeup_300X.jpg" alt="TN LCD Display 300X close up" />
<figcaption>
300X magnification of an LCD panel.<br/>
@@ -97,7 +97,7 @@ Very quickly you should realize that a true monochromatic grayscale image can di
There are many different paths to get to a grayscale image and almost none of them are equal. They will all
produce different images based on their method of conversion, and it will be up to you to decide which ones
(or portions of) to keep and build upon to create your final result.
<figure class="big-vid">
-<img src="{filename}Conversation in Hayleys.jpg" alt="Conversation in Hayleys by Pat David" />
+<img src="{static}Conversation in Hayleys.jpg" alt="Conversation in Hayleys by Pat David" />
<figcaption>
A combination of luminosity desaturation and GEGL C2G<br/>
<em>Conversation in Hayleys</em> by Pat David (<a
href="https://creativecommons.org/licenses/by-sa/4.0/";>cc-by-sa</a>)
@@ -126,7 +126,7 @@ Perhaps the easiest and most straightforward path to a grayscale image is using
There are three options available from this menu:
<figure>
-<img src="{filename}GIMP desaturate dialog.png" alt="GIMP Desaturate Dialog" />
+<img src="{static}GIMP desaturate dialog.png" alt="GIMP Desaturate Dialog" />
</figure>
Each of these options (Lightness, Luminosity, Average) will generate a grayscale image for you, but the
difference lies in the _way_ they interpret the image colors into values of gray.
@@ -134,12 +134,12 @@ Each of these options (Lightness, Luminosity, Average) will generate a grayscale
To illustrate the differences, consider the following two figures. One is a gradient of red, green and blue
from black to full saturation. The other are overlapping circles of color in an additive mix.
<figure>
-<img src="{filename}rgb-base.png" alt="RGB Base Gradient Image" />
+<img src="{static}rgb-base.png" alt="RGB Base Gradient Image" />
<figcaption>Base RGB gradient of pure colors</figcaption>
</figure>
<figure>
-<img src="{filename}rgb-mix-base.png" alt="RGB Base Mix Image" />
+<img src="{static}rgb-mix-base.png" alt="RGB Base Mix Image" />
<figcaption>Base RGB (additive color) mix</figcaption>
</figure>
@@ -158,12 +158,12 @@ So, for instance, with an RGB value of 100, 20, 210, the equation would be:
Using the Lightness function on our test images yields the following results:
<figure>
-<img src="{filename}rgb-lightness.png" alt="RGB Desaturate Lightness" />
+<img src="{static}rgb-lightness.png" alt="RGB Desaturate Lightness" />
<figcaption>Lightness conversion yields similar values regardless of color</figcaption>
</figure>
<figure>
-<img src="{filename}rgb-mix-lightness.png" alt="RGB Lightness Mix" />
+<img src="{static}rgb-mix-lightness.png" alt="RGB Lightness Mix" />
</figure>
This means that one channel is actually ignored in creating the final value.
@@ -175,12 +175,12 @@ Average will use the numerical average of the RGB values in each pixel.
<p class="Cmd aside">⅓ × ( R + G + B )</p>
<figure>
-<img src="{filename}rgb-average.png" alt="RGB Desaturate Average" />
+<img src="{static}rgb-average.png" alt="RGB Desaturate Average" />
<figcaption>Averaging, the values will trend darker overall</figcaption>
</figure>
<figure>
-<img src="{filename}rgb-mix-average.png" alt="RGB Average Mix" />
+<img src="{static}rgb-mix-average.png" alt="RGB Average Mix" />
</figure>
### Luminosity
@@ -192,12 +192,12 @@ The weighted function describing relative luminance is:
<p class="Cmd aside">(0.2126 × R) + (0.7152 × G) + (0.0722 × B)</p>
<figure>
-<img src="{filename}rgb-luminosity.png" alt="RGB Desaturate Luminosity" />
+<img src="{static}rgb-luminosity.png" alt="RGB Desaturate Luminosity" />
<figcaption>This is closer to how our eyes will actually perceive the brightness of each color</figcaption>
</figure>
<figure>
-<img src="{filename}rgb-mix-luminosity.png" alt="RGB Luminosity Mix" />
+<img src="{static}rgb-mix-luminosity.png" alt="RGB Luminosity Mix" />
<figcaption>
Notice the overwhelming contribution from green
</figcaption>
@@ -210,20 +210,20 @@ No one of these methods is necessarily any better than the other objectively for
The image below, [Joseph N. Langan Park](https://www.flickr.com/photos/patdavid/3808678255), is an
interesting example to see just how much green influences the conversion result using luminosity. Pay careful
attention to what **Luminosity** does with the green bushes along the waters edge.
<figure>
-<img src="{filename}langan.jpg" alt="Langan Park by Pat David" /> <br/>
-<img src="{filename}langan-lightness.jpg" alt="Langan Park by Pat David" /> <br/>
-<img src="{filename}langan-average.jpg" alt="Langan Park by Pat David" /> <br/>
-<img src="{filename}langan-luminosity.jpg" alt="Langan Park by Pat David" /><br/>
+<img src="{static}langan.jpg" alt="Langan Park by Pat David" /> <br/>
+<img src="{static}langan-lightness.jpg" alt="Langan Park by Pat David" /> <br/>
+<img src="{static}langan-average.jpg" alt="Langan Park by Pat David" /> <br/>
+<img src="{static}langan-luminosity.jpg" alt="Langan Park by Pat David" /><br/>
<figcaption>Original, Lightness, Average, and Luminosity</figcaption>
</figure>
This shot of [Whitney](https://www.flickr.com/photos/patdavid/6231554301/) shows the effect on skin tones,
as well as the change in her shirt color due to the heavy reds present. In just a **Lightness** conversion,
the red shirt becomes relatively flat compared to her skin tones, but becomes darker and more pronounced
using **Luminosity**. Her lips get a bit of a boost in tone in the **Luminosity** conversion as well.
<figure>
-<img src="{filename}whitney.jpg" alt="Whitney by Pat David" /> <br/>
-<img src="{filename}whitney-lightness.jpg" alt="Whitney by Pat David" /> <br/>
-<img src="{filename}whitney-average.jpg" alt="Whitney by Pat David" /> <br/>
-<img src="{filename}whitney-luminosity.jpg" alt="Whitney by Pat David" /><br/>
+<img src="{static}whitney.jpg" alt="Whitney by Pat David" /> <br/>
+<img src="{static}whitney-lightness.jpg" alt="Whitney by Pat David" /> <br/>
+<img src="{static}whitney-average.jpg" alt="Whitney by Pat David" /> <br/>
+<img src="{static}whitney-luminosity.jpg" alt="Whitney by Pat David" /><br/>
<figcaption>Original, Lightness, Average, and Luminosity</figcaption>
</figure>
@@ -234,10 +234,10 @@ Using **Desaturate** lets you convert to grayscale based on pre-defined function
For the examples below I’ll use a different color gradient test map going from blue to blue HSV gradient,
with a gradient to black vertically. This represents the entire 8-bit colorspace.
<figure>
-<img src="{filename}rgb-hsv.png" alt="RGB HSV Gradient" /> <br/>
-<img src="{filename}rgb-hsv-lightness.png" alt="RGB HSV Gradient" /> <br/>
-<img src="{filename}rgb-hsv-average.png" alt="RGB HSV Gradient" /> <br/>
-<img src="{filename}rgb-hsv-luminosity.png" alt="RGB HSV Gradient" /><br/>
+<img src="{static}rgb-hsv.png" alt="RGB HSV Gradient" /> <br/>
+<img src="{static}rgb-hsv-lightness.png" alt="RGB HSV Gradient" /> <br/>
+<img src="{static}rgb-hsv-average.png" alt="RGB HSV Gradient" /> <br/>
+<img src="{static}rgb-hsv-luminosity.png" alt="RGB HSV Gradient" /><br/>
<figcaption>Gradient representing all the colors/shades in 8-bit sRGB colorspace.<br/>
Original, Lightness, Average, and Luminosity</figcaption>
</figure>
@@ -251,7 +251,7 @@ The **Channel Mixer** can be invoked through:
The dialog will look like this with the test gradient:
<figure>
-<img src="{filename}channel-mixer.png" alt="GIMP Channel Mixer Dialog" />
+<img src="{static}channel-mixer.png" alt="GIMP Channel Mixer Dialog" />
</figure>
The **Channel Mixer** can be used to modify these channel on a full color image, but we are focusing on
grayscale conversion right now. So check the box for _Monochrome_, which will disable the _Output channel_
option in the dialog (it’s no longer applicable). This will turn your preview into a grayscale image.
@@ -261,7 +261,7 @@ The **Channel Mixer** can be used to modify these channel on a full color image,
If you checked the _Monochrome_ option, and left the Red slider at 100, then you’d be seeing a
representation of your image with no Green or Blue contribution (ie: you would basically be seeing the Red
channel of your image):
<figure>
-<img src="{filename}channel-mixer-red.png" alt="GIMP Channel Mixer monochrome full red" />
+<img src="{static}channel-mixer-red.png" alt="GIMP Channel Mixer monochrome full red" />
<figcaption>Basically just the red channel</figcaption>
</figure>
@@ -272,7 +272,7 @@ It’s also important to note that the sliders represent a _percent contribution
That is, if you set the Red and Green channels to 50(%), you would see something like this:
<figure>
-<img src="{filename}channel-mixer-red50-green50.png" alt="GIMP Channel mixer monochrome 50% red and green" />
+<img src="{static}channel-mixer-red50-green50.png" alt="GIMP Channel mixer monochrome 50% red and green" />
</figure>
In this case, Red and Green would contribute 50% of their values (with nothing from Blue) to the final pixel
gray value. Considering the same pixel example from above, where the RGB components are 200, 150, 100, we
would get:
@@ -287,7 +287,7 @@ So the final grayscale pixel value would be: 175, 175, 175.
### Preserve Luminosity
<figure>
-<img src="{filename}eleven.jpg" alt="Spinal Tap up to eleven" />
+<img src="{static}eleven.jpg" alt="Spinal Tap up to eleven" />
<figcaption>
<em>“These go up to 11”</em> — <a href="https://en.wikipedia.org/wiki/Up_to_eleven";>Nigel Tufnel</a>
</figcaption>
@@ -326,7 +326,7 @@ Previously we talked about the function used for desaturating according to _rela
If you wanted to replicate the same results that `Desaturate → Luminosity` produces, you can just set the
RGB sliders to the same values from that function (21.3, 71.5, 7.2):
<figure>
-<img src="{filename}channel-mixer-lum.png" alt="GIMP Channel mixer luminosity values" />
+<img src="{static}channel-mixer-lum.png" alt="GIMP Channel mixer luminosity values" />
<figcaption>Replicating the luminosity function</figcaption>
</figure>
@@ -337,7 +337,7 @@ If you’re just getting started with the **Channel Mixer**, this makes a pretty
A pretty landscape image by [Flickr](https://www.flickr.com) user [Cyndi
Calhoun](https://www.flickr.com/people/cyndicalhounfineart/) serves as a nice test image for experimentation:
<figure class="big-vid">
-<img src="{filename}cyndicalhounfineart-color.jpg" alt="Garden of the Gods by Cyndi Calhoun" />
+<img src="{static}cyndicalhounfineart-color.jpg" alt="Garden of the Gods by Cyndi Calhoun" />
<figcaption>
<a href="http://www.flickr.com/photos/cyndicalhounfineart/7990432224";>Garden of the Gods - Looking
North</a><br/>
by Cyndi Calhoun (<a href="https://creativecommons.org/licenses/by/2.0/";>cc-by</a>)
@@ -351,7 +351,7 @@ Keep an eye on the individual channels from getting so bright that you lose deta
So, using the luminosity function as a starting point…
<figure class="big-vid">
-<img src="{filename}cyndicalhounfineart-CM-luminosity.jpg" alt="Garden of the Gods by Cyndi Calhoun
Luminosity" />
+<img src="{static}cyndicalhounfineart-CM-luminosity.jpg" alt="Garden of the Gods by Cyndi Calhoun
Luminosity" />
<figcaption>Straight conversion using the luminosity</figcaption>
</figure>
@@ -360,7 +360,7 @@ It’s not a bad start at all, but the prominence of the red rocks in the sunlig
With the _Preserve Luminosity_ option checked, begin bumping the Red channel to taste.
<figure class="big-vid">
-<img src="{filename}cyndicalhounfineart-CM-red-66.1.jpg" alt="Garden of the Gods by Cyndi Calhoun Red
Channel" />
+<img src="{static}cyndicalhounfineart-CM-red-66.1.jpg" alt="Garden of the Gods by Cyndi Calhoun Red Channel"
/>
<figcaption>
Red channel bumped up to 66.1
</figcaption>
@@ -371,7 +371,7 @@ This gives a little more prominence to the red stone.
The Green channel seems ok, but for comparison try lowering it to about half of the Red channel value.
Remember — _Preserve Luminosity_ is checked so the final values will scale to give Red values twice the
weight as Green.
<figure class="big-vid">
-<img src="{filename}cyndicalhounfineart-CM-green-33.jpg" alt="Garden of the Gods by Cyndi Calhoun Red
Channel" />
+<img src="{static}cyndicalhounfineart-CM-green-33.jpg" alt="Garden of the Gods by Cyndi Calhoun Red Channel"
/>
<figcaption>
Green channel at ~half of Red.
</figcaption>
@@ -400,7 +400,7 @@ The result was divided by the influence amount to scale the way _Preserve Lumino
It should go without saying that the Blue channel will have a heavy influence on the sky (and many areas of
the image in shadow). To add a little drama to the sky, try removing the Blue channel influence by setting it
to 0:
<figure class="big-vid">
-<img src="{filename}cyndicalhounfineart-CM-blue-0.jpg" alt="Garden of the Gods by Cyndi Calhoun Red Channel"
/>
+<img src="{static}cyndicalhounfineart-CM-blue-0.jpg" alt="Garden of the Gods by Cyndi Calhoun Red Channel" />
<figcaption>Blue channel set to 0
</figcaption>
</figure>
@@ -412,7 +412,7 @@ Pay careful attention to what these changes do to the image in closer views. In
The sliders also allow negative values. This will seriously crush the channel results when applied (and will
quickly lead to funky results if you’re not careful). For example, to push the Blue channel even darker in
the final result, try setting the Blue channel to -20:
<figure class="big-vid">
-<img src="{filename}cyndicalhounfineart-CM-blue--20.jpg" alt="Garden of the Gods by Cyndi Calhoun Red
Channel" />
+<img src="{static}cyndicalhounfineart-CM-blue--20.jpg" alt="Garden of the Gods by Cyndi Calhoun Red Channel"
/>
<figcaption>Red: 66.1, Green: 33, Blue: -20
</figcaption>
</figure>
@@ -433,15 +433,15 @@ In skin, the Red channel is very flattering to the final result and you’ll oft
The Red channel can be very flattering on skin and is a great tool to keep in mind when working on
portraits. For instance, below is the color image of Whitney from earlier:
<figure>
-<img src="{filename}whitney.jpg" alt="Whitney in color by Pat David" />
+<img src="{static}whitney.jpg" alt="Whitney in color by Pat David" />
<figcaption>Whitney in color</figcaption>
</figure>
The straight _Luminosity_ conversion is below. Compare it to a version where the Red channel is set equal to
the Green channel (giving a greater emphasis on the Reds):
<figure>
-<img src="{filename}whitney-luminosity.jpg" alt="Whitney Luminosity by Pat David" /><br/>
-<img src="{filename}whitney-bw-equal-RG.jpg" alt="Whitney Luminosity by Pat David" />
+<img src="{static}whitney-luminosity.jpg" alt="Whitney Luminosity by Pat David" /><br/>
+<img src="{static}whitney-bw-equal-RG.jpg" alt="Whitney Luminosity by Pat David" />
<figcaption>Whitney in Luminosity (top)<br/>
Whitney with Red channel = Green channel (bottom)</figcaption>
</figure>
@@ -540,7 +540,7 @@ If you wanted to isolate each of the RGB channel contributions into its own laye
Will bring up the **Decompose** dialog box:
<figure>
-<img src="{filename}decompose-base.png" alt="GIMP Decompose color dialog" />
+<img src="{static}decompose-base.png" alt="GIMP Decompose color dialog" />
<figcaption>The <strong>Decompose</strong> dialog</figcaption>
</figure>
@@ -551,7 +551,7 @@ The most important option is which _Color model_ to decompose to. Up to now we h
We will be using this image graciously provided by [Dimitrios
Psychogios](https://plus.google.com/u/0/+DimitriosPsychogios/about):
<figure>
-<img src="{filename}dmitrios-dice.jpg" alt="Dice by Dmitrios Psychogios" />
+<img src="{static}dmitrios-dice.jpg" alt="Dice by Dmitrios Psychogios" />
<figcaption><em>Dice</em> by <a href="https://plus.google.com/u/0/+DimitriosPsychogios/about";>Dimitrios
Psychogios</a> (<a href="https://creativecommons.org/licenses/by-sa/4.0/";
title="CC-BY-SA">cc-by-sa</a>)</figcaption>
</figure>
@@ -560,7 +560,7 @@ We will be using this image graciously provided by [Dimitrios Psychogios](https:
This is the _Color mode_ that we’ve been focusing on up to now, and is usually the most helpful in terms of
having multiple sources to draw from. This separates out the Red, Green, and Blue Channels into individual
layers for you (and Alpha if your image has it).
<figure class="big-vid">
-<img src="{filename}GIMP-Decompose-RGB.jpg" alt="Dimitrios Psychogios Dice decompose RGB" />
+<img src="{static}GIMP-Decompose-RGB.jpg" alt="Dimitrios Psychogios Dice decompose RGB" />
<figcaption>RGB decomposed.</figcaption>
</figure>
@@ -569,7 +569,7 @@ This is the _Color mode_ that we’ve been focusing on up to now, and is usually
Hue, Saturation, and Value/Lightness is another useful decomposition, though usually only the Value or
Lightness is useful for B&W conversion.
<figure class="big-vid">
-<img src="{filename}GIMP-Decompose-HSV.jpg" alt="Dimitrios Psychogios Dice decompose HSV" />
+<img src="{static}GIMP-Decompose-HSV.jpg" alt="Dimitrios Psychogios Dice decompose HSV" />
<figcaption>Hue, Saturation, Value (HSV) Channels</figcaption>
</figure>
@@ -582,7 +582,7 @@ Value, V = MAX( R, G, B )
Which is basically just the largest value of Red, Green, or Blue.
<figure class="big-vid">
-<img src="{filename}GIMP-Decompose-HSL.jpg" alt="Dimitrios Psychogios Dice decompose HSL" />
+<img src="{static}GIMP-Decompose-HSL.jpg" alt="Dimitrios Psychogios Dice decompose HSL" />
<figcaption>Hue, Saturation, Lightness (HSL) Channels</figcaption>
</figure>
@@ -603,7 +603,7 @@ There is far too much information concerning the [LAB colorspace](https://en.wik
The _LAB_ colorspace is based on a perceptual model (similar to the relative luminance previously
discussed). In fact, the _Lightness_ in _LAB_ is calculated using the cube root of the luminance from that
function.
<figure class="big-vid">
-<img src="{filename}GIMP-Decompose-LAB.jpg" alt="Dimitrios Psychogios Dice decompose LAB" />
+<img src="{static}GIMP-Decompose-LAB.jpg" alt="Dimitrios Psychogios Dice decompose LAB" />
<figcaption>LAB Channels</figcaption>
</figure>
@@ -614,14 +614,14 @@ As you can see, the only channel of any use for a B&W conversion is really the *
Cyan, Magenta, Yellow and (Black, K) are often discussed in terms of printing. When doing the decomposition
in GIMP, you’ll have to invert the results to make them useful. Once you do, you may notice that they are, in
fact, the same as RGB (for CMY decomposition):
<figure class="big-vid">
-<img src="{filename}GIMP-Decompose-CMY.jpg" alt="Dimitrios Psychogios Dice decompose CMY" />
+<img src="{static}GIMP-Decompose-CMY.jpg" alt="Dimitrios Psychogios Dice decompose CMY" />
<figcaption>CMY conversion (inverted from direct conversion)</figcaption>
</figure>
CMYK produces a similar result, but adds another channel to control the level of black in the result.
Inverting the _Black_, **K** channel yields something usable.
<figure>
-<img src="{filename}GIMP-Decompose-CMYK.jpg" alt="Dimitrios Psychogios Dice decompose CMYK" />
+<img src="{static}GIMP-Decompose-CMYK.jpg" alt="Dimitrios Psychogios Dice decompose CMYK" />
<figcaption>CMYK conversion with the Black, <strong>K</strong> channel inverted</figcaption>
</figure>
@@ -630,7 +630,7 @@ CMYK produces a similar result, but adds another channel to control the level of
Anyone who has done video processing might recognize this colorspace representation, as it often shows up in
digital video. _YCbCr_ is a means for encoding the RGB colorspace with three channels: _Luma_, **Y**, and two
channels of Red (_Cr_) and Blue (_Cb_) chroma differences.
<figure class="big-vid">
-<img src="{filename}GIMP-Decompose-YCbCr.jpg" alt="Dimitrios Psychogios Dice decompose YCbCr" />
+<img src="{static}GIMP-Decompose-YCbCr.jpg" alt="Dimitrios Psychogios Dice decompose YCbCr" />
<figcaption>YCbCr</figcaption>
</figure>
@@ -649,7 +649,7 @@ Let’s summarize some of the most useful results from `Colors → Components
This gives a total of 9 different types of color mode conversions that may be useful for generating a B&W
image. It helps to visually see all of the options at once to get a better feel for what is going on:
<figure class="big-vid">
-<img src="{filename}GIMP-Decompose-All.jpg" alt="Dimitrios Psychogios Dice decompose All" />
+<img src="{static}GIMP-Decompose-All.jpg" alt="Dimitrios Psychogios Dice decompose All" />
<figcaption>
All 9 useful channels from <code>Colors → Components → Decompose</code>
</figcaption>
@@ -679,7 +679,7 @@ Likely that _some parts_ of _some conversions_ will be useful in some way. I am
Pseudogrey (gr**_e_**y, not gray, per the original author, [Rich Franzen](http://r0k.us/rock/index.html)) is
a means for increasing the available levels of _perceived_ gray in an image using a bit-stealing technique.
<figure class="big-vid">
-<img src="{filename}Randi pseudogrey.jpg" alt="Randi pseudogrey by Pat David" />
+<img src="{static}Randi pseudogrey.jpg" alt="Randi pseudogrey by Pat David" />
<figcaption>
<em>Randi</em> in pseudogrey<br/>
by Pat David (<a href="https://creativecommons.org/licenses/by-sa/4.0/";>cc-by-sa</a>)</figcaption>
@@ -729,7 +729,7 @@ In practice, c2g will attempt to scale the values of pixels within its neighborh
Let’s consider this test image:
<figure class="big-vid">
-<img src="{filename}Cars-Luminosity.jpg" alt="Deerfield Beach luminosity GIMP" />
+<img src="{static}Cars-Luminosity.jpg" alt="Deerfield Beach luminosity GIMP" />
<figcaption>
Straight <em>Luminosity</em> desaturation in GIMP
</figcaption>
@@ -738,7 +738,7 @@ Straight <em>Luminosity</em> desaturation in GIMP
At first glance, GEGL c2g will likely produce ugly results. The default settings are not conducive to
producing a pretty image:
<figure class="big-vid">
-<img src="{filename}Cars-c2g-default.jpg" alt="Deerfield Beach c2g default GIMP by Pat David" />
+<img src="{static}Cars-c2g-default.jpg" alt="Deerfield Beach c2g default GIMP by Pat David" />
<figcaption>
c2g conversion, default settings (radius 300, samples 4, iterations 10)
</figcaption>
@@ -751,7 +751,7 @@ Tweaking parameters can lead to better results at the cost of processing time. G
Haloing can be decreased by increasing the radius and graininess can be decreased by increasing the samples
or iterations. Iterations seem to have a larger effect on overall noisiness in the result but (again) at the
cost of increased processing time.
<figure class="big-vid">
-<img src="{filename}Cars-c2g-r750-s8-i15.jpg" alt="Deerfield Beach c2g r750 s8 i15 GIMP by Pat David" />
+<img src="{static}Cars-c2g-r750-s8-i15.jpg" alt="Deerfield Beach c2g r750 s8 i15 GIMP by Pat David" />
<figcaption>
Betters results after increasing some parameters (radius 750, samples 8, iterations 15)
</figcaption>
@@ -760,7 +760,7 @@ Betters results after increasing some parameters (radius 750, samples 8, iterati
Increasing the radius helped to alleviate some of the halos and will allow the algorithm to spread the
contrast over a larger area. The increase in samples and iterations helps to keep the noise down to a more
manageable level as well. Refining even further yields slightly better results:
<figure class="big-vid">
-<img src="{filename}Cars-c2g-r1500-s8-i20.jpg" alt="Deerfield Beach c2g r1500 s8 i20 GIMP by Pat David" />
+<img src="{static}Cars-c2g-r1500-s8-i20.jpg" alt="Deerfield Beach c2g r1500 s8 i20 GIMP by Pat David" />
<figcaption>
Betters results after increasing some parameters (radius 1500, samples 8, iterations 20)
</figcaption>
@@ -773,7 +773,7 @@ If a luminosity desaturation will choose a pixel value based on the perceived co
For example, below is an optical illusion showing the effect on perceived luminosity relative to nearby
brightness:
<figure>
-<img src="{filename}Same_color_illusion.png" alt="checkerboard luminosity optical illusion" />
+<img src="{static}Same_color_illusion.png" alt="checkerboard luminosity optical illusion" />
<figcaption>Square A and B are the same value of gray!</figcaption>
</figure>
@@ -782,7 +782,7 @@ Squares A & B are the same exact shade of gray. The reason we perceive B as ligh
The results of running the image through c2g aligns the pixel values closer to what our eyes see:
<figure>
-<img src="{filename}illusion.png" alt="checkerboard luminosity optical illusion" />
+<img src="{static}illusion.png" alt="checkerboard luminosity optical illusion" />
<figcaption>After letting c2g do its thing</figcaption>
</figure>
@@ -799,14 +799,14 @@ The overall workflow here will be to decompose the image to various grayscale la
Do a [Creative Commons search](https://www.flickr.com/creativecommons) on Flickr, and it’s _very_ likely
that photographer [Frank Kovalchek](https://www.flickr.com/photos/72213316@N00/) will show up in some
fashion. He liberally licenses many photographs under [Creative Commons](https://creativecommons.org/)
licenses, and we will be using one of his portraits for this first example.
<figure>
-<img src="{filename}aldude-color.jpg" alt="GIMP B&W base image by Frank Kovalchek" />
+<img src="{static}aldude-color.jpg" alt="GIMP B&W base image by Frank Kovalchek" />
<figcaption><a href="https://www.flickr.com/photos/72213316@N00/4589410278";><em>What a sweet looking
portrait</em></a> by <a href="https://www.flickr.com/people/72213316@N00/";>Frank Kovalchek</a> on Flickr (<a
href="https://creativecommons.org/licenses/by/2.0/ "Creative Commons - By
Attribution"">cc-by</a>)</figcaption>
</figure>
Utilizing [the script from earlier](#the-script) to quickly break the image down into multiple layers using
different decomposition modes produces a nice array overview to consider:
<figure class="big-vid">
-<img src="{filename}aldude-array.jpg" alt="GIMP B&W Decompose Array" />
+<img src="{static}aldude-array.jpg" alt="GIMP B&W Decompose Array" />
</figure>
These various decompositions supply a large amount of possible variations in getting to a finished product.
Keep in mind that the goal in this example is to maintain good tonal density as well as imparting a sense of
texture and detail.
@@ -820,7 +820,7 @@ As good a starting point as any, consider the texture and detail of the scarf. L
Looking at the previews leads to three possible choices: _Luma Y709F_, _Luma Y470F_, and _HSL - Lightness_.
Of those let’s go with _Luma Y709F_. This is very subjective, of course. The important point to take away is
the choice being made due to qualities it possesses _for a particular purpose_.
<figure>
-<img src="{filename}aldude-bw-y709f.jpg" alt="GIMP B&W y709f" />
+<img src="{static}aldude-bw-y709f.jpg" alt="GIMP B&W y709f" />
<figcaption>The Y709F - Luma channel as a “base” layer - chosen for the fabric texture</figcaption>
</figure>
@@ -835,7 +835,7 @@ Keeping that in mind, look back at the various decompositions again, this time w
So let’s try that here. Place the _RGB - Red_ channel over the _Luma - y709f_ channel and change the layer
blending mode to **Overlay**.
<figure>
-<img src="{filename}aldude-bw-y709f-Red-Overlay.jpg" alt="GIMP B&W y709f with Red channel Overlay" />
+<img src="{static}aldude-bw-y709f-Red-Overlay.jpg" alt="GIMP B&W y709f with Red channel Overlay" />
<figcaption>
Luma Y709F base, with Red channel over (layer blend mode: Overlay)
</figcaption>
@@ -859,13 +859,13 @@ So we are going to use the _RGB - Green_ layer and apply it as a layer mask to t
The **Layers** palette should look something like this in GIMP now:
-<figure><img src="{filename}aldude-bw-y709f-RoverlayMask-Layers.png" alt="GIMP Layer Palette with layer
mask" /></figure>
+<figure><img src="{static}aldude-bw-y709f-RoverlayMask-Layers.png" alt="GIMP Layer Palette with layer mask"
/></figure>
Keep in mind, a layer mask will be more transparent the darker the color is in it. The lighter areas will
show more of the layer it is applied to. In this case, the lighter areas will allow more of the _RGB - Red_
layer to show, while darker areas will show more of the layer below, _Luma - Y709F_.
The results at this point with the mask:
-<figure><img src="{filename}aldude-bw-y709f-Red-Overlay-Masked.jpg" alt="GIMP B&W y709f with Red channel
Overlay" />
+<figure><img src="{static}aldude-bw-y709f-Red-Overlay-Masked.jpg" alt="GIMP B&W y709f with Red channel
Overlay" />
<figcaption><em>RGB - Red</em> as overlay with <em>RGB - Green</em> as a layer mask
</figcaption>
</figure>
@@ -882,11 +882,11 @@ To flip the ratios, simply invert the colors of the layer mask. Select the _mask
The layers palette will now look like this:
-<figure><img src="{filename}aldude-bw-y709f-RoverlayMaskInvert-Layers.png" alt="GIMP Layer Palette with
inverted mask" /></figure>
+<figure><img src="{static}aldude-bw-y709f-RoverlayMaskInvert-Layers.png" alt="GIMP Layer Palette with
inverted mask" /></figure>
The result on the image so far:
-<figure><img src="{filename}aldude-bw-y709f-Red-Overlay-Masked-Inverted.jpg" alt="GIMP B&W y709f with Red
channel Overlay" />
+<figure><img src="{static}aldude-bw-y709f-Red-Overlay-Masked-Inverted.jpg" alt="GIMP B&W y709f with Red
channel Overlay" />
<figcaption>Inverted mask results
</figcaption>
</figure>
@@ -896,8 +896,8 @@ At this point the results look pretty nice and would make a fine stopping point.
A final comparison of the results against a straight color desaturation:
<figure>
-<img src="{filename}aldude-desaturation.jpg" alt="GIMP B&W Desaturation" /><br/>
-<img src="{filename}aldude-bw-y709f-Red-Overlay-Masked-Inverted.jpg" alt="GIMP B&W y709f with Red channel
Overlay" />
+<img src="{static}aldude-desaturation.jpg" alt="GIMP B&W Desaturation" /><br/>
+<img src="{static}aldude-bw-y709f-Red-Overlay-Masked-Inverted.jpg" alt="GIMP B&W y709f with Red channel
Overlay" />
<figcaption>
Straight desaturation (top)<br/>
Final result (bottom)
@@ -910,7 +910,7 @@ This path was a little fussier than doing a straight color desaturation but the
Well, this isn’t the _actual_ [Methuselah](https://en.wikipedia.org/wiki/Methuselah_(tree)), but it is a
similar species of Bristlecone Pine. Once again, image courtesy of [Flickr](https://www.flickr.com) user
[Frank Kovalchek](https://www.flickr.com/people/72213316@N00/).
-<figure><img src="{filename}aldude2-color.jpg" alt="GIMP B&W Base Image 2 by Frank Kovalchek" />
+<figure><img src="{static}aldude2-color.jpg" alt="GIMP B&W Base Image 2 by Frank Kovalchek" />
<figcaption>
<a href="https://www.flickr.com/photos/72213316@N00/6956555116";><em>Bristlecone pine hanging on for dear
life at 10,000 feet</em></a> <br/>
by <a href="https://www.flickr.com/people/72213316@N00/";>Frank Kovalchek</a> on Flickr (<a
href="https://creativecommons.org/licenses/by/2.0/";>cc-by</a>)</figcaption>
@@ -920,7 +920,7 @@ As before, a first look at multiple decomposition modes originally pointed to _L
The primary focus is the gnarled old tree itself and the secondary focus the lighting of the sun across the
ground.
-<figure><img src="{filename}aldude2-bw-green.jpg" alt="GIMP B&W Base Image 2 Green Channel" />
+<figure><img src="{static}aldude2-bw-green.jpg" alt="GIMP B&W Base Image 2 Green Channel" />
<figcaption><em>RGB - Green</em> channel decomposition</figcaption>
</figure>
@@ -928,7 +928,7 @@ While the _RGB - Green_ channel is nice for the tree texture, the sky still appe
Having found a good layer for the tree texture, the other decompositions are examined for something that
represents the sky and ground a little better. The _RGB - Red_ channel is a good compromise (the _RGB - Blue_
channel is a little too noisy).
-<figure><img src="{filename}aldude2-bw-red.jpg" alt="GIMP B&W Base Image 2 Green Channel" />
+<figure><img src="{static}aldude2-bw-red.jpg" alt="GIMP B&W Base Image 2 Green Channel" />
<figcaption><em>RGB - Red</em> channel decomposition
</figcaption>
</figure>
@@ -937,7 +937,7 @@ _RGB - Red_ looks like a great candidate for the sky and ground, while _RGB - Gr
Set the _RGB - Green_ channel above the _RGB - Red_ channel on the layer palette, and add a layer mask to
the _RGB - Green_ channel layer initialized to **Black (full transparency)**. This lets all of the underlying
_RGB - Red_ channel layer show through.
-<figure><img src="{filename}aldude2-bw-green-Layers.png" alt="GIMP B&W Green channel with mask" />
+<figure><img src="{static}aldude2-bw-green-Layers.png" alt="GIMP B&W Green channel with mask" />
<figcaption>Red channel layer, with Green channel over + mask</figcaption>
</figure>
@@ -945,17 +945,17 @@ Now with the layer mask active (see the white outline around the layer mask, not
Below is a quick mask to illustrate.
-<figure><img src="{filename}aldude2-bw-green-mask.jpg" alt="GIMP B&W Tree Layer Mask" />
+<figure><img src="{static}aldude2-bw-green-mask.jpg" alt="GIMP B&W Tree Layer Mask" />
<figcaption>It’s only a quick mask, don’t judge it too harshly…</figcaption>
</figure>
The layers at this point will look like this:
-<figure><img src="{filename}aldude2-bw-green-Layers-mask.png" alt="GIMP Layer Mask B&W Dialog" /></figure>
+<figure><img src="{static}aldude2-bw-green-Layers-mask.png" alt="GIMP Layer Mask B&W Dialog" /></figure>
The results from applying the mask above to the image:
-<figure><img src="{filename}aldude2-bw-greenred-masked.jpg" alt="GIMP B&W Tree Final" />
+<figure><img src="{static}aldude2-bw-greenred-masked.jpg" alt="GIMP B&W Tree Final" />
<figcaption>Final blend of <em>RGB - Red</em> and <em>RGB - Green</em> channels with mask
</figcaption>
</figure>
@@ -968,7 +968,7 @@ Following some ideas from the great tutorial by Petteri Sulonen on [Digital Blac
Petteri was kind enough to make available a grain field that he processed himself from scanned film. An easy
way to add grain to an image using this grain field is to add it as a layer over the image, set the layer
blending mode to _Overlay_, and adjust opacity to suit.
-<figure><img src="{filename}aldude2-100-grain.png" alt="GIMP B&W Tree Grain Comparison" />
+<figure><img src="{static}aldude2-100-grain.png" alt="GIMP B&W Tree Grain Comparison" />
<figcaption>100% crop with Petteri’s grain field applied as <em>Overlay</em> layer</figcaption>
</figure>
diff --git a/content/tutorials/Draw_A_Paint_Brush/index.md b/content/tutorials/Draw_A_Paint_Brush/index.md
index bd5ccb88..02c396a9 100644
--- a/content/tutorials/Draw_A_Paint_Brush/index.md
+++ b/content/tutorials/Draw_A_Paint_Brush/index.md
@@ -13,7 +13,7 @@ So, we want to create a nice paintbrush image with GIMP. This tutorial can be a
## Step 1
<figure>
-<img src="{filename}1.png" alt="1.png"/>
+<img src="{static}1.png" alt="1.png"/>
</figure>
Anyway, we start off with a plain gray image.
@@ -21,7 +21,7 @@ Anyway, we start off with a plain gray image.
## Step 2
<figure>
-<img src="{filename}2.png" alt="2.png"/>
+<img src="{static}2.png" alt="2.png"/>
</figure>
We first create a new transparent layer, and name it "tip" since we start drawing the brush from the brush
tip.
@@ -29,7 +29,7 @@ We first create a new transparent layer, and name it "tip" since we start drawin
## Step 3
<figure>
-<img src="{filename}3.png" alt="3.png"/>
+<img src="{static}3.png" alt="3.png"/>
</figure>
Use the Bezier (Paths) tool to make a brush-shaped selection, like on the above image. This could be tricky
if you are not used to the tool, so it might be helpful to check out my Bezier tool tutorials if you have
trouble.
@@ -37,7 +37,7 @@ Use the Bezier (Paths) tool to make a brush-shaped selection, like on the above
## Step 4
<figure>
-<img src="{filename}4.png" alt="4.png"/>
+<img src="{static}4.png" alt="4.png"/>
</figure>
Just fill the selection with black color.
@@ -45,7 +45,7 @@ Just fill the selection with black color.
## Step 5
<figure>
-<img src="{filename}5.png" alt="5.png"/>
+<img src="{static}5.png" alt="5.png"/>
</figure>
Make another bezier selection, now inside the black brush tip. Since a wet brush tip is rather shiny, we
want to add a hilight too make it look realistic. Try to think where the light comes from, and make the
selection accordingly.
@@ -53,7 +53,7 @@ Make another bezier selection, now inside the black brush tip. Since a wet brush
## Step 6
<figure>
-<img src="{filename}6.png" alt="6.png"/>
+<img src="{static}6.png" alt="6.png"/>
</figure>
We are going to use the Blend tool (gradient fill) to make the hilight. You might want to make a new layer
for the hilight so you can edit it later if you are not happy with the result.
@@ -63,7 +63,7 @@ The important thing here is to set the blend mode to "FG to Transparent", we onl
## Step 7
<figure>
-<img src="{filename}7.png" alt="7.png"/>
+<img src="{static}7.png" alt="7.png"/>
</figure>
Make a blend from top to bottom, so that the white fades out towards the brush tip.
@@ -71,7 +71,7 @@ Make a blend from top to bottom, so that the white fades out towards the brush t
## Step 8
<figure>
-<img src="{filename}8.png" alt="8.png"/>
+<img src="{static}8.png" alt="8.png"/>
</figure>
Then make another bezier selection that will form the brush metal handle, this is a bit more tricky, try to
think where the brush handle will point, and add small "roundings" to the ends. Then fill the selection with
a rather mid gray gradient. It does not look very real yet, but we want to bring this to life next...
@@ -79,7 +79,7 @@ Then make another bezier selection that will form the brush metal handle, this i
## Step 9
<figure>
-<img src="{filename}9.png" alt="9.png"/>
+<img src="{static}9.png" alt="9.png"/>
</figure>
Keep the selection active still, and start adding black shadows with the airbrush tool so the shape gets
some depth and looks more three-dimensional.
@@ -91,7 +91,7 @@ Again, think how the light would reflect and how the shadows would be on a real
## Step 10
<figure>
-<img src="{filename}10.png" alt="10.png"/>
+<img src="{static}10.png" alt="10.png"/>
</figure>
Also add some hilights by using white color on the airbrush. You can make the object appear more metal-like
by adding a second hilight to the "shadow" edge as if it was reflected from the background plane. If your
background was having some color, you could add slight tint of that color to the "second" reflection.
@@ -101,7 +101,7 @@ Again, since the metal has a pretty shiny surface, you can use the Dodge/Burn to
## Step 11
<figure>
-<img src="{filename}11.png" alt="11.png"/>
+<img src="{static}11.png" alt="11.png"/>
</figure>
We add the "engraving" by painting black with a very small brush, airbrush again works well. Try to make it
look like some letter ornament or whatever you like.
@@ -109,7 +109,7 @@ We add the "engraving" by painting black with a very small brush, airbrush again
## Step 12
<figure>
-<img src="{filename}12.png" alt="12.png"/>
+<img src="{static}12.png" alt="12.png"/>
</figure>
Add hilights with white color to the areas that would get reflection. Since the light comes from top left,
the hilights go to bottom right of the black "engraved" shapes.
@@ -117,7 +117,7 @@ Add hilights with white color to the areas that would get reflection. Since the
## Step 13
<figure>
-<img src="{filename}13.png" alt="13.png"/>
+<img src="{static}13.png" alt="13.png"/>
</figure>
Next we want to do the rest of the handle. We again create a new layer for it. Since it comes from "inside"
the metal part, it is better to put it behind the metal part layers.
@@ -125,7 +125,7 @@ Next we want to do the rest of the handle. We again create a new layer for it. S
## Step 14
<figure>
-<img src="{filename}14.png" alt="14.png"/>
+<img src="{static}14.png" alt="14.png"/>
</figure>
Again, the bezier selection tool. Yes, I love it. You should too. Make a nice tapered shape that represents
the brush handle.
@@ -133,7 +133,7 @@ Again, the bezier selection tool. Yes, I love it. You should too. Make a nice ta
## Step 15
<figure>
-<img src="{filename}15.png" alt="15.png"/>
+<img src="{static}15.png" alt="15.png"/>
</figure>
Doubleclick the "Bucket fill" tool and select "Pattern source" from the tool options window. Select one of
the wooden patterns. This will make the texture of the handle. Fill the selection with the wooden pattern.
@@ -141,7 +141,7 @@ Doubleclick the "Bucket fill" tool and select "Pattern source" from the tool opt
## Step 16
<figure>
-<img src="{filename}16.png" alt="16.png"/>
+<img src="{static}16.png" alt="16.png"/>
</figure>
Add another layer, this time for the hilight of the wood. Position it just above the handle layer.
@@ -149,7 +149,7 @@ Add another layer, this time for the hilight of the wood. Position it just above
## Step 17
<figure>
-<img src="{filename}17.png" alt="17.png"/>
+<img src="{static}17.png" alt="17.png"/>
</figure>
First, like you did on the "metal" part, shade the wooden handle a bit with the airbrush tool so it looks
round. Then do a hilight like you did for the brush tip on steps 5-7\. You might want to reduce the fill
opacity a bit since the wood is quite not as shiny as the wet brush tip.
@@ -157,7 +157,7 @@ First, like you did on the "metal" part, shade the wooden handle a bit with the
## Step 18
<figure>
-<img src="{filename}18.png" alt="18.png"/>
+<img src="{static}18.png" alt="18.png"/>
</figure>
Okay, it looks very much like a brush already... Lets just add a shadow and it looks better.
@@ -165,7 +165,7 @@ Okay, it looks very much like a brush already... Lets just add a shadow and it l
## Step 19
<figure>
-<img src="{filename}19.png" alt="19.png"/>
+<img src="{static}19.png" alt="19.png"/>
</figure>
Duplicate the image, delete the background and select "Merge visible layers" to make the brush just one
layer. We are going to make this copy into a drop shadow for the original brush.
@@ -173,7 +173,7 @@ Duplicate the image, delete the background and select "Merge visible layers" to
## Step 20
<figure>
-<img src="{filename}20.png" alt="20.png"/>
+<img src="{static}20.png" alt="20.png"/>
</figure>
Turn on "Keep Trans" checkbox on the layers dialog, and select the whole image and fill it black with the
bucket fill tool.
@@ -181,7 +181,7 @@ Turn on "Keep Trans" checkbox on the layers dialog, and select the whole image a
## Step 21
<figure>
-<img src="{filename}21.png" alt="21.png"/>
+<img src="{static}21.png" alt="21.png"/>
</figure>
Unselect the "keep trans" and blur the layer a fair bit, I think I used something like 20 for the radius.
@@ -189,7 +189,7 @@ Unselect the "keep trans" and blur the layer a fair bit, I think I used somethin
## Step 22
<figure>
-<img src="{filename}22.png" alt="22.png"/>
+<img src="{static}22.png" alt="22.png"/>
</figure>
Now scale the shadow image so that it is 60% of the original height, but keep the original width. You need
to click the "chain" button on the scale dialog to change the image's aspect ratio.
@@ -197,7 +197,7 @@ Now scale the shadow image so that it is 60% of the original height, but keep th
## Step 23
<figure>
-<img src="{filename}23.png" alt="23.png"/>
+<img src="{static}23.png" alt="23.png"/>
</figure>
Copy the shadow image on the original brush image, and move it just above the background layer. The easiest
way to copy a layer is to drag it from the layers dialog to an image.
@@ -205,7 +205,7 @@ Copy the shadow image on the original brush image, and move it just above the ba
## Step 24
<figure>
-<img src="{filename}24.png" alt="24.png"/>
+<img src="{static}24.png" alt="24.png"/>
</figure>
I wanted to erase some of the shadow of the handle so it looks more realistic. I just used the eraser tool
with a big fuzzy brush.
@@ -213,7 +213,7 @@ I wanted to erase some of the shadow of the handle so it looks more realistic. I
## Step 25
<figure>
-<img src="{filename}25.png" alt="25.png"/>
+<img src="{static}25.png" alt="25.png"/>
</figure>
There! The finished paintbrush image. And you learned a lot about GIMP as well.
diff --git a/content/tutorials/Drawing_Shapes/index.md b/content/tutorials/Drawing_Shapes/index.md
index a07b4ff1..01e7b751 100644
--- a/content/tutorials/Drawing_Shapes/index.md
+++ b/content/tutorials/Drawing_Shapes/index.md
@@ -13,7 +13,7 @@ The Path Tool (replacing the old Bezier Selection tool) can be used in many crea
## Shapes with Paths!?
<figure>
-<img src="{filename}box.png" alt="box.png"/>
+<img src="{static}box.png" alt="box.png"/>
</figure>
This tutorial is about making simple geometrical shapes with GIMP. I will concentrate on the Path tool since
I find it so useful for this purpose. I hope you get some help and new stuff to put in your GIMP Tricks Sack
:) I personally use this technique for nearly all my work.
@@ -27,7 +27,7 @@ First we must **create a new image** for our creation. Make the **size 256x256**
## 1. Left side
<figure>
-<img src="{filename}box_numb.png" alt="box_numb.png"/>
+<img src="{static}box_numb.png" alt="box_numb.png"/>
</figure>
Now create a new transparent layer, and name it *Left_side* so you know what layer I'll talk about later on.
Make sure you have the new layer active by checking the layers-dialog. If it is not selected, click the
layer's name in the dialog.
@@ -35,32 +35,32 @@ Now create a new transparent layer, and name it *Left_side* so you know what lay
Imagine the blue cube on the right side into your canvas, we'll be doing side #1 now.
<figure>
-<img src="{filename}left_side.png" alt="left_side.png"/>
+<img src="{static}left_side.png" alt="left_side.png"/>
</figure>
-<img src="{filename}bezier_button.png" alt="bezier_button.png"/> Choose the Path tool and make something
like the side #1 on the blue cube, think about the perspective. (If this causes you trouble, don't worry. You
will learn by experience).
+<img src="{static}bezier_button.png" alt="bezier_button.png"/> Choose the Path tool and make something like
the side #1 on the blue cube, think about the perspective. (If this causes you trouble, don't worry. You will
learn by experience).
You can adjust the points' places if you can't get them right at the first try, see the [Path
tutorial](/tutorials/Bezier_Selections/) for more information on that. Your path should look something like
the one on the right.
Once you are satisfied with your "box", convert it to a selection using the button "Create Selection from
Path" (in the Path Options dialog) or using "Selection to Path" (in the Paths tab).
<figure>
-<img src="{filename}gradient1.png" alt="gradient1.png"/>
+<img src="{static}gradient1.png" alt="gradient1.png"/>
</figure>
Next we must choose some nice colors for our gradient, choose white for the foreground color and some
dark-blue for the background (we are making a blue box, remember?) Something like that on the image nearby.
<figure>
-<img src="{filename}colors.png" alt="colors.png"/>
+<img src="{static}colors.png" alt="colors.png"/>
</figure>
-<img src="{filename}gradient_button.png" alt="gradient_button.png"/> Select the gradient-fill tool and,
starting from the top-left of the selection, 'drag' the gradient quite far down-right (see the arrow in the
image. This way you get a quite light-colored face for the cube, and it is just what we want here. We also
want the lighter end of the gradient to be near our imaginative light source. (The light was coming from the
left)
+<img src="{static}gradient_button.png" alt="gradient_button.png"/> Select the gradient-fill tool and,
starting from the top-left of the selection, 'drag' the gradient quite far down-right (see the arrow in the
image. This way you get a quite light-colored face for the cube, and it is just what we want here. We also
want the lighter end of the gradient to be near our imaginative light source. (The light was coming from the
left)
## 2. Right side
<figure>
-<img src="{filename}gradient2.png" alt="gradient2.png"/>
+<img src="{static}gradient2.png" alt="gradient2.png"/>
</figure>
Now on to the right side, side #2. Create a new transparent layer and name it *Right_side*. Use the Path
Tool and try to make the right side of the cube and turn it into a selection.
@@ -72,7 +72,7 @@ Take the Gradient Tool again and, still with the same colors, make a gradient fr
## 3. Top side
<figure>
-<img src="{filename}gradient3.png" alt="gradient3.png"/>
+<img src="{static}gradient3.png" alt="gradient3.png"/>
</figure>
Our final ultimate task is to create the top, side #3. Again, create a new transparent layer and name it
(who quessed? :) *Top_side*.
@@ -82,7 +82,7 @@ Now you probably know we want to make yet another path and this time the gradien
## 4. Finished Work
<figure>
-<img src="{filename}finished_image.png" alt="finished_image.png"/>
+<img src="{static}finished_image.png" alt="finished_image.png"/>
</figure>
Now you have a cool image of a Light-Source-Shaded Cube. You can choose <span class="filter"><Image> Image
-> Flatten Image</span> to merge the layers togerher so you can save as jpeg or any other format than xcf.
Or, better still, from the layers dialog, make the background invisible and choose <span
class="filter"><Image> Image -> Merge Visible Layers</span> so you will have the background on a separate
layer and you can work further on it if you like.
diff --git a/content/tutorials/Film_Grain/index.md b/content/tutorials/Film_Grain/index.md
index 680157ad..52a1cc6d 100644
--- a/content/tutorials/Film_Grain/index.md
+++ b/content/tutorials/Film_Grain/index.md
@@ -24,15 +24,15 @@ This is a subject for another, longer tutorial. But here are the basic steps:
5. Flatten the image.
6. Choose an interesting area of the noise, and make it into a tileable pattern.
-([GIMP pattern file](film-grain-vertical.pat))
+([GIMP pattern file](film-grain-vertical.pat))
Some good ways of making tileable patterns include **Make Seamless**, the [Resynthesizer and
Homogenizer](http://www.logarithmic.net/pfh/resynthesizer/), mirroring, and hand-editing. You'll have to
experiment a bit. In the following example, we'll use a weird, vertically-striped noise pattern. It looks
like some kind of scanner noise, or perhaps an artifact of old newsprint.
## Ruining a Perfectly Good Image
<figure>
-<img src="{filename}sailboat-01-original.jpg" alt="sailboat-01-original.jpg" />
-<img src="{filename}sailboat-08-grain-masked-rebalanced.jpg" alt="sailboat-08-grain-masked-rebalanced.jpg" />
+<img src="{static}sailboat-01-original.jpg" alt="sailboat-01-original.jpg" />
+<img src="{static}sailboat-08-grain-masked-rebalanced.jpg" alt="sailboat-08-grain-masked-rebalanced.jpg" />
</figure>
First, desaturate the image. You can do this using
@@ -44,8 +44,8 @@ or the **Desaturate** filter provided with the MathMap plugin.(The latter actual
## Step 2
<figure>
-<img src="{filename}sailboat-02-luminosity.jpg" alt="sailboat-02-luminosity.jpg" />
-<img src="{filename}sailboat-03-grain.jpg" alt="sailboat-03-grain.jpg" />
+<img src="{static}sailboat-02-luminosity.jpg" alt="sailboat-02-luminosity.jpg" />
+<img src="{static}sailboat-03-grain.jpg" alt="sailboat-03-grain.jpg" />
</figure>
Next add a new layer to the image, and use the bucket to fill it with your tileable noise.
@@ -53,7 +53,7 @@ Next add a new layer to the image, and use the bucket to fill it with your tilea
## Step 3
<figure>
-<img src="{filename}sailboat-04-grain-added.jpg" alt="sailboat-04-grain-added.jpg" />
+<img src="{static}sailboat-04-grain-added.jpg" alt="sailboat-04-grain-added.jpg" />
</figure>
Position the noise layer above the image layer, and set the mode to **Grain Merge**.
@@ -61,7 +61,7 @@ Position the noise layer above the image layer, and set the mode to **Grain Merg
## Step 4
<figure>
-<img src="{filename}sailboat-05-luminosity-blurred.jpg" alt="sailboat-05-luminosity-blurred.jpg" />
+<img src="{static}sailboat-05-luminosity-blurred.jpg" alt="sailboat-05-luminosity-blurred.jpg" />
</figure>
So far, so good. But the noise is too strong in the shadows and highlights of the image. To demphasize it,
we can use a layer mask.
@@ -74,7 +74,7 @@ to swap bright for dark. This will cause the grain to show through strongly in t
## Step 5
<figure>
-<img src="{filename}sailboat-08-grain-masked-rebalanced.jpg" alt="sailboat-08-grain-masked-rebalanced.jpg" />
+<img src="{static}sailboat-08-grain-masked-rebalanced.jpg" alt="sailboat-08-grain-masked-rebalanced.jpg" />
</figure>
Next, use
diff --git a/content/tutorials/Floating_Logo/index.md b/content/tutorials/Floating_Logo/index.md
index a7c71af3..ee6d8e15 100644
--- a/content/tutorials/Floating_Logo/index.md
+++ b/content/tutorials/Floating_Logo/index.md
@@ -12,7 +12,7 @@ Template: page_author
This tutorial is intended to introduce you to a few simple commands, and some concepts in order to create a
logo that appears to be floating above a background, like this:
<figure>
-<img src="{filename}Floating-Logo-Final.png" alt="GIMP floating logo example"/>
+<img src="{static}Floating-Logo-Final.png" alt="GIMP floating logo example"/>
<figcaption>
</figcaption></figure>
@@ -28,7 +28,7 @@ Create a new image of appropriate size for your logo:
This will open the “Create a New Image” dialog, with options for you to specify:
<figure>
-<img src="{filename}New-Dialog.png" alt="GIMP create new image dialog"/>
+<img src="{static}New-Dialog.png" alt="GIMP create new image dialog"/>
<figcaption>
</figcaption></figure>
@@ -42,7 +42,7 @@ You’ll be presented with the new image on your canvas. Chances are it will be
The first thing we are going to do is fill our new image with black. The first step to doing so is to make
sure that the **Foreground Color** is appropriately set. Click on the foreground color in the **Color area**
to bring up the “Change Foreground Color” dialog (if your foreground color is already black you don’t have to
do this step, but it can’t hurt to learn):
<figure>
-<img src="{filename}Change-Foreground-Color.png" alt="GIMP change foreground color"/>
+<img src="{static}Change-Foreground-Color.png" alt="GIMP change foreground color"/>
<figcaption>
Click the <span class='bright_green'>foreground color</span> to change.
</figcaption></figure>
@@ -50,7 +50,7 @@ Click the <span class='bright_green'>foreground color</span> to change.
The “Change Foreground Color” dialog allows you to now set the foreground color. We want to set the color to
black RGB(0, 0, 0):
<figure>
-<img src="{filename}Change-Foreground-Dialog.png" alt="GIMP change foreground color dialog"/>
+<img src="{static}Change-Foreground-Dialog.png" alt="GIMP change foreground color dialog"/>
<figcaption>
</figcaption></figure>
@@ -60,12 +60,12 @@ With the foreground color set, we can now use the **Bucket Fill Tool** to fill i
<div class="MenuCmd"><span>Tools → Paint Tools → Bucket Fill</span></div>
<figure>
-<img src="{filename}Bucket-Fill-Tool.png" alt="GIMP bucket fill tool"/>
+<img src="{static}Bucket-Fill-Tool.png" alt="GIMP bucket fill tool"/>
<figcaption>
Activating the <strong>Bucket Fill</strong> tool.
</figcaption></figure>
- Once the tool is activated, your cursor should
appear as to the left. To fill the layer you need only click on the image area at this point. Your image
should now fill with black.
+ Once the tool is activated, your cursor should appear
as to the left. To fill the layer you need only click on the image area at this point. Your image should now
fill with black.
## Adding Some Text
@@ -74,7 +74,7 @@ Now we want to add text to our image to create our logo with. To see what we’r
Now, you can follow the above procedures again to set the foreground color. If your background color is
already white, though, you can quickly swap foreground/background colors using the <span
class='bright_green'>arrows</span>:
<figure>
-<img src="{filename}Color-Swap.png" alt="GIMP swap color foreground background"/>
+<img src="{static}Color-Swap.png" alt="GIMP swap color foreground background"/>
<figcaption>
<strong>Swap Foreground/Background</strong> quickly.
</figcaption></figure>
@@ -86,7 +86,7 @@ With the foreground color set to white, we can now use the **Text Tool** to add
<div class="MenuCmd"><span>Tools → Text</span></div>
<figure>
-<img src="{filename}Text-Tool.png" alt="GIMP text tool"/>
+<img src="{static}Text-Tool.png" alt="GIMP text tool"/>
<figcaption>
Activating the <strong>Text Tool</strong>.
</figcaption></figure>
@@ -96,7 +96,7 @@ We can now draw a box on our canvas (image) to hold the text. You can click on t
This is what you should see on your canvas after clicking and dragging from the top-left to the bottom-right
to define your text box:
<figure>
-<img src="{filename}Text-Box.png" alt="GIMP text box canvas"/>
+<img src="{static}Text-Box.png" alt="GIMP text box canvas"/>
<figcaption>
Defining the text box boundaries.
</figcaption></figure>
@@ -104,7 +104,7 @@ Defining the text box boundaries.
If you’d like to re-size the box for some reason, you can now click and drag in any of the <span
class='green'>green areas</span> shown below:
<figure>
-<img src="{filename}Text-Box-Resize.png" alt="GIMP resize text box"/>
+<img src="{static}Text-Box-Resize.png" alt="GIMP resize text box"/>
<figcaption>
<span class='green'>Resize handles</span> to modify text box boundary.
</figcaption></figure>
@@ -114,7 +114,7 @@ Your text will go into the black box inside the green areas shown above.
Once the text boundary box is sized appropriately, we can just type some text. In my case, I’ll use my name:
<figure>
-<img src="{filename}Text-Entry.png" alt="GIMP enter text canvas"/>
+<img src="{static}Text-Entry.png" alt="GIMP enter text canvas"/>
<figcaption>
Text Tool Options (left), canvas view (right).
</figcaption></figure>
@@ -126,7 +126,7 @@ If you want to make your text appear bigger, you can change the <span class='red
You may also not like the font that is chosen by default. In that case, we can change the <span
class='bright_green'>**Font**</span> to something better by clicking the icon. This will open a drop-down to
scroll through all the fonts that GIMP knows about on your system. You can see in my example that I’ve
changed the font to “Tw Cen MT Bold”.
<figure>
-<img src="{filename}Text-New-From-Visible.png" alt="GIMP context new layer from visible"/>
+<img src="{static}Text-New-From-Visible.png" alt="GIMP context new layer from visible"/>
<figcaption>
Creating a new layer from all visible layers.
</figcaption></figure>
@@ -140,7 +140,7 @@ Alternatively, you can also create a new layer from visible using the menu:
At this point, our layer palette will have three layers on it, the background, the text (“PAT”), and our new
layer “Visible”:
<figure>
-<img src="{filename}Layer-Palette-Visible.png" alt="GIMP layer palette visible"/>
+<img src="{static}Layer-Palette-Visible.png" alt="GIMP layer palette visible"/>
<figcaption>
</figcaption></figure>
@@ -156,7 +156,7 @@ To apply a slight Gaussian blur to this layer, we simply invoke the command thro
This will invoke the **Gaussian Blur** dialog, where we can specify how much blur we want to apply:
<figure>
-<img src="{filename}Gaussian-Blur.png" alt="GIMP gaussian blur dialog"/>
+<img src="{static}Gaussian-Blur.png" alt="GIMP gaussian blur dialog"/>
<figcaption>
</figcaption></figure>
@@ -174,7 +174,7 @@ We are going to add a new layer to our image first:
Or by Right-Clicking on the “Visible” layer in the layer palette, and choosing “**New Layer…**” from the
context menu:
<figure>
-<img src="{filename}Layer-New.png" alt="GIMP new layer context menu"/>
+<img src="{static}Layer-New.png" alt="GIMP new layer context menu"/>
<figcaption>
New Layer using the Right-Click context menu.
</figcaption></figure>
@@ -188,7 +188,7 @@ We are now going to fill this new layer with some color to add some interest. To
I just left the default values and hit **OK**, but feel free to fiddle with the values. Our layers now look
like this:
<figure>
-<img src="{filename}Layer-Plasma.png" alt="GIMP plasma layer"/>
+<img src="{static}Layer-Plasma.png" alt="GIMP plasma layer"/>
<figcaption>
</figcaption></figure>
@@ -196,7 +196,7 @@ I just left the default values and hit **OK**, but feel free to fiddle with the
Here is what my canvas looks like right now (with the plasma layer on top and visible):
<figure>
-<img src="{filename}Plasma.jpg" alt="GIMP plasma layer example"/>
+<img src="{static}Plasma.jpg" alt="GIMP plasma layer example"/>
<figcaption>
</figcaption></figure>
@@ -210,7 +210,7 @@ Now we’re going to use the text we created earlier to generate a fake 3D shape
The **Bump Map** dialog gives a good preview of what the plugin does:
<figure>
-<img src="{filename}Bump-Map.jpg" alt="GIMP bump map dialog"/>
+<img src="{static}Bump-Map.jpg" alt="GIMP bump map dialog"/>
<figcaption>
</figcaption></figure>
@@ -228,7 +228,7 @@ Now we are going to use a **Layer Mask** to isolate our bump mapped text. First
Or Right-Click on the plasma layer and choose “<span class='bright_green'>Add Layer Mask…</span>” from the
context menu:
<figure>
-<img src="{filename}Bump-Mask.png" alt="GIMP add layer mask"/>
+<img src="{static}Bump-Mask.png" alt="GIMP add layer mask"/>
<figcaption>
</figcaption></figure>
@@ -238,7 +238,7 @@ When the “Add a Mask to the Layer” dialog comes up, set the **Initialize Lay
Once you’ve added a mask to the plasma layer, your layers should now look like this:
<figure>
-<img src="{filename}Bump-Mask-Layers.png" alt="GIMP layer palette with mask"/>
+<img src="{static}Bump-Mask-Layers.png" alt="GIMP layer palette with mask"/>
<figcaption>
</figcaption></figure>
@@ -248,7 +248,7 @@ Remember, you can tell which layer (or mask) is active by noticing which one has
We are going to copy the “Visible” layer, and paste it into the layer mask for the plasma layer. So first,
Left-Click on the “Visible” layer in the layers palette to activate it:
<figure>
-<img src="{filename}Visible-Copy.png" alt="GIMP layer palette copy"/>
+<img src="{static}Visible-Copy.png" alt="GIMP layer palette copy"/>
<figcaption>
Remember, the white border will indicate the layer is active.
</figcaption></figure>
@@ -260,7 +260,7 @@ With the layer active, we want to now copy it:
Then we want to make the plasma layer mask active by Left-Clicking on the **mask**:
<figure>
-<img src="{filename}Bump-Mask-Layers.png" alt="GIMP bump map layer mask"/>
+<img src="{static}Bump-Mask-Layers.png" alt="GIMP bump map layer mask"/>
<figcaption>
Plasma layer mask now active again.
</figcaption></figure>
@@ -272,7 +272,7 @@ With the mask active again, we now want to paste the “Visible” layer back in
This will now insert a _Floating Selection (Pasted Layer)_ into your image:
<figure>
-<img src="{filename}Visible-Paste.png" alt="GIMP layer paste"/>
+<img src="{static}Visible-Paste.png" alt="GIMP layer paste"/>
<figcaption>
</figcaption></figure>
@@ -284,7 +284,7 @@ To get this _Floating Selection_ into the mask, we need to **Anchor** it:
This will **Anchor** the selection down onto the mask. Our image and layers should now look something like
this:
<figure>
-<img src="{filename}Masked.png" alt="GIMP layer mask example"/>
+<img src="{static}Masked.png" alt="GIMP layer mask example"/>
<figcaption>
</figcaption></figure>
@@ -294,7 +294,7 @@ We may now want to add a different colored background to help us fine-tune the r
Pick an interesting background color and fill the new layer with this color. The layers should now look like
this:
<figure>
-<img src="{filename}Add-Background.png" alt="GIMP layer mask background"/>
+<img src="{static}Add-Background.png" alt="GIMP layer mask background"/>
<figcaption>
</figcaption></figure>
@@ -312,7 +312,7 @@ To do this, we first make sure the layer mask is active by clicking on it. Then
With the **Adjust Color Levels** dialog, we now want to sharpen up the edges of the mask a little bit:
<figure>
-<img src="{filename}Levels.png" alt="GIMP adjust color levels dialog"/>
+<img src="{static}Levels.png" alt="GIMP adjust color levels dialog"/>
<figcaption>
</figcaption></figure>
@@ -322,7 +322,7 @@ What we want to do is adjust the **Gamma** and **White point** sliders. I starte
The trick is to increase the definition of the edges of the text, without going too far and causing it to
look very jagged (aliased). Play with the settings to see how they affect your results. Here is what my
plasma layer looks like after applying the above levels to the mask:
<figure>
-<img src="{filename}Levels-After.png" alt="GIMP color levels example"/>
+<img src="{static}Levels-After.png" alt="GIMP color levels example"/>
<figcaption>
</figcaption></figure>
@@ -338,7 +338,7 @@ Make a copy of your “Visible” layer that had your original blurred text on i
Or Right-Click on the “Visible” layer, and choose “<span class='bright_green'>Duplicate Layer</span>”:
<figure>
-<img src="{filename}Duplicate-Layer.png" alt="GIMP context duplicate layer"/>
+<img src="{static}Duplicate-Layer.png" alt="GIMP context duplicate layer"/>
<figcaption>
</figcaption></figure>
@@ -346,7 +346,7 @@ Or Right-Click on the “Visible” layer, and choose “<span class='bright_gre
This will create a new layer called “Visible copy”. Move this layer above your background color layer to
just beneath your plasma layer as shown (you can Left-Click and drag the layer in the palette):
<figure>
-<img src="{filename}Shadow-Layer.png" alt="GIMP example shadow layer"/>
+<img src="{static}Shadow-Layer.png" alt="GIMP example shadow layer"/>
<figcaption>
Click and drag the “Visible copy” layer to beneath the plasma layer
</figcaption></figure>
@@ -364,7 +364,7 @@ The layer should now have black text over a transparent background. We’ll now
<div class="MenuCmd"><span>Tools → Transfom Tools → Move</span></div>
<figure>
-<img src="{filename}Move-Tool.png" alt="GIMP move tool"/>
+<img src="{static}Move-Tool.png" alt="GIMP move tool"/>
<figcaption>
Activate the <strong>Move Tool</strong>.
</figcaption></figure>
@@ -372,7 +372,7 @@ Activate the <strong>Move Tool</strong>.
If we hold down **Shift** and click on the canvas, we restrict the **Move Tool** to modifying only the
active layer (our shadow layer). Drag the layer to the right and down a bit to simulate the shadow. I ended
up with this:
<figure>
-<img src="{filename}Shadow.png" alt="GIMP example drop shadow"/>
+<img src="{static}Shadow.png" alt="GIMP example drop shadow"/>
<figcaption>
Shadow layer shifted to the right and down a bit.
</figcaption></figure>
@@ -382,7 +382,7 @@ At this point we can make it a bit more fancy by adding a **Gaussian Blur** to t
Here is the final state of my image, where I applied a **Gaussian Blur** with a 10px radius, and adjusted
the shadow layer **Opacity** down to 80:
<figure>
-<img src="{filename}Shadow-Final.png" alt="GIMP example drop shadow gaussian blur"/>
+<img src="{static}Shadow-Final.png" alt="GIMP example drop shadow gaussian blur"/>
<figcaption>
</figcaption></figure>
@@ -392,7 +392,7 @@ Here is the final state of my image, where I applied a **Gaussian Blur** with a
Here is my final floating logo image when everything is done:
<figure>
-<img src="{filename}Floating-Logo-Final.png" alt="GIMP example floating logo final"/>
+<img src="{static}Floating-Logo-Final.png" alt="GIMP example floating logo final"/>
<figcaption>
</figcaption></figure>
@@ -400,7 +400,7 @@ Here is my final floating logo image when everything is done:
The neat thing about our process is that we can now use any background we want behind the image, and the
effects and shadow will still be there:
<figure>
-<img src="{filename}Floating-Logo-Sinus.png" alt="GIMP example floating logo sinus"/>
+<img src="{static}Floating-Logo-Sinus.png" alt="GIMP example floating logo sinus"/>
<figcaption>
</figcaption></figure>
@@ -408,7 +408,7 @@ The neat thing about our process is that we can now use any background we want b
Or we could save it as a PNG file with no background at all, thus allowing whatever background there is to
show through:
<figure>
-<img src="{filename}Floating-Logo-NoBG.png" alt="GIMP example floating logo no background transparent"/>
+<img src="{static}Floating-Logo-NoBG.png" alt="GIMP example floating logo no background transparent"/>
<figcaption>
</figcaption></figure>
diff --git a/content/tutorials/GIMP_Quickies/index.md b/content/tutorials/GIMP_Quickies/index.md
index e4f828c1..151ff276 100644
--- a/content/tutorials/GIMP_Quickies/index.md
+++ b/content/tutorials/GIMP_Quickies/index.md
@@ -36,7 +36,7 @@ The image we’ll be using to illustrate this with is [The Horsehead Nebula in I
When you first open your image in GIMP, chances are that the image will be zoomed so that the entire image
fits in your canvas. The thing to notice for this example is that by default the window decoration at the top
of GIMP will show you some information about the image.
<figure>
-<img src="{filename}Scale-View-Pixel-Size-Original.png" alt="Test">
+<img src="{static}Scale-View-Pixel-Size-Original.png" alt="Test">
<figcaption>
View of the GIMP canvas, with information at the top of the window.
</figcaption>
@@ -51,7 +51,7 @@ To resize the image to new dimensions, we need only invoke the **Scale Image** d
This will then open the **Scale Image** dialog:
<figure>
-<img src='{filename}Scale-Image-Dialog.png' alt='Scale Image'>
+<img src='{static}Scale-Image-Dialog.png' alt='Scale Image'>
<figcaption>
The <strong>Scale Image</strong> dialog.
</figcaption>
@@ -64,7 +64,7 @@ You’ll also <span class='tLightBlue'>notice a small chain</span> just to the r
For example, if you knew that you wanted your image to have a new width of 600px, you can enter that value
in the **Width** input, and the **Height** will automatically change to maintain the aspect ratio of the
image:
<figure>
-<img src='{filename}Scale-Image-Dialog-Scaled.png' alt='Scaled Image'>
+<img src='{static}Scale-Image-Dialog-Scaled.png' alt='Scaled Image'>
<figcaption>
Changing the <strong>Width</strong> to 600px.
</figcaption>
@@ -77,7 +77,7 @@ Also notice I have shown a different option under **Quality** → Interpolation.
If you want to specify a new size using a different type of value (other than Pixel size), you can change
the type by clicking on the “**px**” spinner:
<figure>
-<img src='{filename}Scale-Image-Dialog-Value-Types.png' alt='Value Types'>
+<img src='{static}Scale-Image-Dialog-Value-Types.png' alt='Value Types'>
<figcaption>
Changing input value types.
</figcaption>
@@ -104,7 +104,7 @@ You can also modify the filesize of an image when exporting it to a format like
Using the same Horsehead Nebula image from above, I have resized it to 200px wide (see above), and exported
it using different levels of JPEG compression:
<figure>
-<img src='{filename}JPG-Compression-Sample.png' alt='JPG Compression comparison'>
+<img src='{static}JPG-Compression-Sample.png' alt='JPG Compression comparison'>
<figcaption>
Comparison of different JPEG compression levels.
</figcaption>
@@ -119,7 +119,7 @@ When you’ve finished any image modifications you are doing, and are ready to e
This will invoke the **Export Image** dialog:
<figure>
-<img src='{filename}Export-Image-Dialog.png' alt='Export Image Dialog'>
+<img src='{static}Export-Image-Dialog.png' alt='Export Image Dialog'>
<figcaption>
</figcaption>
@@ -132,7 +132,7 @@ You can also navigate to a new location on your computer through the **Places**
This will then bring up the **Export Image as JPEG** dialog, where you can change the quality of the export:
<figure>
-<img src='{filename}Export-Image-as-JPEG.png' alt='Export as JPG'>
+<img src='{static}Export-Image-as-JPEG.png' alt='Export as JPG'>
<figcaption>
</figcaption>
@@ -151,7 +151,7 @@ There are numerous reasons you may want to crop an image. You may want to remove
In a nutshell, cropping is just an operation to trim the image down to a smaller region than what you
started with:
<figure>
-<img src='{filename}Crop-Example.png' alt='Cropping'>
+<img src='{static}Crop-Example.png' alt='Cropping'>
<figcaption>
Original image (left), cropped image (right).
</figcaption>
@@ -160,7 +160,7 @@ Original image (left), cropped image (right).
The procedure to crop an image is straightforward. You can either get to <span class="tGreen">the **Crop
Tool**</span> through the tools palette:
<figure>
-<img src='{filename}Crop-Tool.png' alt='Crop Tool'>
+<img src='{static}Crop-Tool.png' alt='Crop Tool'>
<figcaption>
Crop Tool on the Tools Palette.
</figcaption>
@@ -170,12 +170,12 @@ Or you can access the crop tool through the menus:
<div class="MenuCmd"><span>Tools → Transform Tools → Crop</span></div>
-Once the tool is activated, you’ll notice that your mouse
cursor on the canvas will change to indicate the **Crop Tool** is being used.
+Once the tool is activated, you’ll notice that your mouse
cursor on the canvas will change to indicate the **Crop Tool** is being used.
Now you can Left-Click anywhere on your image canvas, and drag the mouse to a new location to highlight an
initial selection to crop. You don’t have to worry about being exact at this point, as you will be able to
modify the final selection before actually cropping.
<figure>
-<img src='{filename}Crop-First.png' alt='Crop First'>
+<img src='{static}Crop-First.png' alt='Crop First'>
<figcaption>
Initial pass with the Crop Tool.
Crop Tool options (left), cropping on the canvas (right).
@@ -196,7 +196,7 @@ See [the documentation](https://docs.gimp.org/2.8/en/gimp-tool-crop.html) for mo
Another way to crop an image is to make a selection first, using the **Rectangle Select Tool**:
<figure>
-<img src='{filename}Crop-Select-Tool.png' alt='Crop Select'>
+<img src='{static}Crop-Select-Tool.png' alt='Crop Select'>
<figcaption>
Rectangle Select Tool.
</figcaption>
@@ -223,7 +223,7 @@ There may also be a time that you’d like to flip an image as well. These comma
If you want to flip your image, the **Transform** menu offers two options, **Flip Horizontally**, or **Flip
Vertically**. This operation will mirror your image along the specified axis. For example, here are all of
the flip operations shown in a single image:
<figure>
-<img src='{filename}Flip-Sample-Arrow.jpg' alt='Flipping'>
+<img src='{static}Flip-Sample-Arrow.jpg' alt='Flipping'>
<figcaption>
All flips applied to base image (top left).
</figcaption>
@@ -236,7 +236,7 @@ Image rotation from the **Transform** menu is contrained to either 90° clockwis
Don’t mis-interpret this to mean that GIMP cannot do arbitrary rotations (any angle). Arbitrary rotations
are handled on a per-layer basis, while the image rotation described here is applicable to the entire image
at once.
<figure>
-<img src='{filename}Rotate-Sample.jpg' alt='Rotating Sample'>
+<img src='{static}Rotate-Sample.jpg' alt='Rotating Sample'>
<figcaption>
Original (top left), 90° clockwise (top right)
90° counter-clockwise (bottom left), 180° (bottom right)
diff --git a/content/tutorials/Golden_Text/index.md b/content/tutorials/Golden_Text/index.md
index 13f772d8..6cedda7d 100644
--- a/content/tutorials/Golden_Text/index.md
+++ b/content/tutorials/Golden_Text/index.md
@@ -8,7 +8,7 @@ Author: Simon Budig
## Intention
<figure>
-<img src="{filename}title.gif" alt="title.gif"/>
+<img src="{static}title.gif" alt="title.gif"/>
</figure>
Doesn't the title look really valuable? To reproduce this effect you need the incredible "Lighting"-Plugin,
created by Tom Bech and Federico Mena Quintero. It is not in the standard gimp-1.0 distribution, you have to
install it yourself. It can be found at <span class="filter"><Image> Filters -> Light Effects -> Lighting
Effects</span>. This Plugin does a very good Bump-Mapping. Additionally it can map an enviroment-map to the
image.
@@ -16,25 +16,25 @@ Doesn't the title look really valuable? To reproduce this effect you need the in
## Part I
<figure>
-<img src="{filename}envmap_gold.jpg" alt="envmap_gold.jpg"/>
+<img src="{static}envmap_gold.jpg" alt="envmap_gold.jpg"/>
</figure>
The trick is to use a good enviroment-map. I created it with <span class="filter"><Image> Filters -> Render
-> Solid Noise</span> (X/Y-Size: 2.8, Detail: 1, Tileable). It is important for a good effect to get
different grays in the top right corner. Then I did a <span class="filter"><Image> Image -> Colors ->
Auto-Stretch Contrast</span> and a <span class="filter"><Image> Filters -> Blur -> Gaussian Blur (IIR)</span>
with a radius of 5 to get the full range of gray. Then select the "Golden"-Gradient in <span
class="filter"><Image> Dialogs -> Gradient Editor...</span> and <span class="filter"><Image> Filters ->
Colors -> Gradient Map</span> it to the image.
<figure>
-<img src="{filename}bumpmap1.gif" alt="bumpmap1.gif"/>
+<img src="{static}bumpmap1.gif" alt="bumpmap1.gif"/>
</figure>
The next step is to create a bumpmap for the text. Open a new grayscale image in the desired size, fill it
black and paint the white text on it. To get a smooth transition do a Gaussian Blur on it.
<figure>
-<img src="{filename}lighting_gui.gif" alt="lighting_gui.gif"/>
+<img src="{static}lighting_gui.gif" alt="lighting_gui.gif"/>
</figure>
Then open a new RGB-Image with exactly the same size and start the Lighting-Plugin. Select the
"Enviroment-map"- and "Bumpmap"-Toggles and select the images in the appropriate notebook-pages. I prefer a
lower value in the "Maximum height" Bumpmap option. I think 0.02 is good in most cases.
<figure>
-<img src="{filename}render1.gif" alt="render1.gif"/>
+<img src="{static}render1.gif" alt="render1.gif"/>
</figure>
This is the result after a click on **Apply**. There is room for Improvements. Since the Lighting-Plugin
doesn't support antialiasing yet it is a good idea to render the image in the double size and scale it down
for the final image. Some other neat tricks can be found in the next part.
@@ -42,19 +42,19 @@ This is the result after a click on **Apply**. There is room for Improvements. S
## Part II
<figure>
-<img src="{filename}curves1_small.gif" alt="curves1_small.gif"/> <img src="{filename}bumpmap1_small.gif"
alt="bumpmap1_small.gif"/> <img src="{filename}render1_small.gif" alt="render1_small.gif"/>
+<img src="{static}curves1_small.gif" alt="curves1_small.gif"/> <img src="{static}bumpmap1_small.gif"
alt="bumpmap1_small.gif"/> <img src="{static}render1_small.gif" alt="render1_small.gif"/>
</figure>
<figure>
-<img src="{filename}curves2_small.gif" alt="curves2_small.gif"/> <img src="{filename}bumpmap2_small.gif"
alt="bumpmap2_small.gif"/> <img src="{filename}render2_small.gif" alt="render2_small.gif"/>
+<img src="{static}curves2_small.gif" alt="curves2_small.gif"/> <img src="{static}bumpmap2_small.gif"
alt="bumpmap2_small.gif"/> <img src="{static}render2_small.gif" alt="render2_small.gif"/>
</figure>
<figure>
-<img src="{filename}curves3_small.gif" alt="curves3_small.gif"/> <img src="{filename}bumpmap3_small.gif"
alt="bumpmap3_small.gif"/> <img src="{filename}render3_small.gif" alt="render3_small.gif"/>
+<img src="{static}curves3_small.gif" alt="curves3_small.gif"/> <img src="{static}bumpmap3_small.gif"
alt="bumpmap3_small.gif"/> <img src="{static}render3_small.gif" alt="render3_small.gif"/>
</figure>
<figure>
-<img src="{filename}curves4_small.gif" alt="curves4_small.gif"/> <img src="{filename}bumpmap4_small.gif"
alt="bumpmap4_small.gif"/> <img src="{filename}render4_small.gif" alt="render4_small.gif"/>
+<img src="{static}curves4_small.gif" alt="curves4_small.gif"/> <img src="{static}bumpmap4_small.gif"
alt="bumpmap4_small.gif"/> <img src="{static}render4_small.gif" alt="render4_small.gif"/>
</figure>
At the Bumpmap-Options you can select different between four different Curves for Bumpmapping. So you can
select between a linear, spherical, logarithmic and a sinusoidial Bumpmap.
@@ -66,11 +66,11 @@ Another possibility is the use of a different gradient.
## Part III
<figure>
-<img src="{filename}curves3_small.gif" alt="curves3_small.gif"/> <img src="{filename}bumpmap3_small.gif"
alt="bumpmap3_small.gif"/> <img src="{filename}render3a_small.gif" alt="render3a_small.gif"/>
+<img src="{static}curves3_small.gif" alt="curves3_small.gif"/> <img src="{static}bumpmap3_small.gif"
alt="bumpmap3_small.gif"/> <img src="{static}render3a_small.gif" alt="render3a_small.gif"/>
</figure>
<figure>
-<img src="{filename}curves4_small.gif" alt="curves4_small.gif"/> <img src="{filename}bumpmap4_small.gif"
alt="bumpmap4_small.gif"/> <img src="{filename}render4a_small.gif" alt="render4a_small.gif"/>
+<img src="{static}curves4_small.gif" alt="curves4_small.gif"/> <img src="{static}bumpmap4_small.gif"
alt="bumpmap4_small.gif"/> <img src="{static}render4a_small.gif" alt="render4a_small.gif"/>
</figure>
To get Chrome-like effects try to use different enviroment-maps. Look at these examples.
diff --git a/content/tutorials/Heart_Shape/index.md b/content/tutorials/Heart_Shape/index.md
index 2368c58a..95d2317d 100644
--- a/content/tutorials/Heart_Shape/index.md
+++ b/content/tutorials/Heart_Shape/index.md
@@ -24,7 +24,7 @@ In the tool options select **'Fixed' - Aspect ratio**
Draw first circle shape and fill selection with red color. See below image:
<figure>
-<img src="{filename}01-circle-shape-red.png" alt="Heart Shape" />
+<img src="{static}01-circle-shape-red.png" alt="Heart Shape" />
</figure>
## Step 4
@@ -45,7 +45,7 @@ Select the **Rectangle Select Tool** or press <kbd>R</kbd> on keyboard
Make the selection from the middle of the circle and down. And fill with red color:
<figure>
-<img src="{filename}02-rectangle-shape-red.png" alt="Heart Shape" />
+<img src="{static}02-rectangle-shape-red.png" alt="Heart Shape" />
</figure>
## Step 7
@@ -61,7 +61,7 @@ Right click the layer for the rectangle shape and select **"Merge down"** so it
of the circle shape. See layers dialog example below:
<figure>
-<img src="{filename}03-layers-dialog-after-merge.png" alt="Heart Shape" />
+<img src="{static}03-layers-dialog-after-merge.png" alt="Heart Shape" />
</figure>
## Step 9
@@ -72,7 +72,7 @@ and click the layer to rotate which is the red shape dialog.
In the dialog, change the **Angle** to be **45**. See image below:
<figure>
-<img src="{filename}04-rotate-shape.png" alt="Heart Shape" />
+<img src="{static}04-rotate-shape.png" alt="Heart Shape" />
</figure>
NOTE! I have changed the settings for the tool to be "Direction: Normal (Forward)" therefore my shape is
@@ -84,7 +84,7 @@ layers around in next step. The main part is only to have it rotated.
In layers dialog duplicate the shape layer. See image below:
<figure>
-<img src="{filename}05-duplicated-layers.png" alt="Heart Shape" />
+<img src="{static}05-duplicated-layers.png" alt="Heart Shape" />
</figure>
## Step 11
@@ -92,10 +92,10 @@ In layers dialog duplicate the shape layer. See image below:
Select the tool: **Flip Tool** or press <kbd>Shift+F</kbd> on keyboard and Flip the new shape. See below:
<figure>
-<img src="{filename}06-layers-flipped.png" alt="Heart Shape" />
+<img src="{static}06-layers-flipped.png" alt="Heart Shape" />
</figure>
<figure>
-<img src="{filename}07-image-flipped.png" alt="Heart Shape" />
+<img src="{static}07-image-flipped.png" alt="Heart Shape" />
</figure>
## Step 12
@@ -106,7 +106,7 @@ Move one of the layers so they align at the bottom of the shape
(NOTE: you can move the layer with the arrow keys on the keyboard also). See below:
<figure>
-<img src="{filename}08-moved-layers-to-align-shape.png" alt="Heart Shape" />
+<img src="{static}08-moved-layers-to-align-shape.png" alt="Heart Shape" />
</figure>
Almost done! Now lets merge the shape together.
@@ -116,7 +116,7 @@ Almost done! Now lets merge the shape together.
In the top layer for the shape. Right click the layer and press **"Merge Down"**.
<figure>
-<img src="{filename}09-final-shape-layers.png" alt="Heart Shape" />
+<img src="{static}09-final-shape-layers.png" alt="Heart Shape" />
</figure>
## Final step
@@ -124,7 +124,7 @@ In the top layer for the shape. Right click the layer and press **"Merge Down"**
Last let's fix the layer boundaries. Right click the shape layer and press **"Layer to Image Size"**
<figure>
-<img src="{filename}10-final-result.png" alt="Heart Shape" />
+<img src="{static}10-final-result.png" alt="Heart Shape" />
</figure>
<small>
diff --git a/content/tutorials/Image_Map/index.md b/content/tutorials/Image_Map/index.md
index e6ec7a65..5a36cb3a 100644
--- a/content/tutorials/Image_Map/index.md
+++ b/content/tutorials/Image_Map/index.md
@@ -8,7 +8,7 @@ Author: Carol Spears
## Intention
<figure>
-<img src="{filename}imap-table1-1-0.png" alt="imap-table1-1-0.png"/> <img
src="{filename}dialog-imagemap-t.png" alt="dialog-imagemap-t.png"/>
+<img src="{static}imap-table1-1-0.png" alt="imap-table1-1-0.png"/> <img src="{static}dialog-imagemap-t.png"
alt="dialog-imagemap-t.png"/>
</figure>
In my opinion, it is hard to come up with a good application for an image map. For many online applications,
it is simply overkill. However, to emulate the behavior of a GIMP Dialog seems to be a perfect place for this
powerful web tool.
@@ -20,7 +20,7 @@ Above is a screenshot of the GIMP Image Map Plug-in, it has been scaled down for
## 1\. Goodies->Create Guides
<figure>
-<img src="{filename}dialog-createguides.png" alt="dialog-createguides.png"/> <img
src="{filename}imagemap1-zoom.png" alt="imagemap1-zoom.png"/>
+<img src="{static}dialog-createguides.png" alt="dialog-createguides.png"/> <img
src="{static}imagemap1-zoom.png" alt="imagemap1-zoom.png"/>
</figure>
This is a screenshot of the Create Guides Dialog (left image). We get to change every single option before
we are done. Whee!
@@ -36,7 +36,7 @@ You can do the math or count the squares, but the Visibone2 palette has 16 color
## 2\. Map Image
<figure>
-<img src="{filename}dialog-guides-image.png" alt="dialog-guides-image.png"/>
+<img src="{static}dialog-guides-image.png" alt="dialog-guides-image.png"/>
</figure>
Once you hit "Apply" the guides will draw themselves on the image map preview window. You can see if you hit
the right places on your image. This tutorial certainly makes it look like I got it right the first time ;)
@@ -46,7 +46,7 @@ At this point, for this project, you can jump right to "4\. File Save"as it is t
## 3\. Table Editor
<figure>
-<img src="{filename}dialog-guides-urlset.png" alt="dialog-guides-urlset.png"/>
+<img src="{static}dialog-guides-urlset.png" alt="dialog-guides-urlset.png"/>
</figure>
Since 256 elements is way to much to edit by hand, so I ended up using a different way to finish the
information at each point. However, I played with the editor a bit. It was easy to use and figure out.
Highlight the text in the pictured portion of the Image Map Dialog area by clicking on the area in the image
preview. (shown above). Honestly, I don't have that much experience with html renderers, if you have the
experience and would like to fill this portion of the tutorial in with something smart about editing your
image map elements, feel free. I fully admit that I only used a small small part of this great plug-ins
ability. 256 elements was out of the reach of my short attention span.
diff --git a/content/tutorials/Image_Pipes/index.md b/content/tutorials/Image_Pipes/index.md
index 69760fdd..43015288 100644
--- a/content/tutorials/Image_Pipes/index.md
+++ b/content/tutorials/Image_Pipes/index.md
@@ -15,7 +15,7 @@ This effect can be used in many ways, from a simple way to paint repeated images
## Example 1
<figure>
-<img src="{filename}example1_ss.png" alt="example1_ss.png"/>
+<img src="{static}example1_ss.png" alt="example1_ss.png"/>
</figure>
Taking a set of images and making a image pipe out of them is a common configuration. The easiest way to do
this is to create each indivual image as a separate layer in an image, much like you would if you were going
to save an animated image. And in fact this is often a convient way to think of image pipe creation. As
designing an animation of which snapshots are going to be composited to the canvas. Let's start with a simple
example image, an 8 layer image. In this case, with the numbers 1-8 on each layer. This will help to make it
more obvious what the various "ranks" do.
@@ -25,7 +25,7 @@ GIMP versions older than 2.0 could not reload gih files (GIMP image pipes), so I
To start creating a image pipe, you will need to save the file in the ".gih" extension. To use the brush
immediately, you probabaly want to save it in the brushes/ subdir of your GIMP directory (probabaly
~/.gimp-2.4). To save the image you will be presented with a save dialog for the GIH plugin. (Image above)
<figure>
-<img src="{filename}example_1.jpg" alt="example_1.jpg"/>
+<img src="{static}example_1.jpg" alt="example_1.jpg"/>
</figure>
For a simple image like this, the only values you usually need to change are "Spacing", The "Number of
Cells", the number of "Ranks", and the "selection" for each rank. **Spacing** is pretty much the same as for
regular brushes. It indicates what percentage of a brush width or height that the cursor moves between each
time the shape is pasted.
@@ -54,13 +54,13 @@ This [pipe](tater_tot.gih.gz) is a good example of making a image pipe out of a
To add a bit more of a "3D" effect, a slight drop shadow was added to each layer in the image. Save this
image as gih with the parameters as indicated in the following screenshot.
<figure>
-<img src="{filename}example2_ss.png" alt="example2_ss.png"/>
+<img src="{static}example2_ss.png" alt="example2_ss.png"/>
</figure>
An example of the use of this image:
<figure>
-<img src="{filename}tater_tot.jpg" alt="tater_tot.jpg"/>
+<img src="{static}tater_tot.jpg" alt="tater_tot.jpg"/>
</figure>
## Example 3
@@ -72,7 +72,7 @@ A interesting use for image pipes would be to simulate a natural media saturatio
For this example, I'll use a somewhat contrived example for simplicity sake. It will use the "angular"
parameter in for per layer dimension, and a "random" parameter to select which of the multiple images to use.
I use this in a couple of brushes to "humanize" the output. Instead of having the same image stamped out over
and over, it varies a little randomly.
<figure>
-<img src="{filename}example3_ss.png" alt="example3_ss.png"/>
+<img src="{static}example3_ss.png" alt="example3_ss.png"/>
</figure>
The example [source image](example_arrows.xcf.gz) is a 8 layer image, with each layer split in two with a
guide. The guide isnt require but it makes it easier to create.
@@ -81,7 +81,7 @@ A screenshot of the layers dialog showing creation of an image of this type.(Ima
You will want to save the image with the values show here:
<figure>
-<img src="{filename}example3_ss2.png" alt="example3_ss2.png"/>
+<img src="{static}example3_ss2.png" alt="example3_ss2.png"/>
</figure>
## Example 4
@@ -93,7 +93,7 @@ Using a image pipe as a way to generate textures.
A lot of the same techniques that are used there can be used Image Pipes as well. The main advantage to
using image pipes is that the brush as well as the color can change as you paint, which adds an extra
dimension to the textures.
<figure>
-<img src="{filename}example4_ss.png" alt="example4_ss.png"/>
+<img src="{static}example4_ss.png" alt="example4_ss.png"/>
</figure>
For this example, it is just another one brush per layer situation. The example [source
image](example_patter2.xcf.gz) is available. The image is saved with the paramaters as in image above.
@@ -101,7 +101,7 @@ For this example, it is just another one brush per layer situation. The example
Example output:
<figure>
-<img src="{filename}example_pattern.jpg" alt="example_pattern.jpg"/>
+<img src="{static}example_pattern.jpg" alt="example_pattern.jpg"/>
</figure>
## Example 5
@@ -109,7 +109,7 @@ Example output:
Converting a PSP image tube to a GIMP Image Pipe
<figure>
-<img src="{filename}example5_ss.png" alt="example5_ss.png"/>
+<img src="{static}example5_ss.png" alt="example5_ss.png"/>
</figure>
There are lots of "Image Tubes" created with and for Paint Shop Pro available on the internet. GIMP can load
these files and save them as GIMP image pipes.
@@ -123,8 +123,7 @@ The file needs to be loaded as a regular image, then saved as a gih image. Somet
Saving this file as a .gih file, and using the paramaters as shown in:
<figure>
-<img src="{filename}example5_ss2.png" alt="example5_ss2.png"/>
+<img src="{static}example5_ss2.png" alt="example5_ss2.png"/>
</figure>
<del>The original tutorial can be found [here](http://adrian.gimp.org/gimppipe/).</del>
-
diff --git a/content/tutorials/Image_Pipes2/index.md b/content/tutorials/Image_Pipes2/index.md
index 5ff9d39f..1709cb0d 100644
--- a/content/tutorials/Image_Pipes2/index.md
+++ b/content/tutorials/Image_Pipes2/index.md
@@ -15,7 +15,7 @@ An image pipe is a series of pixmap brushes combined into one, so that one or mo
## How Do You Make a New Brush?
<figure>
-<img src="{filename}fig1.jpg" alt="fig1.jpg"/>
+<img src="{static}fig1.jpg" alt="fig1.jpg"/>
<figcaption>
100 percent spacing
</figcaption>
@@ -23,7 +23,7 @@ An image pipe is a series of pixmap brushes combined into one, so that one or mo
<figure>
-<img src="{filename}fig2.jpg" alt="fig2.jpg"/>
+<img src="{static}fig2.jpg" alt="fig2.jpg"/>
<figcaption>
150 percent spacing
</figcaption>
@@ -31,7 +31,7 @@ An image pipe is a series of pixmap brushes combined into one, so that one or mo
<figure>
-<img src="{filename}fig3.jpg" alt="fig3.jpg"/>
+<img src="{static}fig3.jpg" alt="fig3.jpg"/>
<figcaption>
20 percent spacing
</figcaption>
@@ -47,14 +47,14 @@ A pixmap brush with 100% spacing will draw a bunch of pixmaps with touching bord
## Image Pipe Options
<figure>
-<a href="layer_example.xcf.gz"><img src="{filename}fig4.jpg" alt="fig4.jpg"/></a>
+<a href="layer_example.xcf.gz"><img src="{static}fig4.jpg" alt="fig4.jpg"/></a>
</figure>
The options for an image pipe are a bit more complicated. Let's take a simple image with four layers. The
layers look like above.
Click on the example above to download the GIMP file.
<figure>
-<img src="{filename}fig5.jpg" alt="fig5.jpg"/>
+<img src="{static}fig5.jpg" alt="fig5.jpg"/>
</figure>
When I try to save this image as type "GIH", I get this dialog box: (Image above)
@@ -69,19 +69,19 @@ There's a lot of options here. Here's a list of what the simple ones mean:
The last three fields are a little harder to describe. If you want to give this image a one dimensional
image pipe, you put '1' under **Dimension** and 4 under **Ranks**. This gives you four images in your image
pipe, one of which will be chosen each time the brush touches. The last field, **Selection**, is about how
that brush is chosen.
<figure>
-<a href="random_pipe.gih"><img src="{filename}fig6.jpg" alt="fig6.jpg"/></a>
+<a href="random_pipe.gih"><img src="{static}fig6.jpg" alt="fig6.jpg"/></a>
</figure>
Let's say we save the image above as an image pipe with one dimension, four ranks and random selection. One
of the images will be chosen for the brush at random. If we paint a short line with it (spacing 150), we get
something like image above.
<figure>
-<a href="incremental_pipe.gih"><img src="{filename}fig7.jpg" alt="fig7.jpg"/></a>
+<a href="incremental_pipe.gih"><img src="{static}fig7.jpg" alt="fig7.jpg"/></a>
</figure>
If instead, we chose incremental selection, the layers will be chosen in order from the top layer to the
bottom, which would look like this.
<figure>
-<a href="angular_pipe.gih"><img src="{filename}fig8.jpg" alt="fig8.jpg"/></a>
+<a href="angular_pipe.gih"><img src="{static}fig8.jpg" alt="fig8.jpg"/></a>
</figure>
An angular pipe choses its layer based on the angle the brush moves. The top layer covers 0 degrees
(straight up) and the angles to either side. The layers going down are assigned counter clockwise, evenly
dividing the number of degrees with the layer. So with four layers, "A" will go up, "B" right, "C" down and
"D" left, like this.
@@ -91,7 +91,7 @@ Angular pipes can have more or less than four layers. If it was eight layers, th
There's a few more types of selection. One is 'velocity', and frankly I don't understand it. There's a few
others that require a graphics tablet. If anyone gets me a graphics tablet, I promise I'll describe these
selection options, too.
<figure>
-<a href="gnome_feet.xcf.gz"><img src="{filename}fig9.jpg" alt="fig9.jpg"/></a>
+<a href="gnome_feet.xcf.gz"><img src="{static}fig9.jpg" alt="fig9.jpg"/></a>
</figure>
So, what can you do with a two, three or four dimensional image pipe? You can combine the selections. Take
the gnome foot for example. You can cut one out and make eight layers. Four layers are for the left foot
going in each direction, four layers are for the right foot going in each direction. You end up with a layer
dialog that looks like image above.
@@ -100,7 +100,7 @@ Click on image above to download the GIMP image
Now, let's save this image with two dimensions. The first has angular selection and four ranks for that
selection. That means these eight layers get divided up into four ranks of two layers. Then we select
incremental selection with two ranks, which will divide each of those sets of two into sets of one.
<figure>
-<img src="{filename}fig10.jpg" alt="fig10.jpg"/>
+<img src="{static}fig10.jpg" alt="fig10.jpg"/>
</figure>
So, what we have is feet which alternate left-right-left and follow the direction of the mouse. It looks a
little like above.
diff --git a/content/tutorials/Layer_Masks/index.md b/content/tutorials/Layer_Masks/index.md
index e40d0fde..f7f0a5d3 100644
--- a/content/tutorials/Layer_Masks/index.md
+++ b/content/tutorials/Layer_Masks/index.md
@@ -19,7 +19,7 @@ This flexibility to define the opacity of different areas of a layer is the basi
Layer masks need to be added to a layer before they can be used. The process for adding them is simple.
<figure>
-<img src="{filename}Layers-Base.png" alt="Layers-Base"/>
+<img src="{static}Layers-Base.png" alt="Layers-Base"/>
<figcaption>
Layers dialog for the image.
</figcaption>
@@ -30,7 +30,7 @@ For this example I will use a simple image with only two layers, as shown above.
**Right-Click** on the layer you want to add a mask to (the “Teal” layer in my example), and the Context
menu will show an option to **Add Layer Mask…**:
<figure>
-<img src="{filename}Layers-Add-Mask-Dialog.png" alt="Layers-Add-Mask-Dialog"/>
+<img src="{static}Layers-Add-Mask-Dialog.png" alt="Layers-Add-Mask-Dialog"/>
<figcaption>
Add Layer Mask in the context menu.
</figcaption>
@@ -43,7 +43,7 @@ You can also add a layer mask through the menus:
This will then bring up the “**Add a Mask to the Layer**” dialog with some options:
<figure>
-<img src="{filename}Add-Mask-Dialog.png" alt="Add-Mask-Dialog"/>
+<img src="{static}Add-Mask-Dialog.png" alt="Add-Mask-Dialog"/>
<figcaption>
Add mask options dialog.
</figcaption>
@@ -54,7 +54,7 @@ There are many options for initializing the Layer Mask. Notice that the first op
For the purposes of this tutorial, we will let the mask initialize to **White** (full opacity). You should
notice a change in your Layers dialog now that shows the layer mask thumbnail to the right of the layer it
applies to (in this case the “Teal” layer):
<figure>
-<img src="{filename}Layers-with-Mask.png" alt="Layers-with-Mask"/>
+<img src="{static}Layers-with-Mask.png" alt="Layers-with-Mask"/>
<figcaption>
Layers dialog with mask applied to Teal layer.
</figcaption>
@@ -71,7 +71,7 @@ I am going to use the **Rectangle Select** tool to select roughly the top third
<div class="MenuCmd"><span><u>T</u>ools → <u>S</u>election Tools → <u>R</u>ectangle Select</span></div>
<figure>
-<img src="{filename}Tool-Rectangle-Select.png" alt="Tool-Rectangle-Select"/>
+<img src="{static}Tool-Rectangle-Select.png" alt="Tool-Rectangle-Select"/>
<figcaption>
Activating the **Rectangle Select** tool.
</figcaption>
@@ -80,7 +80,7 @@ Activating the **Rectangle Select** tool.
Using the **Rectangle Select** tool, I'll select roughly the top third of the image:
<figure>
-<img src="{filename}Selection-Top-Third.png" alt="Selection-Top-Third"/>
+<img src="{static}Selection-Top-Third.png" alt="Selection-Top-Third"/>
<figcaption>
Top third of the image selected.
</figcaption>
@@ -89,7 +89,7 @@ Top third of the image selected.
I want to fill this selection with black, but before I do I need to make sure that my foreground color is
black. Click on the foreground color in the **Color area** to bring up the “Change Foreground Color” dialog:
<figure>
-<img src="{filename}Change-Foreground-Color.png" alt="Change-Foreground-Color"/>
+<img src="{static}Change-Foreground-Color.png" alt="Change-Foreground-Color"/>
<figcaption>
Click the <span class='tGreen'>foreground color</span> to change.
</figcaption>
@@ -98,7 +98,7 @@ Click the <span class='tGreen'>foreground color</span> to change.
The “Change Foreground Color” dialog allows you to set the foreground color. For this example set the color
to black, RGB(0, 0, 0):
<figure>
-<img src="{filename}Change-Foreground-Dialog.png" alt="Change-Foreground-Dialog"/>
+<img src="{static}Change-Foreground-Dialog.png" alt="Change-Foreground-Dialog"/>
<figcaption>
Change the color to black.
</figcaption>
@@ -109,7 +109,7 @@ With the foreground color set, you can now use the **Bucket Fill Tool** to fill
<div class="MenuCmd"><span><u>T</u>ools → <u>P</u>aint Tools → <u>B</u>ucket Fill</span></div>
<figure>
-<img src="{filename}Bucket-Fill-Tool.png" alt="Bucket-Fill-Tool"/>
+<img src="{static}Bucket-Fill-Tool.png" alt="Bucket-Fill-Tool"/>
<figcaption>
Activating the **Bucket Fill** tool.
</figcaption>
@@ -118,7 +118,7 @@ Activating the **Bucket Fill** tool.
You can now click inside the selection to fill it with the foreground color (black). As soon as you do,
you'll be presented with a new view of your image on the canvas:
<figure>
-<img src="{filename}Masked-Top-Black.png" alt="Masked-Top-Black]"/>
+<img src="{static}Masked-Top-Black.png" alt="Masked-Top-Black]"/>
</figure>
As you can see, filling the selected portion of the layer mask with black resulted in that area having 100%
transparency, showing the layer below it.
@@ -126,7 +126,7 @@ As you can see, filling the selected portion of the layer mask with black result
If you **Rectangle Select** a different area of the mask, you can fill it in with a different shade of gray
to produce a variable opacity. For example, I will select a few different regions of the mask, and fill it
with different levels of gray:
<figure>
-<img src="{filename}Masked-Various.png" alt="Masked-Various]"/>
+<img src="{static}Masked-Various.png" alt="Masked-Various]"/>
</figure>
If you examine the layer mask, you'll see that there are different levels of gray being applied (black to
white, from top to bottom), and their value is what determines the opacity of the layer.
@@ -136,7 +136,7 @@ If you examine the layer mask, you'll see that there are different levels of gra
A good example of the application of layer masks is doing selective colorization of an image (selectively
allowing color to show through a mostly black and white image). I'll walk through how to easily do this with
an image from Mardi Gras 2013:
<figure>
-<img src="{filename}SelCol-Base.jpg" alt="SelCol-Base"/>
+<img src="{static}SelCol-Base.jpg" alt="SelCol-Base"/>
<figcaption>
Mardi Gras 2013, Mobile, AL
</figcaption>
@@ -153,7 +153,7 @@ Then desaturate the upper layer using:
Following the steps above, add a layer mask to the desaturated layer and initialize it to White (full
opacity). At this point, the Layers dialog should look like this:
<figure>
-<img src="{filename}SelCol-Layers.png" alt="SelCol-Layers]"/>
+<img src="{static}SelCol-Layers.png" alt="SelCol-Layers]"/>
</figure>
As before, set your foreground color to black. This time, rather than filling selections, we are going to
use the **Paintbrush Tool** to paint areas of the image we want the color to show through from the layer
below.
@@ -161,7 +161,7 @@ As before, set your foreground color to black. This time, rather than filling se
I decided to paint the boy on the fence. Using the **Paintbrush Tool** I painted over his shirt and head.
This allowed those colors to show through from the layer below. Here are the results after painting:
<figure>
-<img src="{filename}SelCol-Boy.jpg" alt="SelCol-Boy"/>
+<img src="{static}SelCol-Boy.jpg" alt="SelCol-Boy"/>
<figcaption>
Simple Selective Colorization Example
</figcaption>
@@ -170,7 +170,7 @@ Simple Selective Colorization Example
To illustrate what was done, here is the layer mask I painted to achieve the above result:
<figure>
-<img src="{filename}SelCol-Boy-Mask.jpg" alt="SelCol-Boy-Mask"/>
+<img src="{static}SelCol-Boy-Mask.jpg" alt="SelCol-Boy-Mask"/>
<figcaption>
Layer mask isolated to illustrate
</figcaption>
@@ -179,7 +179,7 @@ Layer mask isolated to illustrate
Of course, I could have chosen a different color than black to create the mask. If I wanted a slightly more
muted color I could have painted with a more middle gray vs. black:
<figure>
-<img src="{filename}SelCol-Boy-50.jpg" alt="SelCol-Boy-50"/>
+<img src="{static}SelCol-Boy-50.jpg" alt="SelCol-Boy-50"/>
<figcaption>
Simple Selective Colorization Example (painted with gray vs. black).
</figcaption>
diff --git a/content/tutorials/Lite_Quickies/index.md b/content/tutorials/Lite_Quickies/index.md
index 32750b6e..129d5991 100644
--- a/content/tutorials/Lite_Quickies/index.md
+++ b/content/tutorials/Lite_Quickies/index.md
@@ -18,8 +18,8 @@ All you should need to know to start here is how to find your image and open it.
## <a id="scale">Change the Size of an Image (Scale)</a>
<figure>
-<a href="scale-menu.png"><img src="{filename}scale-menu-t.png" alt="scale-menu"/></a>
-<a href="scale-dialog.png"><img src="{filename}scale-dialog-t.png" alt="scale-dialog"/></a>
+<a href="scale-menu.png"><img src="{static}scale-menu-t.png" alt="scale-menu"/></a>
+<a href="scale-dialog.png"><img src="{static}scale-dialog-t.png" alt="scale-dialog"/></a>
</figure>
@@ -40,8 +40,8 @@ Let GIMP choose the other dimension length for you. Meaning, it will take more i
## <a id="reduce">Make jpegs Smaller</a>
<figure>
-<a href="jpegsave-menu.png"><img src="{filename}jpegsave-menu-t.png" alt="jpegsave-menu"/></a>
-<a href="jpegsave-dialog-de.png"><img src="{filename}jpegsave-dialog-de-t.png" alt="jpegsave-dialog"/></a>
+<a href="jpegsave-menu.png"><img src="{static}jpegsave-menu-t.png" alt="jpegsave-menu"/></a>
+<a href="jpegsave-dialog-de.png"><img src="{static}jpegsave-dialog-de-t.png" alt="jpegsave-dialog"/></a>
</figure>
@@ -58,12 +58,12 @@ I have not been showing the actual jpegs I created so that we could end this qui
## <a id="crop">Crop An Image</a>
<figure>
-<a href="crop-menu.png"><img src="{filename}crop-menu-t.png" alt="crop-menu"/></a>
-<a href="crop-dialog.png"><img src="{filename}crop-dialog-t.png" alt="crop-dialog"/></a>
+<a href="crop-menu.png"><img src="{static}crop-menu-t.png" alt="crop-menu"/></a>
+<a href="crop-dialog.png"><img src="{static}crop-dialog-t.png" alt="crop-dialog"/></a>
</figure>
-Many reasons to need to crop an image. Making rectangles square, or making squares into rectangles. Cutting
alot of useless background to bring out the subject better. etc. To get to the crop tool, you can either push
the button on the toolbox  or right click on the image and follow
the menu <span class="filter"><Image> Tools -> Transform Tools -> Crop & Resize</span>. This will change the
cursor and allow you to click and drag a rectangular shape. The button in the toolbox is the nicest way to
get to any of the tools. I have chosen one of the huge and beautiful
[APOD](https://antwrp.gsfc.nasa.gov/apod/ap021108.html) images, [ngc6369 heritage](ngc6369_heritage_big.jpg).
+Many reasons to need to crop an image. Making rectangles square, or making squares into rectangles. Cutting
alot of useless background to bring out the subject better. etc. To get to the crop tool, you can either push
the button on the toolbox  or right click on the image and follow the
menu <span class="filter"><Image> Tools -> Transform Tools -> Crop & Resize</span>. This will change the
cursor and allow you to click and drag a rectangular shape. The button in the toolbox is the nicest way to
get to any of the tools. I have chosen one of the huge and beautiful
[APOD](https://antwrp.gsfc.nasa.gov/apod/ap021108.html) images, [ngc6369 heritage](ngc6369_heritage_big.jpg).
I always click on the approximate upper left corner and drag to the lower [right corner](crop-drag.png). You
don't need to worry about being accurate on this first swipe with the crop tool, since a little dialog will
pop up and you can make a better choice for your new borders there..
@@ -74,8 +74,8 @@ I decided that the image looked the best with the [X Origin at 42](crop-dialog2.
## <a id="info">Find Info About Your Image</a>
<figure>
-<a href="info-menu.png"><img src="{filename}info-menu-t.png" alt="info-menu"/></a>
-<a href="info-dialog.png"><img src="{filename}info-dialog-t.png" alt="info-dialog"/></a>
+<a href="info-menu.png"><img src="{static}info-menu-t.png" alt="info-menu"/></a>
+<a href="info-dialog.png"><img src="{static}info-dialog-t.png" alt="info-dialog"/></a>
</figure>
@@ -94,8 +94,8 @@ There is another brutal fact you should come to terms with if you are new to gra
## <a name="mode">Change the Mode</a>
<figure>
-<a href="mode-menu.png"><img src="{filename}mode-menu-t.png" alt="mode-menu"/></a>
-<img alt="mode-dialog" src="{filename}mode-dialog.png"/>
+<a href="mode-menu.png"><img src="{static}mode-menu-t.png" alt="mode-menu"/></a>
+<img alt="mode-dialog" src="{static}mode-dialog.png"/>
</figure>
As with anything else, images come in different kinds and serve different purposes. Sometimes, a small size
is important (for web sites) and at other times, retaining a high colour depth in all its glory (a family
portrait) is what you want. GIMP can handle all of this, and more, primarily by converting between three
fundamental modes, as seen in this menu. In order to switch your image to one of these modes, you open it and
follow that menu and click the mode you want.
@@ -109,14 +109,14 @@ As an example to practice with images have been provided in various sizes and fo
**Indexed -** This is the mode usually used when file size is of concern, or when you are working with
images with few colours. It involves using a fixed number of colours, 256 or less, at each point to represent
the colour at that point. GIMP defaults to attempting to figure out an "optimum palette" to best represent
your image. Try it, you can undo it if you don't like the results, or use a custom palette or more colours.
<figure>
-<a href="mode-index.png"><img src="{filename}mode-index-t.png" alt="mode-index"/></a>
+<a href="mode-index.png"><img src="{static}mode-index-t.png" alt="mode-index"/></a>
</figure>
As you might expect, since the information needed to represent the colour at each pixel is less, the file
size is a lot smaller. However, sometimes, there will be options in the various menus that seem to have been
"greyed" out for no apparent reason. This usually means the filter or option cannot be applied when your
image is in its current mode. Changing the mode to RGB as outlined above should solve this issue. If that
doesn't work either, perhaps the option you're trying requires your layer to have the ability to be
transparent. This can be done just as easily via (Image)->Layer->Transparency->Add Alpha Channel.
<figure>
-<a href="mode-alpha.png"><img src="{filename}mode-alpha-t.png" alt="mode-alpha"/></a>
+<a href="mode-alpha.png"><img src="{static}mode-alpha-t.png" alt="mode-alpha"/></a>
</figure>
**Grayscale -** In case you want to convert your brilliant colour image to something that's black and white
(with a lot of shades of grey), this is one of the easiest ways in which to do it. Some photos do look a lot
fancier when displayed in grayscale. Again, if you're interested in some detail, this is achieved by taking
the RGB values at the pixels in your image, and suitably weighted averaging them to get an _intensity_ at
that point.
@@ -126,11 +126,11 @@ There is no need to convert an image to a specific mode before saving it in your
## <a id="flip">Flip An Image</a>
<figure>
-<a href="flip-menu.png"><img src="{filename}flip-menu-t.png" alt="flip-menu"/></a>
-<img alt="flip-dialog" src="{filename}flip-dialog.png"/>
+<a href="flip-menu.png"><img src="{static}flip-menu-t.png" alt="flip-menu"/></a>
+<img alt="flip-dialog" src="{static}flip-dialog.png"/>
</figure>
-When you need the person in the photo looking in the other direction, or you need to top of the image to be
the bottom. Mirroring the image (sort of). Right click on the image and follow the menus <span
class="filter"><Image> Tools -> Transform Tools -> Flip</span>, or use the button on the toolbox.
+When you need the person in the photo looking in the other direction, or you need to top of the image to be
the bottom. Mirroring the image (sort of). Right click on the image and follow the menus <span
class="filter"><Image> Tools -> Transform Tools -> Flip</span>, or use the button on the toolbox.
Using another [APOD](https://antwrp.gsfc.nasa.gov/apod/ap021114.html) image I demonstrated all of the flips
on [this](sunspot_swedish_label2.jpg) image. You might get bored before it is over ....
@@ -145,7 +145,7 @@ The flips are all displayed on one page for you, [here](flips.html). One might a
## <a id="rotate">Rotate An Image</a>
<figure>
-<a href="rotate-menu.png"><img src="{filename}rotate-menu-t.png" alt="rotate-menu"/></a>
+<a href="rotate-menu.png"><img src="{static}rotate-menu-t.png" alt="rotate-menu"/></a>
</figure>
diff --git a/content/tutorials/Luminosity_Masks/index.md b/content/tutorials/Luminosity_Masks/index.md
index 67a6ae0a..2dde549f 100644
--- a/content/tutorials/Luminosity_Masks/index.md
+++ b/content/tutorials/Luminosity_Masks/index.md
@@ -16,7 +16,7 @@ This tutorial will assume you are already familiar with layer masks. If not (or
For this tutorial I'll be using this image by the West Arctic National Parklands:
<figure>
-<a href="Mountains-Full-Size.jpg"><img src="{filename}Mountains.jpg" alt="Mountains"/></a>
+<a href="Mountains-Full-Size.jpg"><img src="{static}Mountains.jpg" alt="Mountains"/></a>
<figcaption>
<a 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>)
</figcaption>
@@ -25,7 +25,7 @@ For this tutorial I'll be using this image by the West Arctic National Parklands
After going through this tutorial, we will generate channels in GIMP corresponding to these six different
luminosity regions in the image:
<figure>
-<img src="{filename}All-Masks.jpg" alt="All-Masks"/>
+<img src="{static}All-Masks.jpg" alt="All-Masks"/>
<figcaption>
Example luminosity masks. Lights (left), Mids (center), and Darks (right)
</figcaption>
@@ -42,7 +42,7 @@ Either through the menus, or by Right-Clicking on the base layer in the **Layer
<div class="MenuCmd"><span>Layer → Duplicate Layer</span></div>
<figure>
-<img src="{filename}Layer-Duplicate.png" alt="Layer-Duplicate"/>
+<img src="{static}Layer-Duplicate.png" alt="Layer-Duplicate"/>
</figure>
### Desaturate the Duplicated Layer
@@ -52,7 +52,7 @@ Now desaturate the duplicated layer using **Luminosity** as the method:
<div class="MenuCmd"><span>Colors → Desaturate…</span></div>
<figure>
-<img src="{filename}Layer-Desaturate.png" alt="Layer-Desaturate"/>
+<img src="{static}Layer-Desaturate.png" alt="Layer-Desaturate"/>
</figure>
This desaturated copy of your color image represents the “Lights” channel. Now we want to create a new
channel based on this layer.
@@ -64,7 +64,7 @@ The easiest way to do this is through the **Channels** Dialog. If you don't see
<div class="MenuCmd"><span>Windows → Dockable Dialogs → Channels</span></div>
<figure>
-<img src="{filename}Channels-Dialog.png" alt="Channels-Dialog"/>
+<img src="{static}Channels-Dialog.png" alt="Channels-Dialog"/>
<figcaption>
The <strong>Channels</strong> Dialog
</figcaption></figure>
@@ -78,7 +78,7 @@ Now rename this channel to something meaningful (like “**L**” for instance!)
This now gives us our “**Lights**” channel, **L** :
<figure>
-<img src="{filename}L-Channel.png" alt="L-Channel"/>
+<img src="{static}L-Channel.png" alt="L-Channel"/>
</figure>
With the “Lights” channel created, we can use it to create the inverse, the “Darks” channel.
@@ -102,7 +102,7 @@ Remember that you should be seeing the “marching ants” around your selection
With the entire image selected, we just have to subtract the “Lights” channel. In the **Channels** dialog,
just Right-Click on the “Lights” channel, and choose “**Subtract from Selection**”:
<figure>
-<img src="{filename}L-Channel-Subtract.png" alt="L-Channel-Subtract"/>
+<img src="{static}L-Channel-Subtract.png" alt="L-Channel-Subtract"/>
<figcaption>
Subtracting the <strong>L</strong> channel
</figcaption></figure>
@@ -126,14 +126,14 @@ Once you’ve subtracted the “Lights” channel again, don’t forget to save
I’ll usually make 3 levels of “Darks” channels: **D**, **DD**, and **DDD**:
<figure>
-<img src="{filename}D-Channels.png" alt="D-Channels"/>
+<img src="{static}D-Channels.png" alt="D-Channels"/>
<figcaption>Three levels of Dark masks created</figcaption>
</figure>
Here is what the three different channels of Darks look like:
<figure>
-<img src="{filename}Darks-All.jpg" alt="Darks-All"/>
+<img src="{static}Darks-All.jpg" alt="Darks-All"/>
<figcaption>The <strong>D</strong>, <strong>DD</strong>, and <strong>DDD</strong> channels,
respectively</figcaption>
</figure>
@@ -148,13 +148,13 @@ The process is identical to creating the darker channels, just in reverse.
To get started, activate the “Lights” channel as a selection (Right-Click on the “Lights” Channel):
<figure>
-<img src="{filename}L-Channel-Activate.png" alt="L-Channel-Activate"/>
+<img src="{static}L-Channel-Activate.png" alt="L-Channel-Activate"/>
</figure>
With the “Lights” channel as a selection, now all we have to do is **Subtract** the “Darks” channel from it.
Then save that selection as a new channel (which will become our “LL” channel, and so on…):
<figure>
-<img src="{filename}D-Subtract.png" alt="D-Subtract"/>
+<img src="{static}D-Subtract.png" alt="D-Subtract"/>
<figcaption>Subtracting the <strong>D</strong> channel from the <strong>L</strong> selection</figcaption>
</figure>
@@ -164,7 +164,7 @@ To get an even lighter channel, you can subtract **D** one more time from the se
Here are what the three channels look like, starting with **L** up to **LLL**:
<figure>
-<img src="{filename}Lights-All.jpg" alt="Lights-All"/>
+<img src="{static}Lights-All.jpg" alt="Lights-All"/>
<figcaption>The <strong>L</strong>, <strong>LL</strong>, and <strong>LLL</strong> channels,
respectively</figcaption>
</figure>
@@ -173,7 +173,7 @@ Here are what the three channels look like, starting with **L** up to **LLL**:
By this point, we’ve got 6 new channels, three each for light and dark tones:
<figure>
-<img src="{filename}L+D.png" alt="L+D"/>
+<img src="{static}L+D.png" alt="L+D"/>
</figure>
Now we can generate our mid-tone channels from these.
@@ -197,7 +197,7 @@ You can repeat for each of the other levels, creating an MM and MMM if you'd lik
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:
<figure>
-<img src="{filename}Mid.jpg" alt="Mid"/>
+<img src="{static}Mid.jpg" alt="Mid"/>
<figcaption>Basic Mid-Tones channel</figcaption>
</figure>
@@ -214,7 +214,7 @@ The basic idea behind creating these channels is that you can now mask particula
Using the image I've been working through so far, we have the base layer to start with:
<figure>
-<img src="{filename}Split-Base.png" alt="Split-Base"/>
+<img src="{static}Split-Base.png" alt="Split-Base"/>
</figure>
#### Create Duplicates
@@ -226,7 +226,7 @@ We are going to want two duplicates of this base layer. One to tone the lighter
Then rename the copy something descriptive. In my example, I'll call this layer “Dark” (original, I know):
<figure>
-<img src="{filename}Split-Dark.png" alt="Split-Dark"/>
+<img src="{static}Split-Dark.png" alt="Split-Dark"/>
</figure>
#### Add a Mask
@@ -238,13 +238,13 @@ Now we can add a layer mask to this layer. You can either Right-Click the layer,
You’ll then be presented with options about how to initialize the mask. You’ll want to **Initialize Layer
Mask to:** “Channel”, then choose one of your luminosity masks from the drop-down. In my case, I’ll use the
**DD** mask we previously made:
<figure>
-<img src="{filename}AddLayerMask.png" alt="AddLayerMask"/>
+<img src="{static}AddLayerMask.png" alt="AddLayerMask"/>
</figure>
#### Adjust the Layer
<figure>
-<img src="{filename}Dark-Active.png" alt="Dark Active"/>
+<img src="{static}Dark-Active.png" alt="Dark Active"/>
</figure>
Now you’ll have a Dark layer with a DD mask that will restrict any modification you do to this layer to only
apply to the darker tones.
@@ -260,7 +260,7 @@ So I’ll use the **Colorize** option to tone the entire layer a new color:
To get a Teal-ish color, I'll pull the Hue slider over to about 200:
<figure>
-<img src="{filename}Colorize-200.png" alt="Colorize-200"/>
+<img src="{static}Colorize-200.png" alt="Colorize-200"/>
</figure>
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!
@@ -268,13 +268,13 @@ Now, pay attention to what’s happening on your image canvas at this point. Dra
To illustrate, here are four images where the **Hue** has been changed in each one. Notice how the color
shifts are constrained to darker tones due to the **DD** mask being active:
<figure>
-<img src="{filename}All-Hues.jpg" alt="All-Hues"/>
+<img src="{static}All-Hues.jpg" alt="All-Hues"/>
</figure>
So after I choose a new Hue of 200 for my layer, I should be seeing this:
<figure>
-<img src="{filename}Dark-Tinted.png" alt="Dark-Tinted"/>
+<img src="{static}Dark-Tinted.png" alt="Dark-Tinted"/>
</figure>
#### Repeat for Light Tones
@@ -284,21 +284,21 @@ Now just repeat the above steps, but this time for the light tones. So duplicate
For the lighter tones, I chose a Hue of around 25 instead (more orange-ish than blue):
<figure>
-<img src="{filename}Light-Tinted.png" alt="Light-Tinted"/>
+<img src="{static}Light-Tinted.png" alt="Light-Tinted"/>
</figure>
In the end, here are the results that I achieved:
<figure>
-<img src="{filename}Mountains-split.jpg" alt="Mountains-split"/>
+<img src="{static}Mountains-split.jpg" alt="Mountains-split"/>
</figure>
Compared to the original we started with:
<figure>
-<img src="{filename}Mountains.jpg" alt="Mountains"/>
+<img src="{static}Mountains.jpg" alt="Mountains"/>
</figure>
@@ -309,7 +309,7 @@ The real power here comes from experimentation. I encourage you to try using a d
The mid-tone masks were very interesting to me. In Tony's original article, he mentioned how much he loved
using them to provide a nice boost to contrast and saturation in the image. Well, he’s right. It certainly
does do that! (He also feels that it’s similar to shooting the image on Velvia).
<figure>
-<img src="{filename}Mid-Layer.png" alt="Mid Layer"/>
+<img src="{static}Mid-Layer.png" alt="Mid Layer"/>
</figure>
Let’s have a look.
@@ -329,21 +329,21 @@ To illustrate, I’m going to apply a fairly aggressive compression to the curve
When I say aggressive, here is what I’m referring to:
<figure>
-<img src="{filename}Mid-Curve.png" alt="Mid-Curve"/>
+<img src="{static}Mid-Curve.png" alt="Mid-Curve"/>
</figure>
Here is the effect it has on the image when using the **M** mid-tones mask:
<figure>
-<img src="{filename}Mid-Boost.jpg" alt="Mid-Boost"/>
+<img src="{static}Mid-Boost.jpg" alt="Mid-Boost"/>
</figure>
Compared to the original we started with:
<figure>
-<img src="{filename}Mountains.jpg" alt="Mountains"/>
+<img src="{static}Mountains.jpg" alt="Mountains"/>
</figure>
@@ -352,32 +352,32 @@ As you can see, there is an increase in contrast across the image, as well a nic
#### More Samples of the Mid-Tones Mask in use
<figure>
-<img src="{filename}stignygaard-3654106828-original.jpg" alt="stignygaard-3654106828-original"/>
+<img src="{static}stignygaard-3654106828-original.jpg" alt="stignygaard-3654106828-original"/>
<figcaption>Original <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>)</figcaption>
</figure>
<figure>
-<img src="{filename}stignygaard-3654106828.png" alt="stignygaard-3654106828"/>
+<img src="{static}stignygaard-3654106828.png" alt="stignygaard-3654106828"/>
<figcaption>After an aggressive curve + Mid-Tone mask</figcaption>
</figure>
<figure>
-<img src="{filename}Landscapes.jpg" alt="Landscapes"/>
+<img src="{static}Landscapes.jpg" alt="Landscapes"/>
<figcaption>Original <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>)</figcaption>
</figure>
<figure>
-<img src="{filename}Landscapes-Mid-Mask.jpg" alt="Landscapes-Mid-Mask"/>
+<img src="{static}Landscapes-Mid-Mask.jpg" alt="Landscapes-Mid-Mask"/>
<figcaption>After an aggressive curve + Mid-Tone mask</figcaption>
</figure>
<figure>
-<img src="{filename}Craters-of-the-Moon.jpg" alt="Craters-of-the-Moon"/>
+<img src="{static}Craters-of-the-Moon.jpg" alt="Craters-of-the-Moon"/>
<figcaption>Original <a href="http://www.flickr.com/photos/72213316@N00/3725266971/";>Stitched photos of the
Idaho landscape near Craters of the Moon National Monument</a> 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>)</figcaption>
</figure>
<figure>
-<img src="{filename}Craters-of-the-Moon-Mid-Mask.jpg" alt="Craters-of-the-Moon-Mid-Mask"/>
+<img src="{static}Craters-of-the-Moon-Mid-Mask.jpg" alt="Craters-of-the-Moon-Mid-Mask"/>
<figcaption>After an aggressive curve + Mid-Tone mask</figcaption>
</figure>
diff --git a/content/tutorials/Photo_To_Sketch/index.md b/content/tutorials/Photo_To_Sketch/index.md
index 0a16016e..8a90cde7 100644
--- a/content/tutorials/Photo_To_Sketch/index.md
+++ b/content/tutorials/Photo_To_Sketch/index.md
@@ -15,7 +15,7 @@ Tutorial on how to make a nice baby & daddy photo into a nice baby & daddy paint
## 1. Original image
<figure>
-<img src="{filename}original.jpeg" alt="original.jpeg"/>
+<img src="{static}original.jpeg" alt="original.jpeg"/>
</figure>
Nice picture of a baby & dad. Ah.
@@ -23,7 +23,7 @@ Nice picture of a baby & dad. Ah.
## 2. After a Sobel edge detect
<figure>
-<img src="{filename}sobel.jpeg" alt="sobel.jpeg"/>
+<img src="{static}sobel.jpeg" alt="sobel.jpeg"/>
</figure>
Straightforward Sobel edge detect (<span class="filter"><Image> Filters -> Edge-Detect -> Sobel</span>) of
original (don't forget to save a copy of the original) The Sobel edge detect should be done on the background
image (without an alpha channel) rather than a copy of the background (which has an alpha channel).
@@ -31,7 +31,7 @@ Straightforward Sobel edge detect (<span class="filter"><Image> Filters -> Edge-
## 3. Equalised & desaturated Sobel
<figure>
-<img src="{filename}equalised_sobel.jpeg" alt="equalised_sobel.jpeg"/>
+<img src="{static}equalised_sobel.jpeg" alt="equalised_sobel.jpeg"/>
</figure>
Bring out detail with an auto-equalise (<span class="filter"><Image> Layer -> Colors -> Auto ->
Auto-Equalize</span>) of the sobel edge detect, and convert it to greys using desaturate (<span
class="filter"><Image> Layer -> Colors -> Desaturate</span>).
@@ -39,7 +39,7 @@ Bring out detail with an auto-equalise (<span class="filter"><Image> Layer -> Co
## 4. Curves window for how to do a highpass filter
<figure>
-<img src="{filename}highpass.png" alt="highpass.png"/>
+<img src="{static}highpass.png" alt="highpass.png"/>
</figure>
We only want the strong edges, otherwise it'll look crap. To get them, we eliminate the edges with small
magnitude. The easiest way to do this is with the curves tool (<span class="filter"><Image> Image -> Colors
-> Curves</span>) like this.
@@ -49,7 +49,7 @@ We set the curve type to free (which allows discontinuities), and then for the b
## 5. Image after the highpass
<figure>
-<img src="{filename}after_highpass.jpeg" alt="after_highpass.jpeg"/>
+<img src="{static}after_highpass.jpeg" alt="after_highpass.jpeg"/>
</figure>
The result is much cleaner. The only problem is it's white-on-black, when we want black-on-transparent
ideally.
@@ -57,7 +57,7 @@ The result is much cleaner. The only problem is it's white-on-black, when we wan
## 6. L&C dialog for creating an edges mask
<figure>
-<img src="{filename}edges.jpeg" alt="edges.jpeg"/>
+<img src="{static}edges.jpeg" alt="edges.jpeg"/>
</figure>
Small trick to get to black-on-transparent. Invert the Sobel edge detect (you did keep a copy, right?) with
<span class="filter"><Image> Layer -> Colors -> Invert</span> and apply our highpass-filtered copy as a mask.
To do this, open the Layers & Channels dialog (if it's not open already), and add a layer mask to the layer
with the inverted edge detect layer (<span class="filter"><Image> Edit -> Copy</span> with the highpass layer
selected, <span class="filter"><Layer> Add Layer Mask</span> with the inverted edge layer selected, then
select the mask and <span class="filter"><Image> Edit -> Paste</span>) Since we kept the strong edges in the
highpass filtered layer, this means that we end up with a rather nice black-on-transparent layer.
@@ -65,7 +65,7 @@ Small trick to get to black-on-transparent. Invert the Sobel edge detect (you di
## 7. Save of the image above to show effect
<figure>
-<img src="{filename}photo_edges.jpeg" alt="photo_edges.jpeg"/>
+<img src="{static}photo_edges.jpeg" alt="photo_edges.jpeg"/>
</figure>
This is the result of the trick above. It's shown here with a white layer behind it. We could stop here, and
this is a decent sketch effect. For the colouring, we need some more work (mostly slogging, though).
@@ -73,7 +73,7 @@ This is the result of the trick above. It's shown here with a white layer behind
## 8. L&C dialog with set-up for the colouring trick
<figure>
-<img src="{filename}colour_trick.png" alt="colour_trick.png"/>
+<img src="{static}colour_trick.png" alt="colour_trick.png"/>
<figcaption>
images,original image & colouring layer in overlay mode
</figcaption>
@@ -85,7 +85,7 @@ We put our original image back in the background, and set the white layer to ove
## 9. Colouring looks after doing one area of the image
<figure>
-<img src="{filename}starting_colouring.jpeg" alt="starting_colouring.jpeg"/>
+<img src="{static}starting_colouring.jpeg" alt="starting_colouring.jpeg"/>
</figure>
Using the colour-picker tool (looks like an eye-dropper), we select the colour we want to paint from the
original image (just activate the "original image" layer and try to pick a colour representative of an area),
and then we re-activate our colouring layer, which is still in overlay mode. Using a big brush (with the
brush tool for more natural edges) we fill in the area of that colour roughly (doesn't have to be perfect).
You should see the colour darkening as we draw with a colour similar to the background colour.
@@ -93,7 +93,7 @@ Using the colour-picker tool (looks like an eye-dropper), we select the colour w
## 10. Colouring layer in normal mode
<figure>
-<img src="{filename}viewing_colouring.jpeg" alt="viewing_colouring.jpeg"/>
+<img src="{static}viewing_colouring.jpeg" alt="viewing_colouring.jpeg"/>
</figure>
This is what we see if we set the colour drawing layer to normal mode. And we're on our way.
@@ -101,8 +101,7 @@ This is what we see if we set the colour drawing layer to normal mode. And we're
## 11. Finished with a completed colour layer
<figure>
-<img src="{filename}pencil_and_paint_sketch.jpeg" alt="pencil_and_paint_sketch.jpeg"/>
+<img src="{static}pencil_and_paint_sketch.jpeg" alt="pencil_and_paint_sketch.jpeg"/>
</figure>
After some effort, all the regions get filled in. Final touches to make faces and the like look better for
shadows and highlights were accomplished by selecting a representative shadow/highlight colour, and adding
the extra bits with the airbrush tool (looks like an airbrush). After all our work, we end up with this very
nice looking painting effect.
-
diff --git a/content/tutorials/Quickmask/index.md b/content/tutorials/Quickmask/index.md
index ba18c50e..e169464c 100644
--- a/content/tutorials/Quickmask/index.md
+++ b/content/tutorials/Quickmask/index.md
@@ -10,7 +10,7 @@ Text and images Copyright (C) 2002 [Zach Beane](mailto:xachNOSPAM gimp org) and
## Intention
<figure>
-<img src="{filename}blur-15.jpg" alt="blur-15.jpg"/>
+<img src="{static}blur-15.jpg" alt="blur-15.jpg"/>
</figure>
This tutorial shows how you can do vignette effects using a feature of GIMP called QuickMask. QuickMask is a
convenient way to modify selections using pixel-changing tools such as the paintbrush, eraser, or any plug-in
filter. It lets you make very precise adjustments to your selections. This tutorial doesn't use QuickMask for
complex masking; it's intended to show how you can use it to create quick and easy vignette effects.
@@ -18,7 +18,7 @@ This tutorial shows how you can do vignette effects using a feature of GIMP call
## Step 1
<figure>
-<img src="{filename}image.1.jpg" alt="image.1.jpg"/>
+<img src="{static}image.1.jpg" alt="image.1.jpg"/>
</figure>
For your first step, load up an image. Any image will do. GIMP 1.1.7, a development version of GIMP,
introduced QuickMask. The QuickMask control button is located at the lower-left side of the image.
@@ -26,7 +26,7 @@ For your first step, load up an image. Any image will do. GIMP 1.1.7, a developm
## Step 2
<figure>
-<img src="{filename}image.2.jpg" alt="image.2.jpg"/>
+<img src="{static}image.2.jpg" alt="image.2.jpg"/>
</figure>
First, make a rectangular selection around the edge of the image. Then click on the red-bordered QuickMask
icon in the lower-left corner of your image.
@@ -34,7 +34,7 @@ First, make a rectangular selection around the edge of the image. Then click on
## Step 3
<figure>
-<img src="{filename}image.3.jpg" alt="image.3.jpg"/>
+<img src="{static}image.3.jpg" alt="image.3.jpg"/>
</figure>
After you click the red QuickMask button, a translucent red mask appears around your selection. This red
mask represents the outside of your selection. When you click the dashed QuickMask button to go back into
normal selection mode, anything red will not be selected, and anything clear will be. So, let's start playing
with this mask. First, right click on the image and select
@@ -46,7 +46,7 @@ from the menu. Apply the filter, and watch what happens to the mask.
## Step 4
<figure>
-<img src="{filename}image.4.jpg" alt="image.4.jpg"/>
+<img src="{static}image.4.jpg" alt="image.4.jpg"/>
</figure>
The mask gets all wavy. Let's add one more effect: `Filters → Blur → Gaussian Blur (RLE)`.
@@ -54,7 +54,7 @@ The mask gets all wavy. Let's add one more effect: `Filters → Blur → Gaussia
## Step 5
<figure>
-<img src="{filename}image.5.jpg" alt="image.5.jpg"/>
+<img src="{static}image.5.jpg" alt="image.5.jpg"/>
</figure>
Now that there is a soft edge on the mask, click the dashed QuickMask button to convert the mask back into a
selection.
@@ -62,7 +62,7 @@ Now that there is a soft edge on the mask, click the dashed QuickMask button to
## Step 6
<figure>
-<img src="{filename}image.6.jpg" alt="image.6.jpg"/>
+<img src="{static}image.6.jpg" alt="image.6.jpg"/>
</figure>
See how the selection follows the mask? This is a powerful feature of QuickMask. You can use it to modify
any existing selection, and you can even use it to create new selections. Our last step is to use `Select →
Invert` and `Edit → Fill with BG Color`. The result, a soft white fade into the background, is shown in the
final step.
@@ -70,7 +70,7 @@ See how the selection follows the mask? This is a powerful feature of QuickMask.
## Final
<figure>
-<img src="{filename}image.7.jpg" alt="image.7.jpg"/>
+<img src="{static}image.7.jpg" alt="image.7.jpg"/>
</figure>
And there you have it. Some more examples are listed below. Happy GIMPing!
@@ -78,19 +78,19 @@ And there you have it. Some more examples are listed below. Happy GIMPing!
## Examples
<figure>
-<img src="{filename}spread-11.png" alt="spread-11.png"/>
+<img src="{static}spread-11.png" alt="spread-11.png"/>
</figure>
The above image used `Filters → Noise → Spread`, with horizontal and vertical settings at 11, to get the
effect.
<figure>
-<img src="{filename}newsprint.png" alt="newsprint.png"/>
+<img src="{static}newsprint.png" alt="newsprint.png"/>
</figure>
I used some blurring and the `Filters → Distorts → Newsprint` plugin to get this effect.
<figure>
-<img src="{filename}pixelize-10.png" alt="pixelize-10.png"/>
+<img src="{static}pixelize-10.png" alt="pixelize-10.png"/>
</figure>
As in the tutorial, this one used Waves, but instead of blurring, I used `Filters → Blur → Pixelize` instead.
diff --git a/content/tutorials/Red_Eye_Removal/index.md b/content/tutorials/Red_Eye_Removal/index.md
index 91b5eea0..95c23539 100644
--- a/content/tutorials/Red_Eye_Removal/index.md
+++ b/content/tutorials/Red_Eye_Removal/index.md
@@ -17,7 +17,7 @@ It used to be that the photos with red eye weren't really worth fixing as only c
## Step 1
<figure>
-<img src="{filename}zoom1.png" alt="zoom1.png"/>
+<img src="{static}zoom1.png" alt="zoom1.png"/>
</figure>
I zoomed in on the image, 4:1 ratio, as this is almost pixel by pixel work. I ended up using the 5 x 5 fuzzy
brush that came with the GIMP tarball. As usual, your choice depends on the resolution of your image. A fuzzy
brush is highly recommended. On this web sized image, the 3 x 3 fuzzy brush didn't work fast enough. As
always, you can `Edit → Undo` until you make the right selections.
@@ -25,7 +25,7 @@ I zoomed in on the image, 4:1 ratio, as this is almost pixel by pixel work. I en
## Step 2
<figure>
-<img src="{filename}dialog-channels-sm.png" alt="dialog-channels-sm.png"/>
+<img src="{static}dialog-channels-sm.png" alt="dialog-channels-sm.png"/>
</figure>
A long time ago, someone suggested on the gimp-user list that the Layers, Channels and Paths Dialog always
remain open while you use GIMP. Some three years later, I still follow and give this advice. So, if your
Layers,Channels and Paths Dialog is not open, open it and leave it open. Select the Channels Tab. Deactivate
the Green and Blue Channels by clicking to the right of the thumbnails in the dialog window.
@@ -35,19 +35,19 @@ The image should still look like the screenshot of the close up in step 1. If it
## Step 3
<figure>
-<img src="{filename}burnopts-sm.png" alt="burnopts-sm.png"/>
+<img src="{static}burnopts-sm.png" alt="burnopts-sm.png"/>
</figure>
Make certain you have a good brush selected (for this image I used the 5 x 5 fuzzy) Then select the Dodge
and Burn Tool.
-<img src="{filename}dodgeorburn.png" alt="dodgeorburn.png"/> Double click on the button to get the Tool
Options dialog. My dialog defaults to dodge and midtones, for this project, choose burn and hightlights (as
illustrated). Touch all of the red in the eyes with the burn tool. I think that I used the burn tool on the
midtones just a little bit also. GIMP doesn't have a magic button to fix red eyes with, but it has the tools.
It has been my experience that each image is slightly different and I sort of like the control that GIMP
gives you...
+<img src="{static}dodgeorburn.png" alt="dodgeorburn.png"/> Double click on the button to get the Tool
Options dialog. My dialog defaults to dodge and midtones, for this project, choose burn and hightlights (as
illustrated). Touch all of the red in the eyes with the burn tool. I think that I used the burn tool on the
midtones just a little bit also. GIMP doesn't have a magic button to fix red eyes with, but it has the tools.
It has been my experience that each image is slightly different and I sort of like the control that GIMP
gives you...
tigert warned that this method can leave the white spots in the eyes slightly green. I have found this to be
true, however so far it hasn't been enough green to worry about. Given a photo where the green will make a
difference, you can use the same tool combination on the green channel, just move the opacity slider to a
smaller percentage. `Edit → Undo` until you get it right.
## Final
<figure>
-<img src="{filename}zoom2.png" alt="zoom2.png"/>
+<img src="{static}zoom2.png" alt="zoom2.png"/>
</figure>
... looking so much better!
@@ -57,8 +57,7 @@ The very best fix, of course would be to prevent it from happening. Due to the n
Other personalities have other portrait problems. There is a small handful of people who have no problem
looking into the camera lens, but anticipate the flash and blink at the wrong moment. This causes the
portrait to look like the object is starting to sneeze. (this is what happens to me) If you know of a method
to prevent this, please email me.
<figure>
-<img src="{filename}swimming2.jpg" alt="swimming2.jpg"/>
+<img src="{static}swimming2.jpg" alt="swimming2.jpg"/>
</figure>
What a cute baby. This is Maurits and his baby. He is one of a growing list of developers that are changing
their babies while working on GIMP. I watched work on WinGIMP occuring between diaper changings and feedings
also. *chuckle*
-
diff --git a/content/tutorials/Reducing_CCD_Noise/index.md b/content/tutorials/Reducing_CCD_Noise/index.md
index c59b02e3..7e77fcb9 100644
--- a/content/tutorials/Reducing_CCD_Noise/index.md
+++ b/content/tutorials/Reducing_CCD_Noise/index.md
@@ -10,8 +10,8 @@ Text and images Copyright (C) 2002 [Eric R. Jeschke](mailto:ericNOSPAM@redskiesa
## Intention
<figure>
-<img src="{filename}before.jpg" alt="before.jpg"/>
-<img src="{filename}after.jpg" alt="after.jpg"/>
+<img src="{static}before.jpg" alt="before.jpg"/>
+<img src="{static}after.jpg" alt="after.jpg"/>
</figure>
Images captured by a CCD or CMOS imaging chip will often have some noise present. This noise typically can
be seen as RGB "flecks", especially noticable in the in the shadow areas of an image. The red and blue
channels are especially susceptible. Higher ISO settings and higher ambient temperatures increase the
likelihood of acquiring this noise along with your image.
@@ -25,8 +25,8 @@ One procedure that works reasonably well is to apply the Despeckle filter. Unfor
## Step 1
<figure>
-<img src="{filename}image-original.jpg" alt="image-original.jpg"/>
-<img src="{filename}image-original-zoom100.jpg" alt="image-original-zoom100.jpg"/>
+<img src="{static}image-original.jpg" alt="image-original.jpg"/>
+<img src="{static}image-original-zoom100.jpg" alt="image-original-zoom100.jpg"/>
</figure>
Here is the original image. Notice how bad the noise is, especially in the shadows of the face and in the
white wall (back right).
@@ -34,8 +34,8 @@ Here is the original image. Notice how bad the noise is, especially in the shado
## Step 2
<figure>
-<img src="{filename}despeckle.jpg" alt="despeckle.jpg"/>
-<img src="{filename}image-despeckled-zoom100.jpg" alt="image-despeckled-zoom100.jpg"/>
+<img src="{static}despeckle.jpg" alt="despeckle.jpg"/>
+<img src="{static}image-despeckled-zoom100.jpg" alt="image-despeckled-zoom100.jpg"/>
</figure>
Right-click in the image and select `Filters → Enhance → Despeckle`.
@@ -48,7 +48,7 @@ Unfortunately, you may also notice that the image is softer; the despeckle filte
## Step 3
<figure>
-<img src="{filename}image-final-zoom100.jpg" alt="image-final-zoom100.jpg"/>
+<img src="{static}image-final-zoom100.jpg" alt="image-final-zoom100.jpg"/>
</figure>
For best results, especially with a noisy image, you'll want to use smart sharpening, explained elsewhere on
this site.
@@ -57,8 +57,8 @@ This particular image was edge sharpened on all RGB channels. If you find edge (
## Step 4
<figure>
-<img src="{filename}image-final.jpg" alt="image-final.jpg"/>
-<img src="{filename}image-original.jpg" alt="image-original.jpg"/>
+<img src="{static}image-final.jpg" alt="image-final.jpg"/>
+<img src="{static}image-original.jpg" alt="image-original.jpg"/>
</figure>
Zoomed out (upper left). Compare to the original (upper right) Look at the arm and the white wall in back
right. Much better.
@@ -72,8 +72,8 @@ Zoomed out (upper left). Compare to the original (upper right) Look at the arm a
## Other Examples
<figure>
-<img src="{filename}example2-before.jpg" alt="example2-before.jpg"/>
-<img src="{filename}example2-after.jpg" alt="example2-after.jpg"/>
+<img src="{static}example2-before.jpg" alt="example2-before.jpg"/>
+<img src="{static}example2-after.jpg" alt="example2-after.jpg"/>
</figure>
## Further Reading on Reducing CCD Noise
diff --git a/content/tutorials/Selective_Color/index.md b/content/tutorials/Selective_Color/index.md
index 2c50dbe0..e44a9d0e 100644
--- a/content/tutorials/Selective_Color/index.md
+++ b/content/tutorials/Selective_Color/index.md
@@ -11,7 +11,7 @@ Text and images Copyright (C) 2002 [Eric R. Jeschke](mailto:ericNOSPAM@redskiesa
## Intention
<figure>
-<img src="{filename}before.jpg" alt="before.jpg"/> <img src="{filename}after.jpg" alt="after.jpg"/>
+<img src="{static}before.jpg" alt="before.jpg"/> <img src="{static}after.jpg" alt="after.jpg"/>
</figure>
In this tutorial I will explain how to convert a color photograph to a B&W one with color restored to
selective areas. With the right subject this can give really striking results, as you can see for yourself.
This technique is elsewhere referred to sometimes as "hand coloring" :-)
@@ -23,7 +23,7 @@ Giving credit where credit is due: I did not come up with this method. I adapted
## The Procedure
<figure>
-<img src="{filename}original.jpg" alt="original.jpg"/>
+<img src="{static}original.jpg" alt="original.jpg"/>
</figure>
Here is the original example image, loaded into GIMP.
@@ -31,7 +31,7 @@ Here is the original example image, loaded into GIMP.
## Step 1
<figure>
-<img src="{filename}image2.jpg" alt="image2.jpg"/>
+<img src="{static}image2.jpg" alt="image2.jpg"/>
</figure>
Duplicate the image (<kbd>Ctrl+D</kbd>).
@@ -42,7 +42,7 @@ In this example, I tried the [channel mixer](/tutorials/Color2BW/#channelmixer),
## Step 2
<figure>
-<img src="{filename}layers1.jpg" alt="layers1.jpg"/> <img src="{filename}newlayeroptions.jpg"
alt="newlayeroptions.jpg"/> <img src="{filename}layers2.jpg" alt="layers2.jpg"/>
+<img src="{static}layers1.jpg" alt="layers1.jpg"/> <img src="{static}newlayeroptions.jpg"
alt="newlayeroptions.jpg"/> <img src="{static}layers2.jpg" alt="layers2.jpg"/>
</figure>
Open the Layers dialog (<kbd>Ctrl+L</kbd>). Make sure that the original color image is selected in the Image
drop down box. Click on the new layer button at the bottom of the dialog.
@@ -52,7 +52,7 @@ Make sure the new layer is selected in the layers dialog.
## Step 3
<figure>
-<img src="{filename}layers3.jpg" alt="layers3.jpg"/> <img src="{filename}layers4.jpg" alt="layers4.jpg"/>
+<img src="{static}layers3.jpg" alt="layers3.jpg"/> <img src="{static}layers4.jpg" alt="layers4.jpg"/>
</figure>
Go to the B&W image and select all, then copy (<kbd>Ctrl+A</kbd> then <kbd>Ctrl+C</kbd>). Then go to the
color image window and paste (<kbd>Ctrl+V</kbd>). The B&W image should be pasted into that layer, obscuring
the color image.
@@ -62,7 +62,7 @@ You can close the B&W image window you just copied from now, if you want.
## Step 4
<figure>
-<img src="{filename}addmaskoptions.jpg" alt="addmaskoptions.jpg"/> <img src="{filename}layers5.jpg"
alt="layers5.jpg"/>
+<img src="{static}addmaskoptions.jpg" alt="addmaskoptions.jpg"/> <img src="{static}layers5.jpg"
alt="layers5.jpg"/>
</figure>
In the Layers dialog, right-click on the B&W layer and select "Add Layer Mask". In the Add Mask Options
dialog, select White (Full Opacity).
@@ -70,16 +70,16 @@ In the Layers dialog, right-click on the B&W layer and select "Add Layer Mask".
## Step 5
<figure>
-<img src="{filename}toolbox.jpg" alt="toolbox.jpg"/> <img src="{filename}brushes1.jpg" alt="brushes1.jpg"/>
<img src="{filename}image3.jpg" alt="image3.jpg"/>
+<img src="{static}toolbox.jpg" alt="toolbox.jpg"/> <img src="{static}brushes1.jpg" alt="brushes1.jpg"/> <img
src="{static}image3.jpg" alt="image3.jpg"/>
</figure>
Make sure that Black is selected as the foreground color in the toolbox. We're going to paint transparency
into the layer mask to reveal the color image below.
-Bring up the Brushes dialog (`Dialogs → Brushes`) and select a big brush. In the toolbox, select the paint
tool (<img src="{filename}paint.jpg" alt="paint.jpg"/>). Begin painting the interior of the parts you want to
be in color.
+Bring up the Brushes dialog (`Dialogs → Brushes`) and select a big brush. In the toolbox, select the paint
tool (<img src="{static}paint.jpg" alt="paint.jpg"/>). Begin painting the interior of the parts you want to
be in color.
## Step 6
<figure>
-<img src="{filename}image4.jpg" alt="image4.jpg"/>
+<img src="{static}image4.jpg" alt="image4.jpg"/>
</figure>
When you get to the edges of the colored part, zoom in to make life easier.
@@ -87,7 +87,7 @@ When you get to the edges of the colored part, zoom in to make life easier.
## Step 7
<figure>
-<img src="{filename}brushes2.jpg" alt="brushes2.jpg"/> <img src="{filename}image5.jpg" alt="image5.jpg"/>
+<img src="{static}brushes2.jpg" alt="brushes2.jpg"/> <img src="{static}image5.jpg" alt="image5.jpg"/>
</figure>
At the very boundaries of the colored image I typically zoom in to 300% or so. Switch to a small, feathered
brush and very carefully paint the edges.
@@ -97,7 +97,7 @@ If you only paint a little at a time it makes it much easier to use GIMP's excel
## Final Step
<figure>
-<img src="{filename}final.jpg" alt="final.jpg"/>
+<img src="{static}final.jpg" alt="final.jpg"/>
</figure>
When your all done, go over the colored part carefully to see if there are any gray (opaque) specks that you
missed. Then zoom out and have a look. Voila!
@@ -105,7 +105,7 @@ When your all done, go over the colored part carefully to see if there are any g
## Tips
<figure>
-<img src="{filename}tablet.jpg" alt="tablet.jpg"/>
+<img src="{static}tablet.jpg" alt="tablet.jpg"/>
</figure>
* For this kind of fine paint work, a pen tablet like this Wacom one is very useful. For photo retouching
you don't need any bigger than a 4x5 model.
@@ -115,7 +115,7 @@ When your all done, go over the colored part carefully to see if there are any g
## Other Examples
<figure>
-<img src="{filename}example3.jpg" alt="example3.jpg"/><br/><img src="{filename}example2.jpg"
alt="example2.jpg"/>
+<img src="{static}example3.jpg" alt="example3.jpg"/><br/><img src="{static}example2.jpg" alt="example2.jpg"/>
</figure>
## Further Reading
diff --git a/content/tutorials/Selective_Gaussian_Blur/index.md
b/content/tutorials/Selective_Gaussian_Blur/index.md
index f2e7bbc2..e451947c 100644
--- a/content/tutorials/Selective_Gaussian_Blur/index.md
+++ b/content/tutorials/Selective_Gaussian_Blur/index.md
@@ -17,11 +17,11 @@ The basic idea behind selective Gaussian blur is that areas in the photo with co
## Step 1
<figure>
-<img src="{filename}01.png" alt="01.png"/> <img src="{filename}02.jpg" alt="02.jpg"/>
+<img src="{static}01.png" alt="01.png"/> <img src="{static}02.jpg" alt="02.jpg"/>
</figure>
<figure>
-<img src="{filename}03.png" alt="03.png"/> <img src="{filename}04.jpg" alt="04.jpg"/>
+<img src="{static}03.png" alt="03.png"/> <img src="{static}04.jpg" alt="04.jpg"/>
</figure>
Since the selective Gaussian blur filter doesn't have a preview and is quite heavy to compute (proportional
with blur radius), it's easier to only work on a cropped version of you picture. Select the crop tool from
the tool box, draw a selection and click "crop".
@@ -31,7 +31,7 @@ For best results, this should a part where there's some noise you want to remove
## Step 2
<figure>
-<img src="{filename}05.jpg" alt="05.jpg"/>
+<img src="{static}05.jpg" alt="05.jpg"/>
</figure>
The next thing is to experiment with different combinations of the settings ("blur radius" and "maximum
delta") in the selective Gaussian blur filter.
@@ -39,15 +39,15 @@ The next thing is to experiment with different combinations of the settings ("bl
Normally I find that both settings should be between 5 and 10, where low numbers has less effect and higher
numbers more, but this is very depending on the camera. In short, maximum delta should be just high enough
for the filter to kick in on the noise and blur radius should be just high enough to remove it (actually
blend it with neighboring areas).
<figure>
-<img src="{filename}06.png" alt="06.png"/> <img src="{filename}07.jpg" alt="07.jpg"/>
+<img src="{static}06.png" alt="06.png"/> <img src="{static}07.jpg" alt="07.jpg"/>
</figure>
<figure>
-<img src="{filename}08.png" alt="08.png"/> <img src="{filename}09.jpg" alt="09.jpg"/>
+<img src="{static}08.png" alt="08.png"/> <img src="{static}09.jpg" alt="09.jpg"/>
</figure>
<figure>
-<img src="{filename}15.png" alt="15.png"/> <img src="{filename}00.jpg" alt="00.jpg"/>
+<img src="{static}15.png" alt="15.png"/> <img src="{static}00.jpg" alt="00.jpg"/>
</figure>
For a more in depth explanation of what the settings do see
[https://docs.gimp.org/2.8/en/plug-in-sel-gauss.html](https://docs.gimp.org/2.8/en/plug-in-sel-gauss.html).
@@ -55,8 +55,8 @@ For a more in depth explanation of what the settings do see [https://docs.gimp.o
After playing with the settings a bit I liked the clean look of a blur radius of 10 and maximum delta of
10\. Then I checked what those settings looked like on another crop (which is always a good idea to do), I
decided that it was on the very edge, and maybe even too much. There was too much loss of detail in the hair.
<figure>
-<img src="{filename}13.jpg" alt="13.jpg"/><br/>
-<img src="{filename}15.png" alt="15.png"/> <img src="{filename}16.jpg" alt="16.jpg"/>
+<img src="{static}13.jpg" alt="13.jpg"/><br/>
+<img src="{static}15.png" alt="15.png"/> <img src="{static}16.jpg" alt="16.jpg"/>
</figure>
An option would have been to back off a bit and use settings around blur radius 7 and maximum delta 6, but
then again the only offending area was the hair. I finally decided to go with settings of 8/7.
@@ -66,11 +66,11 @@ You'll often find yourself in these arguments with yourself over when it's too m
## The result
<figure>
-<img src="{filename}org_sm.jpg" alt="org_sm.jpg"/>
+<img src="{static}org_sm.jpg" alt="org_sm.jpg"/>
</figure>
<figure>
-<img src="{filename}after_sm.jpg" alt="after_sm.jpg"/>
+<img src="{static}after_sm.jpg" alt="after_sm.jpg"/>
</figure>
After 8 minutes my AMD-K6 300 running Linux finished the process, and I got the following (note they are
resized to 640x480 from 1280x960, you can get the larger files at the bottom of this page):
diff --git a/content/tutorials/Sepia_Toning/index.md b/content/tutorials/Sepia_Toning/index.md
index 0fce56ef..0c93df04 100644
--- a/content/tutorials/Sepia_Toning/index.md
+++ b/content/tutorials/Sepia_Toning/index.md
@@ -9,8 +9,8 @@ Text and images Copyright (C) 2002 [Eric R. Jeschke](mailto:ericNOSPAM@redskiesa
## Intention
<figure>
-<img src="{filename}before.jpg" alt="before.jpg"/>
-<img src="{filename}after.jpg" alt="after.jpg"/>
+<img src="{static}before.jpg" alt="before.jpg"/>
+<img src="{static}after.jpg" alt="after.jpg"/>
</figure>
In this tutorial I'll show you how to sepia tone a color or black and white image. This technique is modeled
on the traditional darkroom method of sepia toning in that the sepia color is applied "unevenly" to areas of
different tonality. It works much better than most of the simple methods I've seen for image editors and
provides great control!
@@ -20,7 +20,7 @@ Giving credit where credit is due: I did not come up with this method. I adapted
## The Procedure
<figure>
-<img src="{filename}original.jpg" alt="original.jpg"/>
+<img src="{static}original.jpg" alt="original.jpg"/>
</figure>
Here is the original image, loaded into GIMP. It has a bit of an old-time look, so I thought it might work
well as a sepia-toned image.
@@ -28,8 +28,8 @@ Here is the original image, loaded into GIMP. It has a bit of an old-time look,
## Step 1
<figure>
-<img src="{filename}decor.jpg" alt="decor.jpg"/>
-<img src="{filename}image-wdecorfu.jpg" alt="image-wdecorfu.jpg"/>
+<img src="{static}decor.jpg" alt="decor.jpg"/>
+<img src="{static}image-wdecorfu.jpg" alt="image-wdecorfu.jpg"/>
</figure>
You can compare the result we will get below to GIMP's built-in Script-Fu for sepia toning (<span
class="filter"><Image> Script-Fu -> Decor -> Old Photo</span>) as shown at right.
@@ -38,7 +38,7 @@ Come back and compare to this when you get to the end of the tutorial.
## Step 2
<figure>
-<img src="{filename}image2.jpg" alt="image2.jpg"/>
+<img src="{static}image2.jpg" alt="image2.jpg"/>
</figure>
Duplicate the original image (<span class="filter"><Image> Image -> Duplicate</span> or <kbd>Ctrl+D</kbd>).
You may want to minimize the original now (or close it) so you don't choose it by mistake.
@@ -51,8 +51,8 @@ In this case I simply did a mode change to grayscale, then back to RGB mode.
## Step 3
<figure>
-<img src="{filename}colorselection.jpg" alt="colorselection.jpg"/>
-<img src="{filename}toolbox2.jpg" alt="toolbox2.jpg"/>
+<img src="{static}colorselection.jpg" alt="colorselection.jpg"/>
+<img src="{static}toolbox2.jpg" alt="toolbox2.jpg"/>
</figure>
Double-click on the foreground color swatch to bring up the Color Selection dialog. Dial in the color
RED=162, GREEN=138 and BLUE=101 (you can experiment with this color too; this is a good starting point
though.)
@@ -60,9 +60,9 @@ Double-click on the foreground color swatch to bring up the Color Selection dial
## Step 4
<figure>
-<img src="{filename}layers1.jpg" alt="layers1.jpg"/>
-<img src="{filename}newlayeroptions.jpg" alt="newlayeroptions.jpg"/>
-<img src="{filename}layers2.jpg" alt="newlayeroptions.jpg"/>
+<img src="{static}layers1.jpg" alt="layers1.jpg"/>
+<img src="{static}newlayeroptions.jpg" alt="newlayeroptions.jpg"/>
+<img src="{static}layers2.jpg" alt="newlayeroptions.jpg"/>
</figure>
Bring up the Layers dialog (<kbd>Ctrl+L</kbd>) and click on the button for a new layer. Give it the name
"Sepia Mask" and choose the option to fill it with the foreground color. Click OK.
@@ -71,8 +71,8 @@ You should see nothing but the color now in the image window, since it obscures
## Step 5
<figure>
-<img src="{filename}addmaskoptions.jpg" alt="addmaskoptions.jpg"/>
-<img src="{filename}layers3.jpg" alt="layers3.jpg"/>
+<img src="{static}addmaskoptions.jpg" alt="addmaskoptions.jpg"/>
+<img src="{static}layers3.jpg" alt="layers3.jpg"/>
</figure>
Right-click on the Sepia Mask layer and select Add Layer Mask. In the Add Mask Options dialog, choose White
(Full Opacity).
@@ -80,8 +80,8 @@ Right-click on the Sepia Mask layer and select Add Layer Mask. In the Add Mask O
## Step 6
<figure>
-<img src="{filename}layers4.jpg" alt="layers4.jpg"/>
-<img src="{filename}image3.jpg" alt="image3.jpg"/>
+<img src="{static}layers4.jpg" alt="layers4.jpg"/>
+<img src="{static}image3.jpg" alt="image3.jpg"/>
</figure>
In the Layers dialog, click on (select) the Background layer. Go up to the image window, select all and copy
(<kbd>Ctrl+A</kbd> then <kbd>Ctrl+C</kbd>). In the Layers dialog, click on the layer mask icon in the Sepia
Mask layer (the little white square). Then go back up to the image window and paste (<kbd>Ctrl+V</kbd>)
@@ -89,8 +89,8 @@ In the Layers dialog, click on (select) the Background layer. Go up to the image
## Step 7
<figure>
-<img src="{filename}layers5.jpg" alt="layers5.jpg"/>
-<img src="{filename}image4.jpg" alt="image4.jpg"/>
+<img src="{static}layers5.jpg" alt="layers5.jpg"/>
+<img src="{static}image4.jpg" alt="image4.jpg"/>
</figure>
In the Layers dialog, click the Anchor button to anchor the pasted image into the layer mask.
@@ -99,8 +99,8 @@ In the image window, invert the color (<span class="filter"><Image> Image -> Col
## Step 8
<figure>
-<img src="{filename}layers6.jpg" alt="layers6.jpg"/>
-<img src="{filename}image5.jpg" alt="image5.jpg"/>
+<img src="{static}layers6.jpg" alt="layers6.jpg"/>
+<img src="{static}image5.jpg" alt="image5.jpg"/>
</figure>
In the Layers dialog, change the Mode (blending mode) of the layer to "Color". This applies the color from
the Sepia Mask layer according to the layer mask to the image.
@@ -109,8 +109,8 @@ You now have your base result. It might be a good idea to save this under a new
## Step 9
<figure>
-<img src="{filename}curves.jpg" alt="curves.jpg"/>
-<img src="{filename}image-curves.jpg" alt="image-curves.jpg"/>
+<img src="{static}curves.jpg" alt="curves.jpg"/>
+<img src="{static}image-curves.jpg" alt="image-curves.jpg"/>
</figure>
Once you've got the base image, you can duplicate it (Ctrl+D), flatten the duplicate (<span
class="filter"><Image> Layers -> Flatten Image</span>) and then experiment with:
@@ -129,8 +129,8 @@ Here I decided that the image was a little flat and so I punched up the contrast
## Step 10
<figure>
-<img src="{filename}decor2.jpg" alt="decor2.jpg"/>
-<img src="{filename}final.jpg" alt="final.jpg"/>
+<img src="{static}decor2.jpg" alt="decor2.jpg"/>
+<img src="{static}final.jpg" alt="final.jpg"/>
</figure>
As a final touch, I ran the "Old Photo" Script-Fu without the "sepia" and "mottle" options. Here is the
final image.
@@ -144,8 +144,8 @@ As a final touch, I ran the "Old Photo" Script-Fu without the "sepia" and "mottl
* The method by which you get a black and white image makes a big difference in how the sepia toning comes
out.
<figure>
-<img src="{filename}grayscale-final-446x512.jpg" alt="grayscale-final-446x512.jpg"/>
-<img src="{filename}desaturate-final-446x512.jpg" alt="desaturate-final-446x512.jpg"/>
+<img src="{static}grayscale-final-446x512.jpg" alt="grayscale-final-446x512.jpg"/>
+<img src="{static}desaturate-final-446x512.jpg" alt="desaturate-final-446x512.jpg"/>
</figure>
The one on the left was from a grayscale conversion (<span class="filter"><Image> Image -> Mode ->
Grayscale</span>); the one on the right started as a desaturate (<span class="filter"><Image> Image -> Colors
-> Desaturate</span>). Notice that there is a lot more blue-channel noise in the right-hand one. This can add
a nice "grain" effect (see tip above also) if that is what you are looking for. For this particular image, I
prefer the smoother tonality and darker contrast of the left-hand image.
diff --git a/content/tutorials/Simple_Animations/index.md b/content/tutorials/Simple_Animations/index.md
index f00953d5..3e6d9470 100644
--- a/content/tutorials/Simple_Animations/index.md
+++ b/content/tutorials/Simple_Animations/index.md
@@ -13,8 +13,8 @@ In this tutorial, you'll learn how to use GIMP's layers in a different manner. U
## Step 1
<figure>
-<img src="{filename}flower.png" alt="flower.png"/>
-<img src="{filename}flower-layers.png" alt="flower-layers.png"/>
+<img src="{static}flower.png" alt="flower.png"/>
+<img src="{static}flower-layers.png" alt="flower-layers.png"/>
</figure>
We'll create a very simple web banner. Let's start with a new image **468x60 px**. Use white as the
background color. Create new transparent layer. Select the whole image with <kbd>Ctrl+A</kbd> and fill it
with black (<kbd>Ctrl+,</kbd>). Shrink the selection by **1 px** (`Selection → shrink`) and delete the
selection with <kbd>Ctrl+K</kbd>. We created a 1 px frame around out banner.
@@ -26,7 +26,7 @@ This part of the tutorial is not the key element, so feel free to experiment. On
## Step 2
<figure>
-<img src="{filename}flower-text.png" alt="flower-text.png"/>
+<img src="{static}flower-text.png" alt="flower-text.png"/>
</figure>
Now we're ready for the actual animation work. We will be creating a banner consisting of, say three lines
of text being animated. Each frame will consist of the flower image and accompanied by some text. I don't
want to make this boring, so lets make it three frames. The first step will naturally be to copy our
flattened image two times using the **duplicate layer** button in the layers window.
@@ -36,7 +36,7 @@ Then we'll use the standard text tool to put a small text note on every frame. A
## Step 3
<figure>
-<img src="{filename}flower-anim.png" alt="flower-anim.png"/>
+<img src="{static}flower-anim.png" alt="flower-anim.png"/>
</figure>
In every GIF animation you are allowed to specify the delay between frames. That way you can create a 12
second animation using only a few frames, because the delay does not have to be constant. In GIMP you specify
the delay as a layer comment. Just double-click the layer comment in the layers' window and a delay in **ms**
enclosed in brackets **()**.
@@ -46,9 +46,9 @@ To check if the timing is good, you can preview the animation using the `Filters
## Step 4
<figure>
-<img src="{filename}selection.png" alt="selection.png"/>
-<img src="{filename}apply-var.png" alt="apply-var.png"/>
-<img src="{filename}easyanim.gif" alt="apply-var.png"/>
+<img src="{static}selection.png" alt="selection.png"/>
+<img src="{static}apply-var.png" alt="apply-var.png"/>
+<img src="{static}easyanim.gif" alt="apply-var.png"/>
</figure>
In the last step, we'll use a very handy function for _applying a filter to multiple layers_. This function
is provided by GAP, the GIMP Animation Package. Please go to the "[Using GAP](/tutorials/Using_GAP/)"
tutorial to learn more about the tool.
@@ -60,7 +60,7 @@ We want to blur the text away in time, so for the first frame, let's specify a l
## Step 5
<figure>
-<img src="{filename}saveas.png" alt="saveas.png"/>
+<img src="{static}saveas.png" alt="saveas.png"/>
</figure>
Now we only need to save our animation as GIF. Before we do that, let's optimize the animation using the
`Filters → Animation → Animation Optimize` function. This will create a new image using a different mode than
what we have now. You can use two different modes for every frame of your animation. You can either use the
**replace** mode (default), which will replace the old frame with the new one. It's like taking the frame out
before adding a new one. The other is the **combine** method, in which the new frame is added to the previous
frame. That way only changes need to be updated. That's what **animation optimize** basically does. The file
size gets tremendously smaller. Now we need to index the image using <span class="filter"><Image>Image→ Mode
→ Indexed</span> function (<kbd>Alt+I</kbd>).
@@ -68,6 +68,5 @@ Now we only need to save our animation as GIF. Before we do that, let's optimize
Try to use as little colors as possible and avoid dithering. Both number of colors and dithering tend to
enlarge the filesize dramaticaly. I used no color dithering and generated 32 color pallette. The file size of
the banner is about 7kB. If you now save the image as GIF, GIMP will ask whether it should save the image as
an animation, which is exactly what we need. In the save as GIF dialog, you can specify the default delay (in
our example it will be used for the blured frames) and disposal method. You can use your WWW browser to check
the animation, or you can use the **animation playback** function in the **animation** section of the image
menu.
<figure>
-<img src="{filename}flower-banner.gif" alt="flower-banner.gif"/>
+<img src="{static}flower-banner.gif" alt="flower-banner.gif"/>
</figure>
-
diff --git a/content/tutorials/Sketch_Effect/index.md b/content/tutorials/Sketch_Effect/index.md
index b916ff6d..cadd544b 100644
--- a/content/tutorials/Sketch_Effect/index.md
+++ b/content/tutorials/Sketch_Effect/index.md
@@ -12,8 +12,8 @@ Meet Marius, my son. :)
<figure>
-<img src="{filename}01-original.jpg" alt="01-original.jpg"/>
-<img src="{filename}09-retouched.jpg" alt="09-retouched.jpg"/>
+<img src="{static}01-original.jpg" alt="01-original.jpg"/>
+<img src="{static}09-retouched.jpg" alt="09-retouched.jpg"/>
</figure>
@@ -24,7 +24,7 @@ High pass filtering means that we filter away the low frequencies of something,
First, duplicate the layer.
<figure>
-<img src="{filename}02-dupdialog.png" alt="02-dupdialog.png"/>
+<img src="{static}02-dupdialog.png" alt="02-dupdialog.png"/>
</figure>
Then Gaussian Blur the top layer with an appropriate radius.
@@ -32,21 +32,21 @@ Then Gaussian Blur the top layer with an appropriate radius.
You need to experiment to find good values, but roughly speaking one can say that the larger the radius, the
wider the high pass filter's frequency response, and the "fatter" the lines in the final sketch. In this
example I used 7 pixels, giving this result;
<figure>
-<img src="{filename}02-blurdialog.png" alt="02-blurdialog.png"/>
-<img src="{filename}02-blurred.jpg" alt="02-blurred.jpg"/>
+<img src="{static}02-blurdialog.png" alt="02-blurdialog.png"/>
+<img src="{static}02-blurred.jpg" alt="02-blurred.jpg"/>
</figure>
Now we have a low pass filtered version of our image; all gradients and no detail. Exactly the opposite of
what we wanted. So, how do we obtain a high pass filtered version? Why, we subtract it from our original, of
course. A good way to do that is to simply Invert the image, and blend it 50-50 with the original. First,
`Image → Colors → Invert`;
<figure>
-<img src="{filename}03-inverted.jpg" alt="03-inverted.jpg"/>
+<img src="{static}03-inverted.jpg" alt="03-inverted.jpg"/>
</figure>
Then, to blend the two, we adjust the Layer's Opacity slider to 50%, and our high pass filtered image
appears;
<figure>
-<img src="{filename}04-dialog.png" alt="04-dialog.png"/>
-<img src="{filename}05-highpass.jpg" alt="05-highpass.jpg"/>
+<img src="{static}04-dialog.png" alt="04-dialog.png"/>
+<img src="{static}05-highpass.jpg" alt="05-highpass.jpg"/>
</figure>
Now it's time to Merge the two layers, so that we can continue to process them as one. Right-click on the
top layer and pick Merge Down.
@@ -54,8 +54,8 @@ Now it's time to Merge the two layers, so that we can continue to process them a
Now, back to the image. Was the effect a bit too subtle, perhaps? While not necessary, we can apply the
Levels tool (<span class="filter">Layer->Colors->Levels</span>) to increase the contrast a bit, so that it's
easier to inspect visually. In this example, I set Input Levels to 100-155;
<figure>
-<img src="{filename}05-dialog.png" alt="05-dialog.png"/>
-<img src="{filename}06-highpass-contrast.jpg" alt="06-highpass-contrast.jpg"/>
+<img src="{static}05-dialog.png" alt="05-dialog.png"/>
+<img src="{static}06-highpass-contrast.jpg" alt="06-highpass-contrast.jpg"/>
</figure>
## 2. The sketch part
@@ -65,21 +65,20 @@ Now it's time to make the image background white. First, <span class="filter">La
The primary target of experimentation would be the gamma value field in the middle (the grey triangle just
below the histogram). With a bit of tweaking, you could end up with something like this;
<figure>
-<img src="{filename}06-dialog.png" alt="06-dialog.png"/>
-<img src="{filename}07-white.jpg" alt="07-white.jpg"/>
+<img src="{static}06-dialog.png" alt="06-dialog.png"/>
+<img src="{static}07-white.jpg" alt="07-white.jpg"/>
</figure>
That's pretty much it. I tend to want to hand-polish my images to get rid of various imperfections, though.
Below is the result of softening the contrast on the lower right region, which is where the bright skin fell
against the black background; The higher the contrast, the stronger the lines. I also fine-tuned the overall
contrast (with Levels) to get rid of some of the noise in the face;
<figure>
-<img src="{filename}08-brightened.jpg" alt="08-brightened.jpg"/>
+<img src="{static}08-brightened.jpg" alt="08-brightened.jpg"/>
</figure>
Finally I wanted to remove the annoying shadow below his chin and some of the specks scattered around his
face, so I manually hand-brushed away parts of it, giving the final result;
<figure>
-<img src="{filename}09-retouched.jpg" alt="09-retouched.jpg"/>
+<img src="{static}09-retouched.jpg" alt="09-retouched.jpg"/>
</figure>
Voila. That's it. Hope you liked it. :)
-
diff --git a/content/tutorials/Smart_Sharpening/index.md b/content/tutorials/Smart_Sharpening/index.md
index 3ccd05a1..1798e768 100644
--- a/content/tutorials/Smart_Sharpening/index.md
+++ b/content/tutorials/Smart_Sharpening/index.md
@@ -9,8 +9,8 @@ Text and images Copyright (C) 2002 [Eric R. Jeschke](mailto:ericNOSPAM@redskiesa
## Intention
<figure>
-<img src="{filename}before.jpg" alt="before.jpg"/>
-<img src="{filename}after.jpg" alt="after.jpg"/>
+<img src="{static}before.jpg" alt="before.jpg"/>
+<img src="{static}after.jpg" alt="after.jpg"/>
</figure>
In this tutorial I'll show you how to do smart sharpening of your images. Applying an unsharp mask to an
entire image is not always appropriate. A really good example of this is when you have an image with a lot of
high ISO noise or film grain; applying across-the-board sharpening will enhance the noise/grain and make it
even more visible, especially in large prints. Often there will be large areas of the image that you know you
don't want to sharpen (e.g. a blue sky--the blue channel tends to get a lot of noise).
@@ -31,7 +31,7 @@ You may want to maximize your browser window to properly see this tutorial. I di
## Step 1
<figure>
-<img src="{filename}image-original.jpg" alt="image-original.jpg"/>
+<img src="{static}image-original.jpg" alt="image-original.jpg"/>
</figure>
Here's the original image loaded into GIMP. It is noticeably soft, probably due to bad autofocus. It really
shows up in prints.
@@ -41,9 +41,9 @@ Here's the original image loaded into GIMP. It is noticeably soft, probably due
## Step 2
<figure>
-<img src="{filename}decompose.jpg" alt="decompose.jpg"/>
-<img src="{filename}layers1.jpg" alt="layers1.jpg"/><br/>
-<img src="{filename}image-lab-decomposed.jpg" alt="image-lab-decomposed.jpg"/>
+<img src="{static}decompose.jpg" alt="decompose.jpg"/>
+<img src="{static}layers1.jpg" alt="layers1.jpg"/><br/>
+<img src="{static}image-lab-decomposed.jpg" alt="image-lab-decomposed.jpg"/>
</figure>
Duplicate the image by pressing <kbd>Ctrl+D</kbd> or right-click and select <span class="filter"><Image>
Image -> Duplicate</span>. It might be wise to minimize the original image window now. You can open it later
to compare to the result.
@@ -61,8 +61,8 @@ At this point I usually turn off visibility of the A and B layers in the Layers
## Step 3
<figure>
-<img src="{filename}edgedetection.jpg" alt="edgedetection.jpg"/>
-<img src="{filename}image-edgedetect-grayscale.jpg" alt="image-edgedetect-grayscale.jpg"/>
+<img src="{static}edgedetection.jpg" alt="edgedetection.jpg"/>
+<img src="{static}image-edgedetect-grayscale.jpg" alt="image-edgedetect-grayscale.jpg"/>
</figure>
Go to the duplicate image. Right-click and select <span class="filter"><Image> Filters -> Edge Detect ->
Edge</span>. In the Edge Detect dialog box, select a parameter value of the appropriate size for the edges in
your image. You may need to experiment with this. For the example image I chose 6.
@@ -74,8 +74,8 @@ Now convert the edges image to grayscale by right clicking on it and selecting <
## Step 4
<figure>
-<img src="{filename}levels1.jpg" alt="levels1.jpg"/>
-<img src="{filename}image-edgedetect-grayscale-levels1.jpg" alt="image-edgedetect-grayscale-levels1.jpg"/>
+<img src="{static}levels1.jpg" alt="levels1.jpg"/>
+<img src="{static}image-edgedetect-grayscale-levels1.jpg" alt="image-edgedetect-grayscale-levels1.jpg"/>
</figure>
The next step is to adjust the tonality a little so that areas that need sharpening are really white and
anything that doesn't need sharpening at all is really black.
@@ -87,8 +87,8 @@ How much you'll need to tweak this really depends on the image. There wasn't a l
## Step 5
<figure>
-<img src="{filename}iirgaussianblur.jpg" alt="iirgaussianblur.jpg"/>
-<img src="{filename}image-edgedetect-grayscale-levels-blur.jpg"
alt="image-edgedetect-grayscale-levels-blur.jpg"/>
+<img src="{static}iirgaussianblur.jpg" alt="iirgaussianblur.jpg"/>
+<img src="{static}image-edgedetect-grayscale-levels-blur.jpg"
alt="image-edgedetect-grayscale-levels-blur.jpg"/>
</figure>
Now apply a gaussian blur (<span class="filter"><Image> Filters -> Blur -> Gaussian Blur</span>) to smooth
out the edges a little. A radius of between 3 and 10 pixels (horizontal and vertical) should be enough. In
the example I used 7.
@@ -96,8 +96,8 @@ Now apply a gaussian blur (<span class="filter"><Image> Filters -> Blur -> Gauss
## Step 6
<figure>
-<img src="{filename}levels2.jpg" alt="levels2.jpg"/>
-<img src="{filename}image-edgedetect-grayscale-levels2.jpg" alt="image-edgedetect-grayscale-levels2.jpg"/>
+<img src="{static}levels2.jpg" alt="levels2.jpg"/>
+<img src="{static}image-edgedetect-grayscale-levels2.jpg" alt="image-edgedetect-grayscale-levels2.jpg"/>
</figure>
If you want to you can use Levels again to adjust the white and black points of the mask. I find this is
usually a good idea after the blur.
@@ -107,51 +107,51 @@ In this example I pulled the white point slider down a bit.
## Step 7
<figure>
-<img src="{filename}layers2.jpg" alt="layers2.jpg"/>
-<img src="{filename}newchanneloptions.jpg" alt="newchanneloptions.jpg"/><br/>
-<img src="{filename}layers3.jpg" alt="layers3.jpg"/>
+<img src="{static}layers2.jpg" alt="layers2.jpg"/>
+<img src="{static}newchanneloptions.jpg" alt="newchanneloptions.jpg"/><br/>
+<img src="{static}layers3.jpg" alt="layers3.jpg"/>
</figure>
Open the Layers dialog. Select the LAB image (if HSV, value) in the drop down box at the top and then click
on the Channels tab.
-Click on the new channel button () at the bottom of the dialog to create
a new channel. Name it "Sharpening Mask".
+Click on the new channel button () at the bottom of the dialog to create a
new channel. Name it "Sharpening Mask".
## Step 8
<figure>
-<img src="{filename}layers4.jpg" alt="layers4.jpg"/>
+<img src="{static}layers4.jpg" alt="layers4.jpg"/>
</figure>
<figure>
-<img src="{filename}layers5.jpg" alt="layers5.jpg"/>
-<img src="{filename}image-lab-pastemask.jpg" alt="image-lab-pastemask.jpg"/>
+<img src="{static}layers5.jpg" alt="layers5.jpg"/>
+<img src="{static}image-lab-pastemask.jpg" alt="image-lab-pastemask.jpg"/>
</figure>
Right-click in the blurred/edges image window and <span class="filter"><Image> Select -> All</span>.
Right-click again and select <span class="filter"><Image> Edit -> Copy</span>. (Alternatively you can use
keyboard shortcuts <kbd>Ctrl+A</kbd> and <kbd>Ctrl+C</kbd> in succession).
In the Layers dialog, make sure the Sharpening Mask channel is selected. Go back to the LAB (value) window
and paste (<span class="filter"><Image> Edit -> Paste</span> or <kbd>Ctrl+V</kbd>).
-Select the Layers tab in the Layers dialog and click on the anchor button ()
to anchor the floating image.
+Select the Layers tab in the Layers dialog and click on the anchor button () to
anchor the floating image.
## Step 9
<figure>
-<img src="{filename}layers6.jpg" alt="layers6.jpg"/>
-<img src="{filename}image-lab-selection.jpg" alt="image-lab-selection.jpg"/>
+<img src="{static}layers6.jpg" alt="layers6.jpg"/>
+<img src="{static}image-lab-selection.jpg" alt="image-lab-selection.jpg"/>
</figure>
Click on the Channels tab in the Layers dialog. You should see a tiny version of the sharpening mask in the
channel icon, indicating that you properly pasted the sharpening mask into the new channel. At this point you
may wish to click on the eye icon to make the sharpening mask invisible.
-Select the Sharpening Mask channel and click the "Channel to Selection" button
(). You should see "marching ants".
+Select the Sharpening Mask channel and click the "Channel to Selection" button
(). You should see "marching ants".
You can experiment with feathering the selection here if you want; I usually don't.
## Step 10
<figure>
-<img src="{filename}layers7.jpg" alt="layers7.jpg"/>
-<img src="{filename}unsharpmask.jpg" alt="unsharpmask.jpg"/><br/>
-<img src="{filename}image-lab-sharpened-zoomed.jpg" alt="image-lab-sharpened-zoomed.jpg"/>
+<img src="{static}layers7.jpg" alt="layers7.jpg"/>
+<img src="{static}unsharpmask.jpg" alt="unsharpmask.jpg"/><br/>
+<img src="{static}image-lab-sharpened-zoomed.jpg" alt="image-lab-sharpened-zoomed.jpg"/>
</figure>
**Important:** in the Layers dialog, click on the Layers tab and make sure the luminosity layer (if HSV,
Background layer of Value window) is selected, and is the only one selected. We only want to sharpen the
luminosity channel.
@@ -165,8 +165,8 @@ Now get rid of the selection (right-click and <span class="filter"><Image> Selec
## Step 11
<figure>
-<img src="{filename}compose.jpg" alt="compose.jpg"/>
-<img src="{filename}image-lab-composed.jpg" alt="image-lab-composed.jpg"/>
+<img src="{static}compose.jpg" alt="compose.jpg"/>
+<img src="{static}image-lab-composed.jpg" alt="image-lab-composed.jpg"/>
</figure>
It's time to reconstruct our original image from the LAB (HSV) components.
@@ -178,9 +178,9 @@ Click OK; this should create a new composite image.
## Final Step
<figure>
-<img src="{filename}image-original-zoomed100-crop.jpg" alt="image-original-zoomed100-crop.jpg"/>
-<img src="{filename}image-luminosityedgesharpened-zoomed100-crop.jpg"
alt="image-luminosityedgesharpened-zoomed100-crop.jpg"/><br/>
-<img src="{filename}image-regularsharpened-zoomed100-crop.jpg"
alt="image-regularsharpened-zoomed100-crop.jpg"/>
+<img src="{static}image-original-zoomed100-crop.jpg" alt="image-original-zoomed100-crop.jpg"/>
+<img src="{static}image-luminosityedgesharpened-zoomed100-crop.jpg"
alt="image-luminosityedgesharpened-zoomed100-crop.jpg"/><br/>
+<img src="{static}image-regularsharpened-zoomed100-crop.jpg"
alt="image-regularsharpened-zoomed100-crop.jpg"/>
</figure>
Examine the resulting image, zooming in to examine edge detail.
@@ -214,24 +214,24 @@ Check out the shadow noise in the larger images on the [smart sharpening shortcu
Here is what you'll see if you compare them:
<figure>
-<img src="{filename}gradient.jpg" alt="gradient.jpg"/>
-<img src="{filename}gradient-composed.jpg" alt="gradient-composed.jpg"/>
+<img src="{static}gradient.jpg" alt="gradient.jpg"/>
+<img src="{static}gradient-composed.jpg" alt="gradient-composed.jpg"/>
</figure>
Left image: Gradient in RGB
Right image: RGB -> LAB -> RGB
<figure>
-<img src="{filename}gradient-hist.jpg" alt="gradient-hist.jpg"/>
-<img src="{filename}gradient-composed-hist.jpg" alt="gradient-composed-hist.jpg"/>
+<img src="{static}gradient-hist.jpg" alt="gradient-hist.jpg"/>
+<img src="{static}gradient-composed-hist.jpg" alt="gradient-composed-hist.jpg"/>
</figure>
Left image: Histogram of the RGB image.
Right image: Histogram of the RGB -> LAB -> RGB image.
<figure>
-<img src="{filename}gradient-zoomed400.jpg" alt="gradient-zoomed400.jpg"/>
-<img src="{filename}gradient-composed-zoomed400.jpg" alt="gradient-composed-zoomed400.jpg"/>
+<img src="{static}gradient-zoomed400.jpg" alt="gradient-zoomed400.jpg"/>
+<img src="{static}gradient-composed-zoomed400.jpg" alt="gradient-composed-zoomed400.jpg"/>
</figure>
Left image: Zoom 400% of the RGB image.
@@ -244,8 +244,8 @@ You are now thinking to yourself, "Good grief! Why on earth would he suggest cha
Look at the histograms of the original image and the one smart sharpened on the luminosity channel:
<figure>
-<img src="{filename}original-hist.jpg" alt="original-hist.jpg"/>
-<img src="{filename}smartsharpened-hist.jpg" alt="smartsharpened-hist.jpg"/>
+<img src="{static}original-hist.jpg" alt="original-hist.jpg"/>
+<img src="{static}smartsharpened-hist.jpg" alt="smartsharpened-hist.jpg"/>
</figure>
Left image: Histogram, original image
@@ -258,12 +258,12 @@ What should you do? I suggest trying it and look at the histogram! This is the b
## Other Examples
<figure>
-<img src="{filename}example1-original-crop.jpg" alt="example1-original-crop.jpg"/>
+<img src="{static}example1-original-crop.jpg" alt="example1-original-crop.jpg"/>
</figure>
<figure>
-<img src="{filename}example1-regularsharpened-crop.jpg" alt="example1-regularsharpened-crop.jpg"/>
-<img src="{filename}example1-luminosityedgesharpened-crop.jpg"
alt="example1-luminosityedgesharpened-crop.jpg"/>
+<img src="{static}example1-regularsharpened-crop.jpg" alt="example1-regularsharpened-crop.jpg"/>
+<img src="{static}example1-luminosityedgesharpened-crop.jpg"
alt="example1-luminosityedgesharpened-crop.jpg"/>
</figure>
First image: Original (pretty noisy)
@@ -273,8 +273,8 @@ Right image: Smart sharpened
This example is kind of contrived. It doesn't really need much sharpening in the first place, and the
smart-sharpened version looks over-sharpened. I include it here mainly because it is pretty noisy, so it
really shows what happens when you sharpen noise, and how the smart sharpening technique doesn't affect the
noise. For details on reducing CCD noise (using this image as an example), [see this
tutorial](/tutorials/Reducing_CCD_Noise/).
<figure>
-<img src="{filename}example2-edgesharpened-384x384.jpg" alt="example2-edgesharpened-384x384.jpg"/>
-<img src="{filename}example2-regsharpened-384x384.jpg" alt="example2-regsharpened-384x384.jpg"/>
+<img src="{static}example2-edgesharpened-384x384.jpg" alt="example2-edgesharpened-384x384.jpg"/>
+<img src="{static}example2-regsharpened-384x384.jpg" alt="example2-regsharpened-384x384.jpg"/>
</figure>
Left image: Edge sharpened (Amt=1.25)
diff --git a/content/tutorials/Smart_Sharpening/shortcuts.md b/content/tutorials/Smart_Sharpening/shortcuts.md
index c2ffcb3f..45848bf4 100644
--- a/content/tutorials/Smart_Sharpening/shortcuts.md
+++ b/content/tutorials/Smart_Sharpening/shortcuts.md
@@ -45,7 +45,7 @@ Author: Eric R. Jeschke
</p>
<p class="images">
- <img src="{filename}image-luminosityedgesharpened-zoomed100.jpg"
alt="image-luminosityedgesharpened-zoomed100.jpg" />
+ <img src="{static}image-luminosityedgesharpened-zoomed100.jpg"
alt="image-luminosityedgesharpened-zoomed100.jpg" />
</p>
<p>
1. Sharpening mask (edges only), luminosity channel only (LAB decompose/compose).
@@ -54,7 +54,7 @@ Author: Eric R. Jeschke
</p>
<p class="images">
- <img src="{filename}image-valueedgesharpened-zoomed100.jpg" alt="image-valueedgesharpened-zoomed100.jpg" />
+ <img src="{static}image-valueedgesharpened-zoomed100.jpg" alt="image-valueedgesharpened-zoomed100.jpg" />
</p>
<p>
2. Sharpening mask (edges only), value channel only (HSV decompose/compose).
@@ -63,7 +63,7 @@ Author: Eric R. Jeschke
</p>
<p class="images">
- <img src="{filename}image-edgesharpened-zoomed100.jpg" alt="image-edgesharpened-zoomed100.jpg" />
+ <img src="{static}image-edgesharpened-zoomed100.jpg" alt="image-edgesharpened-zoomed100.jpg" />
</p>
<p>
3. Sharpening mask (edges only), all RGB channels (no decompose/compose). First of the "shortcuts".
@@ -74,7 +74,7 @@ Author: Eric R. Jeschke
</p>
<p class="images">
- <img src="{filename}image-rededgesharpened-zoomed100.jpg" alt="image-rededgesharpened-zoomed100.jpg" />
+ <img src="{static}image-rededgesharpened-zoomed100.jpg" alt="image-rededgesharpened-zoomed100.jpg" />
</p>
<p>
4. Sharpening mask (edges only), red channel only (no decompose/compose).
@@ -85,7 +85,7 @@ Author: Eric R. Jeschke
</p>
<p class="images">
- <img src="{filename}image-redsharpened-zoomed100.jpg" alt="image-redsharpened-zoomed100.jpg" />
+ <img src="{static}image-redsharpened-zoomed100.jpg" alt="image-redsharpened-zoomed100.jpg" />
</p>
<p>
5. No sharpening mask (entire image), red channel only (no decompose/compose).
@@ -96,7 +96,7 @@ Author: Eric R. Jeschke
</p>
<p class="images">
- <img src="{filename}image-luminositysharpened-zoomed100.jpg" alt="image-luminositysharpened-zoomed100.jpg"
/>
+ <img src="{static}image-luminositysharpened-zoomed100.jpg" alt="image-luminositysharpened-zoomed100.jpg" />
</p>
<p>
6. No sharpening mask (entire image), luminosity channel only (LAB decompose/compose).
@@ -107,7 +107,7 @@ Author: Eric R. Jeschke
</p>
<p class="images">
- <img src="{filename}image-valuesharpened-zoomed100.jpg" alt="image-valuesharpened-zoomed100.jpg" />
+ <img src="{static}image-valuesharpened-zoomed100.jpg" alt="image-valuesharpened-zoomed100.jpg" />
</p>
<p>
7. No sharpening mask (entire image), value channel only (HSV decompose/compose).
@@ -118,7 +118,7 @@ Author: Eric R. Jeschke
</p>
<p class="images">
- <img src="{filename}image-regularsharpened-zoomed100.jpg" alt="image-regularsharpened-zoomed100.jpg" />
+ <img src="{static}image-regularsharpened-zoomed100.jpg" alt="image-regularsharpened-zoomed100.jpg" />
</p>
<p>
8. No sharpening mask (entire image), all RGB channels (no decompose/compose).
@@ -129,7 +129,7 @@ Author: Eric R. Jeschke
</p>
<p class="images">
- <img src="{filename}image-original-zoomed100.jpg" alt="image-original-zoomed100.jpg" />
+ <img src="{static}image-original-zoomed100.jpg" alt="image-original-zoomed100.jpg" />
</p>
<p>
9. Unsharpened original.
diff --git a/content/tutorials/Smart_Sharpening/warp-sharp.md
b/content/tutorials/Smart_Sharpening/warp-sharp.md
index 85c847ba..4ebd516d 100644
--- a/content/tutorials/Smart_Sharpening/warp-sharp.md
+++ b/content/tutorials/Smart_Sharpening/warp-sharp.md
@@ -22,14 +22,14 @@ Author: Eric R. Jeschke
<h2>First image</h2>
<p class="images">
- <img src="{filename}example1-original-zoomed100.jpg" alt="example1-original-zoomed100.jpg" />
+ <img src="{static}example1-original-zoomed100.jpg" alt="example1-original-zoomed100.jpg" />
</p>
<p>
1. Original image, zoomed 100%.
</p>
<p class="images">
- <img src="{filename}example1-unsharpmask-zoomed100.jpg" alt="example1-unsharpmask-zoomed100.jpg" />
+ <img src="{static}example1-unsharpmask-zoomed100.jpg" alt="example1-unsharpmask-zoomed100.jpg" />
</p>
<p>
2. Standard unsharp mask filter, all RGB channels.
@@ -38,7 +38,7 @@ Author: Eric R. Jeschke
</p>
<p class="images">
- <img src="{filename}example1-warpsharp-zoomed100.jpg" alt="example1-warpsharp-zoomed100.jpg" />
+ <img src="{static}example1-warpsharp-zoomed100.jpg" alt="example1-warpsharp-zoomed100.jpg" />
</p>
<p>
3. Warp sharp script, all RGB channels.
@@ -47,7 +47,7 @@ Author: Eric R. Jeschke
</p>
<p class="images">
- <img src="{filename}example1-warpsharp-luminosityonly-zoomed100.jpg"
alt="example1-warpsharp-luminosityonly-zoomed100.jpg" />
+ <img src="{static}example1-warpsharp-luminosityonly-zoomed100.jpg"
alt="example1-warpsharp-luminosityonly-zoomed100.jpg" />
</p>
<p>
4. Warp sharp script, luminosity channel only.
@@ -61,7 +61,7 @@ Author: Eric R. Jeschke
</p>
<p class="images">
- <img src="{filename}example1-smartsharp-zoomed100.jpg" alt="example1-smartsharp-zoomed100.jpg" />
+ <img src="{static}example1-smartsharp-zoomed100.jpg" alt="example1-smartsharp-zoomed100.jpg" />
</p>
<p>
5. Smart sharpened (edges, luminosity channel only).
@@ -71,7 +71,7 @@ Author: Eric R. Jeschke
</p>
<p class="images">
- <img src="{filename}example1-warpsharp-luminosityonly.jpg" alt="example1-warpsharp-luminosityonly.jpg" />
+ <img src="{static}example1-warpsharp-luminosityonly.jpg" alt="example1-warpsharp-luminosityonly.jpg" />
</p>
<p>
Warp sharp script, luminosity channel only (same as #4--unzoomed).
@@ -80,7 +80,7 @@ Author: Eric R. Jeschke
</p>
<p class="images">
- <img src="{filename}example1-smartsharp.jpg" alt="example1-smartsharp.jpg" />
+ <img src="{static}example1-smartsharp.jpg" alt="example1-smartsharp.jpg" />
</p>
<p>
Smart sharpened (edges, luminosity channel only; same as #5--unzoomed).
@@ -93,7 +93,7 @@ Author: Eric R. Jeschke
Here's the main test image from the tutorial:
</p>
<p class="images">
- <img src="{filename}image-compare-original.jpg" alt="image-compare-original.jpg" />
+ <img src="{static}image-compare-original.jpg" alt="image-compare-original.jpg" />
</p>
<p>
1. Original image.
@@ -102,7 +102,7 @@ Author: Eric R. Jeschke
</p>
<p class="images">
- <img src="{filename}image-compare-warpsharp.jpg" alt="image-compare-warpsharp.jpg" />
+ <img src="{static}image-compare-warpsharp.jpg" alt="image-compare-warpsharp.jpg" />
</p>
<p>
2. Warp sharpened.
@@ -111,7 +111,7 @@ Author: Eric R. Jeschke
</p>
<p class="images">
- <img src="{filename}image-compare-smartsharp.jpg" alt="image-compare-smartsharp.jpg" />
+ <img src="{static}image-compare-smartsharp.jpg" alt="image-compare-smartsharp.jpg" />
</p>
<p>
3. Smart sharpened (edges, luminosity channel only).
@@ -120,7 +120,7 @@ Author: Eric R. Jeschke
</p>
<p class="images">
- <img src="{filename}image-compare-warpsharp-zoomed100.jpg" alt="image-compare-warpsharp-zoomed100.jpg" />
+ <img src="{static}image-compare-warpsharp-zoomed100.jpg" alt="image-compare-warpsharp-zoomed100.jpg" />
</p>
<p>
Warp sharpened, zoomed to 100%.
@@ -129,7 +129,7 @@ Author: Eric R. Jeschke
</p>
<p class="images">
- <img src="{filename}image-compare-smartsharp-zoomed100.jpg" alt="image-compare-smartsharp-zoomed100.jpg" />
+ <img src="{static}image-compare-smartsharp-zoomed100.jpg" alt="image-compare-smartsharp-zoomed100.jpg" />
</p>
<p>
Smart sharpened, zoomed to 100%.
diff --git a/content/tutorials/Straight_Line/index.md b/content/tutorials/Straight_Line/index.md
index 8fcedeaf..288fea84 100644
--- a/content/tutorials/Straight_Line/index.md
+++ b/content/tutorials/Straight_Line/index.md
@@ -9,7 +9,7 @@ Text and images Copyright (C) 2002 [Seth Burgess](mailto:sjburgesNOSPAM gimp org
## Intention
<figure>
-<img src="{filename}straight_line_example.png" alt="straight_line_example.png"/>
+<img src="{static}straight_line_example.png" alt="straight_line_example.png"/>
</figure>
This tutorial shows you how you can do straight lines with GIMP, using the Shift key. This tutorial doesn't
use straight lines for complex tasks; its intended to show how you can use it to create quick and easy line
effects.
@@ -17,7 +17,7 @@ This tutorial shows you how you can do straight lines with GIMP, using the Shift
## Step 1
<figure>
-<img src="{filename}blankimage.png" alt="blankimage.png"/>
+<img src="{static}blankimage.png" alt="blankimage.png"/>
</figure>
First, create a new image. Any size will do.
@@ -25,7 +25,7 @@ First, create a new image. Any size will do.
## Step 2
<figure>
-<img src="{filename}toolbox.png" alt="toolbox.png"/>
+<img src="{static}toolbox.png" alt="toolbox.png"/>
</figure>
Then click on the paintbrush. Any of the red-highlighted tools on the above toolbox can do lines.
@@ -33,7 +33,7 @@ Then click on the paintbrush. Any of the red-highlighted tools on the above tool
## Step 3
<figure>
-<img src="{filename}startdot.png" alt="startdot.png"/>
+<img src="{static}startdot.png" alt="startdot.png"/>
</figure>
After you click the paintbrush tool, you can click the image. A single dot will appear on the screen. The
size of this dot represents the current brush size, which you can change in the Brush Dialog.
@@ -42,7 +42,7 @@ Now, lets start drawing a line. Hold down the Shift button, and keep it down.
## Step 4
<figure>
-<img src="{filename}draggedline.png" alt="draggedline.png"/>
+<img src="{static}draggedline.png" alt="draggedline.png"/>
</figure>
After you have a starting point, and have held down the Shift key, you'll see a line like above if you're
running GIMP version 1.2.x or later. This feature was not present in GIMP version 1.0.4. However, the next
step works the same way.
@@ -51,7 +51,7 @@ Press the first button on the Mouse (the leftmost one usually) and then let it g
## Final
<figure>
-<img src="{filename}drawnline.png" alt="drawnline.png"/>
+<img src="{static}drawnline.png" alt="drawnline.png"/>
</figure>
See how the line is drawn on top of the preview? This is a powerful feature of the Paint Brush. You can use
it with any of the tools shown in step 3, or even draw more lines at the end of this one.
@@ -62,33 +62,31 @@ Seth
## Examples
<figure>
-<img src="{filename}exp1.png" alt="exp1.png"/>
+<img src="{static}exp1.png" alt="exp1.png"/>
</figure>
This one I turned on gradient in the Paint Brush Tool.
<figure>
-<img src="{filename}exp2.png" alt="exp2.png"/>
+<img src="{static}exp2.png" alt="exp2.png"/>
</figure>
This one I rendered a grid, and then used the Smudge Tool with a low spacing and a slightly larger brush.
<figure>
-<img src="{filename}exp3.png" alt="exp3.png"/>
+<img src="{static}exp3.png" alt="exp3.png"/>
</figure>
This one I used the Clone tool, and set the source to "Maple Leaves" pattern.
<figure>
-<img src="{filename}exp4.png" alt="exp4.png"/>
+<img src="{static}exp4.png" alt="exp4.png"/>
</figure>
This one I rendered a plasma cloud, and used the Erase Tool with a square brush.
<figure>
-<img src="{filename}exp5.png" alt="exp5.png"/>
+<img src="{static}exp5.png" alt="exp5.png"/>
</figure>
This one I used the Dodge tool on the top and left of a blue box, then used the burn tool on the right and
bottom.
-
-
diff --git a/content/tutorials/The_Basics/index.md b/content/tutorials/The_Basics/index.md
index 48e7ab03..2fca5b76 100644
--- a/content/tutorials/The_Basics/index.md
+++ b/content/tutorials/The_Basics/index.md
@@ -13,7 +13,7 @@ On this page, the first section of our ever growing (?) collection of tutorials,
## Adding text
<figure>
-<img src="{filename}tut-basic-1.gif" alt="tut-basic-1.gif"/>
+<img src="{static}tut-basic-1.gif" alt="tut-basic-1.gif"/>
</figure>
Use the text tool to add some text. You will get a new text layer which you can also see if you look at the
layers dialog. You can use the move tool to move the text where you like to have it. Then merge it with the
white layer below by choosing _Merge Down_ from the Layer menu. You should now have one layer with black text
on white background. Using <span class="filter"><Image> Colors → Invert</span> you will achieve something
like the picture above.
@@ -21,26 +21,26 @@ Use the text tool to add some text. You will get a new text layer which you can
## Adding colors
<figure>
-<img src="{filename}tut-basic-2.gif" alt="tut-basic-2.gif"/>
-<img src="{filename}tut-basic-3.gif" alt="tut-basic-3.gif"/>
+<img src="{static}tut-basic-2.gif" alt="tut-basic-2.gif"/>
+<img src="{static}tut-basic-3.gif" alt="tut-basic-3.gif"/>
</figure>
First of all: Blur the image a bit using <span class="filter"><Image> Filters → Blur → Gaussian Blur</span>
(a value of 5 may be a good start). Now add a new layer to the image with the help of the New Layer button in
the layers dialog. Choose it to be white. It will be created above the just made text layer effectively
hiding it. It will be active which can be seen from the fact that it has a blue background in the layers
dialog. Click some times on the eye symbol to see how you can make a layer invisible and make the other layer
active by clicking on its small preview in the layer dialog. At the end, leave the new white layer visible
and active. Use the plasma plugin to make this layer a little colorful: <span class="filter"><Image> Filters
→ Render → Clouds → Plasma</span> (Yes, you are invited to experiment with the parameters...). The layer
dialog should look something like this now:
<figure>
-<img src="{filename}tut-basic-dia-1.gif" alt="tut-basic-dia-1.gif"/>
+<img src="{static}tut-basic-dia-1.gif" alt="tut-basic-dia-1.gif"/>
</figure>
## Bumpmapping
<figure>
-<img src="{filename}tut-basic-4.gif" alt="tut-basic-4.gif"/>
+<img src="{static}tut-basic-4.gif" alt="tut-basic-4.gif"/>
</figure>
It's getting funny now: Use the bumpmap plugin with the blurred text layer as a bumpmap on the plasma layer.
You can play with the other parameters, but they have sensible defaults. You'll get an image like the one
above. Now (still on the plasma layer) choose Add layer mask from the layer dialog menu. Choose the mask to
be white. Nothing will change on the image for now, but the layer dialog will look like this:
<figure>
-<img src="{filename}tut-basic-dia-2.gif" alt="tut-basic-dia-2.gif"/>
+<img src="{static}tut-basic-dia-2.gif" alt="tut-basic-dia-2.gif"/>
</figure>
You can toggle whether a layers mask or the actual picture is active by clicking on their previews in the
layers dialog.
@@ -48,37 +48,37 @@ You can toggle whether a layers mask or the actual picture is active by clicking
## Using the layer mask
<figure>
-<img src="{filename}tut-basic-5.gif" alt="tut-basic-5.gif"/>
+<img src="{static}tut-basic-5.gif" alt="tut-basic-5.gif"/>
</figure>
Now activate the text layer again. (you don't have to make the layers on top invisible to work on this
layer. It's enough that you activate it in the layers dialog.) Now do <span class="filter"><Image> Edit →
Copy</span>. Make sure you have the mask of the top layer selected and the layer is activated. Choose <span
class="filter"><Image> Edit → Paste</span>. You will again get a floating selection, shown in the layer
dialog like this:
<figure>
-<img src="{filename}tut-basic-dia-3.gif" alt="tut-basic-dia-3.gif"/>
+<img src="{static}tut-basic-dia-3.gif" alt="tut-basic-dia-3.gif"/>
</figure>
Use the layer dialog menu to Anchor Layer, which will anchor the floating selection into the previous
activated layer (which is the mask of the plasma layer in our case). This will leave you with the following
scenario:
<figure>
-<img src="{filename}tut-basic-dia-4.gif" alt="tut-basic-dia-4.gif"/>
+<img src="{static}tut-basic-dia-4.gif" alt="tut-basic-dia-4.gif"/>
</figure>
## Adjusting the levels
<figure>
-<img src="{filename}tut-basic-6.gif" alt="tut-basic-6.gif"/>
+<img src="{static}tut-basic-6.gif" alt="tut-basic-6.gif"/>
</figure>
Now add a new layer and fill it with some color (e.g. with the help of the bucket fill tool) and use Raise
Layer or Lower Layer from the layer dialog menu to achieve something like this:
<figure>
-<img src="{filename}tut-basic-dia-5.gif" alt="tut-basic-dia-5.gif"/>
+<img src="{static}tut-basic-dia-5.gif" alt="tut-basic-dia-5.gif"/>
</figure>
Now you'll see that the image of the logo isn't very sharp. We'll change this now. Make sure you have
selected the plasma layer's mask and open <span class="filter"><Image> Layers → Colors → Levels</span>. This
tool is one of the most important tools you have! Play with the little triangles you'll see in the two grey
gradients and watch their effect on the image. For now, try to achieve something like the following:
<figure>
-<img src="{filename}tut-basic-dia-6.gif" alt="tut-basic-dia-6.gif"/>
+<img src="{static}tut-basic-dia-6.gif" alt="tut-basic-dia-6.gif"/>
</figure>
What we do here is making the border of the mask sharper, and by that means, sharpening the whole picture
(the area which is neither 100% opaque nor transparent will become smaller). But we can easily avoid the
picture getting pixel-steps by leaving still a smooth transition between opaque and transparent parts of the
layer. (If you didn't realize it by now - I bet you did - the layer mask works in such a way that all black
parts of the mask will become transparent parts of the layer and all white parts will stay opaque (with
smooth transitions realized by values of grey).
@@ -86,25 +86,25 @@ What we do here is making the border of the mask sharper, and by that means, sha
## Creating a drop-shadow
<figure>
-<img src="{filename}tut-basic-7.gif" alt="tut-basic-7.gif"/>
+<img src="{static}tut-basic-7.gif" alt="tut-basic-7.gif"/>
</figure>
Using the layer menu you will have noticed the entry Duplicate Layer. Use this now. Then use Apply Layer
Mask and Lower Layer which should leave you with something like this:
<figure>
-<img src="{filename}tut-basic-dia-7.gif" alt="tut-basic-dia-7.gif"/>
+<img src="{static}tut-basic-dia-7.gif" alt="tut-basic-dia-7.gif"/>
</figure>
Make sure you check the Keep Transparency option (the little box next to the layer mode) and then fill that
duplicated layer with black. You can paint over the text with a paint tool or simply drag a black color from
the color selector and drop it over the image. You do not have to be careful: the Keep Transparency button
will let you paint only on opaque parts of the image. This will give you:
<figure>
-<img src="{filename}tut-basic-dia-8.gif" alt="tut-basic-dia-8.gif"/>
+<img src="{static}tut-basic-dia-8.gif" alt="tut-basic-dia-8.gif"/>
</figure>
Now make sure you uncheck the button again and move the layer some pixels to the right and downwards. You
can move it with the Move tool while pressing Shift so that it moves the current layer instead of picking a
new one. (Alternatively, can use <span class="filter"><Image> Layer → Transform → Offset</span> and enter a
small offset for both X and Y: this will offset the contents of the layer without moving the layer itself.)
Then blur your layer and adjust the transparency with the slider so the background will shine through: You've
just generated a so-called drop shadow, which greatly enhances the 3D effect and is used in very many places.
<figure>
-<img src="{filename}tut-basic-dia-9.gif" alt="tut-basic-dia-9.gif"/>
+<img src="{static}tut-basic-dia-9.gif" alt="tut-basic-dia-9.gif"/>
</figure>
That's it! Now have a lot of fun making flying logos!
@@ -112,4 +112,3 @@ That's it! Now have a lot of fun making flying logos!
An updated version of this tutorial can be found here: [Simple Floating Logo](../Floating_Logo)
The original tutorial can be found [here](http://classic.gimp.org/tut-basic.html).
-
diff --git a/content/tutorials/Tileable_Textures/index.md b/content/tutorials/Tileable_Textures/index.md
index 9d3a5397..c72ca650 100644
--- a/content/tutorials/Tileable_Textures/index.md
+++ b/content/tutorials/Tileable_Textures/index.md
@@ -13,17 +13,17 @@ The GIMP 1.2 series have a nice new feature I refer to as gradient brushes. Esse
## Using Gradient Brushes
<figure>
-<img src="{filename}grad_brush_dialog.png" alt="grad_brush_dialog.png"/>
+<img src="{static}grad_brush_dialog.png" alt="grad_brush_dialog.png"/>
</figure>
Gradient brushes can be accessed from the standard paintbrush dialog. Just check the option "Use Color from
Gradient" and start painting. You can also press the Gradient button to change the current gradient. Try
"German flag smooth", for instance.
<figure>
-<img src="{filename}grad1.jpg" alt="grad1.jpg"/>
+<img src="{static}grad1.jpg" alt="grad1.jpg"/>
-<img src="{filename}grad_text1.jpg" alt="grad_text1.jpg"/>
+<img src="{static}grad_text1.jpg" alt="grad_text1.jpg"/>
-<img src="{filename}grad_text2.jpg" alt="grad_text2.jpg"/>
+<img src="{static}grad_text2.jpg" alt="grad_text2.jpg"/>
</figure>
Just filling in an image with a gradient brush is a good start for interesting textures, and you can make
some nice ones that way.
@@ -37,21 +37,21 @@ For example, lets choose the "Grunge 15" brush. Set its spacing to about 70 or s
Now for the easy part. Draw random stuff on the image. Or not random. It doesnt really matter. If you want
to stick to a very set pattern, your texture might look a bit more orderly. Fill the image completely if you
dont want alpha poking though. Nice eh?
<figure>
-<img src="{filename}grad_example_1.jpg" alt="grad_example_1.jpg"/>
+<img src="{static}grad_example_1.jpg" alt="grad_example_1.jpg"/>
</figure>
The hard part is making the image tilable. The easiest way to do this is to offset your image by half its
height, and half its width. Select <span class="filter"><Image> Layer -> Transform -> Offset</span>. Then
choose the convient "x/2, y/2" option, and hit OK. Your image will now show what used to be at its edges at
the center of the image. The secret to making tileable images is to make this transition smooth.
<figure>
-<img src="{filename}grad_example_2.jpg" alt="grad_example_2.jpg"/>
+<img src="{static}grad_example_2.jpg" alt="grad_example_2.jpg"/>
-<img src="{filename}grad_example_3.jpg" alt="grad_example_3.jpg"/>
+<img src="{static}grad_example_3.jpg" alt="grad_example_3.jpg"/>
</figure>
For gradient painting with grunge brushes, this typicaly just means painting along those lines. You
probabaly want to give it a bit of character so it looks more natural. You will probabaly want to avoid
painting at the edges of the image when you do this. But if you do, just repeat the above steps again and you
should be fine.
<figure>
-<img src="{filename}grad_example_4.jpg" alt="grad_example_4.jpg"/>
+<img src="{static}grad_example_4.jpg" alt="grad_example_4.jpg"/>
</figure>
Offset that image one more time (or not,actually...), and your ready to go.
@@ -65,16 +65,15 @@ All in all, this is nice and simple, and fast way to create some colorful textur
## Examples
<figure>
-<img src="{filename}texture1.jpg" alt="texture1.jpg"/>
+<img src="{static}texture1.jpg" alt="texture1.jpg"/>
-<img src="{filename}texture2.jpg" alt="texture2.jpg"/>
+<img src="{static}texture2.jpg" alt="texture2.jpg"/>
-<img src="{filename}texture3.jpg" alt="texture3.jpg"/>
+<img src="{static}texture3.jpg" alt="texture3.jpg"/>
-<img src="{filename}texture4.jpg" alt="texture4.jpg"/>
+<img src="{static}texture4.jpg" alt="texture4.jpg"/>
</figure>
Just some examples whipped up in a few minutes.
The original tutorial can be found [here](http://adrian.gimp.org/texture_tut/).
-
diff --git a/content/tutorials/Using_GAP/index.md b/content/tutorials/Using_GAP/index.md
index 84f21d2e..63596f04 100644
--- a/content/tutorials/Using_GAP/index.md
+++ b/content/tutorials/Using_GAP/index.md
@@ -13,7 +13,7 @@ GAP is an advanced tool to be able to create animations, this guide should give
## Main Interface
<figure>
-<img src="{filename}gap-big.png" alt="gap-big.png"/>
+<img src="{static}gap-big.png" alt="gap-big.png"/>
</figure>
**Source Image/Layer** specifies, which layer you want to animate on top of the current image. If you select
a layer from a multilayer image, make sure you don't forget to specify the **stepmode** as well.
@@ -29,7 +29,7 @@ At the bootom of the dialog you'll find some inportant sliders. The duration of
## Stepmode
<figure>
-<img src="{filename}gap2-big.png" alt="gap2-big.png"/>
+<img src="{static}gap2-big.png" alt="gap2-big.png"/>
</figure>
Stepmode defines how you want the source multi-layer image to be animated withing the final animation render.
@@ -39,7 +39,7 @@ Stepmode defines how you want the source multi-layer image to be animated within
The animation will start from the specified layer, so make sure you don't miss out some frames. If a source
image is a one-layered one, stepmode will not have any effect on the result whatsoever.
<figure>
-<img src="{filename}gap3-big.png" alt="gap3-big.png"/>
+<img src="{static}gap3-big.png" alt="gap3-big.png"/>
</figure>
If you want the final rendered layer to be different mode than the default **normal** specify it in the
**mode** popup.
@@ -53,7 +53,7 @@ Every animation should at least have two animation points. For every animation p
Every animation point is shown on the image preview acording to his x,y position.
<figure>
-<img src="{filename}gap4-big.png" alt="gap4-big.png"/>
+<img src="{static}gap4-big.png" alt="gap4-big.png"/>
</figure>
At the bottom of the dialog, you can specify the segment on the animation to render the current source image
animation to.
@@ -63,4 +63,3 @@ The **preview frame** slider is used in conjuction with the **update preview** b
**Layerstack** is used to place the source image into a particular position in the final rendering layer
stack. **0** means top of the stack (covering everything below it, also depending on the **mode**).
**Force visibility** vill toggle all layers in the source image to visible, so that the final rendering does
not have "holes" in it. **Clip to frame** will crop anything thats outside of the image dimensions. It will
reduce file size, but you'll be unable to move the object on the final rendering to alter the animation.
-
diff --git a/content/tutorials/template/index.md b/content/tutorials/template/index.md
index cf30ce98..39c61ec4 100644
--- a/content/tutorials/template/index.md
+++ b/content/tutorials/template/index.md
@@ -106,7 +106,7 @@ You can also use plain html (the Markdown parser will pass it through to the out
In either case, the results will be the same:
-
+
There is a better way, though...
@@ -127,7 +127,7 @@ A caption for the image/figure.
Which will result in:
<figure>
-<img src="{filename}wilber-big.png" alt="Alt Text">
+<img src="{static}wilber-big.png" alt="Alt Text">
<figcaption>
A caption for the image/figure.
</figcaption>
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
