[gimp-web/gimp-web-static] Added tutorial GIMP_Quickies
- From: Pat David <patdavid src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gimp-web/gimp-web-static] Added tutorial GIMP_Quickies
- Date: Thu, 6 Aug 2015 20:47:27 +0000 (UTC)
commit 9e63cd27ab7b4b0417ab63d8b373fdafd931d39a
Author: Pat David <patdavid gmail com>
Date: Thu Aug 6 15:47:17 2015 -0500
Added tutorial GIMP_Quickies
content/tutorials/GIMP_Quickies/index.md | 142 ++++++++++++++++++++----------
pelicanconf.py | 2 +-
themes/newgimp/static/css/gimp.css | 7 ++
themes/newgimp/static/css/page.css | 8 ++
4 files changed, 111 insertions(+), 48 deletions(-)
---
diff --git a/content/tutorials/GIMP_Quickies/index.md b/content/tutorials/GIMP_Quickies/index.md
index eb7eb7d..9721ba9 100644
--- a/content/tutorials/GIMP_Quickies/index.md
+++ b/content/tutorials/GIMP_Quickies/index.md
@@ -4,13 +4,6 @@ Modified: 2015-08-03T17:11:32-05:00
Authors: Pat David
Summary: A quick look at some easy features.
-url: tutorials/GIMP_Quickies/
-save_as: tutorials/GIMP_Quickies/index.html
-
-<small><a href="http://creativecommons.org/licenses/by-sa/3.0/deed.en_US"; rel="license"><img alt="Creative
Commons License" src="http://i.creativecommons.org/l/by-sa/3.0/80x15.png"; style="border-width:0; width:
initial; display: inline; margin: 0;" /></a>
-<span xmlns:dct="http://purl.org/dc/terms/";>GIMP Tutorial - GIMP Quickies (text & images)</span> by [Pat
David](http://blog.patdavid.net)
-is licensed under a [Creative Commons Attribution-ShareAlike 3.0 Unported
License](http://creativecommons.org/licenses/by-sa/3.0/deed.en_US).
-</small>
## Intention
@@ -20,10 +13,10 @@ It is my hope that these few examples will help to solve those small, quick modi
For quick access, these are the four main points I’ll cover in this quick tutorial:
-* [Changing the Size (Dimensions) of an Image (Scale)](#scale)
-* [Changing the Size (Filesize) of a JPEG](#compress)
-* [Crop an Image](#crop)
-* [Rotate or Flip an Image](#transform)
+* [Changing the Size (Dimensions) of an Image (Scale)](#changing-the-size-dimensions-of-an-image-scale)
+* [Changing the Size (Filesize) of a JPEG](#changing-the-size-filesize-of-a-jpeg)
+* [Crop an Image](#crop-an-image)
+* [Rotate or Flip an Image](#rotate-andor-flip-an-image)
In keeping with the spirit of the predecessor to this page, I will be using images from the Astronomy
Picture of the Day ([APOD](http://apod.nasa.gov/apod/astropix.html)), provided by NASA.
@@ -43,11 +36,11 @@ When you first open your image in GIMP, chances are that the image will be zoome
<figure>
<img src="{attach}Scale-View-Pixel-Size-Original.png" alt="Test">
+<figcaption>
+View of the GIMP canvas, with information at the top of the window.
+</figcaption>
</figure>
-<div class="centerImg">
-<span class="caption">View of the GIMP canvas, with information at the top of the window.</span></div>
-
Notice that the information at the top of the window shows the <span style="color: #00FF00;">current pixel
dimensions</span> of the image (in this case, the pixel size is 1225×1280).
To resize the image to new dimensions, we need only invoke the **Scale Image** dialog:
@@ -56,8 +49,12 @@ To resize the image to new dimensions, we need only invoke the **Scale Image** d
This will then open the **Scale Image** dialog:
-<div class="centerImg">
-<span class="caption">The **Scale Image** dialog.</span></div>
+<figure>
+<img src='{attach}Scale-Image-Dialog.png' alt=''>
+<figcaption>
+The **Scale Image** dialog.
+</figcaption>
+</figure>
In the **Scale Image** dialog, you’ll find a <span style="color: #00FF00;">place to enter new values</span>
for **Width** and **Height**. If you know one of the new dimensions you’d like for the image, fill in the
appropriate one here.
@@ -65,17 +62,25 @@ You’ll also <span style="color: #0080FF;">notice a small chain</span> just to
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:
-<div class="centerImg">
-<span class="caption">Changing the **Width** to 600px.</span></div>
+<figure>
+<img src='{attach}Scale-Image-Dialog-Scaled.png' alt=''>
+<figcaption>
+Changing the **Width** to 600px.
+</figcaption>
+</figure>
As you can see, entering **600px** for the width automatically changes the height to **627px**.
-Also notice I have shown a different option under **Quality** → Interpolation. The default value for this is
**Cubic**, but to retain the best quality it would better to use **Sinc (Lanczos3)**.
+Also notice I have shown a different option under **Quality** → Interpolation. The default value for this is
*Cubic*, but to retain the best quality it would better to use **Sinc (Lanczos3)**.
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:
-<div class="centerImg">
-<span class="caption">Changing input value types.</span></div>
+<figure>
+<img src='{attach}Scale-Image-Dialog-Value-Types.png' alt=''>
+<figcaption>
+Changing input value types.
+</figcaption>
+</figure>
A common use for this could be if you wanted to specify a new size as a percentage of the old one. In this
case you could change to “percent”, and then enter 50 in either field to scale the image in half.
@@ -97,8 +102,12 @@ 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:
-<div class="centerImg">
-<span class="caption">Comparison of different JPEG compression levels.</span></div>
+<figure>
+<img src='{attach}JPG-Compression-Sample.png' alt=''>
+<figcaption>
+Comparison of different JPEG compression levels.
+</figcaption>
+</figure>
As you can see, even at a quality setting of 80, the image is significantly smaller in filesize (77% size
reduction), while the image quality is still quite reasonable.
@@ -108,8 +117,12 @@ When you’ve finished any image modifications you are doing, and are ready to e
This will invoke the **Export Image** dialog:
-<div class="centerImg">
-<span class="caption"></span></div>
+<figure>
+<img src='{attach}Export-Image-Dialog.png' alt=''>
+<figcaption>
+
+</figcaption>
+</figure>
You can now enter a <span style="color: #00FF00;">new name for your file here</span>. If you include the
filetype extension (in this case, .jpg), GIMP will automatically try to export in that file format for you.
Here I am exporting the image as a JPEG file.
@@ -117,8 +130,12 @@ 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:
-<div class="centerImg">
-<span class="caption"></span></div>
+<figure>
+<img src='{attach}Export-Image-as-JPEG.png' alt=''>
+<figcaption>
+
+</figcaption>
+</figure>
From this dialog you can now <span style="color: #00FF00;">change the quality of the export</span>. If you
also have the “Show preview in image window” option checked, the image on the canvas will update to reflect
the quality value you input. This will also enable the “File size:” information to tell you what the
resulting file size will be. (You may need to move some windows around to view the preview on the canvas in
the background).
@@ -132,31 +149,44 @@ 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:
-<div class="centerImg">
-<span class="caption">Original image (left), cropped image (right)</span></div>
+<figure>
+<img src='{attach}Crop-Example.png' alt=''>
+<figcaption>
+Original image (left), cropped image (right).
+</figcaption>
+</figure>
The procedure to crop an image is straightforward. You can either get to <span style="color: #00FF00;">the
**Crop Tool**</span> through the tools palette:
-<div class="centerImg">
-<span class="caption">Crop Tool on the Tools Palette.</span></div>
+<figure>
+<img src='{attach}Crop-Tool.png' alt=''>
+<figcaption>
+Crop Tool on the Tools Palette.
+</figcaption>
+</figure>
Or you can access the crop tool through the menus:
<div class="MenuCmd"><span><span style="text-decoration: underline;">T</span>ools → <span
style="text-decoration: underline;">T</span>ransform Tools → <span style="text-decoration:
underline;">C</span>rop</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.
-<div class="centerImg">
-<span class="caption">Initial pass with the Crop Tool.
- Crop Tool options (left), cropping on the canvas (right).</span></div>
+<figure>
+<img src='{attach}Crop-First.png' alt=''>
+<figcaption>
+Initial pass with the Crop Tool.
+Crop Tool options (left), cropping on the canvas (right).
+</figcaption>
+</figure>
+<span class="caption"></span></div>
After making the initial selection of a region to crop, you’ll find the selection still active. At this
point hovering your mouse cursor over any of the four corners or sides of the selection will change the mouse
cursor, and highlight that region.
This allows you to now fine-tune the selection for cropping. You can click and drag any side or corner to
move that portion of the selection.
-Once you are happy with the region to crop, you can just press the “**Enter**” key on your keyboard to
commit the crop. If at any time you’d like to start over or decide not to crop at all, you can press the
“**Esc**” key on your keyboard to back out of the operation.
+Once you are happy with the region to crop, you can just press the **“Enter"** key on your keyboard to
commit the crop. If at any time you’d like to start over or decide not to crop at all, you can press the
**“Esc”** key on your keyboard to back out of the operation.
See [the documentation](http://docs.gimp.org/2.8/en/gimp-tool-crop.html) for more information on cropping in
GIMP.
@@ -164,8 +194,12 @@ See [the documentation](http://docs.gimp.org/2.8/en/gimp-tool-crop.html) for mor
Another way to crop an image is to make a selection first, using the **Rectangle Select Tool**:
-<div class="centerImg">
-<span class="caption">Rectangle Select Tool.</span></div>
+<figure>
+<img src='{attach}Crop-Select-Tool.png' alt=''>
+<figcaption>
+Rectangle Select Tool.
+</figcaption>
+</figure>
Or through the menus:
@@ -187,8 +221,12 @@ 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 <span
style="text-decoration: underline;">H</span>orizontally**, or **Flip <span style="text-decoration:
underline;">V</span>ertically**. This operation will mirror your image along the specified axis. For example,
here are all of the flip operations shown in a single image:
-<div class="centerImg">
-<span class="caption">All flips applied to base image (top left).</span></div>
+<figure>
+<img src='{attach}Flip-Sample-Arrow.jpg' alt=''>
+<figcaption>
+All flips applied to base image (top left).
+</figcaption>
+</figure>
### Rotate an Image
@@ -196,9 +234,14 @@ 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.
-<div class="centerImg">
-<span class="caption">Original (top left), 90° clockwise (top right)
- 90° counter-clockwise (bottom left), 180° (bottom right)</span></div>
+<figure>
+<img src='{attach}Rotate-Sample.jpg' alt=''>
+<figcaption>
+Original (top left), 90° clockwise (top right)
+90° counter-clockwise (bottom left), 180° (bottom right)
+</figcaption>
+</figure>
+<span class="caption"></span></div>
## In Conclusion
@@ -208,8 +251,13 @@ I encourage you to peruse the [other tutorials](/tutorials/) for more advanced m
The original tutorial this was adapted from can be found [here](../Lite_Quickies).
-[](http://creativecommons.org/licenses/by-sa/3.0/deed.en_US)
-<span xmlns:dct="http://purl.org/dc/terms/";>GIMP Tutorial - GIMP Quickies (text & images)</span> by [Pat
David](http://blog.patdavid.net)
- Licensed under a [Creative Commons Attribution-ShareAlike 3.0 Unported
License](http://creativecommons.org/licenses/by-sa/3.0/deed.en_US).
-<div><span id="footerleft"></span><span id="footerright"></span></div>
+---
+
+
+<small>
+<a href="http://creativecommons.org/licenses/by-sa/3.0/deed.en_US"; rel="license"><img class='cc-badge'
alt="Creative Commons License" src="http://i.creativecommons.org/l/by-sa/3.0/80x15.png"; /></a>
+<span xmlns:dct="http://purl.org/dc/terms/";>GIMP Tutorial - GIMP Quickies (text & images)</span> by [Pat
David](http://blog.patdavid.net)
+is licensed under a [Creative Commons Attribution-ShareAlike 3.0 Unported
License](http://creativecommons.org/licenses/by-sa/3.0/deed.en_US).
+</small>
+
diff --git a/pelicanconf.py b/pelicanconf.py
index 9eacff6..c5fd8f1 100644
--- a/pelicanconf.py
+++ b/pelicanconf.py
@@ -74,4 +74,4 @@ TYPOGRIFY_IGNORE_TAGS = ['title']
DELETE_OUTPUT_DIRECTORY = True
-MD_EXTENSIONS = ['fenced_code', 'codehilite(css_class=codehilite)', 'extra']
+MD_EXTENSIONS = ['fenced_code', 'codehilite(css_class=codehilite)', 'extra', 'headerid']
diff --git a/themes/newgimp/static/css/gimp.css b/themes/newgimp/static/css/gimp.css
index fd3a02a..c41dc15 100644
--- a/themes/newgimp/static/css/gimp.css
+++ b/themes/newgimp/static/css/gimp.css
@@ -112,3 +112,10 @@ figure {
background-color: #f8f8f8;
border-radius: 3px;
}
+
+img {
+ display: initial;
+ height: initial;
+ margin: 0;
+ width: initial;
+}
diff --git a/themes/newgimp/static/css/page.css b/themes/newgimp/static/css/page.css
index 16f3ebd..02c3004 100644
--- a/themes/newgimp/static/css/page.css
+++ b/themes/newgimp/static/css/page.css
@@ -63,3 +63,11 @@ figure figcaption {
caption-side: bottom;
font-weight: 300;
}
+
+.cc-badge {
+ border-width: 0;
+ width: initial;
+ display: inline;
+ margin: 0;
+ vertical-align: middle;
+}
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
![http://i.creativecommons.org/l/by-sa/3.0/80x15.png"](http://i.creativecommons.org/l/by-sa/3.0/80x15.png"){kind=link}
