Let the GIMP Force Be with You
Essential Standard 2.00 (25%) – Understand graphic image
design and computer animation.
Indicator 2.01 (15%) – Investigate graphic image design.
Indicator 2.02 (10%) – Develop computer animations.
BFIT6414 Multimedia and Webpage Design
George E. Brooks
South View High School
Cumberland County Schools System
georgebrooks@ccs.k12.nc.us
(910)425-8181 ext. 236
Setting Up Our Workstations
for GIMP Workshop
• Locate the GIMP Folder on your desktop
– Install GIMP 2.8-setup
– GIMP Help Files ???
• Use accept all default setting during the
installations.
Let the GIMP Force Be With You!
2
Installing GIMP for Windows
Operation Systems
• You will need to download ,save and install GIMP 2.8 Installer and Help
Files ?? for Windows XP SP3 or later versions of Windows, Apple IOS, and
other operating systems.
• Web Sites: http://gimp-win.sourceforge.net/stable.html
•
•
•
•
•
http://www.gimp.org/tutorials/
http://www.gimp.org/books/
http://www.gimp.org/release-notes/gimp-2.8.html
Note: GIMP will also run on Tablet PCs.
Note-2: Gimp will also work with graphic tablets attached
Let the GIMP Force Be With You!
3
GIMP Settings You Can Customize
• Setting up help: Edit, Preferences, Help System
• GIMP 2.6.9- Help System can be installed locally or setup work with
the web based for this version:
– Web address is: http://docs.GIMP.org/2.6/en/
• Can be downloaded to local computer?
Let the GIMP Force Be With You!
4
Keyboard Shortcuts
• Main Image Window
• Edit
• Keyboard Shots
– Learning these shortcuts
will save time when you
are working on your
graphics' projects.
– Here a list of some of the
shortcuts keys
Let the GIMP Force Be With You!
5
Getting to Know GIMP
• A Tour of the most Important GIMP Windows
– The Toolbox
– Menu Overview
– Customize Settings
Let the GIMP Force Be With You!
6
Image Window
File Name
View Number
Color Model
#of Layers
Pixel Size
Menus
Menu
button
Resize
toggle
Rulers
Scrollbars
Quick Mask
Location
Units
Scale
Status Bar
Let the GIMP Force Be With You!
Cancel
Navigation
control
7
Menu Overview
• Menu
• Submenu
• Double click to detach
• I have double clicked
Text Tool to display the
Submenu separately
from the main Toolbox
menu
Let the GIMP Force Be With You!
8
Toolbox
•
•
•
•
Tool title
Toolbox Buttons
Foreground Swatch
Background Swatch
Let the GIMP Force Be With You!
9
Tool, Image Window, Layers
• Docking
• Dialog
• Layers Dialog
Let the GIMP Force Be With You!
10
The Layers Dialog Box
• GIMP has a lot of useful
dialogs.
• You can see the whole list
from
– File-Dialogs in the Toolbox
menu or the image
window’s top-level Dialogs
menu
• Each separate dialog
window is called a dock,
and can hold many
additional dialogs inside it.
Let the GIMP Force Be With You!
11
Opening Files
• File Open
• Location
Let the GIMP Force Be With You!
12
A First GIMP Project-1
• Open light_saber.jpg
• Open luke_at_home.jpg
• Copy light_saber.gif and
paste into
luke_at_home.jpg
• Use the move tool to
reposition any place
you would like on file
one.
Let the GIMP Force Be With You!
13
Finished GIMP Project-1
Let the GIMP Force Be With You!
14
Questions?
• Do we have any questions at this point?
• Next skill improving digital photos
Let the GIMP Force Be With You!
15
Improving Digital Photos
•
•
•
•
•
Opening files
Scaling files
Saving files
Cropping files
Brightening and
Darkening files
• Rotating files
• Sharpening files
• Fixing Red-eye files
Let the GIMP Force Be With You!
16
Scaling Images
• Open
luke_at_home>Image
>Scale Image
• Chains links
• Aspect Ratio
• Resolution
Let the GIMP Force Be With You!
17
Four ways of Saving
•
•
•
•
Save
Save As
Save as Copy
Save Template
Let the GIMP Force Be With You!
18
Save
• The Save command
saves your image to
disk. If you have already
saved the image, the
previous image file is
overwritten with the
current version.
Let the GIMP Force Be With You!
19
Save As
• The Save as command
displays the “Save
Image” dialog. Gives
you a text box to assign
a name to the file, and a
drop-down list a
directory to save it in.
Select File Type option
expander to pick a
different file type.
Let the GIMP Force Be With You!
20
Save As Copy
• Save a Copy command
does the same thing as
the Save command, but
with one important
difference. It always asks
for a file name and saves
the image into the
specified file, but it does
not change the name of
the active image or mark
it as “clean”.
Let the GIMP Force Be With You!
21
Saving as Template
• The Save as Template
command creates a template
with the same dimensions and
color space as the current
image. A dialog pops up, which
asks you to name the new
template, then the template is
saved and becomes available
in the New Image dialog. If
you give a name that already
exists, GIMP generates a
unique name by appending a
number to it.
Let the GIMP Force Be With You!
22
Cropping
• Open the biplane image
from our GIMP Folder
• Cropping is used to
remove any unwanted
selection from a digital
photo we do not need for
a current graphic project.
• So let us take a look at
the cropping tool and
then remove the
unwanted part.
Let the GIMP Force Be With You!
23
After Cropping
• Here is the same photo
after we have cropped
it.
• Save as
– Biplane_cropped
Let the GIMP Force Be With You!
24
Brightening and Darkening
• A common problem with
camera images is that
they are either too light
or too dark.
• GIMP has many powerful
tools that can be used to
correct these problems.
Here a few tools we can
use.
–
–
–
–
Color Balance
Brightness and Contrast
Levels
Curves
Let the GIMP Force Be With You!
25
Rotating
• GIMP offers a rotation
tool that can correct
minor errors made
while shooting with
your camera.
Let the GIMP Force Be With You!
26
Sharpening
• GIMP can sharpen
photos, but can’t work
miracles.
• The two most
important ones are:
– Sharpen
– UnSharp Mask
Let the GIMP Force Be With You!
27
Fixing Red-Eye
• Open Ethan image
• Red-eye occurs when
there is too much light
from the flash on your
camera. Turning the
pupils into diabolical
crimson.
• GIMP has a red-eye filter
built in to correct these
problem.
– Filters, Enhance, Red-Eye
Removal
Let the GIMP Force Be With You!
28
Questions?
• Do we have any questions at this point?
• Next skill introduction to layers
Let the GIMP Force Be With You!
29
Introduction to Layers
• Every image in GIMP is made
by combining one or more
separate images, called layers,
laid on top of each other.
• Using Layers to add text
• Using the Move Tool
• Changing colors: GIMP’s color
chooser
• Simple effects using layers
• Linking layers together
• Performing operations on
layer
• Using layers for copy and paste
• Aligning layers
• Tour of Layers dialog box
• Making simple GIF animations
using layers
Let the GIMP Force Be With You!
30
Introduction to Layers
• What is a Layer?
• Layers to Add Text
– The Text Tool
• Using the Move Tool
• Changing Colors
– Color Chooser
• Simple Effects
– Drop Shadows
Let the GIMP Force Be With You!
31
What is a Layer?
• Every layer has a name.
This is assigned
automatically when the
layer is created, but you
can change it.
• You can change the name
of a layer either by
double-clicking on it in
the Layers dialog, or by
right-clicking and then
selecting the top entry in
the menu that appears,
Edit Layer Attributes
Let the GIMP Force Be With You!
32
Creating a New Layer
• Layer
Let the GIMP Force Be With You!
33
A Tour of Layers Dialog
•
•
•
•
•
•
•
Title Area
Tabs
Layer Mode
Opacity
Keep Transparent
Layer List
Layer Buttons
Let the GIMP Force Be With You!
34
Layers Continue
• Linking Layers together
• Performing operations on Layers
• Using Layers for Copy and Paste
–
–
–
–
Select Only the Part You Want to Paste
Paste into the Image
Scale the Pasted Layer
Aligning Layers
Let the GIMP Force Be With You!
35
The Text Tool
• Double click the A in
Toolbox Window
• This will open the
Text Tool
–
–
–
–
–
–
–
Font
Size
Colors
Justify
Indent
Line Spacing
Letter Spacing
Let the GIMP Force Be With You!
36
Move Tool
• From the Toolbox select
the four head arrow.
• Select the object you
would like to move in
the image window .
• Then move the object
to the new location.
Let the GIMP Force Be With You!
37
Change the Foreground
• Click on the Foreground
Tool in the Toolbox
Window and then chose
color
Let the GIMP Force Be With You!
38
Change the Background Color
• Click on the background
tool in the Toolbox
Window and then chose
color
Let the GIMP Force Be With You!
39
Simple Effects Using Layers
• From the Main Image
Window
you select Filters
• Select Submenus and
apply
Let the GIMP Force Be With You!
40
Questions?
• Do we have any questions at this point?
• Next skill how to create Drawings in GIMP.
Let the GIMP Force Be With You!
41
Drawing
•
•
•
•
Make a new image
Using layers for drawing
Drawing lines and curves
Changing colors and
brushes
• Outlining and filling
regions
• Filling with patterns and
gradients
• When GIMP won’t draw
Let the GIMP Force Be With You!
42
Using new Layers Drawing
• A New Image
• Layers for Drawings
• Drawing Lines and
Curves
• Hard-Edged Lines
• Drawing Tools Options
• Airbrush Top
• Ink Pen Tool
• Easer Tool
Let the GIMP Force Be With You!
43
Drawing Rectangles, Circles, and other
Shapes
• Defining Regions
• Outlining Selections:
Stroking
• Free Select with the
Lasso
• Filling Regions
• The Bucket Fill Tool
• Gradients: The Blend
Tool
• Patterns are under
Layers drag and drop
Let the GIMP Force Be With You!
44
Change Colors and Brushes
• Main Image Window
• Layers
• Brushes
Let the GIMP Force Be With You!
45
Erasing
• The Eraser, like other
drawing tools, uses the
current brush and color
to erase with, so make
sure you select the
correct brush and color
before you begin
erasing.
Let the GIMP Force Be With You!
46
Stroking Regions
• GIMP doesn’t have any
tools specifically for
drawing shapes, which
confuses some people
coming from other
drawing programs.
• The trick is to make a
selection and then stroke.
• Edit, Stroke Selection, on
the next dialog box chose
the stroke you want to
work with.
Let the GIMP Force Be With You!
47
Filling with Patterns
• Filling a selection with solid
color or pattern is easy.
• First chose you drawing tool
and make a new drawing or
select a object in the main
image window.
• Make sure to select from
the Toolbox, Layers Tool
• Edit
– Fill with FG Color
– Fill with BF Color
– Fill with Pattern
Let the GIMP Force Be With You!
48
Filling with Gradients
• The Gradient Chooser is located
on the Toolbox, below the current
brush and pattern.
• Choose your gradient and select
the Blend Tool from Toolbox
• Next apply your gradient by using
the Blend on your image
• Most of the gradient available in
the dialog box have fixed colors
regardless of the current
foreground and background.
• Some gradients also include
transparency, or partial
transparency.
Let the GIMP Force Be With You!
49
When GIMP Won’t Draw
• GIMP will only draw to the
current layer.
• It’s also possible you have
pasted recently and still
have a floating selection.
• While looking at the Layers
Dialog, take a look at the
Keep Transparency button.
If that is checked GIMP
won’t let you draw
• Check the opacity tool in
the tool options: make sure
it’s at 100%.
• Layers each have mode, and
some modes do strange
things in combination with
the layer beneath. Make
sure that the current layer’s
mode is Normal unless you
are creating a effect.
• Check the Mode in the tool
options for the drawing
tool you're using. If it’s not
Normal, unexpected things
can happen.
Let the GIMP Force Be With You!
50
A Drawing Project-2
• Most drawing projects begin with
a blank canvas in the new image
window.
• To practice drawing techniques,
we will use new layer 200x400
pixels that will easily fit on our
computer screen
–
–
–
–
–
–
New Image
New Layer=trunk
New Layer=trunk shadow
New Layer=branches
New Layer=leaves
New Layer=darker leaves
• View and New View is a great
tool for viewing the image when
editing
Let the GIMP Force Be With You!
51
Questions?
• Do we have any questions at this point?
• Next skill working with selections in GIMP.
Let the GIMP Force Be With You!
52
Selection
• Working with selections
• Select by Color and
Fuzzy Select
• Bezier paths
• The Intelligent Scissors
Tool
• Modifying selections
• The Quick Mask
• Layer Masks
Let the GIMP Force Be With You!
53
Working with Selections
• When you have an
object selected with
Marching Ants you can
apply the many
different features in
GIMP to change the
selection to fit what
ever graphic effect you
need.
Let the GIMP Force Be With You!
54
Marching Ants
• The marching ants effect is an
animation technique often found
in selection tools of computer
graphics programs. It helps the
user to distinguish the selection
border from the image
background by animating the
border. The border is a dotted or
dashed line where the dashes
seem to slowly walk sideways and
up and down. This creates an
illusion of ants marching in line as
the black and white parts of the
line start to move
• Source:
http://en.wikipedia.org/wiki/Marching_ants
Let the GIMP Force Be With You!
55
Selection Tool Menu
• Main Image Window
– Tools
– Selection
•
•
•
•
•
•
•
Rectangle
Ellipse
Free
Foreground
Fuzzy
By Color
Intelligent Scissors
Let the GIMP Force Be With You!
56
Select by Color and Fuzzy Select
• Select by Color is a very
valuable tool in your
selection arsenal.
–
–
–
–
–
Select, By Color
Free Select Tool
Edit Copy
Paste as New Image
Repeat the process on
the next color region.
Let the GIMP Force Be With You!
57
Bezier Paths
• Bezier Paths Tool-lets you define
control points (also called anchor
points, or nodes)outlining your
object.
–
–
–
–
Defining a Path
The Paths Dialog
Curved Paths
Adding Nodes or Segments and
Moving Paths
– Moving or Modify an Existing Path
• CTRL Click or Enter on your
starting point.
• Edit Copy, Edit Paste as New
Image .
• You now have a new image of
what you created a path around.
Let the GIMP Force Be With You!
58
Intelligent Scissors Tool
• Works somewhat like the
Bezier paths, but with a twist:
it tries to follow the
boundaries of an object.
• Caution: You must close your
selection by clicking on the
first point; that is not an
option like it is in the Bezier
path tool.
• CTRL Click or Enter on your
starting point.
• Edit Copy, Edit Paste as a New
Image. You now have a new
image of what you created a
path around.
Let the GIMP Force Be With You!
59
The Quick Mask
• Lets you see your selection
visually superimposed on
the image instead of the
usual “marching ants” view.
• Everything not selected will
have a red translucent red
mask over it.
• Quick Mask mode is turned
on by pressing the small
square at the bottom-left
corner of image window.
Let the GIMP Force Be With You!
60
Layer Mast
• Layer masts are particularly
useful when combining images
• Lets take an ostrich and a
giraffe and make an ostraffe?
• Copy the ostrich image
• Click on the giraffe image
– Edit Paste as New layer
– Move the body into position
– Use the Layers Tool and slide
the opacity level to blend the
two layers to your satisfaction.
– Layer, Mask, Add Mast Layer
– You can use the Master Layer
edit over the unwanted areas
– Great you know have a ostraffe
Let the GIMP Force Be With You!
61
Erasing and Touch Up
• Darkroom Work with
Dodge and Burn
– Dodging
– Burning
• Smudging Blemishes
Away
• The Clone Tool, for More
Difficult Jobs
– Setting the Clone Source
– Fine-tuning a Clone Job
– Clone Tool Options
Let the GIMP Force Be With You!
62
Erasing and Touch Up Continued
•
•
•
•
Copying Small Regions
The Heal Tool
Perspective Cloning
Enhancing Specific
Regions: The
Blur/Sharpen Tool
– Sharpening with the
Convolve Tool
– Blurring with the Convolve
Tool
• Blurring Backgrounds
with Gaussian Blur
Let the GIMP Force Be With You!
63
Colors
•
•
•
•
•
•
•
Color Balance
Hue- Saturation
Colorize
Brightness-Contrast
Threshold
Curves
De saturate
Let the GIMP Force Be With You!
64
Filters
• The Filters Menu
–
–
–
–
–
–
–
–
Blur
Enhance
Distorts
Light and Shadow
Noise
Edge-Object
Generic
Artistic
Let the GIMP Force Be With You!
65
Effects
• The Effects are
submenus under Filters
Menu
• Blur
– Enhance
• Blur
• Motion Blue
Let the GIMP Force Be With You!
66
Questions?
• Do we have any questions at this point?
• Next skill creating a simple animation using in
GIMP.
Let the GIMP Force Be With You!
67
Making a Simple GIF Animations
•
•
•
•
•
Plan and storyboard your animations
Animations are a fun use of layers.
Each layer becomes a frame of video.
First frame is the lowest layer
Create an image big enough for every part of
the animation.
• Our Project is to create a bi-plane landing and taking off.
Let the GIMP Force Be With You!
68
Making a Simple GIF Animations
•
•
•
•
•
Create a base Image
Add the Animation Frames
Give Each Frame Its Own Background
Test Your Animation
Animation for Web: Save as GIF
Let the GIMP Force Be With You!
69
Create a base Image
• New Image
– Image Size
• Width= 1024 pixels
• Height=170 pixels
• Landscape
– Advance Options
• Resolutions(y=72; x=72)
• Add background sky color
using color picker
– Color code=c1d9eb
• Save as bi-plane_landing
Let the GIMP Force Be With You!
70
Biplane Image
• Open the biplane image
in GIMP
• Select image
• Edit Copy or Ctrl-C
Let the GIMP Force Be With You!
71
Create Layers for Animation
• Edit >Paste
• Look in the Layers Tool and
you will see a Floating Layer
• To convert the Floating Layer
>Layer and add New Layer, the
Floating Layer is now a normal
layer
• Use the Move Tool to
reposition the biplane
• Repeat commands until you
have the number of frames
needed for your animation
• Do not worry about layer
names we rename those later.
Let the GIMP Force Be With You!
72
Test Your Animation
•
•
•
•
•
•
Main Image Window
Filters
Animation
Playback
New window opens
Click on the Play Button
– Enjoy your creation
Let the GIMP Force Be With You!
73
Fine Tuning Your GIF Animation
with Layer Names
• Next we to copy the background
layer and then merge the biplane
layer by merging layer, using
merge move down
• You can specify the time interval
between frames by editing the
frame names
• By double-clicking on the layer
name in the Layers Dialog Box.
• Give the layer name that ends in
millisecond interval (in
parentheses).
• Example name: biplane (200ms)
• 1000 milliseconds equals 1
second
Let the GIMP Force Be With You!
74
Animation for Web: Save as GIF
•
•
•
•
Main Image Window
File Menu
Save AS
Select File Type
– GIF Image
Let the GIMP Force Be With You!
75
Animation for Web: Save as GIF
next step
• Save as GIF
– Interface
– GIF Comment (enter
what you what)
• Animated GIF Options
– Loop forever
– Delay (100 milliseconds
per frame is default)
– Use delay entered above
will set times for all
frames
Let the GIMP Force Be With You!
76
Questions?
• Do we have any final questions?
George E. Brooks
South View High School
Cumberland County Schools System
georgebrooks@ccs.k12.nc.us
(910)425-8181 ext. 236
Let the GIMP Force Be With You!
77
Image File Types
•
•
•
•
JPEG
GIF
PNG
XCF
wilber.png
wilber.jpg
• TIFF
• Other Formats
Let the GIMP Force Be With You!
78
Joint Photographic Experts Group
• Category (jpg)
– Raster Image Files
• File Description
– Compressed graphic format standardized by the Joint Photographic
Experts Group (JPEG); supports up to 24-bit color, which makes JPEG a
good format for storing digital photos; compressed using lossy
compression, which may noticeably reduce the image quality if high
amounts of compression are used.
JPEG images are commonly used for Web graphics and for storing
photos taken with digital cameras. They are usually saved with a .JPG
extension.
• Source: http://www.fileinfo.com/
Let the GIMP Force Be With You!
79
Graphical Interchange Format File
•
•
Category (gif)
– Raster Image Files
File Description
– Image file that may contain up to 256 indexed colors; color palette may be a
predefined set of colors or may be adapted to the colors in the image; lossless
format, meaning the clarity of the image is not compromised with GIF
compression.
GIFs are common format for Web graphics, especially small images and images
that contain text, such as navigation buttons.
GIF images can also be animated and saved as "animated GIFs," which are
often used to display basic animations on websites; they may also include
transparent pixels, which allow them to blend with different color
backgrounds; however, pixels in a GIF image must be either fully transparent or
fully opaque, so the transparency cannot be faded like a .PNG image.
• Source: http://www.fileinfo.com/
Let the GIMP Force Be With You!
80
Portable Network Graphic
•
•
Category (png)
– Raster Image Files
File Description
– Image file stored in the Portable Network Graphic (PNG) format; like a .GIF file, contains a
bitmap of indexed colors under a lossless compression, but without copyright limitations;
commonly used to store graphics for Web images.
The PNG format was created in response to limitations with the GIF format, primarily to
increase color support and to provide an image format without a patent license;
additionally, while GIF images only support fully opaque or fully transparent pixels, PNG
images may include an 8-bit transparency channel, which allows the image colors to fade
from opaque to transparent.
PNG images cannot be animated like GIF images; however, the related .MNG format can
be animated; PNG images do not provide CMYK color support because they are not
intended for use with professional graphics; PNG images are now supported by most Web
browsers.
– Source: http://www.fileinfo.com/
Let the GIMP Force Be With You!
81
eXperimental Computing Facility
• Category (XCF)
• Raster Image Files
• File Description
• Image file created by the GNU Image Manipulation
Program (GIMP), a freely distributed image editing
program; saves layers, channels, paths, guides, and the
current selection when saved.
• Source: http://www.fileinfo.com/
Let the GIMP Force Be With You!
82
Tagged Image File Format
• Category(tiff)
– Raster Image Files
• File Description
– Graphics container that can store both raster and vector images;
may contain high-quality graphics that support color depths
from 1 to 24-bit; supports both lossy and lossless compression;
also supports multiple layers and pages.
TIFF files were designed to be a standard image format for
saving high-quality color images on multiple computer
platforms; they are most often seen with the .TIF extension.
The TIFF format was originally developed by Aldus, who merged
with Adobe Systems in 1994
Let the GIMP Force Be With You!
83
Image File Formats
• There are more image formats. Here are some of
the most common:
–
–
–
–
–
–
–
–
RAW
BMP
PCD
PSD
ICO
PDF and PostScript
SVG
Source: http://www.fileinfo.com/
Let the GIMP Force Be With You!
84
Resources
Smith, Jana and Jost, Rooam. Beginning GIMP. Springer, April 2012. Apress
Print.
Thomas, Keir, Jaime Sicam, Keir Thomas, John Jones, and Akkana Peck.
Beginning GIMP. Springer, 2006. Apress Print.
Brooks, George. "Gimp Information." Web-Gimp Information 20 July 2010: 1.
Web. 17 Jul 2010. <http://www.svhs
.ccs.k12.nc.us/cte/brooks/be6412/gimp/gimp.htm
FileInfo, Web Master. "File Extention Rescoures." File Extention Rescoures.
FileInfo, 17 July 2010. Web. 17 Jul 2010. <http://www.fileinfo.com/>.
Peck, Akkanak. "Beginning GIMP: From Novice to Professional." Beginning
GIMP: From Novice to Professional. Apress, Beginning GIMP: From Novice
to Professional. Web. 17 Jul 2010. <http://gimpbook.com/index.html
Simončič., Jernej. "Gimp Downloads for Windows." Gimp Downloads 20 July
2010: 1. Web. 17 Jul 2010. <http://www.gimp.org/downloads/>.
Let the GIMP Force Be With You!
85
Rescoures
Simončič., Jernej. "Gimp Downloads for Windows." Gimp Help
Documents 20 July 2010: 1. Web. 17 Jul 2010.
<http://docs.GIMP.org/2.6/en/>.
Simončič., Jernej. "Gimp Org." Gimp 20 July 2010: 1. Web. 17 Jul 2010.
<http://www.gimp.org/>.
Simončič., Jernej. "GTK+ and Gimp Installers." Gimp 20 July 2010: 1.
Web. 17 Jul 2010. <http://sourceforge.net/projects/gimp-win/>.
"Star Wars." Luscas Flims. Web. 17 Jul 2010.
<http://www.lucasfilm.com/>.
Thomas, Keir, Jaime Sicam, Keir Thomas, John Jones, and Akkana Peck.
Beginning GIMP. Springer, 2006. Print
.