Image Editing for Beginners - Training Handout

Image Editing for
Beginners
Image Formats...............................................................................................................................2
.BMP.............................................................................................................................................2
.GIF...............................................................................................................................................2
.JPG..............................................................................................................................................2
.PNG.............................................................................................................................................2
.TIFF...............................................................................................................................................3
Suggested Usage.......................................................................................................................3
Software and Techniques............................................................................................................4
PowerPoint..................................................................................................................................4
Gimp............................................................................................................................................4
PrtScr............................................................................................................................................8
Resolution.......................................................................................................................................9
On Screen images.....................................................................................................................9
Printed images...........................................................................................................................9
Raster vs. Vector Images............................................................................................................10
Inkscape....................................................................................................................................10
Additional Resources..................................................................................................................11

Image Formats
If you are scavenging images from the internet, then you pretty much have to take what you
can get in terms of the file format. When creating images from scratch, however, it is important
to consider which file format is the most appropriate for your use. See the PowerPoint
presentation from this class for illustrative examples of these file types.
.BMP
The Bitmap (BMP) is a Microsoft Windows proprietary format and was once one of the only
image formats in existence. These images are high color and high quality but they do not scale
well and the files are uncompressed, which results in very large file sizes. Additionally, because
BMP is a Windows format it does not always work across platforms. Many of the newer image
formats listed below resolve these issues and BMP images are rarely used today, except maybe
by pixel artists.
.GIF
The Graphics Interchange Format (GIF) was created in 1989 and was the first format to be used
on the web. GIFs are limited to an 8-bit palette of 256 colors and provides lossless compression
if kept within this color palette. (If you try to use more colors in a gif image, it will be
compressed until only 256 colors are used. For example, instead of using 5 variations of blue,
the image will be compressed to use only one.) This compression results in a small file size,
which made the GIF popular in the early days of the web when bandwidth was limited. GIF can
support transparency and is the only format that can support simple animations. It is still in use
today online for simple images such as logos, icons, and clipart.
.JPG
The Joint Photographic Experts Group (JPEG or more commonly JPG) format is the most
popular format for use on the web today and has been considered the standard since 1994. JPG
supports high color images but uses “lossy” compression, so some image quality is sacrificed in
deference to a smaller file size. This drop in quality is not necessarily noticeable at first glance,
but becomes apparent when you zoom in or scale up the image. The JPG format does not
support transparency and the lossy compression can make text difficult to read. Overall this is a
very popular and appropriate format for photographs and complex images.
.PNG
The Portable Network Graphic (PNG) was specifically designed for the web and approved as a
web standard in 1996. It supports full color with lossless compression. PNG is a superior format
to GIF; it has more advanced support for transparency, results in a smaller file size, and
Image Editing for Beginners 2

provides higher image quality. The only exception is the fact that PNG cannot support
animation. The PNG format is excellent for logos, icons, and semi-transparent images. It is not
ideal for large, detailed photographs as the lossless compression can result in file sizes larger
than JPG.
.TIFF
The Tagged Image File Format (TIFF) was created for use in desktop publishing, and is popular
in graphic design, publishing, and photography. The TIFF is a very flexible format; it supports
several types of compression, a range of color palettes, and results in rich, high quality images.
The drawbacks to TIFF files are huge file sizes, which rapidly consumes disk space, slow load
times, and incompatibility with some platforms. TIFF files are the preferred format for
preparing high quality print media, but should not be used on the web.
Suggested Usage
In general, if you are creating images with text, line art, logos, or transparency you should save
them in the PNG format. Photographs should be saved as JPG files, unless they require the use
of transparency. If you are very serious about producing high quality print media you can use
TIFF files, although for most purposes PNG and JPG files will print adequately.

Software and Techniques
PowerPoint
Anything you could show during a presentation can also be saved as an image for use on a wiki
or in a printed document. You can choose the file format from the “Save as file type” drop-
down in the “Save as” dialog. Any of the image formats described in the previous section are
selectable from this drop-down. You then have the option to
save every slide in the presentation or just the one you are
currently viewing. The height and width of the image will
be based on the page setup settings in PowerPoint, see the
table below for details.
Page Setup Pixels (WxH) Print size (WxH) Resolution (ppi)
On-screen Show (4:3) 960 x 720 10” x 7.5” 96
On-screen Show (16:9) 960 x 540 10” x 5.6” 96
Custom (20” x 15”) 1920 x 1440 20” x 15” 96
The print size of the image is accurate to the slide size in PowerPoint, and since the resolution is
held to a constant 96 ppi, the screen size (pixels) scale to accommodate the ppi ratio. The image
can be further edited using GIMP, so if you want a higher resolution image a good strategy
would be to scale-up the PowerPoint using custom page setup, save the image, then increase
the resolution in GIMP (which will reduce the print size to something more reasonable).
Gimp
The GNU Image Manipulation Protocol (GIMP or Gimp) is a free, open-source, cross-platform
program that has capabilities similar to Adobe Photoshop. This is a tool developed for expert
users, so there is a learning curve associated with it. Luckily, the fact that it is free and works
well across platforms means there is a large community of users who provide online tutorials,
templates, and other resources. Simply search for “gimp tutorial” and your topic of interest and
you’ll find several sites with the information you need.

The Basics
When you first open Gimp you will see three windows. On the far left is the Toolbox, which has
quick access to the
various selection,
drawing, and color
tools that you will use
most often. In the
middle is the Stage,
where the canvas and
all of the full menus
live. On the far right is
the Layers window,
which you will use less
frequently. For a more
detailed description of
each tool see the Gimp
Reference Guides in
the class folder. If you
accidently close the Toolbox or Layers, you can get them back under the “Windows” menu on
the stage.
In many cases there is more than one way to access a given tool, so use the method you find
most comfortable. For example, every option in the Toolbox is available from the menus on the
stage, but it is typically faster to select what you want from the Toolbox than it is to search
through several menus.
Turning a JPG into a transparent PNG
Adding transparency to a clipart image that has a single-color
background and well-defined edges, like the one shown at left, is a
simple task.
1. Open the image in Gimp.
2. In the Layers window, right-click on the Background layer and
select “Add Alpha Channel”.
3. Select the magic wand from the Toolbox, and click anywhere
on the white background of the canvas.
4. Go to Edit > Clear, or press the “delete” key on your keyboard.
5. You should now see a gray checkerboard behind the star, this indicates a transparent region.

6. Make sure you save your file as a .png, otherwise (because .jpg cannot support
transparency) it will look like nothing has changed.
Working with Layer Masks
The above method for adding transparency works well if the image background is a single
color. But what do you do if you want to remove a more complicated background, like from a
photograph?
The original photo After editing
The magic wand will only select connected areas of the same color, so it won’t work in this case.
You could use the eraser tool, but what if 10 minutes into editing you discover a mistake you
made at the very outset of your work? The only option would be to undo back to that point, or
start over. Layer masks allow you to remove a complex background, in a basically error-proof
way.
1. Open the image in Gimp.
2. In the Layers window, right-click on the Background layer and select “Add Alpha
Channel”.
3. Right-click on the Background layer again and this time select “Add Layer Mask”. A
new window pops up, keep the default “White (full opacity)” and click “Add”.
4. The Layers window now shows a white box next to the Background layer, this is the
layer mask. Click on the mask to make sure it is selected
before continuing. It will have a white border around it.
5. Anything you color black on the layer mask will become transparent. It gives you a way
to “paint the background transparent” without altering the base image. If you accidently
make something transparent that shouldn’t be, just change to white and you can make it
opaque again.

Select the brush tool from the Toolbox, and start painting on the canvas. If a black spot
appears, it means you have the base image selected and you need to select the layer
mask.
6. To edit large areas you can use the select and fill tools to speed up your work. To make a
smoother edge going from the child to the transparent background it helps to switch
from the hard brush to the fuzzy brush. With the brush tool selected, additional options
appear in the bottom half of the Toolbox window. Click the
circle picture beside the “Brush:” label to see all of your
options. There are several unique brushes, in addition to the
hard and fuzzy circles, and from here you can also vary the
size of the brush. To adjust the size further, use the scale
slider.
7. Once you are finished, save the file as a .png. PNG files do not preserve layers, so if you
anticipate the need to adjust the layer mask, you should also save the image as .xcf. XCF
is the native file format for Gimp and preserves all layers and settings in the image.
Composing Images with Multiple Layers
Anything you can do to a single layer you can do with multiple. Working with multiple layers
allows you to compose complex images. You can add a new layer by right-clicking in the blank
space of the Layers window and selecting “Add New Layer”. The default is the same size as the
canvas and you can choose between white, transparency, and the currently selected color. Use
File > Open as Layers… to open another image as a layer within the currently open image.
The layers stack with the first layer in the list on the top of the image and the last layer in the list
at the bottom. Click and drag a layer to change its position in the list. Renaming layers can
make it easier to compose complex images. Double-click on the layer name to change it to
something more appropriate or memorable.
Filters, Dialogs, and Scripts, oh my!
The capabilities of Gimp far exceed my ability to document them in this one training
companion. As mentioned previously, the online community is an excellent resource for
tutorials and documentation on the use of Gimp. I also encourage you to take some time and
play around with the different effects to see the results first-hand.
See the class PowerPoint and exercises for several examples. The example images from the class
presentation are also available in the class folder.

PrtScr
While most screenshot tools provide the same basic features, I like the interface and some of the
extra settings available from PrtScr. It can be downloaded from the PrtScr homepage
(http://www.fiastarta.com/PrtScr/).
With this tool you can take a screenshot of
multiple monitors (PrtScn), the active window
(Alt+PrtScn), a rectangular area (PrtScn >
Ctrl+left mouse), or a free-select area (PrtScn >
left mouse) chosen with the mouse. From there
you can give the image a title and save it
directly to the desktop with that filename, or
save it to any desired location. You can copy
the screenshot to the clipboard, attach it to an
email in Outlook, or open it directly in Paint for
simple editing.
Besides these basic features, you can annotate the screenshot (PrtScn > right-click to draw)
before you take it, and use the built in magnifier (Ctrl+PrtScn). This will zoom in to show
individual pixels on the screen, identifying the location and hex color code of each.
To speed up workflows you can set an alternate hotkey, instead of PrtScn, and you can set a
default behavior: open dialog (shown above), save to desktop, open in Paint, copy to clipboard.

Resolution
Resolution describes the pixel density of an image, or the number of pixels displayed per inch
(ppi). This ratio determines the image quality of anything that will be printed. Resolution is a
confusing topic because the term has been used inappropriately to describe the screen size of
computer monitors. When you say that your monitor has a screen resolution of 1680 x 1050
you’re describing the number of pixels (1,765,000), not the pixel density.
On Screen images
Most monitors today range from 67 to 130 ppi, although many better-than-print displays have
been developed. The recommendation for images that will be used online or in on-screen only
media is to use 72 ppi. Higher resolution (ppi) images could be used without ill effect, but due
to the inability of monitors to accurately display these higher quality graphics, it can result in
unnecessarily large file sizes.
When preparing images for the web, keep to a resolution of 72 ppi and scale the number of
pixels WxH to control the size that the image will be displayed in a browser window. Change
image size or resolution in Gimp by selecting the Image menu > Scale Image.
Printed images
Printers are able to achieve a higher resolution (ppi) than computer monitors, so the
recommendation is to use 300 ppi for images that will be printed on paper. The human eye
cannot easily distinguish differences in resolution above 300 ppi, so higher resolution images
are just a waste of disk space. Adjust the print size (in inches) for an accurate idea of how large
the image will be when printed; in Gimp, select the Image menu > Print Size.
For a concrete example, look at the parrot images below from the presentation examples.
Image Screen size (px) Print size (in)
Resolution-print-72ppi.jpg 461 x 288 6.4” x 4”
Resolution-print-300ppi.jpg 1920 x 1200 6.4” x 4”
Resolution-screen-72ppi.jpg 600 x 375 8.3” x 5.2”
Resolution-screen-300ppi.jpg 600 x 375 2” x 1.25”

Raster vs. Vector Images
All of the image file formats described in the first section of this
training companion are examples of raster graphics. Raster
images use a dot matrix data structure representing a grid of
pixels. Because the structure is defined as a grid of pixels, there
is a limit to how far you can scale a raster image before there is a
loss of apparent quality. When scaled up the image will quickly
become “pixelated” or blurry.
Vector graphics, instead of being defined by a grid of pixels, are
defined by mathematical expressions for each path (line). This
allows vector graphics to be essentially infinitely scalable
images. Vector images are limited to primitive shapes and text
however, so they are not appropriate for all use cases. One
familiar example of a vector graphic is a PowerPoint autoshape, which can be infinitely scaled
within PowerPoint without becoming blurry.
Inkscape
Gimp was designed for the editing of raster graphics, but Inkscape was designed explicitly for
editing vector graphics and provides a much better user interface to that end. Like Gimp,
Inkscape is a free, open source, cross-platform software package that has a lot of community
support online. It is designed for expert users and skills gained from using Gimp to not
necessarily translate when working in Inkscape. Working with vector graphics is outside the
scope of this class, but I wanted to mention it for those who wish to learn more on their own.
Go to the Inkscape homepage (http://inkscape.org/) to download the software and find out
more.

Additional Resources
Remember to look through the other materials found in this folder: the PowerPoint from the
class, the exercises, and the folders of example images. Additionally, there are two Gimp
reference guides that I discovered online and copied here so they would be easily available.
Image formats
http://www.1stwebdesigner.com/design/different-image-formats/
http://www.graphicrating.com/2009/05/01/gif-jpg-and-png-file-formats-pros-and-cons/
Gimp references
Gimp homepage - http://www.gimp.org/
Gold-plated effect - http://boitblog.blogspot.com/2007/04/gold-plated-effect.html
Original drawing - http://www.gimp.org/tutorials/Draw_A_Paint_Brush/
Collage - http://puteraaladin.blogspot.com/2009/03/gimp-tutorial-creating-dark-surreal.html
Typography - http://gimp-tutorials.net/gimp-text-effect-tutorial/
PrtScr
PrtScr homepage - http://www.fiastarta.com/PrtScr/
Resolution
PPI recommendations - http://www.charlotteswebstudios.com/article.php?ttd=2&ark=21
Image resolution - http://en.wikipedia.org/wiki/Image_resolution
Computer monitor resolution - http://en.wikipedia.org/wiki/Display_resolution
Pixel density (ppi) - http://en.wikipedia.org/wiki/Pixel_density
Raster vs. Vector Images
Raster graphics – http://en.wikipedia.org/wiki/Raster_graphics
Vector graphics - http://en.wikipedia.org/wiki/Vector_graphics
Inkscape - http://inkscape.org/

Image Editing for Beginners - Training Handout

More Related Content

What's hot (20)

Similar to Image Editing for Beginners - Training Handout (20)

Recently uploaded (20)

Image Editing for Beginners - Training Handout