Using Graphics in Real-World Tech Comm


Published on

Presented at the STC Summit Conference in May, 2012, in Chicago. This presentation provides a broad overview of using graphics in technical communication, beginning with basic concepts, then a discussion of graphics types (raster, vector), formats (EPS, PNG, JPG), colors (RGB, CMYK, spot), and finally specific examples (screen captures, commercial press).

Published in: Technology, Art & Photos
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • me:AccentureSouthern Connecticut State UniversitySoccerSubarusChildrenWife
  • The presentation discusses screen captures, photographs, Web images, illustrations, and logos. You learn which formats are better for deliverables. Topics include rasters, vectors, RGB and CMYK, resolution, and popular software. You will come away with real-world knowledge and techniques that you can immediately apply to graphics in the workplace.
  • presentation gives you the background to plan and the information you need to have a conversation about graphics and decide what to do in your situation. Take what is presented and apply it to your situation.
  • a purpose for your graphics. Consider pros, cons, and obligations.
  • This is purposefully text, as the following slides present this information with the help of graphics.
  • is going to create the large logo and stylized text?Do you need to reuse this, say on business cards?What are your plans for future editing of these graphics?Consider AI or EPS for these graphics because they are infinitely scalable and have small file size.
  • the image better represent the idea of spatial information than text does?
  • graphics to show relationships: organization of Homeland Security Dept. or organization of my family.
  • instructions are an example of using graphics to help non-native speakers. Including fonts in graphics can be problematic: embed them in AI or EPS so you can update the source graphic as needed.
  • are expensive in terms of expertise, cost, and time needed to create them. When you design graphics, plan for future editing and updating, too.
  • People are used to National Geographic photos and TV video, with advertisement voice-overs. Does your budget let you do that?
  • Taking photographs requires planning, skill, and equipment.The bar is set by what your audience sees everyday in print magazines and onlineHire a professional photographer or leverage Marketing’s budget and use their photosUse even lighting with a solid background that makes it easier for you to isolate your product in image-editing software, such as PhotoshopSources (both JPEGs):(n.d.). Accu-Time product photograph. Retrieved from How to shoot product photography – part 1. Retrieved from
  •, especially rasters, add to file size. To double the size of a raster, you quadruple the number of pixels used.
  • you hire an illustrator or photographer, iron out in writing who owns the work before you use the work. Be wary of limitations put on the work done for hire.Other situations might include using a comic for a company newsletter – this is quite easily done if you contact the owner for permissions. Consider this with regards to clipart, fonts, and any work you outsource. In the case of this image, there are limits on the free use of a Calvin and Hobbes cartoon for academic use; business use, even for a presentation, costs money.
  • CMYK is reflected color, or ink. K is black and is needed because mixing cyan, magenta, and yellow inks actually produces a muddy brown.RGB (red, green, blue) is projected color, or light. Anything with a bulb produces RGB, plus digital cameras, scanners, and the Web.Spot color, such as Pantone® brand, is a specific ink that is required to be the same time after time and not subject to the varieties that happen when cyan, magenta, and yellow inks are produced. Converting between these color models is imprecise, so proof content before you go ahead with a print run.Andrei. (February 1, 2011). Color spaces. Retrieved from, J. (August 2, 2009). Can Kennel Club change its spots over new Dalmatian? Retrieved from
  • Don’t forget what you know about design even if colors (online) are free.
  • You can shift the cost of printing to your customer by providing them a PDF, but you cannot control how the customer prints your document. Maybe they won’t use a color printer, so make sure your use of color, if any, works on a monochrome laser printer. One-color printing from commercial press will be lots cheaper than four-color (CMYK) printing, so evaluate your budget for using color in light of audience expectations and your budget. Online, on the Web, color is free, but don’t over-use it.
  • RGB is the color model used by projected color, light. All red plus all green plus all blue creates white light, a reverse rainbow. HTML uses hexadecimal numbers to represent color, where 00 is 0% of a color and FF is 100% of a color. So, #0000FF is blue. RGB doesn’t map to CMYK 1:1, so in addition to spot and CMYK colors, define an RGB value for the color of your logo.
  • CMYK is the color created by light reflecting off ink or paint. If you mix all the inks, you get black. If there are no inks, you have white. To use CMYK, you need a graphics format that supports it, such as TIFF, EPS, PSD, AI, and even JPEG, but not PNG, BMP, EMF, and WMF, which only support RGB.
  • Spot color is proprietary colors and ink with the aim of faithful color reproduction everywhere. CMYK inks vary in color based on location, batch, and humidity. If your logo requires a specific color that you want to reproduce faithfully, use a color book and choose a spot color (such as Pantone)
  • Gratuitous photo of my youngest.
  • Fonts – Intelligent, relationship between adjacent letters is designed, infinitely scalable, small file sizeVectors– Line Art, shapes, rectangles, ellipses, splines, lines, infinitely scalable, small file sizeRasters– Photos, screen captures, pixel-by-pixel, loses quality if scaled, large file size, ubiquitous – digital camera, scan, Web…(n.d.). Light bulb with graphics eps. Retrieved from
  • Proportional fonts adjust spacing based on adjacent letters. Vectors don’t know about adjacent vectors. So, if possible, use fonts for letters, numbers, and words because of the spacing built in to proportional fonts. Also, consider using fonts, instead of vectors, for other images, such as bullets. Derry, G. (February 24, 2012). Using video games in the classroom. Retrieved from
  • Vectors are defined by formulae: lines, splines, arcs, curves, etc., plus perhaps a thickness, border, and color. To make a big vector, just multiply the formula by a factor.Rasters define each and every pixel, it’s size, color, and the spacing between pixels. To make a big image, more pixels are needed and the file size grows rapidly, the quality degrades, or both.
  • Vectors are defined by formulae: lines, splines, arcs, curves, etc., plus perhaps a thickness, border, and color. To make a big vector, just multiply the formula by a factor.Rasters define each and every pixel, it’s size, color, and the spacing between pixels. To make a big image, more pixels are needed and the file size grows rapidly, the quality degrades, or both. You can add pixels, add space between the pixels, or increase the size of the pixels. All decrease the image quality. To double the size of a raster image, you quadruple the number of pixels, and file size goes up accordingly. New pixels are a best guess by your graphics software based on original pixels.
  • Resolution, in terms of a computer desktop, can mean total number of pixels.Resolution from a graphics standpoint means how closely the pixels are together. So, 100 pixels at 300 pixels per inch are 1/3 of an inch long, whereas 100 pixels at 100 pixels per inch are 1 inch long. There is more space between the pixels (or the pixels are larger) at 100 ppi.Reiner, R. (Director). (September 27, 1987). The Princess Bride [Motion picture]. USA: Twentieth Century Fox Film Corporation.
  • Vectors are not well supported on the Web, although SWF can be used and SVG is supported natively by HTML 5.
  • EPS, AI, and CDR support transparency, CMYK, RGB, and you can embed fonts and rasters. EMF and WMF only support RGB and they reference fonts, so font shift might happen if you move one to a PC that doesn’t have the referenced fonts.
  • JPEGs are compressed by an algorithm that actually removes data. This keeps the file size low and works well for photographs. But, this lossy compression can be noticeable in images with sharp lines, such as screen captures, which include text and dialog boxes.Use PNGs for screen captures because the file compression preserves data. Plus, PNGs support transparency and 24-bit color.GIFs only support 256 colors, so you can see some banding if the color palette does not match well with the screen capture. GIFs do support transparency, though.
  • are compressed by an algorithm that actually removes data. This keeps the file size low and works well for photographs. But, this lossy compression can be noticeable in images with sharp lines, such as screen captures, which include text and dialog boxes.Use PNGs for screen captures because the file compression preserves data. Plus, PNGs support transparency and 24-bit color.GIFs only support 256 colors, so you can see some banding if the color palette does not match well with the screen capture. GIFs do support transparency, though.
  • and EPS are supported by the majority of print vendors. In your planning, see if they support AI and PSD and, if so, what versions. EPS can embed fonts, rasters, and vectors. Because your print vendor might not have the fonts you use, or the precise version of the fonts you use, make sure you convert fonts to outlines or curves before sending files for press.
  •, 80, 100 MB files are not unusual for marketing. File sizes can grow larger than 4,000 pixels – consider banners you see at tradeshows. How do you propose to move those files between your office and the office of whoever is doing the design? Methods include FTP, email (limited attachment sizes), Dropbox®, FedEx a DVD, etc.
  • placing a large image into HTML and using HTML to reduce the image size – this slows down your Website for visitors who have to download large files. Instead, resize the image that the HTML uses and post an image at the correct size.
  • SWF vector file.
  • EMF vector file.
  • JPEG raster file.
  • Vector Graphics (SVG) is XML. You can read the code and spot the equations and colors, for example.
  • Layers are a valuable tool for creating and editing graphics. In the Illustrator layer box shown here, layers towards the top of the box display on top of layers at the bottom, so there is a Z-height associated with layers. So, in the illustration, the Fonts layer displays on top of the Blue, Green, and Red vector layers. Use layers to let you focus only on an area you want to edit, or hide graphics you don’t want to display in the output.
  • With red vectors and red dots turned off, you don’t see them.
  • With red vectors and red dots turned on, you can see the content.
  • You might combine a logo, vector art, and text for output on a webpage. Editing the resulting JPEG later, to accommodate a logo or product change, is very difficult. Instead, keep the source AI/EPS file and edit the layers in that. Online, graphics of text is not searchable. For SEO and searching, try to use fonts for text on the Web.
  • What you see is not always what you getConsider these two images from two different word processing packages – the one on the left is more correctHow things look in Word, FrameMaker, etc., doesn’t matter, unless that is your deliverableTest your output
  • are often resized, here seen on a business card, less than one-inch in size, and then on a tradeshow banner, more than a foot across. Vectors are infinitely scalable without loss of quality. You can create these with one vector, and resize the image without losing quality or gaining significant file size. If you create two rasters, one for the business card and another sized for the banner, the banner will be millions of pixels and very large.
  • Soccer Subaru logo comprises a vector, the soccer ball, a raster, the photo of the car, and fonts, the text. Plus, the text uses Pantone 2995 for a spot color.
  • A screen capture of the soccer ball showing nodes and splines, to show the soccer ball is really a vector.
  • For print, use the Soccer Subaru logo as-is – convert the fonts to outlines before you send it to your print service. For the Web, export three or four fixed-size rasters. Define an RGB equivalent that you want to use for Pantone 2995.
  • Tools include Techsmith® Jing, for free, and Techsmith® SnagIt, which has a lot of automation built in. I recommend PNG for screen captures, as file sizes are small and quality is good. PPI is pixels per inch, which is effectively the same as DPI, dots per inch, used by printers.
  • file sizes small to improve the experience your audience has. Use fonts for text, not pictures of fonts. Rasters add file size which increases load time for Web pages.
  • sizes will be large, 20, 50, 80 MB not uncommon.If you use fonts, convert them to outlines or curves before sending the file for press – your print vendor might not have your fonts or your particular version of your fonts, so converting to outlines lets your vendor print your work without error. Also, make sure all referenced files are embedded in the EPS, AI, or PDF, or send the referenced files along. Without referenced files, what you print will be incomplete. Finally, make sure you review a proof of the print job before approving it, so you can spot color shifts, missing referenced content, and other gotchas.
  • The best way to preview your work is to review the deliverable. Test your work by previewing at your audience would: online, in print, or both. This is especially important for color output in print, where inks and color shifts, such as RGB to CMYK conversions, might yield colors you did not expect.Sources:Rich. (March 23, 2010). Epson R300 inkjet printer. Retrieved from
  • Christmas card snafu costs company $2000 – understand digital camera is RGB and printing inks are CMYKBanner that should have been deep red looked pink and cost $4000 – work with your artist and print vendor to proof outputIntegrating text and logos into Website JPEGs made logo change and Website redesign a lot harder – keep your original vector graphics for editing
  • Screen capture is a resized JPEG.
  • Window was sized before the screen capture was taken, and the image is a PNG.
  • Always test your output. What the audience sees matters most. Create graphics that meet their expectations of professional quality, as well as their needs.(n.d.). Crown. Retrieved from
  • you for attending my session. If you like, for further information, please send comments and questions to @seanb_us.
  • NOTE: Sources are provided for those who are curious. HOWEVER, while all these links seemed benign to me at the time I used them, this is the Web. So, please, click links only at your own risk.
  • Using Graphics in Real-World Tech Comm

    1. 1. Using Graphics inReal-World Tech Comm Sean Brierley @seanb_us
    2. 2. We are here to learn the basics ofgraphics: types, formats, colors.
    3. 3. Use of graphics requires planning.• Plan – Audience – Purpose – Where will it be used – Time – Money – Expertise• Create the graphic• Revise as needed – Plan editing
    4. 4. Graphics have a purpose.Consider• Why we use them• Benefits they bring• Drawbacks they have• Our obligations with graphics
    5. 5. We use graphics to communicate.• Catch the readers 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
    6. 6. Banners catch a reader’s attentionat a tradeshow.
    7. 7. Graphics can show spatial information.
    8. 8. Graphics can show relationships.
    9. 9. Graphics can help non-nativespeakers and visual learners.
    10. 10. 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
    11. 11. Graphics are time consuming andexpensive to produce.• Where is the bar set?• Anything less than National Geographic quality is amateurish• Video is judged by what people see on TV
    12. 12. Photography requires more thana cell phone with megapixels. • Tripod • Backdrop Lighting• Cost• Skill• Investment
    13. 13. 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
    14. 14. 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
    15. 15. Graphics have color. RGB CMYK Spot color
    16. 16. Consider usual elements ofdesign 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.
    17. 17. The color you use depends on your output.• Customer prints it• One color• Online• Printed commercially
    18. 18. 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
    19. 19. CMYK is for commercial printing.• Reflected• 256, 256, 256, 256• Presence of all = black• Absence of all = white• Print• Ink
    20. 20. Spot is for printed logos.• Color book• Colors appear different on different surfaces• Monitor calibration• Color system calibration 20/64
    21. 21. Graphics comprise differentforms. Vectors Fonts Rasters
    22. 22. Fonts trump vectors; vectorstrump rasters. Fonts are better than vectors, and
    23. 23. Fonts use outlines and intelligent spacing. Proportional fonts areUse fonts for letters and numbers designed: use one space after a period. Avoid French spacing.Use symbol or graphics fontsfor bullets
    24. 24. Vectors are relatively small filesand infinitely scalable. Make the vector bigger, multiply the formula by 2
    25. 25. Vectors and rasters have differentattributes.Vectors Rasters• Line art • Photos and screen captures• Lines, splines, arcs, ellipses, r • Pixel-by-pixel ectangles • Not scalable• Small • Difficult to edit• Scalable • Large file sizes• Easy to edit • Have resolution• Retain font info (embed/reference)• Don’t have resolution
    26. 26. Raster files are often larger than vector files and not easy to scale.To make araster twice Decrease theas big… resolution Quadruple the number of pixels
    27. 27. Resolution – “you keep using thatword, I do not think it meanswhat you think it means.”High resolution Low resolution
    28. 28. Graphics form depends on itscreation and your deliverable.Vector creation Raster creation• Illustration software • Digital camera• Computer-aided design • Scanner software • Photograph and image-• Flowcharting software editing softwareVector output strengths Raster output strengths• Offset press • Websites• Personal and workgroup printers• PDFs
    29. 29. Graphics use different fileformats.Vectors* Rasters• EPS • BMP – RGB• WMF, EMF • TIFF – RGB/CMYK + transparency• AI • PNG – RGB + transparency• CDR • JPEG – RGB/CMYK • GIF – 256 colors + transparency • PSD – RGB/CMYK + transparency* Vector formats can include font and raster data but raster formats cannot
    30. 30. Use PNGs for screen captures.PNG (16 KB) JPEG (16 KB) 30/64
    31. 31. Use JPEGs for photos. • No sharp lines • No precise curves • Colors and shapes blend • Lossy compression is unnoticed
    32. 32. Use EPS or TIFF for printedmarketing material.• PSD and AI files – Preserve layers – Easy to edit – Adobe®-specific• Provide deliverable as TIFF or EPS – Magazine advertisements – Tradeshow banners – Business cards
    33. 33. 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
    34. 34. 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
    35. 35. Quiz: Raster or Vector?
    36. 36. Quiz: Raster or Vector (Cont’d)?
    37. 37. Quiz: Raster or Vector (Cont’d)?
    38. 38. Quiz: Raster or Vector (Cont’d)?• It is a vector• SVG• (XML)
    39. 39. 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
    40. 40. Use layers to organize what youwork on and what you output.• Lock layers to increase editing control• Hide layers to control output 40/64
    41. 41. Hide layers to hide red.• Red vector and red dots layers hidden
    42. 42. Show layers to show red.• Red vector and red dots layers visible
    43. 43. Keep source files to makeupdates easier.• AI/EPS can include Vector fonts, vectors, and rasters• Raster is only pixels Fonts Raster
    44. 44. Your authoring tool doesn’t really matter.Publishing and graphicssoftware sometimes lie to you WYSINAWYG
    45. 45. Logos are used everywhere.Logos and stylized textare often resized
    46. 46. 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
    47. 47. Handling a logo for print and Webcan be complex, but not tricky.• Vector = lines, splines, arcs• Vector != Web• Spot color = print Vector• Spot color != Web Raster• CMYK color = print• CMYK color != Web Font plus PMS 2995
    48. 48. Really, the soccer ball is a vector image.In Illustrator,you can seesplines, nodes, andother clues this isvector, not raster(pixel) based
    49. 49. For multiple outputs, createmultiple 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
    50. 50. Consider this a good approach toscreen 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
    51. 51. Consider this a good approach forWeb.• 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
    52. 52. Consider this a good approach forPress.• 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
    53. 53. Check your deliverable.HTML output PDF – print or online Printer – personal, workgroup, or press
    54. 54. It happened to me …• Christmas cards: $2000• Banner: $4000• Logo change and Website redesign: $$$$
    55. 55. What do you want, amateur?
    56. 56. Or Pro?
    57. 57. And in conclusion … audience isking.
    58. 58. So long and thanks for all thefish – Questions ...
    59. 59. Tools Used• Adobe® Illustrator ®• Adobe ® Photoshop ®• Microsoft ® PowerPoint®• Microsoft® Word®• Techsmith® Jing®
    60. 60. Sources(n.d.). Accenture logo. Retrieved from en/pages/index.aspx(n.d.). Accu-Time product photograph. Retrieved from http://www.accu- Crown. Retrieved from http://photo- Classroom usage statement. Retrieved from Digital offset printing - The future of offset printing. Retrieved from Firefox logo. Retrieved from Full color family stickers. Retrieved from
    61. 61. Sources (Cont’d)(n.d.). Hourglass. Retrieved from How to shoot product photography – part 1. Retrieved from product-photography-part-1/(n.d.). In the booth: Hotline. Retrieved from 3(n.d.). Lego® Agents. Retrieved from Microsoft Internet Explorer logo. Retrieved from Opera Logo. Retrieved from
    62. 62. Sources (Cont’d)(n.d.). Prudential business card. Retrieved from University of New Hampshire parking map. Retrieved from, February 21). 3D Golden money symbol graphics. Retrieved from, March 23). Rabbinic miracles prove to us even in the forms of fruits and vegetables. Retrieved from,N-2563.html(2012, April 1). Department of Homeland Security. Retrieved from (2010, October 4). Southern Connecticut State University Athletics. Retrieved from (2011, February 1). Color spaces. Retrieved from
    63. 63. Sources (Cont’d)Constable. J. (1802). Dedham vale. Retrieved from mVale.jpgCopping, J. (2009, August 2). Can Kennel Club change its spots over new Dalmatian? Retrieved from change-its-spots-over-new-dalmatian.htmlDerry, G. (2012, February 24). Using video games in the classroom. Retrieved from http://wiki.ssis- htmlEl Greco. (1596-1600). Toledo. Retrieved from _View_of_Toledo_-_Google_Art_Project.jpgGhostscript Authors. (2002, January 10). Ghostscript Tiger.svg. Retrieved from
    64. 64. Sources (Cont’d)Kaixer. (2011, May 11). Creative business card – Color explosion. Retrieved from, C. (Director). (1979, December 14). The Jerk [Motion picture]. USA: Universal Pictures. Retrieved from, 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 (2011, November 7). Picture of the day: The Magic Roundabout in Swindon, England. Retrieved from day-the-magic-roundabout-in-swindon-england/Skraps. (2011, December 14). So long and thanks for all the fish. Retrieved from fish.html