Stellar screenshots in print pieces

~ 04 May 2004 ~

What’s the best way to format screenshots for print materials?

Up until last week, I thought I knew the answer to that question—just knock up the dpi to 300 in Photoshop, convert to CMYK, and resize as needed.

Say it ain’t so, Joe.

It ain’t so. There’s a better way. A much better way.

Wish I’d known that before sending the 20-page product catalog shown above—chock full of screenshots—to print a few weeks ago.

*sigh… You win some. You lose some.

But before we’re all losers, check out this bit of advice from graphicPUSH: Capturing and Optimizing Screenshots for Print.

Most of the raster screenshot advice is your run-of-the-mill approach to preparing screenshots for print, apart from the clever “Nearest Neighbor” tip, which keeps screenshots razor sharp.

Scroll down a bit, however, and read “Preparing a Vector Screenshot.” Author Kevin Potts, who penned an article for A List Apart in October 2003, walks you through an incredibly slick technique for converting screenshots to vector images. No joke. After it’s all said and done, each pixel is converted to an individual vector square. Grouped as “pixel vectors,” the screenshot can be resized to any dimensions without losing hardly any of the original clarity.

I did a test run last week with an inkjet, and the crispness of the screenshot was phenomenal. I have yet to use the technique in an actual four-color print setting. But Kevin has, many times over. “It’s a technique our in-house department has been perfecting for some time,” Kevin explains in a recent email conversation. “I use vector screenshots in our four-color printed material everyday, with no trouble whatsoever.”

Where were you six weeks ago, Kevin?

15 Comments

Veer: Visual Elements for Creatives.
Stock photography, type, and killer tees. Genuinely recommended by Authentic Boredom.

1 Todd ~ 04 May 2004 at 07:20 AM

Thanks for the link Cameron. That is something that I’ve been wondering about for a while and it’s going to come in handy.

2 James ~ 04 May 2004 at 09:27 AM

Big hat tip Cameron! Great link, just what I needed for a upcoming documentation project here at the office!

3 Chris Owens ~ 04 May 2004 at 05:04 PM

Thanks for the link link Cameron.

It’s not much use to me right now, but my girlfriend ran that question past me just yesterday.

Where were you yesterday, Kevin (& Cameron)?

Thanks guys.

4 Dan August ~ 05 May 2004 at 02:50 AM

Great article. I’ve been experimenting with screenshot for print for a while and most tricks were known to me.

But the whole vector part was new – and I like it!

5 Dan August ~ 05 May 2004 at 03:00 AM

But I forgot to say one thing.

When you convert from RGB to CMYK, the colours will be flawed. Grey and black will be defined in all four colours, and you might want it only in black. Use the eyedropper tool to see my point.

I sometimes change the colours manually to better fit the CMYK colour mode. This makes for an even more crisp screenshot.

But at the same time this could mean a huge amount of extra work. Hence you might consider keeping a template of e.g. a WinXP/IE6 browser window and copy-paste content into it. This would also reduce tracing time in Flash.

6 Ryan Matsikas ~ 05 May 2004 at 10:36 AM

The many uses of flash. I’ve used flash’s trace bitmap for many thing, its pretty handy.

7 James at Practical CSS ~ 06 May 2004 at 12:03 PM

Why does this only come out after I’ve finally escaped the software documentation business? I would have been a hero for unveiling this at work!

8 Cameron Moll ~ 06 May 2004 at 12:31 PM

lol

9 Josh Williams ~ 10 May 2004 at 05:11 PM

Here’s another alternative that offers nearly identical results without as much hassle… (I worked for seven years in print before my last five were spent primarily on screen).

So here goes… We all know simply resizing a 72dpi image to 300 is gonna result in some ugly blurry, fuzziness, etc. We can avoid this by disabling Photoshop’s bicubing resampling (the process that PS uses to resize images).

Disabling bicubing resampling (in simple terms) forces Photoshop to simply multiply pixels as they are, instead of adding new pixels consisting of blended colors to “soften” a resized picture.

While you typically don’t want to turn this off, cause it’ll really screw up photos if you resize this way, it works perfectly for sizing up screen shots. And its this easy:

> Open your General Photoshop Preferences Dialog.

> Switch Interpolation from “Bicubic” to “Nearest Neighbor”

> Resize your image to the needed size at 300dpi

And you’re done. Perfect. Same end results as the aforementioned vector trick, in a lot less time. Yes, you still have a large print-worthy bitmap file to deal with, but that’s why we have 80gig hard drives.

PS. Be sure to switch your interpolation settings back when you’re done.

10 Josh Williams ~ 10 May 2004 at 05:12 PM

Shutting up. NM… already covered. ; )

11 Cameron Moll ~ 10 May 2004 at 08:49 PM

lol, again. Hey Josh, the only complaint I have about Nearest Neighbor is that it often doubles up pixels on type with anti-aliasing off. Have you noticed that at all? The vector solution doesn’t seem to do that.

12 Gordon ~ 19 May 2004 at 02:20 AM

So, for a screen only shot, why bother with the CMYK switch? Am I correct in thinking it offers no value?

Most of our screenshot work is for screen use - it needs to be able to be printed well but usually only on a standard office printer. We often have multiple screenshots in a doc, so I’m thinking RGB, raster screenshots are the way to go here.. right?

Off to play with PhotoShop (Elements) and see if I can perfect this - thanks for the wonderful link!

13 Gordon ~ 19 May 2004 at 02:21 AM

DOH - if I’d actually re-read your title I would’ve answered my own questions. Never mind. As you were…

14 jim ~ 07 June 2004 at 06:30 AM

whats wrong with save as .eps straight from photoshop?

15 Dave ~ 24 June 2004 at 01:23 PM

I’m an interactive designer, but I think the following will be useful.

When using nearest neighbor with screenshots, also use 100% increments to avoid creating ugly jaggies in the interpolation. Example: if you have a perfectly sharp 2x2 pixel image and want it bigger without any funny business, you’d want a 4x4 pixel image.

So technically, you should not interpolate 72DPI to 300DPI as the linked article suggests, do 288DPI or 360DPI instead. Otherwise, you will end up with crap pixels here and there…formally pristine lines suddenly crooked, odd bulges in text output, etc. Ugh.

On a side note, you may not need to upsample the screenshot to high DPI…just scale it in your layout program, not in Photoshop. The imagesetter/postscript will do the scaling for you. The “300DPI rule” is to prevent blocky-looking PHOTOS at typical LPI settings; when you use a low-res photo by accident in print, and it comes out blocky, that is actually what you want in the screenshot. It probably depends on the imagesetter you’re outputting to.

This is probably the same thing that Jim is saying with ‘just save as EPS from Photoshop’. In this case, you’re saving a bitmap EPS from photoshop (not vector), and the layout program just interpolates the data the way it will.