gimp and the web rick matthews dept. of physics, wake forest university and the international center...

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

An overview of my favorite graphics and GIMP tricks

• JPG, GIF, TIFF, XCF• Fixing exposure problems• Cloning• Layers• Screen capture

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.

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.

GIF and photos

• Problems:– No uniform

color, so big files

– Lots of colors in the original photo, so poor fidelity in the GIF.

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.

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

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.

“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

“Levels” to fix brightness and contrast

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

Gamma correction via “Levels”

Original Gamma corrected

Clone tool

• Copies one area of image to another.

• Good for eliminating powerlines, old girl friends.

• Also good for touching up portraits.

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

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.

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.

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.

Layer transparency application

Busy, hard to read

Better

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

Cloning example

Photo restoration with Clone tool

Photo restoration with Clone tool

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

Portraits…from a good day

Portraits…from a good day

Another pair of portraits

Selectiveblur

Original

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.

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.

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.

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.

Scaling images

• Image > Scale image

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.

Screen capture

• Handy for tutorials on software.

• An easy way to grab images off web or application.

• File > Acquire > Screen shot.

PowerPoint

Steps in creating a PowerPoint presentation

• Choosing a presentation template

• Choosing a format for each slide

• Images• Animation• Sound, Narration• Export to Web

Presentation template

• Appropriate theme?• More important:

contrast

Layout

• Think about leaving room for illustrations, pop-ups.

• Can always delete text boxes.

• Inserted text boxes have defective bullets.

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.

Animations

• Introduces elements of slide sequentially.

• Choose SlideShow > Custom Animation

• “Effects” controls how it appears.

• “Timing” controls when.

Narrations

• Easy!• Slide Show > Record

Narration• External microphone

is recommended.

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

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.

Miniproject on GIMP and Powerpoint

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.

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.

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.

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