Using Graphics in Real-World Tech Comm

Sean Brierley @seanb_us

We are here to learn the basics of graphics: types, formats, colors.

Use of graphics requires planning.

• Plan– Audience– Purpose– Where will it be

used– Time– Money– Expertise

• Create the graphic

• Revise as needed– Plan editing

Graphics have a purpose.

Consider• Why we use them• Benefits they bring• Drawbacks they have• Our obligations with graphics

We use graphics to communicate.• Catch the reader's attention and interest• Communicate information that is difficult

to communicate with words (flowcharts)• Clarify and emphasize information• Communicate with visual learners• Help non-native speakers• Show spatial information

Banners catch a reader’s attention at a tradeshow.

Graphics can show spatial information.

Graphics can show relationships.

Graphics can help non-native speakers and visual learners.

Graphics have drawbacks.

• Time consuming and expensive to produce– Requires expertise: illustrator, photographer, artist– What people expect to see

• More difficult than text to edit• Can be expensive to print• File sizes can be huge with graphics

versus text only

10/64

Graphics are time consuming and expensive to produce.

• Where is the bar set?• Anything less than National

Geographic quality is amateurish

• Video is judged by what people see on TV

Photography requires more than a cell phone with megapixels.

• Cost• Skill• Investment

• Tripod• Backdrop

Lighting

Graphic file sizes can be off the hook.

• A Microsoft® Word® file with 400 words can be about 40 KB

• The same file with this off-the-hook graphic is 4X larger!

• This image is about 800x400 pixels – number of pixels and color matter

Use of graphics has obligations.• Academic – if the work is not yours, cite and give

credit• Business – if the work is not yours, get permission

– Resolve who owns work before you use it– Approach the copyright owner

Graphics have color.

CMYK

RGB

Spot color

Consider usual elements of design when using color.• Don’t overdo it• Use color to emphasize particular items• Use color to create patterns (note,

caution, warning)• Use contrast effectively• Use any symbolic meanings colors may

already have

Use color sparingly for contrast and consistently so your audience can filter content based on color.

The color you use depends on your output.

• Customer prints it• One color• Online• Printed

commercially

RGB is for online use.• Projected color• Hex

– #RRGGBB = Red|Green|Blue– #000000= absence of all = black– #FFFFFF = presence of all = white

• Web/digital cameras

CMYK is for commercial printing.• Reflected• 256, 256, 256, 256• Presence of all =

black• Absence of all =

white• Print• Ink

Spot is for printed logos.

• Color book• Colors appear

different on different surfaces

• Monitor calibration

• Color system calibration

20/64

Graphics comprise different forms.

Vectors

Rasters

Fonts

Fonts trump vectors; vectors trump rasters.

Fonts are better than vectors, and

Fonts use outlines and intelligent spacing.

Use symbol or graphics fonts for bullets

Proportional fonts are designed: use one space after a period. Avoid French spacing.

Use fonts for letters and numbers

Vectors are relatively small files and infinitely scalable.

Make the vector bigger, multiply the formula by 2

Vectors and rasters have different attributes.

Vectors• Line art• Lines, splines, arcs,

ellipses, rectangles• Small• Scalable• Easy to edit• Retain font info

(embed/reference)• Don’t have resolution

Rasters• Photos and screen

captures• Pixel-by-pixel• Not scalable• Difficult to edit• Large file sizes• Have resolution

Raster files are often larger than vector files and not easy to scale.

Quadruple the number of pixels

Decrease the resolution

To make a raster twice as big…

Resolution – “you keep using that word, I do not think it means what you think it means.”

High resolution

Low resolution

Graphics form depends on its creation and your deliverable.

Vector output strengths• Offset press• Personal and

workgroup printers• PDFs

Raster output strengths• Websites

Vector creation• Illustration software• Computer-aided

design software• Flowcharting software

Raster creation• Digital camera• Scanner• Photograph and

image-editing software

Graphics use different file formats.

Vectors*• EPS• WMF, EMF• AI• CDR

Rasters• BMP – RGB• TIFF – RGB/CMYK + transparency• PNG – RGB + transparency• JPEG – RGB/CMYK• GIF – 256 colors + transparency• PSD – RGB/CMYK + transparency

* Vector formats can include font and raster data but raster formats cannot

Use PNGs for screen captures.

PNG (16 KB) JPEG (16 KB)

30/64

Use JPEGs for photos.

• No sharp lines• No precise curves• Colors and shapes blend• Lossy compression is unnoticed

Use EPS or TIFF for printed marketing material.

• PSD and AI files – Preserve layers– Easy to edit– Adobe®-specific

• Provide deliverable as TIFF or EPS– Magazine

advertisements– Tradeshow banners– Business cards

Sometimes file size matters.

• 3571 x 4000 pixels RGB

• BMP = 42 MB• JPG = 8.5 MB• PNG = 23 MB• PSD = 41 MB• TIF = 42 MB

Resize your image before using it.

• 3571 x 4000 pixels RGB

• PSD = 41 MB• TIFF = 42 MB• BMP = 42 MB• PNG = 23 MB• JPG = 8.5 MB

• 600 x 672 pixels RGB

• PSD = 1 MB• TIFF = 1 MB• BMP = 1 MB• PNG = 652 KB• JPG = 409 KB

Quiz: Raster or Vector?

Quiz: Raster or Vector (Cont’d)?

Quiz: Raster or Vector (Cont’d)?

Quiz: Raster or Vector (Cont’d)?

• It is a vector• SVG• (XML)

Tips and tricks.

• Layers are not just for onions and ogres

• Keep source files• Who cares what your

authoring tool is?• Design logos with future

use in mind• Designing for Web and

press• Check your deliverable• Audience is everything

Use layers to organize what you work on and what you output.• Lock layers to

increase editing control

• Hide layers to control output

40/64

Hide layers to hide red.

• Red vector and red dots layers hidden

Show layers to show red.

• Red vector and red dots layers visible

Keep source files to make updates easier.• AI/EPS can include fonts,

vectors, and rasters• Raster is only pixels

Vector

Fonts

Raster

Your authoring tool doesn’t really matter.

Publishing and graphics software sometimes lie to you

WYSINAWYG

Logos are used everywhere.

Logos and stylized text are often resized

Use EPS, AI for logos.

• Logos get used 1-by-1 inch on letterhead and 2-by-2 feet on tradeshow banners

• EPS and AI support CMYK and spot colors• EPS and AI include font, vector, and

raster data• EPS and AI are infinitely scalable• Output fixed-size raster images for Web

use

Handling a logo for print and Web can be complex, but not tricky.

• Vector = lines, splines, arcs• Vector != Web• Spot color = print• Spot color != Web• CMYK color = print• CMYK color != Web

Vector

Raster

Font plusPMS 2995

Really, the soccer ball is a vector image.

In Illustrator,you can see splines, nodes, and other clues this is vector, not raster (pixel) based

For multiple outputs, create multiple graphics.

• Vector CMYK for editing and press (this is your high-resolution version)

• Three or four low-resolution (100 ppi) Web images in different sizes– 200x200, 400x400, and 800x800 pixels

• Decide on an RGB equivalent for the corporate color (PMS 2995)

50/64

Consider this a good approach to screen captures.

• Size the GUI element before you capture it

• 8-bit color is fine, but 24-bit is better• Windows® thinks resolution is 96 ppi• 96 ppi looks fine in online docs• 96 ppi good for workgroup printer• 120ppi is a good compromise if going to

press• Use a screen-capture tool

Consider this a good approach for Web.• Size the image element before you upload

it – avoid resizing it in the browser• Use JPEG or PNG• 96 ppi is good• Avoid embedding fonts in images –

unsearchable and file size

Consider this a good approach for Press.• Provide EPS,

TIFF, PDF, AI, PSD

• Embed images or provide them

• Outline fonts• 300 ppi is

good• Find a way to

share files• No Facebook

JPEGs

Check your deliverable.

HTML output

PDF – print or online

Printer – personal, workgroup, or press

It happened to me …

• Christmas cards: $2000• Banner: $4000 • Logo change and Website redesign: $$$$

What do you want, amateur?

Or Pro?

And in conclusion … audience is king.

So long and thanks for all the fish – Questions ...

Tools Used

• Adobe® Illustrator ® • Adobe ® Photoshop ®• Microsoft ® PowerPoint®• Microsoft® Word®• Techsmith® Jing®

Sources(n.d.). Accenture logo. Retrieved from

http://www.accenture.com/us-en/pages/index.aspx(n.d.). Accu-Time product photograph. Retrieved from

http://www.accu-time.com(n.d.). Crown. Retrieved from

http://photo-dictionary.com/phrase/420/crown.html#b(n.d.). Classroom usage statement. Retrieved from

http://www.amureprints.com/reprints_edu.htm (n.d.). Digital offset printing - The future of offset printing. Retrieved

from http://www.erawanet.com/digital.html(n.d.). Firefox logo. Retrieved from

http://www.mozilla.org/en-US/firefox/new/(n.d.). Full color family stickers. Retrieved from http://

www.familystickers.com/full-color-family-stickers.html

Sources (Cont’d)

(n.d.). Hourglass. Retrieved from http://damyantiwrites.wordpress.com/2011/04/09/a-z-h-for-hourglass

(n.d.). How to shoot product photography – part 1. Retrieved from http://www.freedigitalphotographytutorials.com/advanced/how-to-shoot-product-photography-part-1/

(n.d.). In the booth: Hotline. Retrieved from http://marthacalderaro.wordpress.com/2009/10/21/in-the-booth-3/hot-line-3

(n.d.). Lego® Agents. Retrieved from http://cache.lego.com/bigdownloads/buildinginstructions/4536500.pdf

(n.d.). Microsoft Internet Explorer logo. Retrieved from http://en.wikipedia.org/wiki/File:Internet_Explorer_7_Logo.png

(n.d.). Opera Logo. Retrieved from http://en.wikipedia.org/wiki/File:Opera_icon_comparison.png

Sources (Cont’d)

(n.d.). Prudential business card. Retrieved from http://www.betterdealadvertising.com/prudential.html

(n.d.). University of New Hampshire parking map. Retrieved from http://www.unh.edu/transportation/visitor/map.pdf

(2009, February 21). 3D Golden money symbol graphics. Retrieved from http://dragonartz.wordpress.com/category/main/symbols-main/

(2011, March 23). Rabbinic miracles prove to us even in the forms of fruits and vegetables. Retrieved from http://www.dewan.co.il/news-16,N-2563.html

(2012, April 1). Department of Homeland Security. Retrieved from http://www.dhs.gov/xabout/structure/editorial_0644.shtm

Admin. (2010, October 4). Southern Connecticut State University Athletics. Retrieved from http://www.southernowls.com/

Andrei. (2011, February 1). Color spaces. Retrieved from http://photographystepbystep.com/digital-imaging/color-spaces

Sources (Cont’d)

Constable. J. (1802). Dedham vale. Retrieved from http://upload.wikimedia.org/wikipedia/commons/b/b3/Constable_DeadhamVale.jpg

Copping, J. (2009, August 2). Can Kennel Club change its spots over new Dalmatian? Retrieved from http://www.telegraph.co.uk/health/petshealth/5956660/Can-Kennel-Club-change-its-spots-over-new-dalmatian.html

Derry, G. (2012, February 24). Using video games in the classroom. Retrieved from http://wiki.ssis-suzhou.net/users/geoffreyderry/weblog/16efe/Changing_the_way_we_teach.html

El Greco. (1596-1600). Toledo. Retrieved from http://upload.wikimedia.org/wikipedia/commons/c/ca/El_Greco_-_View_of_Toledo_-_Google_Art_Project.jpg

Ghostscript Authors. (2002, January 10). Ghostscript Tiger.svg. Retrieved from http://sv.wikipedia.org/wiki/Fil:Ghostscript_Tiger.svg

Sources (Cont’d)

Kaixer. (2011, May 11). Creative business card – Color explosion. Retrieved from http://cardrabbit.com/category/creative-business-cards/page/3/

Reiner, C. (Director). (1979, December 14). The Jerk [Motion picture]. USA: Universal Pictures. Retrieved from http://phdblog.net/page/3/

Reiner, R. (Director). (1987, September 27). The Princess Bride [Motion picture]. USA: Twentieth Century Fox Film Corporation.

Rich. (2010, March 23). Epson R300 inkjet printer. Retrieved from http://www.inkandmedialtd.co.uk/blog/epson-r300-inkjet-printer-review/

Sifter. (2011, November 7). Picture of the day: The Magic Roundabout in Swindon, England. Retrieved from http://twistedsifter.com/2011/11/picture-of-the-day-the-magic-roundabout-in-swindon-england/

Skraps. (2011, December 14). So long and thanks for all the fish. Retrieved from http://sham-wows.blogspot.com/2011/12/so-long-and-thanks-for-all-fish.html