Image Editing for Beginners

Image Formats...........................................................................................................2.BMP........................................................................................................................ 2.GIF.......................................................................................................................... 2.JPG.......................................................................................................................... 2.PNG........................................................................................................................ 3.TIFF........................................................................................................................ 3Suggested Usage....................................................................................................3

Software and Techniques...........................................................................................4PowerPoint..............................................................................................................4Gimp........................................................................................................................ 4PrtScr......................................................................................................................8

Resolution................................................................................................................... 9On Screen images...................................................................................................9Printed images........................................................................................................9

Raster vs. Vector Images..........................................................................................10Inkscape................................................................................................................10

Additional Resources................................................................................................11

Image FormatsIf 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.

.BMPThe 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.

.GIFThe 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.

.JPGThe 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.

Image Editing for Beginners 2

.PNGThe 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 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.

.TIFFThe 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 UsageIn 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.

Image Editing for Beginners 3

Software and Techniques

PowerPointAnything 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).

GimpThe 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.

Image Editing for Beginners 4

The BasicsWhen 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 PNGAdding 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.

Image Editing for Beginners 5

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 MasksThe 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.

Image Editing for Beginners 6

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 LayersAnything 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.

Image Editing for Beginners 7

PrtScrWhile 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.

Image Editing for Beginners 8

ResolutionResolution 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 imagesMost 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 imagesPrinters 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”

Image Editing for Beginners 9

Resolution-screen-300ppi.jpg 600 x 375 2” x 1.25”

Image Editing for Beginners 10

Raster vs. Vector ImagesAll 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.

InkscapeGimp 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.

Image Editing for Beginners 11

Additional ResourcesRemember 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 formatshttp://www.1stwebdesigner.com/design/different-image-formats/

http://www.graphicrating.com/2009/05/01/gif-jpg-and-png-file-formats-pros-and-cons/

Gimp referencesGimp 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/

PrtScrPrtScr homepage - http://www.fiastarta.com/PrtScr/

ResolutionPPI 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 ImagesRaster 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 12