Transcription
August 2009TECHNOLOGY TRAININGManipulatingImages usingGIMP .edu 650.723.4391techtraining.stanford.edu 650.723.4391
This handout accompanies classroom instructionprovided by IT Services Technology Training,Stanford University. While it is not intendedas a stand-alone tutorial, it may be helpful inreviewing the topics covered in class.Copyright IT Services Technology Training 2009 Stanford UniversityAll rights reservedPhotoshop, Fireworks, GIMP, and More: Images for the WebAugust 2009Page 2 of 17
ContentsGIMP – The Gnu Image Manipulation Program. 4Obtaining and Installing GIMP. 4Using GIMP to Manipulate Images. 4Obtaining Information about a Graphic. 4Cropping an Image . 6Rotating an Image . 8Using the Paint Bucket . 10Adding Text to an Image . 11Blurring, Smudging, and Sharpening Images . 13Dodging and Burning Images. 14Clone Tool . 15Saving Images in GIMP. 16Resources. 17Photoshop, Fireworks, GIMP, and More: Images for the WebAugust 2009Page 3 of 17
GIMP – The Gnu Image ManipulationProgramThe Gnu Image Manipulation Program (GIMP) is a free, open-source image editingsoftware package.Obtaining and Installing GIMPYou may download and install GIMP for free at http://www.gimp.org/You may also download a version of GIMP that is closer in look and feel toPhotoshop. This version of GIMP is known as GIMPShop, and can be downloadedand installed for free at http://www.gimpshop.com/.Both GIMPShop and GIMP are available for Macintosh and Windows users.Using GIMP to Manipulate ImagesIn this class, only the main features of GIMP will be covered.Obtaining Information about a GraphicWhen a graphic is viewed in GIMP, the program offers information about theheight and width (in pixels) of the graphic in the title bar.Photoshop, Fireworks, GIMP, and More: Images for the WebAugust 2009Page 4 of 17
To obtain more information about the picture, on the Image menu, click ImageProperties:Photoshop, Fireworks, GIMP, and More: Images for the WebAugust 2009Page 5 of 17
Cropping an ImageCropping an image allows you to discard portions of an image.To crop an image:1. In the Toolbox, select the Rectangle Select Tool.2. Draw a box around the area to be cropped.3. On the Image menu, select Crop to Selection.Photoshop, Fireworks, GIMP, and More: Images for the WebAugust 2009Page 6 of 17
Changing an Image’s SizeIn GIMP, you can change the size of an image (e.g., if you want to create athumbnail version of an image for the Web).To change the size of an image:1. On the Image menu, click Scale Image.2. Enter the new height/width desired, and press Scale to finalize the change ofsize.Keep this chart in mind when choosing an image size:Monitor Resolution**Maximum Size of Material (Width x Height)Web TV (TV set)544 x 738640 x 480600 x 300800 x 600760 x 4201024 x 768955 x 600Monitor Resolution can be set at:- Windows: Start Settings Control Panel Display Settings- Mac OS X: System Preferences Displays DisplayNote: If you add a graphic to your web page before changing its size, you willneed to change the height and width attributes in the source code.In Dreamweaver, this is done by clicking the Reset Image to Original Size iconin Properties.Photoshop, Fireworks, GIMP, and More: Images for the WebAugust 2009Page 7 of 17
Rotating an ImageTo rotate an image in GIMP:1. Using the Marquee Tool, select the part of the image to rotate.2. On the Image menu, point to Transform, and then click the transformationdesired.Photoshop, Fireworks, GIMP, and More: Images for the WebAugust 2009Page 8 of 17
Adjusting the Color of an ImageTo adjust the color of an image in GIMP, on the Colors menu, point to theadjustment desired.Before Colors InvertAfterPhotoshop, Fireworks, GIMP, and More: Images for the WebAugust 2009Page 9 of 17
Using the Paint BucketThe Paint Bucket Tool is used to change the color of a region in GIMP. To use thePaint Bucket Tool:1. In the Toolbox, select the Bucket Fill tool.2. Select a color for the Fill Type field and then click OK.3. Click on the object or region you wish to color.Photoshop, Fireworks, GIMP, and More: Images for the WebAugust 2009Page 10 of 17
Adding Text to an ImageTo add text to an image in GIMP:1. Click the Text Tool.2. Set the Font, Size, Color, Justification,and any other settings desired.Photoshop, Fireworks, GIMP, and More: Images for the WebAugust 2009Page 11 of 17
3. Click and drag to draw a rectangle around the area in which you wish thetext to appear.4. In the GIMP Text Edior window, enter the text, and then click Close.Photoshop, Fireworks, GIMP, and More: Images for the WebAugust 2009Page 12 of 17
Blurring, Smudging, and Sharpening ImagesGIMP has several tools to affect the pixel focus and the colors in images.1. The Blur/Sharpen tool lets you emphasize or de-emphasize parts of animage by selectively blurring the focus of elements.2. The Smudge tool lets you gently blend colors, as when creating areflection of an image.To blur, sharpen, or smudge an image:1. Select the Blur/Sharpen or Smudge tool.2. Drag the tool over the pixels to be sharpened, blurred, or smudged.Photoshop, Fireworks, GIMP, and More: Images for the WebAugust 2009Page 13 of 17
Dodging and Burning ImagesThe Dodge Tool is used to lighten parts of an image. The Burn Tool is used todarken parts of an image.To use the Dodge or Burn tool:1. Select the Dodge/Burn Tool.2. Set the brush options:3. Drag over the part of the image you want to lighten or darken (in theexample below a circle has been burned above Memorial Church):Photoshop, Fireworks, GIMP, and More: Images for the WebAugust 2009Page 14 of 17
Clone ToolThe Clone tool copies an area of a bitmap image so that you can stamp itelsewhere in the image. Cloning pixels is useful when you want to fix a scratchedphotograph or remove dust from an image; you can copy a pixel area of a photoand replace the scratch or dust spot with the cloned area.To clone portions of a bitmap image:1. Choose the Clone tool.2. Control-click an area to designate it as the source, or the area you want toclone.3. Move to a different part of the image and click-and-drag. You will see twopointers. The first one, the source of the cloning, is in the shape of a crosshair. As you click-and-drag the second pointer (in the shape of a pointer)pixels beneath the first pointer are copied and applied to the area beneaththe second.Photoshop, Fireworks, GIMP, and More: Images for the WebAugust 2009Page 15 of 17
Saving Images in GIMP1. On the File menu, select Save As.2. Choose the desired file type (e.g., JPG). Then, click Save.3. Choose the desired optimization options. Then, click Save.Photoshop, Fireworks, GIMP, and More: Images for the WebAugust 2009Page 16 of 17
Resources Obtaining GIMP (Gnu Image Manipulation m/ Many image repositories exist. Some great places you can go to obtainimages s/Clip hics/Clip Art/Public Domain/ For instructor-led courses offered by Technology Training Services,including more advanced Photoshop classes, go tohttp://techtraining.stanford.edu/courses.html For personalized, one-on-one training offered by Technology TrainingServices on Photoshop, Fireworks, GIMP, and other topics, go tohttp://tba.stanford.edu/Photoshop, Fireworks, GIMP, and More: Images for the WebAugust 2009Page 17 of 17
Saving Images in GIMP. 16 Resources. 17. Photoshop, Fireworks, GIMP, and More: Images for the Web August 2009 Page 3 of 17 . GIMP - The Gnu Image Manipulation Program . The G nu I mage M anipulation P rogram (GIMP) is a free, open-source image editing software package. .
