1 / 47

GIMP and the Web

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. JPG, GIF, TIFF, XCF Fixing exposure problems Cloning Layers Screen capture.

byron
Download Presentation

GIMP and the Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

  30. Image > Scale image Scaling images

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

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

  33. PowerPoint

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

  35. Appropriate theme? More important: contrast Presentation template

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

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

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

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

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

  41. 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.”

  42. Miniproject on GIMP and Powerpoint

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

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

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

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

More Related