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 restrictions:

  • It has to be designed with Powerpoint. That's non-negotiable, as the rest of my team needs to be able to make changes to the text, etc. and they cannot use graphic programs (none of us is a professional designer)
  • The screenshots have to be 145x200 mm when printed.
  • The text on the screenshots should be as legible as possible.
  • I don't have a high dpi device available to make the screenshots
  • The application uses responsive design
  • There are a few elements which shouldn't appear on the screenshot. Mostly ones which are outside of the area I'm trying to capture (header, footer, navigation) but also sometimes divs which are in the middle of the display.
  • I have a Windows computer and no budget for commercially available tools, but can install free applications on the company computer

We would prefer nice graphics (at least 300 dpi), but if that's impossible, we would rather accept 96 dpi than become dependent on the use of professional tools.

What I tried

I have troubles getting the right sized screenshot for either resolution. First, I tried creating a 550x750 pixel screenshot. For this, I switched to the developer mode in Chrome, set the screen size to 550x750, went into the Elements tab and removed the unneeded elements from the page source. Then I zoomed out until everything I needed fit well on the screen and used an addon, Awesome screenshot minus, to capture the visible area of the page. The problems with this approach:

  1. it did not create a 550x750 image. I suspect there is something around the page (scrollbars? Overlay from the developer mode setting?) which created a problem, but I got a 533x733 image in the screenshot.
  2. It is very clearly a 96 dpi image.

Second, I calculated the size I need for a 300 dpi image (1713x2362 px). Resized the viewport to that size. Set the "zoom to fit" option. Zoomed my prepared web page until the content I needed filled the viewport. Then tried to capture. If capturing while "zoom to fit" is active, I got the image as rendered, that is, small enough in pixels to fit on my screen. If I remove the checkmark from zoom to fit, the browser doesn't seem to render the whole 1713x2362 viewport, as the vertical scroll goes to only 1400 pixels down, and there is no horizontal scroll bar.

The questions

  • If I stick a 300 dpi picture into Powerpoint, is there a way to get it to print nicer than a 96 dpi (or does it even happen automatically) or should I just give up on that part?
  • Assuming that 300 dpi makes sense, how do I take the required screenshot using the tools I have?
3/8/2016 3:10:00 PM

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.

  1. Make your Poweepoint the size you need. In mm if you need to.

  2. Print to a virtual printer, like PDF forge.

  3. 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)

  4. Resize down to 300 ppi on gimp.

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: 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.

3/9/2016 6:20:00 PM