Recommended
Recommended
More Related Content
What's hot
What's hot (17)
Viewers also liked
Viewers also liked (9)
Similar to Using Graphics in Real-World Tech Comm
Similar to Using Graphics in Real-World Tech Comm (20)
Recently uploaded
Recently uploaded (20)
Using Graphics in Real-World Tech Comm
- 1. Using Graphics in Real-World Tech Comm Sean Brierley @seanb_us
- 2. We are here to learn the basics of graphics: types, formats, colors.
- 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. Graphics have a purpose. Consider • Why we use them • Benefits they bring • Drawbacks they have • Our obligations with graphics
- 5. 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
- 6. Banners catch a reader’s attention at a tradeshow.
- 7. Graphics can show spatial information.
- 8. Graphics can show relationships.
- 9. Graphics can help non-native speakers and visual learners.
- 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. 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
- 12. Photography requires more than a cell phone with megapixels. • Tripod • Backdrop Lighting • Cost • Skill • Investment
- 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. 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. Graphics have color. RGB CMYK Spot color
- 16. 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.
- 17. The color you use depends on your output. • Customer prints it • One color • Online • Printed commercially
- 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. CMYK is for commercial printing. • Reflected • 256, 256, 256, 256 • Presence of all = black • Absence of all = white • Print • Ink
- 20. Spot is for printed logos. • Color book • Colors appear different on different surfaces • Monitor calibration • Color system calibration 20/64
- 21. Graphics comprise different forms. Vectors Fonts Rasters
- 22. Fonts trump vectors; vectors trump rasters. Fonts are better than vectors, and
- 23. Fonts use outlines and intelligent spacing. Proportional fonts are Use fonts for letters and numbers designed: use one space after a period. Avoid French spacing. Use symbol or graphics fonts for bullets
- 24. Vectors are relatively small files and infinitely scalable. Make the vector bigger, multiply the formula by 2
- 25. Vectors and rasters have different attributes. 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. Raster files are often larger than vector files and not easy to scale. To make a raster twice Decrease the as big… resolution Quadruple the number of pixels
- 27. Resolution – “you keep using that word, I do not think it means what you think it means.” High resolution Low resolution
- 28. Graphics form depends on its creation and your deliverable. Vector creation Raster creation • Illustration software • Digital camera • Computer-aided design • Scanner software • Photograph and image- • Flowcharting software editing software Vector output strengths Raster output strengths • Offset press • Websites • Personal and workgroup printers • PDFs
- 29. Graphics use different file formats. 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. Use PNGs for screen captures. PNG (16 KB) JPEG (16 KB) 30/64
- 31. Use JPEGs for photos. • No sharp lines • No precise curves • Colors and shapes blend • Lossy compression is unnoticed
- 32. 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
- 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. 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. Quiz: Raster or Vector?
- 36. Quiz: Raster or Vector (Cont’d)?
- 37. Quiz: Raster or Vector (Cont’d)?
- 38. Quiz: Raster or Vector (Cont’d)? • It is a vector • SVG • (XML)
- 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. 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
- 41. Hide layers to hide red. • Red vector and red dots layers hidden
- 42. Show layers to show red. • Red vector and red dots layers visible
- 43. Keep source files to make updates easier. • AI/EPS can include Vector fonts, vectors, and rasters • Raster is only pixels Fonts Raster
- 44. Your authoring tool doesn’t really matter. Publishing and graphics software sometimes lie to you WYSINAWYG
- 45. Logos are used everywhere. Logos and stylized text are often resized
- 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. Handling a logo for print and Web can 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. 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
- 49. 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
- 50. 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
- 51. 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
- 52. 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
- 53. Check your deliverable. HTML output PDF – print or online Printer – personal, workgroup, or press
- 54. It happened to me … • Christmas cards: $2000 • Banner: $4000 • Logo change and Website redesign: $$$$
- 55. What do you want, amateur?
- 56. Or Pro?
- 57. And in conclusion … audience is king.
- 58. So long and thanks for all the fish – Questions ...
- 59. Tools Used • Adobe® Illustrator ® • Adobe ® Photoshop ® • Microsoft ® PowerPoint® • Microsoft® Word® • Techsmith® Jing®
- 60. 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
- 61. 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
- 62. 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
- 63. Sources (Cont’d) Constable. J. (1802). Dedham vale. Retrieved from http://upload.wikimedia.org/wikipedia/commons/b/b3/Constable_Deadha mVale.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
- 64. 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
Editor's Notes
- http://www.southernowls.com/About 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.
- http://twistedsifter.com/2011/11/picture-of-the-day-the-magic-roundabout-in-swindon-england/This 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.
- http://phdblog.net/page/3/Have 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.
- http://www.nimlok.com/chicago/Custom-Trade-Show-Exhibits/20101/Who 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.
- http://www.unh.edu/transportation/visitor/map.pdfDoes the image better represent the idea of spatial information than text does?
- http://www.dhs.gov/xabout/structure/editorial_0644.shtmhttp://www.familystickers.com/full-color-family-stickers.htmlUse graphics to show relationships: organization of Homeland Security Dept. or organization of my family.
- http://cache.lego.com/bigdownloads/buildinginstructions/4536500.pdfLego 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.
- http://damyantiwrites.wordpress.com/2011/04/09/a-z-h-for-hourglass/http://dragonartz.wordpress.com/category/main/symbols-main/Graphics 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 http://www.accu-time.com(n.d.). How to shoot product photography – part 1. Retrieved from http://www.freedigitalphotographytutorials.com/advanced/how-to-shoot-product-photography-part-1/
- http://marthacalderaro.wordpress.com/2009/10/21/in-the-booth-3/hot-line-3/Graphics, especially rasters, add to file size. To double the size of a raster, you quadruple the number of pixels used.
- http://www.amureprints.com/about_amureprints.htmIf 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 http://photographystepbystep.com/digital-imaging/color-spaces/Copping, J. (August 2, 2009). 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
- 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 http://sanders.promorevolution.com/public/index.cfm?fuseaction=articles.view&id=1420&publicationtype=Content
- 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 http://wiki.ssis-suzhou.net/users/geoffreyderry/weblog/16efe/Changing_the_way_we_teach.html
- 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.
- http://upload.wikimedia.org/wikipedia/commons/b/b3/Constable_DeadhamVale.jpgJPEGs 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.
- http://cardrabbit.com/category/creative-business-cards/page/3/TIFF 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.
- http://upload.wikimedia.org/wikipedia/commons/c/ca/El_Greco_-_View_of_Toledo_-_Google_Art_Project.jpg40, 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.
- http://upload.wikimedia.org/wikipedia/commons/c/ca/El_Greco_-_View_of_Toledo_-_Google_Art_Project.jpgAvoid 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.
- http://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svgAn SWF vector file.
- http://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svgAn EMF vector file.
- http://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svgA JPEG raster file.
- http://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svgScalable Vector Graphics (SVG) is XML. You can read the code and spot the equations and colors, for example.
- http://www.dewan.co.il/news-16,N-2563.html
- 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
- http://www.betterdealadvertising.com/prudential.htmlhttp://www.nimlok.com/chicago/Custom-Trade-Show-Exhibits/20101/Logos 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.
- http://www.webdesignhot.com/free-vector-graphics/free-vector-soccer-ball/The 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.
- http://www.mozilla.org/en-US/firefox/new/http://downloadsquad.switched.com/2011/03/25/chrome-changes-its-logo-again-pictures/http://en.wikipedia.org/wiki/File:Internet_Explorer_7_Logo.pnghttp://en.wikipedia.org/wiki/File:Opera_icon_comparison.pngKeep 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.
- http://www.erawanet.com/digital.htmlFile 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 http://www.inkandmedialtd.co.uk/blog/epson-r300-inkjet-printer-review/
- 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 http://photo-dictionary.com/phrase/420/crown.html#b
- http://sham-wows.blogspot.com/2011/12/so-long-and-thanks-for-all-fish.htmlThank 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.