: How to get a screenshot to print decently in a Powerpoint design? The requirements I am creating a poster which needs to show screenshots of a web application we developed. There are following

@Kaufman565

There are tools that are specifically designed for rendering Web pages as high-quality images. They will enable you not only to render the entire Web page from top to bottom (including the part you would have to scroll to see) but they can also render at 2x pixel ratio like a Retina Display to give you the sharpest, highest-quality image. And of course you can set a specific width, or a specific width and height if you don’t want to render the entire page. The key thing is that you are not doing a screen capture, you are doing a browser rendering. You are getting a custom rendering of what the browser sees.

The tool I use is called PageLayers (for Mac,) which can make a flat PNG rendering or can also optionally render each element of the page onto a separate Photoshop layer. If you are not on a Mac, there is very likely going to be an equivalent tool on your platform. There might even be a Chrome extension that can do this kind of browser rendering.

If you need to hide some of the page, it is best to do that in the website code before you make the rendering. If you can’t do that, then use a bitmap editor (even Microsoft Paint) to modify the rendering.

For the print design part, it doesn’t matter that you and your team may know PowerPoint. PowerPoint is not a print design tool. It is designed to make onscreen renderings of a slide show. The problems you are having with printing are because you are not using a print tool. You are actually better off to use Word if you have to use Microsoft Office, because Word is actually designed to layout a page and print to paper. Set your page size correctly, set the resolution to 300 dpi, then put in the largest, highest-quality website rendering you can make and design your page around it.

Vote Up Vote Down

@Michele215

It is very confusing to me what are you doing. Responsive? On Powerpoint? On a print? Chrome? Divs?

I will just answer the basic part.


Make your Poweepoint the size you need. In mm if you need to.
Print to a virtual printer, like PDF forge. www.pdfforge.org/ Configure the output file, instead of pdf make it png if you need, at 600 ppi. (Pdf forge has no anti alias, so you need to print at double size and resample)
Resize down to 300 ppi on gimp. www.gimp.org/

Edit Number one

Let me see if I understand this.

A) You need a Powerpoint file just becouse other people in the team do not have other tools or do not want to learn other tools. Right? (If it is a cost based decision you can always use free software like inkscape and scribus. But let us go on.)

B) That file is going to be used to print a poster, aka a big print, lets say 3x2 feet, and your power point file is already that size. Right?

C) On that poster you have a screen capture of something else. A web page. Right?

D) That web page is responsive, so you need diferent screen sizes and make diferent screen captures of thoose scenarios, Right?

Understanding ppi

Forget about dpi, that is a unit for printers, not images.

And forget that an image is clearly a 96 ppi image. No. It can be whatever you want it to be. (Or whatever it can be due the file size limitations)

An image is an image. If you print it big, each pixel will be big. How big? depends on the image and the size of the print. It can be as large as full inches, so you have just 1 pixel per inch (ppi). If you print it small, all the pixels will fit on that small phisical size.

Screen capture

You need a screen capture, not an artist representation. So... capture a screen. A responsive design is prepared for some breakpoints, for example 1024px width. So, make your browser simply 1024px width.

A normal laptop has a screen resolution of about 1300px so you are ok.

Here is a great little program to make any window at the desired size: www.brianapps.net/sizer/ I work on a Full HD monitor, and that way I can make my browser some other sizes to test a webpage.

Define thoose breakpoints. 1024px width, 480px width, 768px for a vertical tablet, full HD 1980x1080px, etc.

Yes you can not make a screen capture for a device that has more resolution than you have on your own device. Use the boss computer :o).

If you have a One Page layout, that need scrolling down, try Fireshot, a extension for firefox (and also for chrome)

Back to the resolution

So you now have a screenshoot that measures 550x750px.

It does not matter if you print this to 50 feet width. You still want to look as a screen shoot. Do not resize it on any software to 1713x2362px. No. Do not resample it. Use it as is! that is the screenshot.

Any atempt to resample it will blur it. Exept when using a nearest neibourg that simply repeats the adjacent pixels, that is the same case as not resampling it at all.

Back to resolution again

That image will be a screen capture of the desired phisical size. Period. It really does not matter what resolution (ppi) is at the end.

Edit 2

You do NOT need a 1713x2362px image on a 14.5x20cm print.

That phisical size is about the size of a tablet. Some of which are 768x1024 pixels in resolution. About 134ppi.

A screen capture in an old computer will give you 1024px width image, which will give you 179ppi.

150 is good enough for most cases viewed at close range. Most people will not notice the diference to a 100ppi (or 96ppi in that case) image at 50cm.

I still do not get why you have a 550x750px image or 533x733px for that matter.

Again, if you are trying to simulate a device that size, leave that that size.

If you are not trying to simulate the device, simply put your computer to the maximum resolution, zoom your webpage until you like what you see and make a screen capture.

If the webpage does not fit becouse you need to scroll down, use Fireshot o make multiple screenshoots and merge them togerther in Gimp, which is free.

Vote Up Vote Down

@Yeniel278

Screenshots can not obviously be larger than the screen used and designed for. By all means if your design stretches without problems to higher sizes use those. Most likely it will not, also it runs the risk of not looking like a screenshot which is obviously what you want.

The main problem printing screen captures is not the resolution. After all the pixelation looks ok on screen. Rather the main problem is that the print screen engine assumes that the image is continious tone. What happens is the screening engine proceeds to interpolate the image blurring ot out. The data is, however, discrete and should be treated as such.

It would be pretty trivial to tell the rasteriser not to interpolate. Only nearly no application supports this. So the next best thing is to upscale the image with nearest neighbour iterpolation. Be sure to upscale a fixed integer amount. This emulates the screen better than a interpolated result. Note: subpixel filtering allmost certainly throws the printer off so be sure to turn it off before capturing. YMMV.

This is a adequate tradeoff, be sure to test this on your printer because you can not appraise this on screen.

Second problem. Powerpoint has a slightly inaccurate page model so when printing posters be prepared to debug your results on full size print as the lines often nolonger align and font sizes may jitter. Something to be aware of. Can not tell how many times i have been ased to fix powerpoints printed at A1 or larger.

Vote Up Vote Down