GREAT GRAPHICS Tricia Spayer 2015
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
GREAT GRAPHICS Tricia Spayer
2015
Agenda • Best practices • What makes an effective graphic • Best formats for each graphic destination • Sizing and resolution • Single-sourcing graphics for multiple devices • What makes an effective callout, and considerations for
localization • Enhancing illustrations and photos
Best Practices • Create a drawing and photo template in your graphics
programs • Max size for print, for web, for other devices • Create a graphics style guide
• Fonts, colors, line weights, angles, callout styles
• Resize before you add to documentation
4/1/2015 STC Spectrum Conference 2015 - Tricia Spayer 3
Presenter
Presentation Notes
Template – got this idea from Patrick Hoffman at STC Summit ~2006 – been using it ever since. Resize before adding to docs – don’t just take a screen shot, or copy something & paste into your docs, then try to crop, re-size. Manipulate your graphics, make them the exact size you want for your output in your graphics programs. Save those graphics into individual files (perhaps as .png), THEN import them into your authoring program. This way, if you need to re-use the graphic in another place, you will have consistency. If you need to modify that graphic later, you can open it, or re-save over the original. If the graphic is linked, it will show up as the new version where ever you have used it.
Template example
4/1/2015 STC Spectrum Conference 2015 - Tricia Spayer 4
Effective graphics • Add to the meaning of text • Text and graphics are not redundant • Readable and large enough to see • Understandable • Not overused • Clean and clear
4/1/2015 STC Spectrum Conference 2015 - Tricia Spayer 5
Presenter
Presentation Notes
If you’re describing many functions on a screen, and someone can see a picture of the screen, they can relate to the buttons or features you’re talking about Not redundant – don’t repeat the information you have in text in your graphics & vice versa. Say it once – either way. They should complement each other. Screen shot 1920 x 1200 on a mobile device? No way. Squished, you couldn’t read it. Consider using only a portion of the screen, a button. Don’t confuse reader with your graphics. Graphic should be self-explanatory. Don’t have to show screen shots for every single step in a procedure. Give the reader some credit. Clean and clear – get rid of backgrounds, clutter, wires, extraneous holes, hardware. Show only what is necessary.
Formats
• Vector vs. raster
4/1/2015 STC Spectrum Conference 2015 - Tricia Spayer 6
Presenter
Presentation Notes
In the graphics world, you will encounter many formats. You may inherit (or be sent) graphics of a particular format. When you copy off Web, it’s usually saved as one of maybe 3 formats. Depending on what you are trying to accomplish, what graphics you inherit and need to manipulate, you may need several graphics programs. Raster – you’re dealing with pixels – in photos, screen shots, web images. Manipulate in Photoshop, Corel PhotoPaint. Many people like Snag-it for screen shots. Vectors – mathematical drawings - line drawings – draw lines & circles in Word or Powerpoint – vectors. Re-size to any size & usually clear and readable. Manipulate in Illustrator, CorelDraw, CorelDesigner. Output to PNG (most of my documentation). Works well in print output as well as web output. Not every case, but it is my go-to output format. Handles photos (does not have lossy compression like jpg), handles line drawings (except for fine wiring diagrams for print), handles millions of colors (this is better than gif), can do transparency.
What is resolution? • From Wikipedia: “Image resolution is the detail
an image holds. The term applies to raster digital images, film images, and other types of images. Higher resolution means more image detail.”
4/1/2015 STC Spectrum Conference 2015 - Tricia Spayer 7
Presenter
Presentation Notes
Web output – 72 or 96 pixels per inch Print – if only printing on desktop printer, 150dpi is sufficient. If printing high resolution offset brochures, 300 pixels per inch.
Exporting to different resolutions
4/1/2015 STC Spectrum Conference 2015 - Tricia Spayer 8
Presenter
Presentation Notes
This graphic is physically the same size: 2.27” x 3.21” in both outputs. On left, I export to 150 dpi. On right, export to 96 dpi (native resolution of our software). Why? If I used the same 150dpi graphic in both locations, the picture shows up almost twice the size in HTML output. If I used only 96 dpi graphic, it would show up fuzzy when I print it. If it had more detail, or was a screen shot, I wouldn’t be able to read it.
Sizing and resolution • Where will the graphic be seen? • Consider the resolution, size BEFORE importing into your
documentation • Figure out maximum size you can have on a printed page • Max size for web or mobile – depends on user’s screen
size • Single-sourcing for multiple devices • Use relative pixel sizes for mobile
4/1/2015 STC Spectrum Conference 2015 - Tricia Spayer 9
Presenter
Presentation Notes
Do your manipulation in your graphics program before importing into your documentation (as much as you can). There are instances where you can let your authoring tool re-size for you upon output. Maximum size – templates – will show example in a couple minutes What if you have to single-source your graphics? Output to print, then output for web, for example. You MAY need multiple versions of graphic, depending on your tool. Maybe your authoring tool can re-size for different outputs – show on next slide OK re-sizing photos smaller (example thumbnails). Not great with screen captures – you can only re-size them so small before you cannot read them. Future-proofing your output. Relative pixel sizes – learned this from Neil Perlin. Use percentages instead of inches or pixels – show on next slide
Graphics – multiple outputs
4/1/2015 STC Spectrum Conference 2015 - Tricia Spayer 10
Presenter
Presentation Notes
If you have some means of controlling the output size through percentages, you are well-prepared for future outputs (for devices they haven’t even invented yet).
Effective callouts • Easily seen – use halos • For localization, use numbers or letters • Use uniform angles and placement • Use same font, size, line weight throughout
documentation • Shade area of interest
4/1/2015 STC Spectrum Conference 2015 - Tricia Spayer 11
Presenter
Presentation Notes
Would not recommend simply using a different color for a line. Many people are color blind. You may not get enough contrast. What if someone prints your doc on black & white printer? Sample on next slide
Callout examples
4/1/2015 STC Spectrum Conference 2015 - Tricia Spayer 12
Enhancing illustrations and photos • Which is better? Line drawings or photos? • Hardware documentation – get engineering drawings • Photos – grayscale vs. color • Contrast • Focus on subject (remove background clutter)
4/1/2015 STC Spectrum Conference 2015 - Tricia Spayer 13
Presenter
Presentation Notes
Line drawings – I prefer because you can communicate clearer. Sometimes photos are your only option – if you cannot acquire engineering drawings. Photos are better for marketing, or showing your product in a customer environment, or showing a person using the product. Whatever you use – be consistent throughout your documentation
Photo vs. illustration
4/1/2015 STC Spectrum Conference 2015 - Tricia Spayer 14
Conclusion • Know where your graphics are going • Manipulate before adding to documentation • Use graphics templates • Be clear, consistent • Have fun!
4/1/2015 STC Spectrum Conference 2015 - Tricia Spayer 15
Related Documents
