October/November 2009

This Issue Dear David:

F | I | L | E

Graphic Design for Print and Web: A Study in ContrastsFirst we thought the PC was a calculator. Then we found out how to turn numbers into letters with ASCII — and we thought it was a typewriter. Then we discovered graphics, and we thought it was a television. With the World Wide Web, we’ve realized it’s a brochure.

— Douglas Noel Adams, author of The Hitchhiker’s Guide to the Galaxy

As digital technology evolved from graphic design to page layout to web design, graphic artists adapted software tools and design principles to work in the new discipline. Initially, many designers with roots in graphic design for print migrated to the less controllable and more fluid design environment of the World Wide Web while retaining skills in design for print.

Today the situation is different. A graphic designer may train only for web design and have no experience with print. And even though design for print and design for web both must consider how to display text and graphics, how to use color and typography, and how to guide the reader around the page, the two design environments are very different. To be successful, today’s graphic designer must either understand the requirements for design in each, or limit their activities to web or print.

In this issue of the Idea File we’ll discuss three primary differences between the two environments and explain why what works in one may not work in the other.

Color spaceA very important difference between design for print and design for the web is the color space of each. Color space refers to a color model and color mapping function that uses mathematics to describe the way colors are represented.

The color model for the web is RGB: the red, green and blue phosphors of a computer screen. Offset print uses a CMYK color model, where the colors are created using the primary colors of pigment: cyan (C), magenta (M), yellow (Y). Black, represented by the letter K, is added in printing to compensate for the fact that a combination of CMY produces an unattractive, muddy black.

The two color models – CMYK and RGB – can each be represented mathematically in three dimensions using an X, Y and Z axis. If the two models are superimposed, they do not match exactly. This means that some colors produced with RGB cannot be produced with CMYK. For example, certain shades of blue and green that appear luminous and vibrant on a computer screen either cannot be matched in CMYK or appear much more subdued.

Graphic Design for Print & Web 1-2

Tips & Tricks 3

Q & A 3

Idea Corner 4

A Vocabulary of the Graphic Arts 4

Case Study: Cross-Channel Marketing 5-7

Online Ordering Interface 8

Another difference in the two color models are the way the colors are produced. CMYK is a subtractive color model. The four ink colors are applied to the substrate (paper, label, canvas, etc.). Because the ink is opaque, light is reflected through it from the substrate, and each ink color subtracts color from white to create an image. RGB uses additive color mixing – the red, green and blue light phosphors combine to create the color that appears on the screen.

A final difference between printed color and color viewed on a computer screen is the range of contrast and color intensity. A computer screen displays transilluminated images, meaning the colored light passes through the images. Printed pages depend on reflected light which limits the amount of contrast and color intensity.

ResolutionResolution is the measure of how sharply an image is rendered. Resolution is expressed as the total number of pixels (picture elements) or dots per inch comprising the image.

Most computer screens are limited to a resolution of 72 to 92 pixels per inch (ppi), while a printed image is typically 150 dots per inch (dpi). Since resolution is measured over area – 72 ppi x 72 ppi = 5,184 ppi while 150 dpi x 150 dpi = 22,500 dpi – a resolution of 150 dpi is four times greater, not two times greater, than 72 dpi. Forming an image with 22,500 dots means that the dots are much smaller and therefore much less visible to the naked eye. It also means that as the image is enlarged, there will still be enough dots to create the image without the individual dots becoming visible.

The difference in resolution means that photographs and graphic images optimized for web display can appear pixelated (i.e., individual pixels will be apparent to the naked eye) when the image is rendered in print. Conversely, the file size of photographs and graphic images optimized for print might be so large that they might not load fast enough when used on a web page.

2 Providing you an edge in print communications. www.visionsfirst.com

The issue of resolution has implications for text as well as photographs and images. Because text displayed at a resolution of 72 ppi on a computer screen will never be as clear and detailed as text in print, there are limits to how fine the shape of letters of the alphabet can be and how narrow a line can be. This has led to the development of some fonts specifically for use on the web. Verdana, Georgia and Trebuchet MS have exaggerated x-heights and heavy letterforms to improve legibility on a web page. However, these characteristics compromise the font in print by sacrificing subtlety and grace.

Unlike print, the font used on a web page will only render if it is also installed on the viewing computer. To avoid the resultant font substitution, web designers often limit their use of fonts to a few that come with most computers, such as Helvetica, Arial or Times Roman. This limitation does not exist with print.

Image file formatsDespite the ubiquity of JPG (Joint Photographic Experts Group) as a file format for images, EPS (Encapsulated PostScript) remains the standard for printing. EPS is a vector file format, meaning it uses geometrical figures such as points, lines, curves and shapes based on mathematical equations to describe the image. This means that an EPS image can be enlarged without pixelation and reduced without losing detail. This characteristic is very important for a graphic image such as a logo that needs to be small enough to fit on a business card, and enlarged to perhaps a billboard or vehicle wrap.

In contrast, JPG is a raster file format meaning the image is represented as an array of pixels. The size and number of pixels determines resolution. The smaller and closer the pixels are to each other, the better the quality of the image and the larger the file size. As a raster image is enlarged, the pixels become larger and spread out, eventually enabling the eye to see individual pixels. Photographs, which are typically in JPG format, can be enlarged so much that they become grainy and indistinct.

GIF (Graphics Interchange Format) is a bit-mapped file format that supports up to 256 colors (8-bit) and is useful for almost all web graphics except photographs. (Photographs require the broader range of colors available in the JPG file format.)

PNG (Portable Network Graphic) is a bit-mapped file format developed as a nonproprietary alternative to GIF, specifically for the web. As yet, PNG is not widely supported, and not all major web browsers support all PNG graphics features.

JPG, GIF and PNG files are appropriate for web pages but are not meant for print. An exception can be made for photographs in JPG format that are at a resolution of 300 dpi in the size they will appear in print. EPS files can be edited using Adobe Illustrator, Macromedia Freehand, or Corel Draw. JPG and GIF files can be edited with Adobe PhotoShop.

Other differencesHere are a few other differences between design for the web and design for print:

The unit of measure for web design is a • pixel; for print, it is an inch.

Web design uses text and images reversed • out of a background color to enhance readability. In print, black text on a white substrate provides good contrast and legibility; on the web, readability is best when text and images are reversed out of solid background color. This is because on a computer screen, the color white is produced by mixing red, green and blue phosphors at full intensity. This means the screen displays the maximum amount of light and luminosity which can interfere with reading.

Web designers use Photoshop as their • primary design tool. Print designers use page layout software like InDesign or Quark XPress. When print designers use Photoshop, they use it differently than web designers.

Design for the web may not work in print – and vice versaAll these differences add up to one thing: a design optimized for the web may need to be partially or completely re-worked to be successful in print. Before you ask your web designer to prepare files for print, determine whether the designer is familiar enough with print to accomplish the task. We will be happy to meet with you and your web designer to work out the best way to proceed. Call for an appointment. Hugh at 763-425-4251.

You are certainly right about photographs looking great on a web page. The phosphors on the computer screen lend a brightness to the color that is visually appealing.

But color created by light shining through red, green and blue phosphors cannot be exactly reproduced with the cyan, magenta and yellow colors of printing ink. Even more importantly, the digital photo files have been optimized for fast loading on the web page by reducing the file size through file compression. And for photographs in JPG format, a lossy compression technique was used.

This means that the original high resolution photograph had pixels permanently removed to make the file smaller. If enough are removed, the remaining pixels will be visible to the naked eye instead of smoothly blending in to one another. In specific circumstances (such as taking a very large photograph and using it in a much smaller size) the pixelation may be less apparent though still visible.

Q

File Size ReductionIf while working on a web page or a document for print you need to compress a digital photo or image file to make it smaller, it is a good practice to save the photographs or graphics in their original uncompressed file format. Likewise, it is a good practice to create new compressed files every time a photograph or image is changed significantly (such as resizing or changing the file format).

This recommendation is the result of the compression technique used for JPG files (the most common file format for photographs and images). There are two data compression techniques: lossy and lossless. The lossless technique makes the file smaller by squeezing out inefficiencies in data storage so does not permanently delete any information from the file when the file is compressed. Accordingly, all original information can be completely restored when a lossless file is decompressed. Lossless compression works best when compressing images with large fields of homogeneous color.

In contrast, the lossy compression technique permanently eliminates what it determines to be redundant or unnecessary information in the file during compression. While this can significantly reduce file size, it does mean that upon decompression, the file will contain much less information than prior to compression. With the lossy technique, every time a file is decompressed then recompressed, greater and greater amounts of information is lost and eventually there are too few pixels to properly render the image.

I am putting together a brochure and want to include pictures of products from several manufacturers. Why can’t I copy pictures from their web site to use in my brochure – the photos look great on my computer screen.

a

Visions 763-425-4251 3

4 Providing you an edge in print communications. www.visionsfirst.com

Additive color: a color model in which red, green and blue light is combined to produce a broad spectrum of colors.

Color correction: altering the color of a photographic or other image by electronic retouching.

Color space: a color model and color mapping function that uses mathematics to describe the way colors are represented.

Cyan: one of four standard process ink colors; the color blue.

Dithering: a technique used to smooth an image. Dithering consists of filling the gap between two pixels with another pixel having an average value of the two.

Font: a complete set of characters in a particular size and style of type, including letters in upper and lower case, numbers, punctuation and special characters and diacritical marks.

GIF: an acronym for Graphics Interchange Format, a file format used in web design. GIF is supported by almost all web browsers but is limited to 8-bit color.

JPG or JPEG: an acronym for Joint Photographers Experts Group and a file format used for photographs and images that use blends, gradients and other tonal variations. JPG supports true 24-bit color.

Lossless: a data compression technique that does not permanently delete any information. When a lossless file is decompressed, all the original information is completely restored. GIF file format uses lossless compression.

Lossy: a data compression technique that permanently eliminates redundant or unnecessary information in order to reduce file size. When a lossy file is uncompressed, only a part of the original information remains. JPG file format uses lossy compression.

Subtractive color: a color model based on absorbing some wavelengths of light and absorbing others. Inks, paints, dyes and natural colorants are based on the subtractive color model.

Transillumination: causing light to pass through. The phosphors of a computer screen are transilluminated.

Typeface: the primary design of a family of fonts. It is incorrect to use the terms typeface and font interchangeably. A font is a specific size, style and weight of the typeface.

White space: the open space between design elements including letters, words, paragraphs of text, photographs and images. Sometimes called negative space.

One popular use of a web site is to make a version of a company’s printed documents available there, either printable from a PDF or as online text.The term for this transition from print to web is repurposing. Repurposing can require some planning as well as text editing and some redesign because web readers read in different ways and for different purposes than print readers.

If the printed piece is rich in photographs and graphics, or if it is text-heavy (such as an instruction manual), it may be better to offer it as a print download rather than repurpose the printed piece into online content. In this case, we can provide you with a PDF version of your printed piece. We can deliver the PDF as part of the job on the first printing, or we can retrieve the native application file from our archives and create a PDF of something previously printed. Contact Hugh Haman at 763-425-4251 for assistance.

Visions 763-425-4251 5

Visions’ Self Promotion Yields Huge Results With Personalized Cross-Channel Marketing!

Our Objective:Announce Printing Arts/Visions merger• 

Highlight expanded service offerings for clients• 

Showcase cross-channel marketing capabilities• 

Provide a quick and easy online response mechanism• 

Generate interest/leads for Visions’ services• 

The Specifics:Visions developed a cross-channel, multi-touch marketing campaign that included personalized direct mail, personalized URL’s (PURLs) and personalized email. The database consisted of current Visions clients and prospects.

A total of 1443 personalized postcards were mailed. The recipients were asked to visit their PURL to respond to an offer and could request more information about Visions’ services. Approximately two weeks after the direct mail piece was delivered, we sent a triggered email to those that had not yet responded. Visions captured real-time data from the PURL and email responses. We were then able to quickly follow-up with those that requested additional information.

Visions, Inc.

8801 Wyoming Ave. N

Minneapolis, MN 55445

(763) 425-4251

Native American Owned | MBE-NMSDC Certified

Member Federally Recognized Tribe | SDB Certified

davidhull.myvisionsfirst.com

Visit your

Personal URL to

request your free

color guide and a

chance to win an ipod nano.

Guide offer and ipod

sweepstakes ends 9/30/09

First Name,

Printing Arts appreciates your valued customer commitment in partnering with us to execute award winning print. In an effort to provide the highest quality products and services, Printing Arts recently joined forces with Visions Design Studio and Visions Print Communications.

The united entity is called VISIONS, making us one of the largest Native American owned printing and advertising services companies in the United States.

Integrated Marketing Solutions

davidhull.myvisionsfirst.com

Visit your Personal URL to enter to win an ipod and

request your color guide.Guide offer and ipod

sweepstakes ends 9/30/09

is now

To learn more about VISIONS and our expanded services go to:

Campaign Details

Direct MailThe first step was a direct mail piece. It was sent out to Visions’ clients and prospects on September 4, 2009.

Personalized URLEach postcard contained a personal URL for the individual recipient. When visiting their PURL online the visitor was able to update their contact information and select services they were interested in learning more about. After submitting their contact information the visitor was automatically entered into a drawing.

All information you provide is keep in strict confidence. Visions will never sell or distribute your information for any reason.

Thank you David, Your color guide will be mailed soon!Check out our new website!

Creative Portfolio • Advertising Services • Printing Services • Client Tools

www.visionsfirst.com

All information you provide is keep in strict confidence. Visions will never sell or distribute your information for any reason.

1:1 Marketing

Web-to-Print Interface

Variable Data/Image Printing

Design Die cutting

Mailing Services

Inventory Management/Fulfillment

Brand Development

Graphic Design

Personalized URL’s

Email Marketing

I am interested in learning more about Visions: (check all that apply)

First Name Last Name

Company

Address 1

Address 2

City

State Zip

Email

Phone

Welcome David,Thank you for visiting your personal website (PURL). You are now experiencing 1:1 Marketing and how using variable data can personalize your message to generate higher response rates in a cross media campaign.

Verify your information below, to receive your free color guide and be automatically entered to WIN an ipod nano.

Submit

Send me my free color guide and enter me in the drawing.

In an effort to provide high-quality advertising and printing services, three multi million dollar companies recently joined forces. The new entity is called VISIONS. We are now the largest Native American owned company in the United States with in-house full-service advertising and printing capabilities.

• Creative Services: brand development, design services, interactive marketing (websites, PURLs, DVDs), direct marketing, event marketing, public relations, and broadcast (TV, radio, print ads).

• Printing Services: conventional sheet-fed offset, digital variable data, large format, die-cutting, fulfillment, mailing and warehousing.

Congratulations to Lisa Sammon with Centerpoint Energy, winner of

the iPod Nano!

6 Providing you an edge in print communications. www.visionsfirst.com

Thank you for your interest in Visions, David. We greatly appreciate the opportunity to earn your business. We will personally contact you to follow-up with the services you are interested in learning more about. Your free color guide is on its way and you have been entered into the drawing for the ipod nano. Good luck.

Check out our new website!

www.visionsfirst.com

Unsubscribe

This email was sent to ~email~, by ~senderemail~Instant removal with Unsubscribe

Interest Count Percent

1 to 1 Marketing 45 21.74

Online Ordering Interface 41 19.80

Variable Printing 48 23.19

Design Die Cutting 40 19.32

Mailing Services 37 16.74

Fulfillment 20 9.05

PURLs 45 20.36

Email Marketing 55 24.89

Graphic Design 24 10.86

Brand Development 25 11.31

Email Delivery Summary

Email Sent 938

Invalid 0

Bounces 141

Hard Bounces 129

Soft Bounces 12

Unsubscribes 6

Opens 364

Visits 134

Responses 105

Open Rate 38.81%

Visit Rate 14.26%

Response Rate 11.19%

Triggered EmailAfter clicking the submit button the visitor received a thank you email for showing their interest in Visions.

Hi David,We recently sent a postcard announcing Printing Arts, Inc.name change to Visions, Inc. Did you receive it? If not, I invite you to your personal URLDavidHull.myvisionsfirst.com today to learn more.While on the site, you can request your complimentary copy

of our Mini Color Guide and register to win an iPod Nano.David don’t delay! Receive your FREE Color Guide and register for the iPod drawing, please visit your personal URL by Wednesday,

September 30, 2009.

Take me to my personal URL now!Kay BeamAccount Executive, Visions, Inc.PS: Your contact information and responses are kept strictly confidential. And just in

case, here is your PURL again DavidHull.myvisionsfirst.com

Unsubscribe

This email was sent to ~email~, by ~senderemail~Instant removal with Unsubscribe

Non-Response EmailOn September 21, 2009 a non-response email was sent out to all postcard recipients that had not visited their PURL. This email provided them with a link to visit their PURL.

David, Call Hugh Haman at 763-425-4251 to discuss how cross-marketing might benefit Dave’s Digital World!

Direct mail results prior to response email

List Count Visits Responses Site Conversion Conversion Rate

1443 106 100 94.34% 6.93%

54.33% of respondents requested more information on the following services

Visions 763-425-4251 7

Overall Campaign Summary Throughout the course of Visions’ Campaign, there was instant reporting of the PURL visitors and more detailed information. Our campaign began on September 4, 2009 and ended on September 30, 2009 with an overall response rate of 14.41% and a conversion rate of 85.50%. This is a huge success rate in comparison to traditional direct mail campaigns. According to the Direct Marketing Association (DMA) a typical response on lead generation for static direct mail is 3.2%. Caslon analysis of PODi data reports that a typical personalized direct mail yields a 5.7% response for lead generation.

Daily Browsing TrendsThis chart reveals the browsing trends of the PURL visitors. The majority of the direct mail recipients received their postcard between September 9th and 11th which is evident in the PURL activity. The highest peak in the PURL activity was after the non-response email was sent out increasing the response and conversion rate drastically.

Triggered Email Went Out

This Issue

Graphic Design for Print and Web 1-2

Tips & Tricks 3

Q & A 3

Idea Corner 4

A Vocabulary of the Graphic Arts 4

Case Study: Cross-Channel Marketing 5-7

Online Ordering Interface 8

F | I | L | EPRESORTED STANDARD U.S. POSTAGE PAIDMINNEAPOLIS, MNPERMIT NO. 2805 8801 Wyoming Avenue North

Brooklyn Park, MN 55445 www.visionsfirst.com

Address Service Requested

This newsletter is printed on 80# Futura Laser gloss text.

A centralized repository• 

Automated job submission• 

Customizable online catalogs• 

Variable data/image templates• 

User access configuration• 

Optional branded interface• 

Secure environment• 

Order tracking, cost and order history• 

Call Hugh Haman at 763-425-4251 for a personal demonstration.

Ordering Made Easy!

WELCOME TO

Member

Certificate Number 2003-01-10

Native American Owned

Visions is unique in the industry. We’rebridging the creative/technological divide,merging advancements from all areas ofcommunications to deliver integratedsolutions that transcend the ordinary.

Specializing in marking technology to help clients get closerto their customers!

Ask us about:• Variable data / image printing• Personalized URL’s• Inventory management• Mobile web solutions• Real-time reporting /analyics

Home

All

Go

Search

Your Cart is Empty.

Cart ( 0 Items)

User Name:

Password:

Login

Login

Install Driver:

Windows Mac

EFI PrintMessenger

Remember User Name

Forgot your password?