BFTAW BDPA Workshop Introduction to GIMP Chris [email protected] 2.16.08.

BFTAWBFTAWBDPA WorkshopBDPA Workshop

Introduction to GIMPIntroduction to GIMPChris [email protected] [email protected]

2.16.082.16.08

Some Image TypesSome Image Types

Bitmap ()Bitmap () JPEG (Web)JPEG (Web) TIFF (Printing)TIFF (Printing) GIF (Small, few colors)GIF (Small, few colors) PNG (Replace for GIF)PNG (Replace for GIF) XCF (GIMP)XCF (GIMP)

BitmapBitmap

Microsoft Paint’s defaultMicrosoft Paint’s default UncompressedUncompressed Windows wallpaperWindows wallpaper Large file sizesLarge file sizes

JPEG or JPGJPEG or JPG

Commonly used for pictures (and Commonly used for pictures (and cameras)cameras)

Small file sizes (great for web)Small file sizes (great for web) File size vs quality (user can change)File size vs quality (user can change) Lossy data compressionLossy data compression

GIFGIF

Static or animatedStatic or animated Index colors (256 colors)Index colors (256 colors) non-photographic type images non-photographic type images

(buttons…)(buttons…)

TIFFTIFF

Great for printing (Great quality)Great for printing (Great quality) Large filesLarge files Optional compression LZW (lossless)Optional compression LZW (lossless)

PNGPNG

Portable Network GraphicPortable Network Graphic W3C standard to replace GIFW3C standard to replace GIF Doesn’t lose quality (lossless)Doesn’t lose quality (lossless) TransparentTransparent

XCFXCF

GIMP’s file extensionGIMP’s file extension Preserves your image as a “working Preserves your image as a “working

project”project” LayersLayers ColorsColors HistoryHistory AttributesAttributes

Image Type SummaryImage Type Summary

Bitmap (Large file size)Bitmap (Large file size) JPEG (Web Images, small files size)JPEG (Web Images, small files size) TIFF (Best quality, ideal for Printing, larger TIFF (Best quality, ideal for Printing, larger

file size)file size) GIF (Small, few colors – 256 max, animate, GIF (Small, few colors – 256 max, animate,

transparent)transparent) PNG (Replace for GIF, 16 million colors, PNG (Replace for GIF, 16 million colors,

transparent, animate)transparent, animate) XCF (Preserves layers and other GIMP XCF (Preserves layers and other GIMP

attributes to create a “working project”)attributes to create a “working project”)

Printing vs Web(screen)Printing vs Web(screen)

Printing Printing dpi: 150 – 300, 400 – 1500 (Pros)dpi: 150 – 300, 400 – 1500 (Pros) CMYK (Cyan, Magenta, Yellow, Key CMYK (Cyan, Magenta, Yellow, Key

(black) )(black) ) TIFF or JPEG imagesTIFF or JPEG images

ScreensScreens dpi: 72dpi: 72 RGB (Red, Green, Blue)RGB (Red, Green, Blue) JPEG, GIF, or PNG imagesJPEG, GIF, or PNG images

PixelPixelShort for Short for Picture ElementPicture Element

NO inherent height or widthNO inherent height or width NO inherent shapeNO inherent shape One color (any color)One color (any color) A Screen Resolution (1280x1024)A Screen Resolution (1280x1024)

GIMP GIMP (GNU Image Manipulation Program)(GNU Image Manipulation Program)

Installing GIMPInstalling GIMP

Installing GIMPInstalling GIMP

Introduction to GIMPIntroduction to GIMP(Toolbar panel)(Toolbar panel)

Tools

Properties of the tool

Introduction to GIMPIntroduction to GIMP(Image panel)(Image panel)

Tools

Properties of the tool selected

Ruler Zoom

Introduction to GIMPIntroduction to GIMP(Other panels)(Other panels)

Layers Fonts Colors

Panel LayoutPanel Layout

General topicsGeneral topics

Canvas, Images, Layer, SelectionCanvas, Images, Layer, Selection SelectionSelection LayersLayers Rotate, Scale, Mirror and ResizeRotate, Scale, Mirror and Resize Crop Images Crop Images Fill or outline selectionsFill or outline selections

Canvas, Image, Layer, Canvas, Image, Layer, SelectionSelection

Canvas (entire boundary) – resize doesn’t affect imageImage (entire boundary) – resizes everything including canvasLayer (black and yellow dotted line) – only can edit within that box when you’re on that layerSelection (black and white dotted line) - Only changes within selection

SelectionSelection

Lasso – Draw your selection like a pencil

Circle – Select round images

Square – Select square images

Normal, Add, Subtract, Intersect

Wand – Select by similar color you select (touching)

Color – Select regions with similar color

LayersLayers(part 1)(part 1)

Image shown above

Current Layer selected (White background)

Top Layer (Transparent background)

Bottom Layer (Covered by current layer)

Layer – Hide or show it

Trash – Delete Layer

Add Layer – Move Layer – Duplicate Layer

LayersLayers(part 2 – Pasting a picture)(part 2 – Pasting a picture)

Pasting into your picture produces this “Floating” selectionYou have two options:

1) Anchor the pasted later into the layer underneath

2) Create a new layer and put the pasted layer on top

Rotate, Scale, Mirror and Rotate, Scale, Mirror and ResizeResize

(only for layer, selection, or path)(only for layer, selection, or path)

Rotate

Scale

Shear

Perspective

Mirror

CropCrop

Make your selection

Right click on picture and selectImage -> Crop to Selection

Fill or Outline selectionFill or Outline selection

1. Make a selection2. Pick your color (I used blue)3. Click the Edit menu4. Click “Fill with FG Color” (to fill)

or “Stroke Selection” (to outline)

Advanced TopicsAdvanced Topics

Layer Mask (coming up…)Layer Mask (coming up…) Picture collage Picture collage Enhance colorsEnhance colors Picture touch upPicture touch up

Layer MaskLayer Mask(step 1)(step 1)

1. Create two layers (Mask and Background)2. Select the top layer (as shown below)

Layer 1 - Mask

Layer 1 - Background

Layer MaskLayer Mask(step 2)(step 2)

1. Use the wand tool to select the inside of the puzzle piece.

2. Delete your selection using the delete key once the space inside the puzzle is selected.

Layer MaskLayer Mask(step 3)(step 3)

1. Continue to do that for the remaining pieces (feel free to try something creative with the black piece!)

GIMP ResourcesGIMP Resources GimpGimp Resources Resources

Tutorials, Inspiration, Patterns, Brushes & MoreTutorials, Inspiration, Patterns, Brushes & More

Gimp TutorialsGimp Tutorials http://www.gimp.org/tutorials/http://www.gimp.org/tutorials/

DeviantArtDeviantArt http://browse.deviantart.com/resources/applications/gimpbrushes/http://browse.deviantart.com/resources/applications/gimpbrushes/

Hawsmont UniverseHawsmont Universe http://hawksmont.com/blog/category/graphic_design/resources/http://hawksmont.com/blog/category/graphic_design/resources/

gimp_brushes/gimp_brushes/ livejournal livejournal

http://community.livejournal.com/gimpbrushes/http://community.livejournal.com/gimpbrushes/ Snap2Objects – 85 Killer Resources Every Designer Should KnowSnap2Objects – 85 Killer Resources Every Designer Should Know

http://www.snap2objects.com/2007/06/06/85-killer-resources-every-http://www.snap2objects.com/2007/06/06/85-killer-resources-every-designer-should-know/designer-should-know/

Smashing MagazineSmashing Magazine http://www.smashingmagazine.com/category/showcase/http://www.smashingmagazine.com/category/showcase/