The GIMP A Short Presentation for the Sacramento PC User Group WEB_Sig July 31, 2002 Bill Kendrick bill@newbreedsoftware.com http://www.newbreedsoftware.com/ What Is The GIMP? ----------------- The GIMP, "The GNU Image Manipulation Program" is an Open Source image editing tool available for Linux, Unix and Windows. Some key features of The GIMP include: * Powerful editing tools * Alpha channels * Layers * Dynamic text tool * Powerful gradient editor * Animated GIF support * Filters and plugins * Scripting capabilities (in LISP, Python and Perl) * Batch processing and backend capabilties (e.g. www.CoolText.com) * Open Source - Zero cost, and source code available! http://www.gimp.org/ The GIMP Environment -------------------- Toolbox ------- The first thing you see when you load The GIMP is the Toolbox. (Other dialog boxes may or may not be present, but the Toolbox will always be there.) The Toolbox includes: * Pulldown menus (File, Xtns, Help) * Tools Note: Double-click a tool button to show its "Tool Options" dialog! * Selection tools * Rectangular * Elliptical * Freehand * Fuzzy-selector * Bezier curve tool * "Intelligent Scissors" tool + Hold SHIFT before clicking to ADD to the current selection. + Hold CTRL before clicking to REMOVE from the current selection. + Push SHIFT while using the Rectangular or Elliptical tools to SNAP THE ASPECT RATION (e.g., get a square or circle) + Push CTRL while using them to CENTER THE SELECTION + Drag UP while clicking with the Fuzzy-selector to REDUCE THE THRESHOLD (select less sloppily). + Draw DOWN with the Fuzzy-selector to INCREASE THE THRESHOLD (select more colors which are not exactly the same as you clicked). + Click the 'red outline' icon at the lower left of an image window to turn the current selection into a mask (of red). Use the normal drawing (and even selection!) tools to edit the redmask. Click the 'dotted outline' icon at the lower left to switch back to normal selection mode. Cool, huh!? * Move tool * Zoom + Press CTRL to change what the zoom tool does (ZOOM IN or ZOOM OUT) + Click and drag around part of the picture to zoom into it. * Crop tool + TOP LEFT and BOTTOM RIGHT corners let you RESIZE the crop. + BOTTOM LEFT and TOP RIGHT corners let you MOVE the crop. + Click INSIDE to accept the crop. + You can crop based on the current selection, too! * Transform tool + Lets you ROTATE, SCALE, SHEAR or change the PERPSECTIVE of the image or selection. + Change the TOOL PARADIGM to CORRECTIVE to tell the tool what the image looks like NOW, so it can correct it! * Flip + Press CTRL to change what the flip tool does (HORIZ. or VERTICAL) * Text Tool + Choose DYNAMIC TEXT to get a dialog that allows you to enter multiple lines of text, change the alignment (LEFT, CENTERED or RIGHT JUSTIFIED), and so on. You can also go back and edit the text layer later! * Color Picker * Fill Bucket + Choose "PATTERN FILL" to fill using the current pattern. (See below.) * Gradient / Blend tool + Can blend between FG (foreground) and BG (background) color, between FG and TRANSPARENT, or use the currently selected CUSTOM GRADIENT (See below.) + Gradient can be LINEAR, BI-LINEAR, RADIAL, CONICAL, SPIRAL or even SHAPEBURST (based on the current selection) * Pencil / Paintbrush + Pencil is jagged (not anti-aliased) + Paintbrush is smooth (anti-aliased) + Paintbrush can FADE OUT + Paintbursh can draw with the current CUSTOM GRADIENT (See below.) * Eraser + Erases to transparent (or the BG (background) color if there's no alpha channel on the layer). + Enable HARD EDGE mode for jagged (Pencil-like) erasing * Airbrush * Rubber Stamp + Can use an opened image as the SOURCE or the selected pattern. + CTRL-CLICK to select the base of the source. + Adjust the ALIGNMENT setting to suit your needs... * Convolver (Blur / Sharpen) * Ink * Burn / Dodge * Smear * Measurement Tool NOTE: Drawing Lines ------------------- Hold SHIFT while using one of the drawing tools (Pencil, Paintbrush, Eraser, Airbrush, Convolver, Ink, Dodge/Burn and Smear) to draw a line between the last point and the mouse! * Current Colors - FG (foreground) and BG (background) + Click the double-arrow to 'swap' the two colors + Click the 'black/white' to reset colors to 100% black and 100% white + Double-click a color to change it using the color selector dialog * Current brush + Click to show the brush selection dialog + Some brushes are large ("+" next to them) + Some brushes are animated (red triangle next to them) + Some brushes are already colored * Current pattern + Click to show the pattern selection dialog * Current gradient + Click to show the gradient selection dialog + You can then get to the gradient editor Menus ----- Right-click in an image window to get a menu. (For Saving, Printing, changing image attributes, applying filters, etc.) Dialogs ------- A number of dialogs are available. You can get to some from the toolbox (e.g., brushes, patterns, gradients). Others are available from certain menus (e.g., Layers dialog from Layers). All are available from the "Dialogs" menu. Layers ------ Layers are an extremely important and useful part of any good image editing tool. Think of them as sheets of cellophane which contain various parts of your drawing. You can add, remove or edit one of the layers without effecting any of the other parts of the drawing. For example, you can add some text to your picture without actually affecting the pixels that make up the photograph. If you need to move or change the text later, or remove it altogether, you won't need to reconstruct the photo underneath! Some facts about layers in The Gimp: ------------------------------------ + The order layers are stacked in is important. (Use the UP/DOWN arrows at the bottom of the layer dialog to move layers around.) + Layers can have various modes (Normal, Color only, Difference, Darken- or Lighten-only, etc.) Play with them to see what they do! + Layers can have levels of transparency/opacity. + Layers can be 'disabled' by unclicking the "Eyeball" icon. + Layers can be 'locked together' by clicking-on the "four-arrow" icon (next to the eyeball). Any movement of a locked layers (e.g., using the Move tool) will happen to ALL locked layers together. + Layers can have a "mask" channel. (Right-click the icon of the layer and select "Add Layer Mask.") This is a black-and-white representation of what parts of the layer can and can't show through. + Click the icon of the layer or layer mask you wish any editing to occur in. (It will be outlined in the Layers dialog.) XCF Files --------- The Gimp's "native" file format is called ".xcf". It stores ALL the information GIMP needs to know about the picture, including the layers, layer masks, any active selections, guide positons, etc.). No other format will record all of this information. Most don't even support layers. (GIF, JPG, PNG, for example) Compression ----------- The Gimp can also compress and decompress files on the fly, and transparently. For example, you can add a ".gz" extension to the filename to GZIP the file. It will be GUNZIPped when you open it! e.g.: my_picture.xcf.gz Walk-through of the Included Examples ------------------------------------- The "examples_originals" subdirectory contains some original images (found using Google.com's "Image Search" tool). The steps below show you how to edit them to create the final products (found in the "examples_finished" subdirectory). (Note: the ".xvpics" subdirectories contain thumbnail previews in the format that the XV image viewer uses in its "Visual Schnauzer" mode - this is the thumbnail format that The Gimp currently supports.) Proof the Hindenburg's Hydrogen Didn't Cause the Crash ------------------------------------------------------ * Load the Hindenburg picture. ("Open" from the "File" menu in the toolbox) Step 1 - Select the fire * e.g., use the fuzzy selection tool, the freehand ('lasso') tool, the 'red mask' selection mode and a paintbrush, etc. Step 2 - Colorize the fire * Select the 'black-to-red-to-yellow' gradient (named "Incandescent") in the gradient selection dialog. (Click the currently-selected gradient in the toolbox to get to it.) * Right-click the image. In the pop-up menu, select "Filters," then "Colors," then "Map" and finally "Gradient map." The black-and-white part that you selected will become black, red and yellow! Step 3 - Select the sky * Do the same as in step 1, just select the sky. Step 4 - Colorize the sky * Do the same as in step 2, just use a different gradient (e.g., the "Blue_Green" gradient.") Correcting the House Picture ---------------------------- * Load the house image. ("Open" from the "File" menu in the toolbox) * Double-click the Transform tool in the toolbox. Choose the "Perspective" Transform, and choose the "Corrective" Tool Paradigm. * Click the image. A grid will appear. * Click and drag the top corners of the picture so that the grid lines up with the angles of the house. * Click the "Transform" button in the window that popped up. Turn a Drawing or Scan Into a Blueprint --------------------------------------- Step 1 - Invert the colors * Select "Invert" from the "Image" -> "Colors" menu. Step 2 - Turn black into blue * Select "Filters", "Colors", "Map" and "Color Exchange." * Change the "To Color" to blue by clicking the black box and adjusting the color in the color dialog. * In the "From Color," click the "Lock Thresholds" checkbox. * Increase one of the threshold values (the others will change with it.) (e.g., to 235) Ted Turner's New Beetle ----------------------- Version 1 - Different colors * Load the beetle picture. ("Open" in the "File" menu on the Toolbox) * Right-click the picture. Under "Image", go to "Colors" and then select "Hue-Saturation." * In the window that appeared, adjust the "Hue" value to change the color of the beetle! Version 2 - Rainbow colors * Create a new layer. First, get to the "Layers" dialog. (e.g., by selecting "Layers, Channels and Paths" from the "Layers" menu when you right-click the picture.) * Double-click the Gradient tool in the Toolbox. Select "Custom Gradient" in the "Blend" pulldown. * Choose a gradient (e.g., a rainbow one) by clicking the current gradient in the toolbox (at the very bottom). * Using the gradient tool, draw from the top to the bottom of the image. The entire picture will become that gradient. * In the "Layers" dialog, change the mode of the new layer from "Normal" to "Hue." Especially Patriotic Capitol Photo ---------------------------------- Step 1 - Straighten the capitol photo * Load the picture ("Open" in the "File" menu on the Toolbox) * Double-click the Transform tool and select both "Rotation" and "Corrective" * Click the image. A grid will appear. Click and drag until the lines line up with the angle of the photo. * Click "Transform" in the window that popped up. The image should become straightened! Step 2 - Select the sky background * Use the fuzzy tool to select as much of the blue sky as you can. * Switch to 'red mask' selectio mode and use the paintbrush to add the clouds and other details that the fuzzy tool missed. Step 3 - Erase the sky background * Add an alpha channel to the picture by selecting "Add Alpha Channel" from the "Layers" menu. (Right-click the picture.) * Select "Clear" from the "Edit" menu to erase the sky. (You should see a checkerboard 'behind' the picture.) Step 4 - Prepare the flag to be pasted in * Load the flag picture. * Right click the capitol picture and select "Info Window..." from the "View" menu to find out how large the image is. (891 x 596 pixels) * Use the crop tool to crop away everything but the flag from the flag image. * Scale the image so that it will fit in the size of the capitol picture. Select "Scale Image" from the "Image" menu (right click the capitol). Enter "891" for the width. The height will change accordingly. Step 5 - Paste the flag in * Select all of the flag image ("Edit", then "Select All") * Copy the image into the copy-and-paste buffer ("Edit" and "Copy") * Add a layer to the capitol picture. First, get to the "Layers" dialog. (e.g., select "Layers, Channels and Paths" from the "Layers" menu when you right-click the image.) Then, click the 'paper' icon to create a new layer. * Move the new layer 'underneath' the original capitol layer. (Click the 'down' icon.) * Back in the picture window, paste! ("Edit", then "Paste") Make a Dancing GIF ... Literally -------------------------------- Multiple layers in an image in The GIMP can be used as frames in an animation (e.g. for an animated GIF file for a website!) Step 1 - Create the initial layer * Load the main dancing picture. * Select the first picture. Copy it ("Edit" then "Copy") * Create a new picture based on it. "Paste as New" from the "Edit" menu. Step 2 - Create each additional layer * Select the next picture. Copy it. * Open the "Layers" dialog. ("Layers" then "Layers, Channels and Paths") * Create a new layer. * Paste into it. ("Edit" then "Paste") (You may want to reduce the Opacity level for the layer so that you can see 'through' it slightly, so as to position the frame you're adding to the animation.) * Repeat for the other two pictures... Step 3 - See it dance * Right-click the new image with the four layers. Under "Filters," choose "Animation" and then "Animation Playback." Click "Play" to watch it dance! Step 4 - Save it as a GIF * You'll be asked if you wish to "export" the picture. This involves two things - First, changing it to 256 colors or less. Secondly, either "flattening" the image (combining all of the layers into one final 'flat' picture) or saving the various layers as an animation. You'll want to do the latter! Now try loading the ".gif" in a web browser and see it move! References ---------- Tonight's presentation: http://www.lugod.org/presentations/gimp_websig/ Previous GIMP presentations by Bill Kendrick: August / September 2001: http://www.lugod.org/presentations/gimp1.sdd.gz (GZIPped StarOffice presentation file.) http://www.lugod.org/presentations/gimp2/ September 1999: http://www.lugod.org/presentations/gimp-presentation/ The GIMP official website: http://www.gimp.org/ The GIMP for Windows: http://www.gimp.org/~tml/gimp/win32/ Some GIMP Books: Essential GIMP for Web Professionals (Prentice-Hall, April 2001) The GIMP Pocket Reference (O'Reilly, November 2000) Visual Quickstart Guide: The Gimp for Linux and Unix (Peachpit Press, May 2000) Gimp for Linux Bible (IDG Books, March 2000) Guerrilla Guide to Great Graphics with the Gimp (Prima, February 2000) Grokking the GIMP: Advanced Techniques for Working with Digital Images (New Riders Press, February 2000) http://gimp-savvy.com/BOOK/ *** READ IT ONLINE! *** GIMP Essential Reference (New Riders Press, December 1999) GIMP: The Official Handbook (Coriolis, November 1999) http://manual.gimp.org/ *** READ IT ONLINE! *** Sams' Teach Yourself GIMP in 24 Hours (Sams, April 1999) The Artist Guide to the GIMP (SCC, December 1998)