Hi Rez Screenshots. is there an easier way

[mactractor]

I've been asked to create some hi-rez screenshots of some websites for inclusion in a printed document.

Normally, I would capture the screenshot, paste it into a Photoshop file, and resize the dpi of the image. The images lose alot of the their clarity and aren't as crisp.

There's got to be a better, easier way... is there any software available to do this? Is there a better technique that I can use for the screenshots to maintain their highest quality.

Any help would be greatly appreciated.

[travelin cat]

I can not see how this can be done... a screen shot is just that.. a low rez 72 or 96 dpi image.

I would think that getting the original image in hi rez would be the only way

[moltar]

Yes, there is really no way... It's just logically impossible.

There was a huge thread discussion on this before, I can't find the thread, but it was a long one :) Trying using forum search.

[Don_Hoagie]

Hi Mactractor, welcome to WebmasterWorld!

Though it is a cardinal sin to say "impossible" when talking about computers...

It is absolutely, positively, impossible to increase the quality of an image without affecting the size. The quality will never be better than it was at its conception... and since a screenshot's conception is at "72dpi" (well below print quality of 300dpi or above), you will never get a print-quality screenshot at 100% size.

Your two choices are as follows:

1. Recreate the page in Photoshop or your editor of choice, at a higher resolution. Print that.

2. Assuming the layout of your web page is liquid and can scale itself on the web, find the biggest monitor your can get your hands on, take a screenshot of it there, and then take that file to Photoshop and change the resolution to a print-friendly one (i.e. 300dpi). The image will shrink but will print out nicely. It's just a matter of how small you're willing to make the image in order to get quality.

Good luck

[Don_Hoagie]

After-the-fact Edit:

The "better way" you are looking for would have been either to create a print-quality likeness of the webpage in Photoshop BEFORE creating the actual web page, or to use CSS to feed print-quality images into the layout (which wouldn't give you a fully hi-fi page, but at least the logos and images would look nice).

[bedlam]

There was a huge thread discussion on this before, I can't find the thread, but it was a long one :) Trying using forum search.

I bet you mean this one [webmasterworld.com]. If you read through it, you should realize that the '72dpi' thing is a bit of a red herring. Pixels are pixels; they have no inherent size, and no built-in relation to print resolution. This does not mean that everyone is wrong about the fact that screenshots are not going to be very useful for print...

Mactractor, the only real alternative is to include small images in the document. It works like this:

• Your images have a certain number of pixels--let's say they're 1024 x 768.
  
• Print resolution is usually at or near 300 dpi.
  
• The smallest piece of information in your screen captures is 1 pixel
  
• The smallest bit of information in the printed material is 1/300 inch
  
• If you specify that each pixel must be printed at 1/300 inch square this means the maximum printed size you can achieve at 300 dpi is 1024 pixels / 300 pixels per inch = 3.41 inches.
  

To set this up, change the dpi setting of the images in Photoshop etc but do not check the 'Resample' box. You should see the print dimensions change to something quite small ;-)

Keep in mind too that a 3.41" x 2.56" image is not outlandishly small as an illustration on a brochure, letter sized sheet or magazine page--just don't expect to be able to get any nice looking top quality posters made of your website...

-b

[moltar]

Yes, yes, bedlam! You are good, you! :)

[Mr Bo Jangles]

Haven't tried it, but how about setting your digital camera up in front of your monitor and clicking away - then cropping and 'tweaking' in Photoshop or Fireworks -that would fix the resolution problem.

[bedlam]

Haven't tried it, but how about setting your digital camera up in front of your monitor and clicking away ...

*sigh*

The method of image capture makes no difference--at least not the way you're thinking it does--the image on the screen is still made up of a fixed number of little squares.

There are two choices:

1. Print each pixel--each little square--at about 1/300 inch, in which case the overall screen capture will be rather small but very high quality, or
   
2. Print each pixel at some size larger than 1/300 inch in which case the image will print larger, but will look increasingly pixelated.
   

This is not actually so difficult to understand is it?

-b

[Mr Bo Jangles]

This is not actually so difficult to understand is it?

No, not if you're a supercillious genius, not difficult at all I suppose. Us mere mortals will sometimes struggle a bit though, so bear with us.

[Nutter]

What about finding the highest resolution monitor you can and doing the screen capture from that? Or crank your monitor resolution up as high as it will go?

[katana_one]

Another approach I thought of that may or may not work - results may vary depending on the use of graphics on the page. However, if you want to at least make sure the text comes out crisp, you might try printing the page as a PDF file. All of the text should remain crisp an any resolution (as long as its HTML text and not a graphic), and most printing/layout applications such as Quark and InDesign will allow direct importing of PDF files.

Or you can open the PDF via Photoshop with the dpi set to 300 (Photoshop will rasterize the PDF upon opening), then re-save as a JPG or TIF.

Anyway, this approach probably will not yield the results you are looking for, but it was a thought.

[Nutter]

I thought of a flaw in my suggestion after the edit window expired. The graphics on the page will be much smaller, which I assume you don't want. Besides, many pages don't scale well to really high resolutions. I'm thinking there's a FF extension that will allow you to zoom in. What about zooming in and doing it in sections?

[criznach]

A few options... Bedlam's is my favorite.

Are visible pixels the problem? If so, there's probably no way around it short of rebuilding a high-res version of the page in a page layout app like quark, indesign, etc...

If you simply want to scale up the pages and don't mind visible pixels, you can try bedlam's route of turning off the "resample" option in photoshop's image size dialog - or you can resample with "nearest neighbor" selected. With that method, you'll still see the pixels, but each original pixel will scale to several pixels across (depending on the new size). Bedlam's method is nice because the file size shouldn't increase.

If photos are the only problem, try taking a screen shot, then resample it up in photoshop, then place in high-res photos on top of the sampled-up page.

If you know in advance that you're going to need to do this, you can design a page at 4x resolution in photoshop, then scale down before starting your web production stuff.

[pilotX]

Instead of one real big monitor you could use a multi monitor card like matrox parhelia - at least thats what I do -. When taking a screenshot you get one big picture with the complete image of all monitors connected.
Just expand the browser window over all monitors and you get a quite big X-Resolution... For the Y-part just take a shot paste into Photoshop, scroll a little and repeat the procedure.

In the end put the layers together and use the procedure Bedlam described.

[monkeythumpa]

Here is how I made framed posters, about 4ft by 2ft, of my website. I took a screenshot and pasted it into Illustrator. I have the high resolution images and icons for about 50% of the page and layered them in. The rest you trace, and text is easy to import. It will take you about an hour per page, and if you are reusing elements the last pages take a lot less time. Now that it is in vector format youcan scale it to any size you want. Remember to scale the stroke appropriately. It is not that hard really.

[jessejump]

I've never seen in any book, magazine or any print publication a high-quality screenshot of an entire web site page - they usually re-create them or just show a portion of the page.