GIMP and the Web

1. GIMPand 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. JPG, GIF, TIFF, XCF Fixing exposure problems Cloning Layers Screen capture An overview of my favorite graphics and GIMP tricks

3. 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. JPG vs. GIF

4. 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. GIF

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

6. 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. JPG and photos

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

8. 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. TIFF, XCF, PNG

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

10. “Levels” to fix brightness and contrast

11. 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 Gamma

12. Gamma correction via “Levels” Original Gamma corrected

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

14. 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). Layers

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

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

17. Handy trick to create header images for web pages, backgrounds for PowerPoint slides Must create a duplicate layer, then make background white. Transparency • 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. Right click on image Select Tools > Paint tools > Clone Ctrl-left-click to select source, left click and drag to paint Using the clone tool

20. Cloning example

21. Photo restoration with Clone tool

22. Photo restoration with Clone tool • Clone away blotches • Use levels on each primary color independently.

23. Portraits…from a good day

24. Portraits…from a good day

25. Another pair of portraits Selective blur Original

26. 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. Removing blemishes with Gaussian blur

27. 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. Removing blemishes with Gaussian blur

28. 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. Removing blemishes with Gaussian blur

29. 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. Removing blemishes with Gaussian blur

31. Image > Scale image Scaling images

32. 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. Scaling images

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

34. PowerPoint

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

36. Appropriate theme? More important: contrast Presentation template

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

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

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

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

41. 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.” Web authoring: PowerPoint vs. direct authoring

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

43. Miniproject on GIMP and Powerpoint

44. Two Miniprojects -- GIMP • 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. • 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.

45. 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. Possible Projects -- GIMPChoose a combination that interests you.

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.