Transcript document

GIMP
and the Web
Rick Matthews
Dept. of Physics, Wake Forest University
And
The International Center for Computer
Enhanced Learning
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
Selective
blur
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,
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,
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,
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,
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, welldefined.
• 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
• Preview web view under
File Menu.
• 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.”
Miniproject on GIMP and
Powerpoint
Two Miniprojects -- GIMP
•
•
•
•
• Prepare a titled
Start with a
image/logo, I.e. text over
photographic portrait.
faded image.
Correct brightness and • You should have at least 3
contrast using levels,
layers: uniform white
correct gamma, correct
layer, an image layer with
color.
partial transparency, and a
Use clone tool and
text layer.
blurring to enhance.
• Save as XCF image, and
Save as XCF, and then
then as JPG.
as JPG.
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.
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.