![Page 1: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/1.jpg)
GIMPand the Web
Rick Matthews
Dept. of Physics, Wake Forest University
And
The International Center for Computer Enhanced Learning
http://www.wfu.edu/~matthews
![Page 2: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/2.jpg)
An overview of my favorite graphics and GIMP tricks
• JPG, GIF, TIFF, XCF• Fixing exposure problems• Cloning• Layers• Screen capture
![Page 3: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/3.jpg)
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.
![Page 4: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/4.jpg)
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.
![Page 5: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/5.jpg)
GIF and photos
• Problems:– No uniform
color, so big files
– Lots of colors in the original photo, so poor fidelity in the GIF.
![Page 6: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/6.jpg)
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.
![Page 7: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/7.jpg)
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
![Page 8: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/8.jpg)
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.
![Page 9: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/9.jpg)
“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
![Page 10: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/10.jpg)
“Levels” to fix brightness and contrast
![Page 11: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/11.jpg)
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
![Page 12: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/12.jpg)
Gamma correction via “Levels”
Original Gamma corrected
![Page 13: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/13.jpg)
Clone tool
• Copies one area of image to another.
• Good for eliminating powerlines, old girl friends.
• Also good for touching up portraits.
![Page 14: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/14.jpg)
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).
![Page 15: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/15.jpg)
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.
![Page 16: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/16.jpg)
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.
![Page 17: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/17.jpg)
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.
![Page 18: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/18.jpg)
Layer transparency application
Busy, hard to read
Better
![Page 19: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/19.jpg)
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
![Page 20: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/20.jpg)
Cloning example
![Page 21: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/21.jpg)
Photo restoration with Clone tool
![Page 22: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/22.jpg)
Photo restoration with Clone tool
•Clone away blotches•Use levels on each primary color independently.
![Page 23: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/23.jpg)
Portraits…from a good day
![Page 24: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/24.jpg)
Portraits…from a good day
![Page 25: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/25.jpg)
Another pair of portraits
Selectiveblur
Original
![Page 26: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/26.jpg)
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.
![Page 27: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/27.jpg)
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.
![Page 28: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/28.jpg)
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.
![Page 29: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/29.jpg)
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.
![Page 30: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/30.jpg)
![Page 31: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/31.jpg)
Scaling images
• Image > Scale image
![Page 32: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/32.jpg)
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.
![Page 33: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/33.jpg)
Screen capture
• Handy for tutorials on software.
• An easy way to grab images off web or application.
• File > Acquire > Screen shot.
![Page 34: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/34.jpg)
PowerPoint
![Page 35: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/35.jpg)
Steps in creating a PowerPoint presentation
• Choosing a presentation template
• Choosing a format for each slide
• Images• Animation• Sound, Narration• Export to Web
![Page 36: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/36.jpg)
Presentation template
• Appropriate theme?• More important:
contrast
![Page 37: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/37.jpg)
Layout
• Think about leaving room for illustrations, pop-ups.
• Can always delete text boxes.
• Inserted text boxes have defective bullets.
![Page 38: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/38.jpg)
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.
![Page 39: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/39.jpg)
Animations
• Introduces elements of slide sequentially.
• Choose SlideShow > Custom Animation
• “Effects” controls how it appears.
• “Timing” controls when.
![Page 40: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/40.jpg)
Narrations
• Easy!• Slide Show > Record
Narration• External microphone
is recommended.
![Page 41: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/41.jpg)
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.”
![Page 42: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/42.jpg)
Publishing your PPT on the web
• To create web page select File> Save As Web Page
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.
![Page 43: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/43.jpg)
Miniproject on GIMP and Powerpoint
![Page 44: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/44.jpg)
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.
![Page 45: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/45.jpg)
Possible Projects -- GIMPChoose 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.
![Page 46: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/46.jpg)
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.
![Page 47: GIMP and the Web Rick Matthews Dept. of Physics, Wake Forest University And The International Center for Computer Enhanced Learning matthews@wfu.edu matthews](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649e3c5503460f94b2ed86/html5/thumbnails/47.jpg)
• 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.