Here’s a tutorial that I’ve been dying to make. Well-constructed two-color pieces are beautiful, economical and the hallmark of an expert designer. [Note: These techniques can also be used to create 3, 5 and 6-color documents, hexachrome seps, screenprinting seps, and more.]

Here is a small sampling of 2-color works. Each beautiful (and copyrighted!) image in the collage was printed using 2 inks. [edit. OK, just noticed the 3-color Blue Note cover, so sue me. Same principle. :P]
Standard four-color printing uses the 4 process colors: cyan, magenta, yellow and black. The short reason for this is because the subtractive primaries are cyan, magenta and yellow (not blue, red and yellow as we’re taught in grade school). Pigments in most inks are weak and impure, however– especially cyan– so we use a fourth ink to boost the color gamut. Turns out black helps the most, as CMY alone produce weak shadows. Thus your basic desktop printer has 4 inks: CMYK.But on a giant printing press, we can use any inks we like, in any combination. Lithographic printing presses are monstrous devices, operated by skilled pressmen. It matters not to either what colors are used to run a job. All sorts of neat effects are possible, simply by expanding on boring old CMYK. Special ink colors are called Spot Colors. There are formulas for mixing these and systems for classifying them. The most universal system is Pantone, which includes super-cool metallic and florescent colors. You can buy color guides with all the Pantone colors printed on coated, matte and uncoated stocks. These guides include formulas for mixing any of these colors from 11 base inks, and they even let you know which of these colors can be reproduced with CMYK.So why use spot colors? Lots of reasons; here are a few:

Finally, 2-color comics look AWESOME, which is also the reason I’m so interested in this.

First things first, pick your 2 colors. You’ll most likely want to use black and some other color. This gives you a range from white to black, plus your spot color and all its tints and tones. (image) Now you’ve got to construct everything in the job with just these 2 colors. First is QuarkXpress: go to edit>colors, and click “new”. Under “model”, select PANTONE Solid Coated (or metallic, pastel, uncoated…whatever applies). Then pick your color from the chart or type it in the field. Hit “save”, and you’re done. This icon should be next to the color in the color palette (image), meaning it’s a spot color. Now you can use your spot color in boxes, rules, and text. You can even colorize grayscale TIFFS by selecting “picture color” from the color palette. How nifty! (These things apply to InDesign too, just do some cursory research.) Just be sure to use only the spot color and black in your design (duh!).Next is Illustrator. Make sure your document is in CMYK color mode. Now open the swatch palette, and delete all the swatches except registration and “none”. Now, click the arrow for the swatch options, and go to “open swatch library”. You’ll see a huge list of every spot color system under the sun; pick the same Pantone one you did in quark. (They MUST be the same: coated, uncoated or otherwise!) A new palette will open up; just find your color and click on it. It should now appear in the normal swatches palette. Next, create a swatch with the following values: C=0%,M=0%,Y=0%,K=100%. This will be your black. Done! Just work as normal, using ONLY your color and the special blank ink swatch. To create tints, click on either swatch and select a tint from the color palette’s “tint ramp”. You can save out as a plain vanilla .eps– nothing special to do there.

And now, Photoshop. As I mentioned earlier, you can tint a grayscale image in Quark. You can do something similar-yet-cooler in PS, first by converting to grayscale, then to “Duotone” mode. A duotone is a raster image composed of 2 inks. What we did in Quark was a 1 ink monotone; in photoshop you can make monotones, duotones, tritones and quadtones with 1, 2, 3 and 4 inks, respectively. So convert to duotone mode, and you’ll see a window with some options. Process black is the default first ink- click on the second color to set your spot. Click on “color libraries”, and select your Pantone color model (you must be getting used to this by now!) Select your spot color, or type the number in really really fast. Now click on the curve boxes to adjust the ink levels for each color. Fine-tune to your own taste, and work light– black plus anything is pretty dark. PS includes a whole bunch of samples, just click on “load”, pick one, and change the spot color to your own. Save out as a Photoshop eps.

The image above is a duotone composed of 2 inks: black, and Pantone 2985

If you’re really bright, you’ve figured out that duotones, cool as they are, don’t give you maximum control. For that, you need to become a true Graphic Design ninja. Enter the Multichannel DCS 2.0. When you convert a duotone to multichannel mode, your single “duotone” channel will split into two separate proper channels, one for each color. You can then paint, select and otherwise manipulate each channel as if it were a layer. That’s right, you work directly in each channel. Layers aren’t even an option in multichannel mode, so do your heavy-duty editing first, before it all gets flattened and rasterized. Then play around with total control over where both inks go. Liberation at last!

The black ink is removed from the cup above. As you can see, this allows us total freedom to manipulate duotones.

For non-duotone images, there are a couple more steps to get to multichannel mode. When you change most images to multichannel, you get three channels: cyan, magenta and yellow. You’ll need to double-click on each channel, and then convert two of them to your own colors. (Of course, delete the third channel.) If you’re experienced with channel blending techniques, this allows for greater control; otherwise, stick with the duotone-to-multichannel conversion.

And back to Quark, for one final test. If you’ve followed along, your job should separate as two plates, and there shouldn’t be any CMY nonsense in there. Here’s how to test: Bring up the print dialogue box in quark, and under the “Layout” tab, check the “separations” box. (Make sure you’re printing to a PDF or PS file, not a physical printer. If you try printing to your inkjet, it won’t work. Your printer doesn’t mix Pantone inks, although that would be really cool.) Now click on the “Output” tab. There you’ll see every color that will be separated and output. There should be Process Black and one spot color, and NOTHING ELSE. If there is, go ahead and print the PDF. You’ll get separate pages for each color, so you can go to the cyan, magenta and/or yellow pages to pinpoint the offending culprit. If not, you’re all set! Let the output service bureau handle screen angles; they’ll know what’s best.

Congratulations! You’re an official 2-color expert!

I’ve been working on a new Graphics Workshop homepage for a few days now. I want it to be good, and I’d like it to last a year or two, so I’ll be spending some time on it. I’m going to try to push it with this one, integrating flash and html. I’ve been doing that since 1998 or so, but the .swf object is always separate from its surroundings. Slicing images is relatively new to me, as I’ve been constructing sites entirely in flash for years. But SEO is king, and that antiquated html knowledge will come in handy again. But I don’t think it’ll be laid out with tags. I want the page to impress, not the code.

Many of the following problems have been addressed in version 7, but few printers have this upgrade. How ironic- the reason for quark’s survival (resistance to new software in the newspaper and printing industries) is stunting its own development.

• Text boxes and picture boxes: why do we need two options? Apparently to fill up the toolbar, along with the Starburst tool.
• Quark randomly crashes, but it puts a Quintessentially Quark twist on it: You’re unable to save a file (or even save as a new document), and the file itself disappears from existence. Priceless.
• When text overflows a text box, you can’t delete the offending text without first expanding the box. How annoying.
• Lousy opentype support (pre 7)
• Quar… er– quirks exporting to PDF
• No PSD Support
• Pricing
• Re-linking is a pain, and you can’t “update all” in the links menu.
• After collecting for output, the new document still links to the old files (not the collected ones).
• Color/resolution of images. I love making a PDF every time I want to see a remotely accurate version of my document.
• Lack of shortcuts for tools.
• Creating outlines from text- never in Quark.
• No transparency. I know, it’s supported in ver. 7, but see note above. I’m stuck in ver. 6 limbo, so I can complain all I want.
• Web layouts in Quark- give me a break, who in their right mind would ever do this. And now we have “Quark Interactive Designer” for those too busy to learn flash. When has Quark ever made anything easy? Flash is a complex program; devote a weekend and learn it.
• How about all the quirks that make preflighting a nightmare? Don’t resize images, don’t rotate them, don’t crop them, don’t use “no color” for a background fill. Delete unused colors (including RG, which Quark includes purely to annoy you).
• Pretty much everything else about this dinosaur of an application (a fat, slow dinosaur with a little brain, about to be eaten by a slightly bigger dinosaur)

Resolution for print and web is an incredibly complex (for me) series of disparate concepts. It took me a very long time to acquire the basic understanding I have, because it is so difficult to get definitive answers about resolution! I survived 4 years of undergraduate graphic design study without a clue on the topic. It simply wasn’t taught. The knowledge is completely esoteric- and to make matters worse, there exist many ubiquitous falsehoods that exist purely to lead people astray. So here’s my resolution primer.There are many types of resolution: scanning resolution, screen resolution, ppi, lpi, and dpi. (There are more, but my focus is print and web design.)
Resolution is the amount of detail captured in an image. Vector graphics and fonts are resolution-independent, so we’re really just talking about raster graphics here. We always want to capture the greatest amount of detail, but real-world constraints limit this in various ways. So we study resolution to understand how much we need, how little we can get away with, etc.
First we have screen resolution, which is measured in pixels. This refers to output devices like your computer monitor. Your monitor is set to a standard screen resolution, given as the number of horizontal pixels by the number of vertical pixels (ie. 800 x 600 pixels, 1280 x 1040 pixels, etc.) These values refer to the number of pixels displayed on your screen’s total area. To derive a “per inch” effective resolution, you’ll need to divide your screen resolution setting by your screen’s physical size in inches.

example: 1280 pixels / 15″ = 85 displayed pixels/inch

1024 pixels / 12″ = 85 displayed pixels/inch
(if both numbers didn’t match, your pixels aren’t square!)

Moral of story and Reality #1: “72 dpi” is a rule of thumb, if not a complete joke. Displays range from roughly 40 to 170 apparent pixels per inch, and you can build your raster images at any resolution without affecting file size- it’s the pixel dimensions that matter. Again: Resolution does not matter at all for web graphics. Only the pixel dimensions matter. So calculate the apparent resolution for your own display settings, and use that figure. Now, an inch on your photoshop ruler will equal an inch on a real-life ruler. For an excellent, thorough and highly accessible article on this topic, please visit http://www.scantips.com/no72dpi.html.

Next is Working Resolution. As we just discussed, working resolution does not matter for web graphics, just the printed variety. We measure working resolution in pixels per inch, or ppi. Reality #2: The image you’re working on in photoshop is NOT 300 dpi. It’s 300 ppi, and this is not insignificant because dpi (dots per inch) means something COMPLETELY DIFFERENT. Oh, and one more thing: ppi refers to pixels per linear inch, not square inch. A 1″ square image at 100 ppi contains 10,000 pixels (100 times 100). Now this is where it gets complicated. We need to get from ppi to dpi, with a stopover at lpi. Understanding this is almost a holy grail for graphic designers. Abandon all hope, ye who enter here. You’ve been warned.Various factors in the printing process determine the working resolution that we can use. Perhaps the greatest factor is the stock on which we’re printing. Uncoated stock and thin stock (ie. newsprint) require coarser line screens than coated stock and heavy stock. But let me back up.

Line screen, or LPI, is the density of halftone dots that are created from an image. In order to be printed, an image is broken up into (usually) 4 composite images: cyan, magenta, yellow and black.

These images combine to create the illusion of full-color, but not before another visual trick is employed: the halftone dot. Combining 4 inks in various ways will yield 16 color combinations. We’d like to represent more than that, so we employ the white of the page to create “halftones”. If you fill a square with black ink, it will appear 100% black. If you fill it with little dots that spread out to cover 50% of the square, the square will apear 50% gray. Capisce? So we take our image, separate it into 4 monochrome images, and then reduce each of those into halftone dots of varying sizes.

The pattern of dots follows a grid pattern, and that grid is the elusive line screen. A higher line screen generates more dots, and a coarser line screen (like we must use for newsprint) fewer dots. Line screens range from about 65 (cheapest paper imaginable) to 200 (fine art books). Cheap paper soaks up ink, so it needs those bigger dots, hence the coarser line screen (more on line screens in a minute…) Now we know how printers create the illusion of full-color by using just four inks, but how do they create halftone dots of varying sizes? By making them out of smaller dots, which don’t even have an agreed-upon name! This is the final frontier, folks. People call these things spots, printer dots, splops, whatever. They are the smallest unit of ink that a printer can print. THIS is dpi: The amount of these little dots that a printer can fit in a linear inch. (See how different this is from ppi?) We call this Output Resolution. Dpi range from 300 (or lower, but that’s just crappy) to about 4000. It takes lots of printer dots to simulate full color and reproduce smooth line art!
Relationships:
Working res. (ppi) should be the same as still another type of resultion, Scanning Resolution. Scanning resolution (spi) is measured as samples per inch. Samples end up as pixels, so there is a 1:1 relationship. By the same reasoning, digital photographs should be taken at high resolution, then downsampled. Spi and ppi should be 1.5 to 2 times lpi. This is a printing industry standard, and it effectively means that 1.5 to 2 pixels are averaged out into 1 halftone dot per channel. The relationship between dpi and the rest is more variable. The effect of changing the dpi factor is a change in the possible color variations per channel. This is the reason: Printer dots are a fixed size. They make up halftone dots. Bigger halftone dots mean more possible sizes of those halftone dots- smaller dots mean less possible sizes. The result: higher line screens mean less variation in color. Less variation in color means greater potential for banding. Here’s an excellent explanation of this phenomenon:

Really Good Halftone Tutorial

Here’s the formula for calculating the total shades of an image channel to be output:(dpi/lpi)²+1= Total possible shades per channel

There you have it, folks. I didn’t even touch on video resolution (ie. HDTV) or temporal resolution (frames per second). I just wanted to create a basic resolution overview for those interested in print and web design. Hopefully this can help someone understand this really complex topic.