1. GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu http://www.wfu.edu/~matthews

2. An overview of my favorite graphics and GIMP tricks JPG, GIF, TIFF, XCF Fixing exposure problems Cloning Layers Screen capture

3. JPG vs. GIF Nearly all web images are one of these two. Each is a compressed format. Goal: small file size=>quick download. Each has compromises, but very different compromises.

4. GIF Limit of 256 colors on screen. Shrinks files by looking for areas of uniform color. Great for text, line graphs, simple computer art. Poor for photographic images.

5. GIF and photos Problems: –No uniform color, so big files –Lots of colors in the original photo, so poor fidelity in the GIF.

6. JPG and photos Photo rendition is the design goal of JPG. It is a lossy compression method, discards info least likely to be noticed. Huge reductions in photo file size with minimal quality loss.

7. JPG and text, line art JPG is at its worst where GIF is best: Large areas of uniform color. Below are magnified 200x100 images. GIF, 646 bytes, perfect JPG, 2,400 bytes

8. TIFF, XCF, PNG CAUTION: Never use JPG for your working file format. Each Save, Load cycle degrades image more. Lossless formats: XCF,TIFF, PNG. XCF: optimal internal format, but proprietary. Poor for sharing files. TIFF: widely supported across multiple platforms, but NOT Netscape, IE. PNG: Newest, will eventually replace GIF. Not yet universally supported.

9. “Levels” to fix brightness and contrast. Levels let you intuitively (and reversibly) correct brightness and contrast. DON’T use brightness and contrast controls -- use LEVELS! In GIMP, Image > Colors > Levels

10. “Levels” to fix brightness and contrast

11. Gamma Nonlinear change in brightness and contrast. Handy when dark areas need to be lightened more than brighter areas. GIMP: Image > Colors > Levels Adjust middle triangle

12. Gamma correction via “Levels” OriginalGamma corrected

13. Clone tool Copies one area of image to another. Good for eliminating powerlines, old girl friends. Also good for touching up portraits.

14. Layers Every image has at least one layer. You can add more layers from scratch, copy layer to a new layer, copy a portion of a layer to a new layer. Layers>Layers,Channels& Paths, add new layer. Use text tool or paint brush to edit (Tools > Toolbox).

15. Layers Uses –Apply changes to only a portion of an image. –Allow you to add changes without affecting the whole image. –Easier correction of mistakes.

16. Layers Uses –Apply changes to only a portion of an image. –Allow you to add changes without affecting the whole image. –Easier correction of mistakes.

17. Transparency Handy trick to create header images for web pages, backgrounds for PowerPoint slides Must create a duplicate layer, then make background white. HOW? –Layers > Layers, Channels & Paths –Create new layer –Flood fill background layer with white. –Click on top layer, add new layer, insert text. –Fiddle with transparency of middle layer.

18. Layer transparency application Busy, hard to read Better

19. Using the clone tool Right click on image Select Tools > Paint tools > Clone Ctrl-left-click to select source, left click and drag to paint

20. Cloning example

21. Photo restoration with Clone tool

22. Clone away blotches Use levels on each primary color independently.

23. Portraits…from a good day

25. Another pair of portraits Selective blur Original

26. Removing blemishes with Gaussian blur First, create a duplicate layer of the image –Layers>Layers,Channels, & Paths –Duplicate Layer Apply Gaussian blur to top (blurred) layer Use the eraser tool from toolbox to erase blurring where needed: eyes, eyebrows, hair, mouth, clothing, etc.

27. Removing blemishes with Gaussian blur First, create a duplicate layer of the image –Layers>Layers,Channels, & Paths –Duplicate Layer Apply Gaussian blur to top (blurred) layer Use the eraser tool from toolbox to erase blurring where needed: eyes, eyebrows, hair, mouth, clothing, etc.

28. Removing blemishes with Gaussian blur First, create a duplicate layer of the image –Layers>Layers,Channels, & Paths –Duplicate Layer Apply Gaussian blur to top (blurred) layer Use the eraser tool from toolbox to erase blurring where needed: eyes, eyebrows, hair, mouth, clothing, etc.

29. Removing blemishes with Gaussian blur First, create a duplicate layer of the image –Layers>Layers,Channels, & Paths –Duplicate Layer Apply Gaussian blur to top (blurred) layer Use the eraser tool from toolbox to erase blurring where needed: eyes, eyebrows, hair, mouth, clothing, etc.

31. Scaling images Image > Scale image

32. Scaling images Image > Scale image Web cares about Pixels only. Printers use dpi, inches Powerpoint should have both specified for properly for best image quality. DPI should be your horizontal screen size / 10. Mine is 102.4.

33. Screen capture Handy for tutorials on software. An easy way to grab images off web or application. File > Acquire > Screen shot.

34. PowerPoint

35. Steps in creating a PowerPoint presentation Choosing a presentation template Choosing a format for each slide Images Animation Sound, Narration Export to Web

36. Presentation template Appropriate theme? More important: contrast

37. Layout Think about leaving room for illustrations, pop-ups. Can always delete text boxes. Inserted text boxes have defective bullets.

38. Inserting images Can use Insert, Picture, File, or… Copy and paste from GIMP. Best to size images in GIMP first, rather than resizing in PowerPoint.

39. Animations Introduces elements of slide sequentially. Choose SlideShow > Custom Animation “Effects” controls how it appears. “Timing” controls when.

40. Narrations Easy! Slide Show > Record Narration External microphone is recommended.

41. Web authoring: PowerPoint vs. direct authoring Uses a tool you may already know. Efficiency much improved in PP2000. Layout is easy, well- defined. Nearly trivial way to post class notes on web. Less flexible layout. Slower viewing, because files are larger. Linear document: not a “web-like.”

42. Publishing your PPT on the web To create web page select File> Save As Web Page Default: works with IE5 only. To fix, click “Publish.” Preview web view under File Menu.

43. Miniproject on GIMP and Powerpoint

44. Two Miniprojects -- GIMP Start with a photographic portrait. Correct brightness and contrast using levels, correct gamma, correct color. Use clone tool and blurring to enhance. Save as XCF, and then as JPG. Prepare a titled image/logo, I.e. text over faded image. You should have at least 3 layers: uniform white layer, an image layer with partial transparency, and a text layer. Save as XCF image, and then as JPG.

45. Possible Projects -- GIMP Choose a combination that interests you. Project 1 –Get a photograph. –Correct brightness, contrast, gamma(?), using levels. –Add text on separate layer. –Save as XCF, JPG. Project 2 –Get another image in need of cloning. –Fix it Project 3 –Get a portrait. –Use clone and selective blurring to tweak.

46. Miniproject Powerpoint tutorial Create a brief presentation, with your choice of designs. Create three slides in more than one layout, and include at least one picture. Experiment with different animations. Overdo it. Be tacky. Add one “virtual” slide, consisting of sequence of slides with “fake” pop-up boxes. Add narration. Export to web.

47. Powerpoint assumes screen is 10.0x7.5 (at least mine does.) For best pictures, scale accordingly: –My screen is 1024x768, so dpi should be 1024/10=102 dpi.