[gimp-web/gimp-web-static] Added ContrastMask and Creating_Icons tutorials
- From: Pat David <patdavid src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gimp-web/gimp-web-static] Added ContrastMask and Creating_Icons tutorials
- Date: Wed, 23 Sep 2015 17:33:24 +0000 (UTC)
commit 38e7ca661328b405de87c34b63c74679c2332885
Author: Pat David <patdavid gmail com>
Date: Wed Sep 23 12:33:14 2015 -0500
Added ContrastMask and Creating_Icons tutorials
content/about/meta/file-list.md | 4 +-
content/tutorials/ContrastMask/index.md | 95 ++++++--
content/tutorials/Creating_Icons/aa1.png | Bin 0 -> 4107 bytes
content/tutorials/Creating_Icons/aa2.png | Bin 0 -> 9792 bytes
content/tutorials/Creating_Icons/button.png | Bin 0 -> 71174 bytes
content/tutorials/Creating_Icons/files.png | Bin 0 -> 106708 bytes
content/tutorials/Creating_Icons/finished.png | Bin 0 -> 228405 bytes
content/tutorials/Creating_Icons/gradient.png | Bin 0 -> 217746 bytes
content/tutorials/Creating_Icons/highlight.png | Bin 0 -> 273454 bytes
content/tutorials/Creating_Icons/index.htrw | 278 +++++++++++++++++++++++
content/tutorials/Creating_Icons/index.md | 169 ++++++++++++++
content/tutorials/Creating_Icons/palette.png | Bin 0 -> 9402 bytes
content/tutorials/Creating_Icons/rectangle.png | Bin 0 -> 234995 bytes
content/tutorials/Creating_Icons/reflection.png | Bin 0 -> 81236 bytes
content/tutorials/Creating_Icons/remote1.png | Bin 0 -> 80332 bytes
content/tutorials/Creating_Icons/remote3.png | Bin 0 -> 81036 bytes
content/tutorials/Creating_Icons/remote4.png | Bin 0 -> 78191 bytes
content/tutorials/Creating_Icons/remote5.png | Bin 0 -> 81862 bytes
content/tutorials/Creating_Icons/remote6.png | Bin 0 -> 83988 bytes
content/tutorials/Creating_Icons/remote8.png | Bin 0 -> 82203 bytes
content/tutorials/Creating_Icons/remote9.png | Bin 0 -> 62223 bytes
content/tutorials/Creating_Icons/screen.png | Bin 0 -> 240935 bytes
22 files changed, 522 insertions(+), 24 deletions(-)
---
diff --git a/content/about/meta/file-list.md b/content/about/meta/file-list.md
index e5bf2ca..71cd1d1 100644
--- a/content/about/meta/file-list.md
+++ b/content/about/meta/file-list.md
@@ -173,8 +173,8 @@ The main page links go to legacy WGO, the link icon (if there) will go to the po
<del><http://www.gimp.org/tutorials/Color2BW/index.html></del> [<i class="fa
fa-link"></i>]({filename}../../tutorials/Color2BW/index.md)
<del><http://www.gimp.org/tutorials/Coloring_A_BW_Sketch/index.html></del> [<i class="fa
fa-link"></i>]({filename}../../tutorials/Coloring_A_BW_Sketch/index.md)
-<http://www.gimp.org/tutorials/ContrastMask/index.html>
-<http://www.gimp.org/tutorials/Creating_Icons/index.html>
+<del><http://www.gimp.org/tutorials/ContrastMask/index.html></del> [<i class="fa
fa-link"></i>]({filename}../../tutorials/ContrastMask/index.md)
+<del><http://www.gimp.org/tutorials/Creating_Icons/index.html></del> [<i class="fa
fa-link"></i>]({filename}../../tutorials/Creating_Icons/index.md)
<http://www.gimp.org/tutorials/Custom_Brushes/index.html>
<http://www.gimp.org/tutorials/Digital_Black_and_White_Conversion/index.html>
<http://www.gimp.org/tutorials/Draw_A_Paint_Brush/index.html>
diff --git a/content/tutorials/ContrastMask/index.md b/content/tutorials/ContrastMask/index.md
index 7b188a5..150d6ba 100644
--- a/content/tutorials/ContrastMask/index.md
+++ b/content/tutorials/ContrastMask/index.md
@@ -1,26 +1,31 @@
Title: Creating a Contrast Mask
Date: 2002
-Modified: 2015-08-28T15:01:29-05:00
-Author: Marco (LM) Lamberto
+Modified: 2015-09-23T12:05:07-05:00
+Author: Eric R. Jeschke
-Text and images Copyright (C) 2002 [Eric R. Jeschke](mailto:ericNOSPAM redskiesatnight com) and may not be
used without permission of the author.
+<small>Text and images Copyright (C) 2002 [Eric R. Jeschke](mailto:ericNOSPAM redskiesatnight com) and may
not be used without permission of the author.</small>
## Intention
- 
+<figure>
+<img src='before.jpg' alt='before'/>
+<img src='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.
The basic technique is to create a layer above the image that contains a B&W negative of the image. The
images are combined in overlay mode: dark parts with light, light parts with dark. All the while your
original image remains blissfully unchanged on its layer.
-Giving credit where credit is due: I did not come up with this method. I adapted it for GIMP from a
Photoshop tutorial on the [luminous-landscape.com web site](http://www.luminous-landscape.com/) (great
photography web site BTW; I recommend it).
+Giving credit where credit is due: I did not come up with this method. I adapted it for GIMP from a
Photoshop tutorial on [The Luminous Landscape web site](http://www.luminous-landscape.com/) (great
photography web site BTW; I recommend it).
The contrast mask technique does some similar things for the exposure as the digital split ND filter and the
blended exposures techniques. If you feel your image has exposure problems you might want to consider those
techniques as well. Each one has different strengths. Occasionally this technique gives unacceptable color
shifts in certain images. Sometimes it is just the ticket. Experiment to see if it can work for your
particular image.
## The Procedure
-
+<figure>
+<img src='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.
@@ -28,31 +33,49 @@ We want to brighten the dark areas a little and darken the light areas a little.
## Step 1
-
+<figure>
+<img src='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.
## Step 2
- 
+<figure>
+<img src='editlayerattr.jpg' alt='editlayerattr'/>
+<img src='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).
## Step 3
-
+<figure>
+<img src='image2.jpg' alt='image2.jpg'/>
+</figure>
-Select the Contrast Mask layer. Go to the image window and right-click, selecting <span
class="filter"><Image> Image -> Colors -> Desaturate</span>. The image should look B&W.
+Select the Contrast Mask layer. Go to the image window and right-click, selecting:
+<div class="MenuCmd"><span>Image → Colors → Desaturate</span></div>
+
+The image should look B&W.
## Step 4
-
+<figure>
+<img src='image3.jpg' alt='image3.jpg'/>
+</figure>
+
+Right-click and select
+<div class="MenuCmd"><span> Image → Colors → Invert</span></div>
-Right-click and select <span class="filter"><Image> Image -> Colors -> Invert</span>. You now have a B&W
negative image of your original. We're going to combine this with the original (light with dark, dark with
light) to reduce the overall contrast.
+You now have a B&W negative image of your original. We're going to combine this with the original (light
with dark, dark with light) to reduce the overall contrast.
## Step 5
- 
+<figure>
+<img src='layers4.jpg' alt='layers4'/>
+<img src='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.
@@ -60,9 +83,17 @@ Don't worry, we're not done yet.
## Step 6
- 
+<figure>
+<img src='original.jpg' alt='original'/>
+<img src='image5.jpg' alt='image5' />
+</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. After blurring the contrast mask the overall image should now look much sharper.
+Go back to the image window and right click, selecting
+
+<div class="MenuCmd"><span class="filter">Filters → Blur → Gaussian Blur</span></div>
+
+You will need to experiment to find the best value, but typically a value between 10 and 30 will do nicely.
After blurring the contrast mask the overall image should now look much sharper.
Click on the "eye" next to the Contrast Mask layer in the Layers dialog to rapidly compare the image with
and without the mask. Similarly, turn off the Background layer if you want to view the mask to do further
work on it.
@@ -70,13 +101,20 @@ The image at top left is the original, the top right is with the contrast mask.
## Step 7
- 
+<figure>
+<img src='contrastdialog.jpg' alt='original'/>
+<img src='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.
## Step 8
- 
+<figure>
+<img src='histogram-before.jpg' alt='Histogram-Before'/>
+<img src='histogram-after.jpg' alt='Histogram-After' />
+<img src='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.
@@ -84,9 +122,13 @@ Note how the typical contrast adjustment has lost a lot of values at both ends,
## Step 9
-
+<figure>
+<img src='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
-You'll have to flatten the image if you are saving it to a typical image format like TIFF or JPEG (but not
if you are saving to GIMP's native XCF format). To do that, right-click on the image and select <span
class="filter"><Image> Layers -> Flatten Image</span>.
+<div class="MenuCmd"><span class="filter">Layers → Flatten Image</span></div>
## Fine Tuning
@@ -103,15 +145,24 @@ Now that your contrast mask is created, it's time to fine tune it. Here are some
## Other Examples
- 
+<figure>
+<img src="tree.jpg" alt="tree.jpg"/>
+<img src="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="nd-original-1.jpg" alt="nd-original-1.jpg"/>
+<img src="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="nd-filter-1.jpg" alt="nd-filter-1.jpg"/>
+<img src="utsunset-whmask.jpg" alt="utsunset-whmask.jpg"/>
+</figure>
With a digital split ND filter. (left image)
With a contrast mask as described above, plus a layer mask with a gradient fill, so the contrast mask is
mostly applied to the area below the cliffs. (right image)
diff --git a/content/tutorials/Creating_Icons/aa1.png b/content/tutorials/Creating_Icons/aa1.png
new file mode 100644
index 0000000..06790da
Binary files /dev/null and b/content/tutorials/Creating_Icons/aa1.png differ
diff --git a/content/tutorials/Creating_Icons/aa2.png b/content/tutorials/Creating_Icons/aa2.png
new file mode 100644
index 0000000..f73370c
Binary files /dev/null and b/content/tutorials/Creating_Icons/aa2.png differ
diff --git a/content/tutorials/Creating_Icons/button.png b/content/tutorials/Creating_Icons/button.png
new file mode 100644
index 0000000..93fabc1
Binary files /dev/null and b/content/tutorials/Creating_Icons/button.png differ
diff --git a/content/tutorials/Creating_Icons/files.png b/content/tutorials/Creating_Icons/files.png
new file mode 100644
index 0000000..bd83194
Binary files /dev/null and b/content/tutorials/Creating_Icons/files.png differ
diff --git a/content/tutorials/Creating_Icons/finished.png b/content/tutorials/Creating_Icons/finished.png
new file mode 100644
index 0000000..8ba8281
Binary files /dev/null and b/content/tutorials/Creating_Icons/finished.png differ
diff --git a/content/tutorials/Creating_Icons/gradient.png b/content/tutorials/Creating_Icons/gradient.png
new file mode 100644
index 0000000..058a191
Binary files /dev/null and b/content/tutorials/Creating_Icons/gradient.png differ
diff --git a/content/tutorials/Creating_Icons/highlight.png b/content/tutorials/Creating_Icons/highlight.png
new file mode 100644
index 0000000..3430f5d
Binary files /dev/null and b/content/tutorials/Creating_Icons/highlight.png differ
diff --git a/content/tutorials/Creating_Icons/index.htrw b/content/tutorials/Creating_Icons/index.htrw
new file mode 100644
index 0000000..bd7459d
--- /dev/null
+++ b/content/tutorials/Creating_Icons/index.htrw
@@ -0,0 +1,278 @@
+<!--#include virtual="/includes/wgo-xhtml-init.xhtml" -->
+<title>GIMP - Creating Icons</title>
+<!--#include virtual="/includes/wgo-look-feel.xhtml" -->
+<!--#include virtual="/includes/wgo-page-init.xhtml" -->
+<h1>Creating Icons</h1>
+<p>
+ Text and images Copyright (C) 2002 <a href="mail:People-Steiner_Jacub">Jakub Steiner</a> and may not be
used without permission of the author.
+</p>
+
+<h2>Intention</h2>
+<p>
+ Almost every desktop enviroment I've seen has a special application for creating icons, usually a very
limited drawing application.
+ In this short tutorial, we'll show you how GIMP (GNU Image Manipulation Program) can help you create
icons for your desktop.
+</p>
+
+<h2>Before You Begin</h2>
+<p>
+ As with any new task, it will help to have a little background information:
+</p>
+
+<h2>Filenames and Structure</h2>
+<p class="images">
+ <img src="files.png" alt="" />
+</p>
+<p>
+ 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 <a
href="http://nautilus.eazel.com/";>Nautilus</a>
+ 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)
+</p>
+<p>
+ Nautilus (gnome-vfs) can't yet handle compressed GIMP native files
+</p>
+
+<h2>Choosing a Color Palette</h2>
+<p class="images">
+ <img src="palette.png" alt="" />
+</p>
+<p>
+ 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.
+</p>
+<p>
+ You may want to consider using a palette that already exists. Many operating systems like MS Windows or
MacOS have a system-wide
+ color palette that is used on low color depth screens. You could also use one of the palettes that Tuomas
Kuosmanen has included in his
+ <a href="http://tigert.gimp.org/gimp/palettes/";>public palettes list</a>.
+</p>
+<p>
+ If you prefer to create your own palette, it's best to just define the most basic colors. That is, focus
mostly on defining a set of hues you'll be using.
+ Later on, you can tweak the value or saturation to create highlights or shadows of that particular color.
+ Having a complex palette with many variations will make it complex and hard to navigate.
+</p>
+
+<h2>Getting Started</h2>
+<p>
+ When you're ready to start, run GIMP by selecting <span class="filter">Applications -> Graphics ->
GIMP</span>
+ Image Editor from your menu panel, or typing <b>gimp</b> at the command line. If you haven't used GIMP
before,
+ the default window layout may be a little confusing. It's a lot like Photoshop and other similar
applications,
+ in that it uses a large number of dialogs. Select items from the
+ <span class="filter">File -> Dialogs</span> menu to choose which dialog windows you'd like to have open
and which ones you'd like to have closed.
+ For icon work, you may find it most convenient to use the main window,
+ plus the palette and layers dialogs, and of course the actual image you're working on.
+</p>
+<p>
+ To create a new image file, press <kbd>Ctrl+N</kbd>. Select a 48x48 pixel image, the standard Gnome icon
size.
+ Because working on such a tiny pixmap requires a lot of detail, zoom in to work on a pixel-by-pixel level.
+ Try <i>8:1</i> magnification (<span class="filter"><Image> View -> Zoom -> 8:1</span>).
+</p>
+<p>
+ At that magnification, however, you will begin to lose perspective. It's best to keep an additional window
open with an unmagnified view,
+ so you can see what your icon will look like. To do that, choose
+ <span class="filter"><Image> View -> New view</span> from the image context menu
+ (the little arrow in the upper left side of the window). Use a <i>1:1</i> zoom on this view,
+ so that you can paint at an <i>8:1</i> zoom and see the results immediately.
+</p>
+<p>
+ Make sure to turn off the selection decorations on the <i>1:1</i> window. To do that, focus the window and
press <kbd>Ctrl+T</kbd> or choose
+ <span class="filter"><Image> View -> Toggle selection</span>.
+</p>
+
+<h2>A Few Tricks</h2>
+<p>
+ It seems at first that creating an icon is incredibly restrictive. After all, you have just a tiny grid
where you will soon run out of pixels.
+ However, there are a few tricks you can use to fool the human eye and make your icons look better.
+ Basically, you'll be simulating or implying shape with color value and opacity.
+</p>
+
+<h2>Antialiasing</h2>
+<p class="images">
+ <img src="aa1.png" alt="" />
+ <img src="aa2.png" alt="" />
+</p>
+<p>
+ One of the basic aspects of bitmap images is the negative effect of Aliasing.<br />
+ Although many tools like the brush tool work well in large images, they aren't effective at the icon size.
In particular,
+ drawing with a 1x1 pixel brush doesn't behave as well as could be hoped.
+</p>
+<p>
+ The solution is to anti-alias manually. Some people prefer to work at a higher resolution, with full
anti-aliasing, and then scale down,
+ but the icon loses smoothness and most of the benefit of the larger size. In the end, it's necessary to
touch up the image manually.
+ In most cases, you're better off starting with just your 48x48 square and not scaling.
+</p>
+<p>
+ As much as it sounds hard, manual anti-aliasing is easy, and even fun. All you need for this is the
<i>opacity</i> setting of the pencil tool.
+ Say we have an outline that's aliased (Like the image to the left). Select a 1x1 brush and set the opacity
to something like 40%.
+ When you start drawing with this black brush by clicking on the white surface, it will become light gray.
One more click and it gets darker.
+ That way you can easily create fluent transitions between the two border colors. You can also change the
active color using <kbd>Ctrl</kbd>-leftMB or just by
+ swapping forground and background colors (<b>X</b>).
+</p>
+<p>
+ If you're using layers to have more freedom experimenting, you will find the erase tool as useful for
anti-aliasing as the pencil (Right image).
+ Make sure you turn on the hard edges option, for maximum precision.
+</p>
+
+<h2>Shading with Gradients</h2>
+<p>
+ You can use gradients to enhance the shape of an object. For round objects, choose a radial gradient, and
for curves, use a linear gradient.
+ For filling surfaces, you'll want to use linear gradients almost every time. Even when the surface is
supposed to be flat, a slight gradient adds realism.
+ Make sure to keep the gradient subtle, though: too much of a difference between the two extremes and
you'll ruin the effect.
+</p>
+
+<h2>Highlights and Shadows</h2>
+<p>
+ For any given object, make sure you experiment a little with highlights and shadows, and not just the
regular drop shadow used on most Gnome icons.
+ Try giving your icon real material properties with some light reflections. Whether it's just a little
gleam or shine from a corner or a suggestion
+ of depth by lowering the saturation or value of a corner in the back, you can improve the look of an icon
with just a little work.
+</p>
+<p>
+ For smooth shading, select the area you want to work with and then apply the airbrush tool. You'll only
affect the selection,
+ so you don't have to worry about overspray. To do hard highlights, use the one pixel pencil tool and, as
before, a lowered opacity for the color.
+</p>
+
+<h2>Work Example</h2>
+<p>
+ In this small tutorial, Ximian artist Jakub Steiner will demonstrate most of the techniques described in
the section called "A Few Tricks" as he draws a TV icon.
+</p>
+
+<h2>Basic Shape</h2>
+<p class="images">
+ <img src="rectangle.png" alt="" />
+</p>
+<p>
+ 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.
+</p>
+<p>
+ Create a separate foreground layer for the shape, and choose a light, but not completely white, color for
the background layer.
+ After you're done with the icon, you can drag colors from the palette to the background layer to make sure
that the icon looks right on any background.
+</p>
+<p>
+ Drag the black preview rectangle from the toolbox, or press <kbd>Ctrl-+</kbd> to fill the silhouette. You
should have a black square on a light background.
+ Then, use the eraser tool to smooth the edges of the square so that the shape is better. This will also
add a slight white shine to the corners of the image.
+</p>
+
+<h2>Making it Plastic</h2>
+<p class="images">
+ <img src="gradient.png" alt="" />
+</p>
+<p>
+ Next, we're going to use alpha blending of a selection to give a more three dimensional appearance to the
silhouette.
+</p>
+<p>
+ Select the TV silhouette by right-clicking on the layer in the layer window and choosing Alpha to
Selection.
+ Shrink the selection by <i>1 pixel</i> 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.
+</p>
+<p class="images">
+ <img src="highlight.png" alt="" />
+</p>
+<p>
+ 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.
+</p>
+
+<h2>Modelling the Screen</h2>
+<p class="images">
+ <img src="screen.png" alt="" />
+</p>
+<p>
+ 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.
+</p>
+<p class="images">
+ <img src="reflection.png" alt="" />
+</p>
+<p>
+ 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.
+</p>
+<p>
+ 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 <i>Overlay</i>.
+</p>
+<p class="images">
+ <img src="button.png" alt="" />
+</p>
+<p>
+ 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.
+</p>
+
+<h2>Modelling the Remote Control</h2>
+<p class="images">
+ <img src="remote1.png" alt="" />
+</p>
+<p>
+ 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.
+</p>
+<p class="images">
+ <img src="remote3.png" alt="" />
+</p>
+<p>
+ 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.
+</p>
+<p class="images">
+ <img src="remote4.png" alt="" />
+</p>
+<p>
+ 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.
+</p>
+<p class="images">
+ <img src="remote5.png" alt="" />
+</p>
+<p>
+ 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.
+</p>
+<p class="images">
+ <img src="remote6.png" alt="" />
+</p>
+<p>
+ 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.
+</p>
+<p class="images">
+ <img src="remote8.png" alt="" />
+</p>
+<p>
+ 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.
+</p>
+
+<h2>Adding Glow</h2>
+<p class="images">
+ <img src="remote9.png" alt="" />
+</p>
+<p>
+ 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 <i>overlay</i>, creating the transparency effect.
+</p>
+
+<h2>The Final Product</h2>
+<p class="images">
+ <img src="finished.png" alt="" />
+</p>
+<p>
+ Now, you've got a final product: a television, with remote.
+</p>
+
+<!--#include virtual="/includes/wgo-page-fini.xhtml" -->
+ <div>
+ <span id="footerleft">
+ Tutorial © 2002 <a href="home:People-Steiner_Jacub">Jakub Steiner (jimmac)</a>
+ </span>
+ <span id="footerright">
+ <a href="mail:People-Steiner_Jacub">jimmac ximian com</a>
+ </span>
+ </div>
+<!--#include virtual="/includes/wgo-xhtml-fini.xhtml" -->
diff --git a/content/tutorials/Creating_Icons/index.md b/content/tutorials/Creating_Icons/index.md
new file mode 100644
index 0000000..3f6f6b8
--- /dev/null
+++ b/content/tutorials/Creating_Icons/index.md
@@ -0,0 +1,169 @@
+Title: Creating Icons
+Date: 2002
+Modified: 2015-09-23T12:05:07-05:00
+Author: Jakub Steiner
+
+<small>Text and images Copyright (C) 2002 [Jakub Steiner](mailto:jimmacNOSPAM ximian com) and may not be
used without permission of the author.</smalL>
+
+## Intention
+
+Almost every desktop enviroment I've seen has a special application for creating icons, usually a very
limited drawing application. In this short tutorial, we'll show you how GIMP (GNU Image Manipulation Program)
can help you create icons for your desktop.
+
+## Before You Begin
+
+As with any new task, it will help to have a little background information:
+
+## Filenames and Structure
+
+<figure>
+<img src="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)
+
+Nautilus (gnome-vfs) can't yet handle compressed GIMP native files
+
+## Choosing a Color Palette
+
+<figure>
+<img src="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.
+
+You may want to consider using a palette that already exists. Many operating systems like MS Windows or
MacOS have a system-wide color palette that is used on low color depth screens. You could also use one of the
palettes that Tuomas Kuosmanen has included in his [public palettes
list](http://tigert.gimp.org/gimp/palettes/).
+
+If you prefer to create your own palette, it's best to just define the most basic colors. That is, focus
mostly on defining a set of hues you'll be using. Later on, you can tweak the value or saturation to create
highlights or shadows of that particular color. Having a complex palette with many variations will make it
complex and hard to navigate.
+
+## Getting Started
+
+When you're ready to start, run GIMP by selecting <span class="filter">Applications -> Graphics ->
GIMP</span> Image Editor from your menu panel, or typing **gimp** at the command line. If you haven't used
GIMP before, the default window layout may be a little confusing. It's a lot like Photoshop and other similar
applications, in that it uses a large number of dialogs. Select items from the <span class="filter">File ->
Dialogs</span> menu to choose which dialog windows you'd like to have open and which ones you'd like to have
closed. For icon work, you may find it most convenient to use the main window, plus the palette and layers
dialogs, and of course the actual image you're working on.
+
+To create a new image file, press <kbd>Ctrl+N</kbd>. Select a 48x48 pixel image, the standard Gnome icon
size. Because working on such a tiny pixmap requires a lot of detail, zoom in to work on a pixel-by-pixel
level. Try _8:1_ magnification (<span class="filter"><Image> View -> Zoom -> 8:1</span>).
+
+At that magnification, however, you will begin to lose perspective. It's best to keep an additional window
open with an unmagnified view, so you can see what your icon will look like. To do that, choose <span
class="filter"><Image> View -> New view</span> from the image context menu (the little arrow in the upper
left side of the window). Use a _1:1_ zoom on this view, so that you can paint at an _8:1_ zoom and see the
results immediately.
+
+Make sure to turn off the selection decorations on the _1:1_ window. To do that, focus the window and press
<kbd>Ctrl+T</kbd> or choose <span class="filter"><Image> View -> Toggle selection</span>.
+
+## A Few Tricks
+
+It seems at first that creating an icon is incredibly restrictive. After all, you have just a tiny grid
where you will soon run out of pixels. However, there are a few tricks you can use to fool the human eye and
make your icons look better. Basically, you'll be simulating or implying shape with color value and opacity.
+
+## Antialiasing
+
+<figure>
+<img src="aa1.png" alt="aa1.png" />
+<img src="aa2.png" alt="aa2.png" />
+</figure>
+
+One of the basic aspects of bitmap images is the negative effect of Aliasing.
+Although many tools like the brush tool work well in large images, they aren't effective at the icon size.
In particular, drawing with a 1x1 pixel brush doesn't behave as well as could be hoped.
+
+The solution is to anti-alias manually. Some people prefer to work at a higher resolution, with full
anti-aliasing, and then scale down, but the icon loses smoothness and most of the benefit of the larger size.
In the end, it's necessary to touch up the image manually. In most cases, you're better off starting with
just your 48x48 square and not scaling.
+
+As much as it sounds hard, manual anti-aliasing is easy, and even fun. All you need for this is the
_opacity_ setting of the pencil tool. Say we have an outline that's aliased (Like the image to the left).
Select a 1x1 brush and set the opacity to something like 40%. When you start drawing with this black brush by
clicking on the white surface, it will become light gray. One more click and it gets darker. That way you can
easily create fluent transitions between the two border colors. You can also change the active color using
<kbd>Ctrl</kbd>-leftMB or just by swapping forground and background colors (**X**).
+
+If you're using layers to have more freedom experimenting, you will find the erase tool as useful for
anti-aliasing as the pencil (Right image). Make sure you turn on the hard edges option, for maximum precision.
+
+## Shading with Gradients
+
+You can use gradients to enhance the shape of an object. For round objects, choose a radial gradient, and
for curves, use a linear gradient. For filling surfaces, you'll want to use linear gradients almost every
time. Even when the surface is supposed to be flat, a slight gradient adds realism. Make sure to keep the
gradient subtle, though: too much of a difference between the two extremes and you'll ruin the effect.
+
+## Highlights and Shadows
+
+For any given object, make sure you experiment a little with highlights and shadows, and not just the
regular drop shadow used on most Gnome icons. Try giving your icon real material properties with some light
reflections. Whether it's just a little gleam or shine from a corner or a suggestion of depth by lowering the
saturation or value of a corner in the back, you can improve the look of an icon with just a little work.
+
+For smooth shading, select the area you want to work with and then apply the airbrush tool. You'll only
affect the selection, so you don't have to worry about overspray. To do hard highlights, use the one pixel
pencil tool and, as before, a lowered opacity for the color.
+
+## Work Example
+
+In this small tutorial, Ximian artist Jakub Steiner will demonstrate most of the techniques described in the
section called "A Few Tricks" as he draws a TV icon.
+
+## Basic Shape
+
+<figure>
+<img src="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.
+
+Create a separate foreground layer for the shape, and choose a light, but not completely white, color for
the background layer. After you're done with the icon, you can drag colors from the palette to the background
layer to make sure that the icon looks right on any background.
+
+Drag the black preview rectangle from the toolbox, or press <kbd>Ctrl-+</kbd> to fill the silhouette. You
should have a black square on a light background. Then, use the eraser tool to smooth the edges of the square
so that the shape is better. This will also add a slight white shine to the corners of the image.
+
+## Making it Plastic
+
+<figure>
+<img src="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="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="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="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="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="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="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="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="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="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="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="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="finished.png" alt="finished.png"/>
+</figure>
+Now, you've got a final product: a television, with remote.
+
diff --git a/content/tutorials/Creating_Icons/palette.png b/content/tutorials/Creating_Icons/palette.png
new file mode 100644
index 0000000..6f94501
Binary files /dev/null and b/content/tutorials/Creating_Icons/palette.png differ
diff --git a/content/tutorials/Creating_Icons/rectangle.png b/content/tutorials/Creating_Icons/rectangle.png
new file mode 100644
index 0000000..26c3717
Binary files /dev/null and b/content/tutorials/Creating_Icons/rectangle.png differ
diff --git a/content/tutorials/Creating_Icons/reflection.png b/content/tutorials/Creating_Icons/reflection.png
new file mode 100644
index 0000000..2c91a55
Binary files /dev/null and b/content/tutorials/Creating_Icons/reflection.png differ
diff --git a/content/tutorials/Creating_Icons/remote1.png b/content/tutorials/Creating_Icons/remote1.png
new file mode 100644
index 0000000..e38effb
Binary files /dev/null and b/content/tutorials/Creating_Icons/remote1.png differ
diff --git a/content/tutorials/Creating_Icons/remote3.png b/content/tutorials/Creating_Icons/remote3.png
new file mode 100644
index 0000000..b828146
Binary files /dev/null and b/content/tutorials/Creating_Icons/remote3.png differ
diff --git a/content/tutorials/Creating_Icons/remote4.png b/content/tutorials/Creating_Icons/remote4.png
new file mode 100644
index 0000000..db6b5e6
Binary files /dev/null and b/content/tutorials/Creating_Icons/remote4.png differ
diff --git a/content/tutorials/Creating_Icons/remote5.png b/content/tutorials/Creating_Icons/remote5.png
new file mode 100644
index 0000000..da6d1cc
Binary files /dev/null and b/content/tutorials/Creating_Icons/remote5.png differ
diff --git a/content/tutorials/Creating_Icons/remote6.png b/content/tutorials/Creating_Icons/remote6.png
new file mode 100644
index 0000000..02c8f26
Binary files /dev/null and b/content/tutorials/Creating_Icons/remote6.png differ
diff --git a/content/tutorials/Creating_Icons/remote8.png b/content/tutorials/Creating_Icons/remote8.png
new file mode 100644
index 0000000..07367f7
Binary files /dev/null and b/content/tutorials/Creating_Icons/remote8.png differ
diff --git a/content/tutorials/Creating_Icons/remote9.png b/content/tutorials/Creating_Icons/remote9.png
new file mode 100644
index 0000000..83274f7
Binary files /dev/null and b/content/tutorials/Creating_Icons/remote9.png differ
diff --git a/content/tutorials/Creating_Icons/screen.png b/content/tutorials/Creating_Icons/screen.png
new file mode 100644
index 0000000..fbfcabe
Binary files /dev/null and b/content/tutorials/Creating_Icons/screen.png differ
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
