Date post: | 17-May-2015 |
Category: |
Technology |
Upload: | seanbus |
View: | 749 times |
Download: | 2 times |
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