BEYOND CLIP ART · 2014-01-28 · BEYOND CLIP ART . Working with Photos and Image Files . Lois...

24
BEYOND CLIP ART Working with Photos and Image Files Lois Wallenhorst, Safe Schools/Healthy Students APRIL 2013

Transcript of BEYOND CLIP ART · 2014-01-28 · BEYOND CLIP ART . Working with Photos and Image Files . Lois...

Page 1: BEYOND CLIP ART · 2014-01-28 · BEYOND CLIP ART . Working with Photos and Image Files . Lois Wallenhorst, Safe Schools/Healthy Students . APRIL 2013

BEYOND CLIP ART Working with Photos and Image Files

Lois Wallenhorst, Safe Schools/Healthy Students

APRIL 2013

Page 2: BEYOND CLIP ART · 2014-01-28 · BEYOND CLIP ART . Working with Photos and Image Files . Lois Wallenhorst, Safe Schools/Healthy Students . APRIL 2013

I. Introduction II. Overview of Programs that can be used III. Introduction of GIMP IV. Overview of File Formatting Information & Best Practices V. Working in GIMP – Navigation and Working with Images VI. Additional Thoughts & Resources VII. Q&A

Agenda

Page 3: BEYOND CLIP ART · 2014-01-28 · BEYOND CLIP ART . Working with Photos and Image Files . Lois Wallenhorst, Safe Schools/Healthy Students . APRIL 2013

Some Options for working with Photos

Microsoft Office:

•Word •Publisher •PowerPoint

Adobe:

•Photoshop •InDesign •Illustrator •Photoshop Elements

Free Alternative:

•GimpShop

Page 4: BEYOND CLIP ART · 2014-01-28 · BEYOND CLIP ART . Working with Photos and Image Files . Lois Wallenhorst, Safe Schools/Healthy Students . APRIL 2013

Word, Publisher & Power Point

Page 5: BEYOND CLIP ART · 2014-01-28 · BEYOND CLIP ART . Working with Photos and Image Files . Lois Wallenhorst, Safe Schools/Healthy Students . APRIL 2013

Adobe Programs : The Gold Standard

$599

Page 6: BEYOND CLIP ART · 2014-01-28 · BEYOND CLIP ART . Working with Photos and Image Files . Lois Wallenhorst, Safe Schools/Healthy Students . APRIL 2013

Finally, a FREE Alternative

GNU Image Manipulation Program

www.gimp.org/downloads

Page 7: BEYOND CLIP ART · 2014-01-28 · BEYOND CLIP ART . Working with Photos and Image Files . Lois Wallenhorst, Safe Schools/Healthy Students . APRIL 2013

Let’s Dive In – Basic User Tour

Page 8: BEYOND CLIP ART · 2014-01-28 · BEYOND CLIP ART . Working with Photos and Image Files . Lois Wallenhorst, Safe Schools/Healthy Students . APRIL 2013

Structure and Support for Safe Schools and Healthy Students

“Guidelines vs. Actual Rules”

Page 9: BEYOND CLIP ART · 2014-01-28 · BEYOND CLIP ART . Working with Photos and Image Files . Lois Wallenhorst, Safe Schools/Healthy Students . APRIL 2013

Pixels, RGB, CMYK, .TIFF, .GIF … OMG

Manipulating photos can by easy – getting them to look

their best, sometimes not so much. What you see is not

always what you get!

Page 10: BEYOND CLIP ART · 2014-01-28 · BEYOND CLIP ART . Working with Photos and Image Files . Lois Wallenhorst, Safe Schools/Healthy Students . APRIL 2013

Pixels, RGB, CMYK, .TIFF, .GIF … OMG

Page 11: BEYOND CLIP ART · 2014-01-28 · BEYOND CLIP ART . Working with Photos and Image Files . Lois Wallenhorst, Safe Schools/Healthy Students . APRIL 2013

•Pixels •CMYK vs.RGB •File Format

The three essentials of working with graphics files:

Pixels, RGB, CMYK, .TIFF, .GIF … OMG

Page 12: BEYOND CLIP ART · 2014-01-28 · BEYOND CLIP ART . Working with Photos and Image Files . Lois Wallenhorst, Safe Schools/Healthy Students . APRIL 2013

Pixels: A pixel is a single element of a picture. The more pixels per inch (ppi) the higher the resolution, or clarity/quality of the image. Different output (large print, computer screen, websites… can produce better outcomes with higher (or lower) ppi The higher the pixel count – the larger the final size of the file

• high resolution images are best for high quality printing • low resolution (72 ppi) best for website, email

Pixels, RGB, CMYK, .TIFF, .GIF … OMG

Page 13: BEYOND CLIP ART · 2014-01-28 · BEYOND CLIP ART . Working with Photos and Image Files . Lois Wallenhorst, Safe Schools/Healthy Students . APRIL 2013

Structure and Support for Safe Schools and Healthy Students

Pixels, RGB, CMYK, .TIFF, .GIF … OMG

Page 14: BEYOND CLIP ART · 2014-01-28 · BEYOND CLIP ART . Working with Photos and Image Files . Lois Wallenhorst, Safe Schools/Healthy Students . APRIL 2013

Helpful Guidelines

End Product

Suggested Pixel

Dimension

Because…

Professional Printing 300 – 600 dpi

More is more. A printing press (digital or otherwise) needs more dots per inch to make the quality and clarity of an image better

Printing in-house, photocopies or on laser

jet printer 150 – 200 dpi

Keeps document size manageable. Won’t add unnecessary size to document, but retain good quality for publication or printed piece.

Email or Web

72 – 100 dpi

Less really is more. The smaller the file size, the faster an image or object will load – and keep the size of your message or website down.

Page 15: BEYOND CLIP ART · 2014-01-28 · BEYOND CLIP ART . Working with Photos and Image Files . Lois Wallenhorst, Safe Schools/Healthy Students . APRIL 2013

RGB: Red, Green Blue color model additive color mode – colors created by mixing levels of the three – light based

CMYK: Cyan, Magenta, Yellow, Black – subtractive color model – colors created by removing levels of colors. Most appropriate for printing – professional printing presses use - ink based

Pixels, RGB, CMYK, .TIFF, .GIF … OMG

Page 16: BEYOND CLIP ART · 2014-01-28 · BEYOND CLIP ART . Working with Photos and Image Files . Lois Wallenhorst, Safe Schools/Healthy Students . APRIL 2013

How can this info be helpful?

Page 17: BEYOND CLIP ART · 2014-01-28 · BEYOND CLIP ART . Working with Photos and Image Files . Lois Wallenhorst, Safe Schools/Healthy Students . APRIL 2013

Helpful Guidelines

End Product

Suggested

Color Space

Because…

Professional Printing CMYK

Digital and offset printing presses use these colors to create images

Printing in-house, photocopies or on laser

jet printer RGB

Even if your color laser printer uses CMYK cartridges – RGB is most universal (for reusing the image later) and the color difference will be negligible…

Email or Web

RGB or Indexed

RGB again – universal – and then save the file as a .gif for your final web file. Formatting as a .gif transfers the file to the “indexed” color space (256 colors that are universal on web spaces)

Page 19: BEYOND CLIP ART · 2014-01-28 · BEYOND CLIP ART . Working with Photos and Image Files . Lois Wallenhorst, Safe Schools/Healthy Students . APRIL 2013

.JPEG: Most universal file/photo format. Compresses image data to reduce file size.

.TIFF: No internal file compression. Larger file sizes, professional

.GIF: web-based color palate, compresses file to reduce loading timeThe

.EPS : file format that can be used to increase finished size without degrading image quality – large projects

.PNG: another web-based format , can be created with transparent background, has compression.

.XCF: Source file for

image/photo manipulated or created in GimpShop. Should be used to save a file in one of the formats above

OR

.PSD: Source file for

Photoshop

The file you work in: The final file you use can be:

Pixels, RGB, CMYK, .TIFF, .GIF … OMG

Page 20: BEYOND CLIP ART · 2014-01-28 · BEYOND CLIP ART . Working with Photos and Image Files . Lois Wallenhorst, Safe Schools/Healthy Students . APRIL 2013

Structure and Support for Safe Schools and Healthy Students

Table: Suggested Pixel Dimensions, Formats and Color Space

Where my image will be used

Suggested Color Setting

Resolution (PPI)

Suggested format

What you should know

Word/Publisher/ Powerpoint RGB

100 (minimum) 150 (better)

.JPEG Microsoft products have internal .dpi pre-set and will optimize photos

Web Indexed or RGB 72 (AOK) 100 (no higher

.GIF or .PNG .PNG preserves transparency – often used in web-based animations

Email RGB

72 (AOK) 100 (no higher)

.GIF

.JPEG

Larger sizes will increase the size of the email message where they are embedded or attached

Professionally printed piece

CMYK 300 (minimum) 600 (best)

.EPS or .TIFF

File will be very large! Expect lots of MBs! .EPS is best if something is going to be enlarged …these files can be manipulated with InDesign and Illustrator

Other printed items (t-shirts, coffee mugs,

pens…)

RGB 300-600 .EPS, .TIFF, .JPEG

Talk with your vendor first – but higher resolution than they need will work much better!

Page 21: BEYOND CLIP ART · 2014-01-28 · BEYOND CLIP ART . Working with Photos and Image Files . Lois Wallenhorst, Safe Schools/Healthy Students . APRIL 2013

Working in GIMPShop

Page 22: BEYOND CLIP ART · 2014-01-28 · BEYOND CLIP ART . Working with Photos and Image Files . Lois Wallenhorst, Safe Schools/Healthy Students . APRIL 2013

Resources

Websites for GimpShop Tutorials & Videos: The User Interface for Beginners Create Glassy Text Effect Twenty-Five Tutorials About Using GimpShop Using Blur Tool In GimpShop Using the Magnetic Lasso Tool (Scissors Select)

Free Stock Photo Resource: Microsoft Online Royalty Free Images Site to create “wordle” graphics:

http://www.tagxedo.com

Page 23: BEYOND CLIP ART · 2014-01-28 · BEYOND CLIP ART . Working with Photos and Image Files . Lois Wallenhorst, Safe Schools/Healthy Students . APRIL 2013

When You Hit a Roadblock, Remember

Page 24: BEYOND CLIP ART · 2014-01-28 · BEYOND CLIP ART . Working with Photos and Image Files . Lois Wallenhorst, Safe Schools/Healthy Students . APRIL 2013

Structure and Support for Safe Schools and Healthy Students Structure and Support for Safe Schools and Healthy Students

Restorative Practices Module I: Introduction to Restorative Practices Questions & Answers

www.safeschoolscville.org

This presentation contains materials that may be covered by copyright and other restrictions. Contact the Safe Schools/Healthy Students Albemarle/Charlottesville Project office to obtain permission for use or reproduction of any material.

[email protected]