WIXLIB

DIGITAL ART USINGGIMP & INKSCAPEPRESENTED BYMáirín DuffyFedora Design Team Lead &Sr. Interaction Designer, Red Hat, Inc.This presentation is under a Creative Commons Attribution ShareAlike 3.0 License.Please enjoy and share.

Who am I?QUICK STATS:Operating SystemDesktop EnvironmentOccupationLast used OS X, Windows,or any Adobe stuffIt's complicatedGNOMEInteraction Designer at Red HatFedora Design Team LeadEarly 2006

TODAY'S TOPICS:#1Which program do I use?#2Where can I get source materials?#3Dive into Gimp!#4Dive into Inkscape!#5How to learn more!

#1Which program do I use?

Photo credit: “Yellow” by Jenny Downing on Flickr. Used under a Creative Commons Attribution 2.0 license.

Gimp/Bitmap tasksPhoto manipulationScreenshot cropping/slicingDigital PaintingAnimationSpecial Effects

Graphic credit: “Realistic Coffee cup” by mokush on Open Clip Art. Public Domain.

Inkscape/VectortasksUI / web mockupsIcon creationLogo design & manipulation(Single-page) poster/flyer designHigh-resolution for-print designsCartooningPattern generationText effects

#2Where can I get sourcematerials?

You want a pony.

BRIEF FLOSS ARTISTS' PUBLIC SERVICE MESSAGE #1:Pay attention to licenses.YOU SHOULDN'T JUST USE RANDOM IMAGES OFF OF GOOGLE IMAGES.WE ALL DO KNOW THAT, DON'T WE?Pony credit: “White horse” by liftarn on Open Clip Art. Public Domain.

Gasper Llamazares thanks you.Gasper Llamazares.“Llamazares2” by Chesi Photos CC on Flickr.Used under a Creative Commons Attribution ShareAlike 2.0.FBI Simulated Photo of Osama Bin Laden,created using a photo of Mr. Llamazares fromGoogle Images.Right photo credit: Public Domain: work of the United States Federal Government under the terms of Title 17, Chapter 1, Section 105 of USCode.

BRIEF FLOSS ARTISTS' PUBLIC SERVICE MESSAGE #2:Give credit where it's due.LOOK BELOW. THAT'S A FORM OF ATTRIBUTION. NOT SO HARD, RIGHT?Pony credit: “With practice I can sleep standing up” by exfordy on Flickr. Used under a Creative Commons Attribution 2.0 license.

Where to find openly-licensed materials!Open Clip Artopenclipart.orgWikimedia Commonscommons.wikimedia.orgCC Searchsearch.creativecommons.orgVector artwork; SVGs and PNGs. All Public Domain.Photos and illustrations. Usually CreativeCommons, GNU, or Public Domain.Filters Google Images, Yahoo Images, and Flickr for CClicensed content including imagery.CompFightNice interface for searching Flickr for CC-licensedphotography.DeviantArtHas some CC-licensed imagery (hard to search for) butalso has CC-licensed Gimp brushes (not hard to rlovres.comYourselfYes, you!Offers Gimp Palette Files (compatible with Inkscape too!)for all their color palettes.Take your own photos or generate your ownillustrations. :)

#3Dive into Gimp!

GIMP TOPICS#1MASKS:How to extract objects fromphotographs.#2LAYER BLENDING MODES:Easy but impressive effects.#3MASKS LAYER MODES:Unbelievable photo effects.

MASKS“Despite all my rage,I am still just a ponyin a cage.”BEFOREPony credit: “Sleeping Pony” by erix! on Flickr. Used under a Creative Commons Attribution 2.0 license.

MASKS“Despite all my rage,I am still just a ponyin a cage.”BEFOREYippee! I'm afree pony now!AFTERPony credit: “Sleeping Pony” by erix! on Flickr. Used under a Creative Commons Attribution 2.0 license.

BRIEF GIMP UI PUBLIC SERVICE MESSAGE #1:Don't use the erase tool!How rude!IF YOU MAKE A MISTAKE WITH THE ERASER, YOU RELY ON LIMITED UNDO HISTORY.WITH MASKS, YOU CAN EASILY CORRECT MISTAKES WITHOUT UNDO.

MASKSA simple equation.Thanks forfreeing me! Pony in a cage Pony maskFreed pony!

MASKSA simple equation.Thanks forfreeing me! Pony in a cage Pony maskLet's try it!Freed pony!

BRIEF GIMP UI PUBLIC SERVICE MESSAGE #2:Tool options is your friend!That's right.I rule.SOMETHING WORKING UNEXPECTEDLY? CHECK TOOL OPTIONS.TOOL OPTIONS ALWAYS REFLECTS THE CURRENTLY SELECTED TOOL.THERE'S LOTS OF GOODIES IN THERE, TOO!

LAYER BLENDING MODESBlend the same image on top of itself.Blur OverlayBurnIt's a tad bitbright hereisn't it?DodgeHard Light Subtract Grain Extract

LAYER BLENDING MODESBlend a color or texture on top.Yes, you CANhave a pink pony!Pink Pony (Color Blend)Wooden Pony (Lighten Only Burn)Rock Pony (Burn)Bubble Pony (Grain extract)

LAYER BLENDING MODESBlend different photos.Burn BlendWow, I can seeright through you!Dodge BlendI'm aghost!!Overlay BlendDifference Blend2nd Pony credit: “Iceland Pony” by cheesy42 on Flickr. Used under a Creative Commons Attribution 2.0 license.

LAYER BLENDING MODESThe basics: Blending Mode(ex. Burn) Blending Mode(ex. Grain Extract) Blending Mode(ex. Dodge) Let's gettogether!Word.Let's try it!Hmm, thisis slightlyuncomfortable.

MASKS LAYER BLENDING MODESCombine both techniques!Like my new'do?Hair mask of pink color blend layerPony brand (Pony mask on wood pattern)I'm aghost!!Painterly brush mask, overlay blendPink pony layer with masked friend pony

MASKS LAYER BLENDING MODESCombine both techniques!Like my new'do?Hair mask of pink color blend layerPony brand (Pony mask on wood pattern)I'm aghost!!Painterly brush mask, overlay blendPink pony layer with masked friend ponyLet's try it!

#4Dive into Inkscape!

INKSCAPE TOPICS#1BITMAP IMPORT & TEXT TOOL:Make a simple LOLCAT.#2TEXT TOOL:Create a simple logotype.#3SHAPES, PATHS, & NODES:Create a simple logomark.#4BLUR & PATH FUNCTIONS:Bling-ify your logo!

BRIEF INKSCAPE UI PUBLIC SERVICE MESSAGE #1:Don't forget this lock.IF YOUR DRAWINGS AND TEXT ARE GETTING STRETCHED, TRY CLICKING IT!

BRIEF INKSCAPE UI PUBLIC SERVICE MESSAGE #2:Ctrl & Shift are magic!WHEN IN DOUBT, TRY THEM OUT!SCALING, ANGLES, ROTATION, MOVING, UNDO, STROKE v. FILL .

BRIEF INKSCAPE UI PUBLIC SERVICE MESSAGE #3:Don't get lost!STUCK IN LALA LAND? HITTING '5' WILL BRING YOU BACK TO CENTER.

BRIEF INKSCAPE UI PUBLIC SERVICE MESSAGE #4:Use Ctrl D.SELECT OBJECT &HIT CTRL DHOLD DOWN SHIFTAND KEEP PRESSINGARROW DOWNA PERFECT COPY.MODIFY AS NEEDED.IT WILL SAVE YOU SO MUCH TIME.

Ctrl D really saves you time.16 OBJECTS FROM 4, ALIGNED AND SPACED PERFECTLY.

BITMAP IMPORT & TEXT TOOLLOLCATs made easy.Tux-hatin' kitty.LOLCAT Tux-hatin' kitty!Let's try it!Kitty credit: “Tux attacked” by rore on Flickr. Used under a Creative Commons Attribution ShareAlike 2.0 license.

TEXT TOOLLine height.100% line height.70% line height200% line heightFont credit: HVD Comic Serif by Hannes von Döhren, Creative Commons Attribution 3.0, hvdfonts.com/freefonts.php

TEXT TOOLLetter spacing.Normal letter spacingTight letter spacingLoose letter spacingFont credit: HVD Comic Serif by Hannes von Döhren, Creative Commons Attribution 3.0, hvdfonts.com/freefonts.php

TEXT TOOLKerning.Just one letter!Up and down!Rotate, too.Font credit: HVD Comic Serif by Hannes von Döhren, Creative Commons Attribution 3.0, hvdfonts.com/freefonts.php

TEXT TOOLText on a path.Font credit: HVD Comic Serif by Hannes von Döhren, Creative Commons Attribution 3.0, hvdfonts.com/freefonts.php

TEXT TOOLThe basics.Line spacing.Letter spacing.Kerning.Text on a path.Font credit: HVD Comic Serif by Hannes von Döhren, Creative Commons Attribution 3.0, hvdfonts.com/freefonts.php

TEXT TOOLThe basics.Line spacing.Letter spacing.Kerning.Text on a path.Let's try it!Font credit: HVD Comic Serif by Hannes von Döhren, Creative Commons Attribution 3.0, hvdfonts.com/freefonts.php

ROTATE & FLIPASPECT RATIO LOCKSELECTORNODE DROPPERPALETTE

SHAPES, PATHS, & NODESInkscape makes shapes easy.CalligraphyCircleRectanglePolygon: StarPolygon:PentagonSpiral

SHAPES, PATHS, & NODESThey're also customizable.Cut CircleRoundedRectanglePolygon: StarRandomizedPolygonModified SpiralEach shape tool has a specialized toolbar with lots of hidden goodies!

SHAPES, PATHS, & NODESTools for working with paths & nodes.Pen tool.Used to create paths.Node tool toolbar.Rich node-editing controls.Node tool.Used to modify nodes.

SHAPES, PATHS, & NODESTypes of nodes.You can convert between the types using the node toolbar:

SHAPES, PATHS, & NODESLet's give it a try.

PATH FUNCTIONSWhat can you do with two circles?

BLUR & PATH FUNCTIONSConvert the letters to paths, then useintersection to create gloss.

BLUR & PATH FUNCTIONSAdd a touch of blur!

BLUR & PATH FUNCTIONSAdd a touch of blur!Let's try it!

#5How to learn more!

LEARNING MORE!#1My Inkscape class ass/#2Nicu's enX.orghttp://screencasters.heathenx.org/#4Meet The Gimp! Video Tutorialshttp://meetthegimp.org/#5FLOSS Manualshttp://flossmanuals.net#6Inkscape Tutorials Bloghttp://inkscapetutorials.wordpress.com/

Questions?This presentation is under a Creative Commons Attribution ShareAlike 3.0 License.Please enjoy and share.This presentation was created through the exclusive use of free software and content:Fedora 13 OpenOffice.org Impress Inkscape GIMPCreative Commons licensed artwork Openly-licensed fontsCartoon credit: María 'Tatica' Leandro, Creative Commons Attribution 3.0

Offers Gimp Palette Files (compatible with Inkscape too!) colourlovres.com for all their color palettes. ColourLovers #3 Dive into Gimp! #1 MASKS: How to extract objects from photographs. #2 LAYER BLENDING MODES: Easy but impressive effects. #3 MASKS LAYER MODES: Unbelievable photo effects.