Sep 07
5
Designing Logos for Web and Print
A great lesson on the differences between preparing logos for web or print
If a client so much as utters the words “design a logo,” one of your first questions should be, “Do you plan on having this printed on stationery?” Chances are they’ll say yes. Creating a logo for both Web and print can be a challenging task. But failing to ask this question up front could mean producing the logo all over again. You should also tell the client about the extra costs involved for digital production. Otherwise, you may end up designing a logo that’s so costly to print your new client will be filing Chapter 13 before they even start. Knowing the differences between designing for the Web and creating for print will help you to walk the client smoothly through the digital production process.
Color = Cost
When you know your client needs digital files for print, its important to discuss the number of inks that will be used. In the print world, you generally have two options: full or spot color. You can find four or full color in printed pieces like glossy magazines with color photographs. These pieces are printed with four inks, each requiring their own plate for printing: cyan, magenta, yellow, and blackor CMYK. The K stands for black. The four negatives produced from your digital file for the four respective inks are comprised of tiny dots, each set at a slightly differing angle from the next. These tiny dots mix together to create full or four color when the inks are transferred to a metal plate and applied to the stock or paper you’re printing on.
If you don’t want or need the expense of four color, you may elect to use spot colorone, two, three, and possibly even four inks. A one-color print run will cost less than a two-color print run. A two-color print run will cost less than a three- or four-color print run.
Most printing presses are one-, two-, or four-color, which means that one, two, or four colors can be run at the same time. If you’re using three spot colors, the printer may put the job on a two-color press, clean the press, and run the third color after the other two have been completed and dried. They may also put it on a four-color press and leave one ink well empty. In either case, the clean-up or the use of the higher-end press will inflate the price of a three-color print run, so don’t be surprised if three-color printing is quoted at about the same price as four-color.
Aside from full and spot color, there are options that involve more than four colors, such as adding a fifth color and perhaps varnish to CMYK. You also have the option of using a six-color hexachrome process, which adds a vibrant orange and green to CMYK to reach colors that cant be printed in four-colorlike many Pantone spot colors or those you see on a monitor. Unless your client is prepared to spend huge amounts of money, the latter two wouldn’t be options.
When a client understands how color affects cost, you and the client will be able to make decisions about how the logo should be designed. The solution might be a four-color logo for the Web site and a two-color logo for the stationery. It may be the same for both, but its important to discuss the options because the decision will affect cost, design, production, and time.
Four-Color Printing
Have a look at the logo below. You can see black, brown, red, very different greens, yellows, and blues . . . well, heavens! You’re already way past the four-color limit. Printing all of these as spot colors would be very costly. Plates would need to be made for each separate color and would involve many cleanups and runs through the press. This would be a dead ringer for a four-color print run.
When broken down into the four inks, called color separations, the plates required each ink to appear as below. It may be difficult for you to imagine at first, but these four colors will mix together to create the image above.
Spot-Color Printing
As with four-color, spot-color printing also requires a plate for each color. Where the Web world applies hexadecimal codes to its colors, the print world applies PMS, or Pantone Matching System numbers, to its spot colors. There is a Pantone Color Formula Guide that has all available swatches for both coated (glossy) and uncoated (dull or matte) stock (paper). Coated and uncoated colors are close, but not always identical. Its important to see what the spot colors will look like on the stock you and/or the client have decided on. Stock choices can range in weight, as well. A text weight is generally used for letterhead, while cover stock is used for business cards. Envelopes come in different shapes and sizes. Ask the print house if you can see samples of each.
If you think you might run into specifying spot colors for clients frequently enough, you may want to buy a Pantone Color Guide (approx $110 US). If the cost cannot be rationalized and you think specifying spot colors will be an isolated incident, visit the print house and choose the PMS numbers youd like to use from their guide. Every good printer has one and they’ll need these numbers from you before they can print the job. If you’re doing long-distance printing and know of a friendly local print house, you could also drop in to have a quick look at their PMS guide. Bring a printed version that matches your colors as closely as possible so you can specify your PMS colors from an established reference point.
Are Your Colors Accurate?
As a Web developer or designer, you know that one screen may see color very differently from the next. In print, you have another set of problemswhat you see on the monitor must be converted to a completely different “color space.” The monitor sees images using RGB color (red, green, blue), while printing houses use CMYK and the Pantone Matching System.
Typical dye-sub printers also use CMYK. As proof of the difference between the printer and RGB as seen on our monitor, lets run a quick test. In RGB mode, place a block of 100% green on your page and print it. You’ll most likely get something in the neighborhood of forest green. Hold your printed page next to your block of vibrant green on your screen. Not even close cousins.
In the printing industry, a great deal of time and money are expended in setting up a calibrated or WYSIWYP (what-you-see-is-what-you-print) monitor. You solve this problem through color calibrationadjusting the color of the monitor to simulate what would be printed on a final piece.
Calibration is not critical in spot-color printing because the inks dont need to be mixed to create another color. From a design perspective, its nice to approximate the colors you’d like in order to study the balance and weights of colors, but the inks will ultimately be independent of each other on the press and don’t need to be exact.
Calibration is very important in CMYK (or tritone and duotone) printing because the inks mix together to create the color youre looking for. If you see our logo in RGB view, youre unable to accurately tell whether the percentages of CMYK inks will mix properly. You’ll need to know what they’ll look like in CMYK. Printing is pretty costly, so guessing is not an option. Its important to have your monitor calibrated to the final output.
How Can I Calibrate My Monitor?
For professional color matching, color management software is necessary. Also, the better the video card, the more accurately your monitor will accomplish calibration for print. A 24- or 32-bit card is recommended.
The Macintosh platform integrates color management into its operating system very easily. Adobe Gamma, shipped with Photoshop, is widely used on Macs. There are problems using Adobe Gamma in Windows NT 4.0 because the systems architecture doesn’t support it. While it can be used on Windows 95 and 98, some video cards dont support it, so system-wide calibration isnt possible; a profile for Photoshop 5.0 is possible, though.
While low-cost solutions for color management on PCs are few, there’s a lot of work being done. This is a short list of color management tools for PC; prices are approximate.
Taking the High Road On Resolution
Many of us have created a masterpiece, emailed our files off, and shortly thereafter received a call from the printer saying our files were fuzzy or bitmapped. When you create files for your Web sites in a program like Photoshop or Fireworks, you use a resolution of 72 pixels per inch. Print media is executed at a much higher resolution and the film is output at specifications of lines per inch (lpi) and dots per inch (dpisometimes called pixels per inch).
Before you begin to build your files for print, its important to know at what line per inch or “line-screen” value your files will be output. It varies from printer to printer and job to job, so its always a good idea to ask. Not to worry; youre not asking a silly question. If your client, rather than you, is dealing with the printer, tell your client you’ll need this information.
Newspapers generally print at 85 lines per inch and sometimes higher. That simply means that in one linear inch there are 85 rows of dots. The more lines per inch or the higher the line-screen value, the finer the image. Magazines and books usually print at 133 lines per inch or higher, depending on the quality. Stationery is also usually printed at 133 lines per inch and higher.
Once you’ve established the line-screen value, you’ll have the answer to what print resolutionthe dpi or pixels per inchyou’ll need to use to create your files. Just double the line-screen value.
If the printer tells you they’ll be printing your files at 133 line-screen, create your files at 266 dots or pixels per inch. If they tell you they’ll be printing your files at 150 lines per inch, create your files at 300 dots per inch, and so on. Unless you’re doing high-quality, glossy publications, its very unlikely that you’ll need to create your files at any greater than 300 dots or pixels per inch. If you’re designing for stationery and cant get the line-screen value from anyone, play it safe at 300 dots per inch.
Software Thatll Do the Job
For print work, you’ll need software that can accomplish higher resolutions. This’ll only be an issue when working with raster files, though, as opposed to vector files. Whats the difference? Most graphics on the Web today are created in raster formats like JPEG, GIF, and PNGa collection of pixels.
If you create your file at 72 pixels per inch and try to increase the resolution to, say, 300 pixels per inch, the image must make up for the extra pixels that are being added. When you sample up or increase your resolution, the pixels “interpolate:” new pixels are created between the original pixels based on their color information. The results can be, well, ugly, and the reason for the fuzziness.
For high-resolution raster images, you may want to consider using Adobe Photoshop, Corel Draw, Photo-Paint, or Painter. Your final high-resolution files should be saved in either .TIFF (Tagged Image File Format) or .EPS (Encapsulated PostScript) format. Of these raster programs, only Corel Draw and Painter support spot colors; the others will output images for CMYK separations, which wont be appropriate if you need separations for a two-color logo. You’ll need to create your file in a vector program.
Vector programs use shapes and paths rather than pixels. The file sizes are substantially smaller and can be enlarged to any proportion without degrading the imagethe shapes and paths stay intacteven if you enlarge to the size of a billboard! Vector programs can be used for logos and line drawings that have smooth curves and straight lines, and are a good choice for creating spot-color logos. Any raster images or subtle shadows can be imported at the proper resolution if needed. If you do import any raster images, be warned that they’ll interpolate if you attempt to enlarge them. The most common industry software choices for vector files are Macromedia Freehand or Adobe Illustrator. Your files should be saved in .EPS format.
One of the beauties of using a vector program to create your logos is that the .EPS files can later be opened at the desired size in an image editing program without losing quality. If you originally create the logo at high resolution in an image editing program like Photoshop, you’re left to downsample to 72 ppi when creating the Web site. Again, resampling in a raster program can cause loss of quality, so you would need to make touch-ups to the low-resolution version for the site.
If your client wants you to produce the final layout files for all of the stationery, you’ll need a page layout program supported by most print houses such as Quark XPress, Adobe Pagemaker, or Adobe InDesign. They’re expensive programs, so unless you want to get into the business of desktop publishing for print, you may want to tell your client that you will provide a high-resolution file of their logo to the print or design house, which can be imported into these programs.
Microsoft Publisher is also gaining popularity as a layout program with many small businesses, but check with the print house you’ll be using to ensure they support MS Publisher files firstnot all do. If they don’t, and try in some way to recreate or convert your files, you’ll be guaranteed an instant nightmare and extra costs. No matter what layout program youre using, its a good idea to check with the print house to be sure they use the same one or can deal with Mac or PC platform files, or both. If a print house doesn’t support any of these programs, find a new printer.
Files to Go
After you decided on the number of colors and the required resolution, you were able to make decisions about which software to use to create the logo. If it was a one- or two-color logo, chances are you made a decision to use Illustrator or Freehand. If you had the luxury of four-color process, you may have chosen Photoshop.
In any of the vector programs, itll be necessary to ensure that your colors are named and used in RGB mode, rather than CMYK, so they’ll appear in the separation list as spot colors for final output to film. You may have either used the pre-existing Pantone color names, or named the colors yourselfperhaps teal and gold, or PMS 321 CVU and PMS 110 CVU. CVU means “uncoated.” If the name appears without the U after CV, its intended for “coated” or glossy stock.
In a raster program like Photoshop, it’ll be necessary to convert to CMYK mode (or duotone or tritone) before sending your files. Also check your colors in the palette. If a little triangle with an exclamation mark appears when you choose the color, it means its out of the gamutnot attainable in CMYK. Choose one that is.
Along with the file you’ve created, you’ll also need to send all font files you’ve used in your file to the print or design house. Again, check with them to see if they can deal with Mac and/or PC platform. Let them also know what colors you’ll expect to output in an attached note. It’ll save costly mistakes, time, and guesswork.
Print and design houses are your friends. If you’re in doubt at all about what you should be sending, ask questions. And its okay to be honest. If they know your experience is in Web design and that you haven’t dealt with print in the past, you might be delightfully surprised at how helpful they’ll be in guiding you through the process. After you’ve done it once, you’ll be an old pro. You’ll be talking print geek with them in no time.
Written by Wanda Cummings