Turn Design Mockups into One Client-Ready PDF

When you send a client ten loose screenshots, they open them out of order, in different apps, at different zoom levels. One PDF fixes that: the pages arrive in the sequence you intended, at a size that prints and reads cleanly. This guide shows how to combine images into a PDF that looks deliberate, not dumped.

Before you start

• Your images: PNG for UI screenshots with flat colour and text; JPG for photographic mockups. If you’re unsure, this comparison of WebP, JPG and PNG explains the trade-offs.
• A consistent width: mixed widths produce pages that jump in scale. Resize every image to the same width first; the image resizer can do this in a batch.
• Nothing confidential in the frame: crop out browser tabs, notifications, email addresses and real customer data before converting.

Choose the page size first

Page size decides how much white space surrounds each mockup and whether the PDF prints without scaling. The three useful options behave very differently with a typical 16:10 desktop screenshot.

Page size	Dimensions	Best for	Watch out for
Fit to image	Each page matches its image	On-screen review, client portals, Slack or email previews	Prints at odd sizes; mixed image sizes give mixed page sizes
US Letter	8.5 × 11 in (215.9 × 279.4 mm)	US and Canadian clients who may print	Portrait wastes space on landscape mockups; use landscape
A4	210 × 297 mm	UK, Europe, Australia	US printers may scale it down slightly to fit Letter

Match orientation to the mockup

Desktop screens are landscape and phone screens are portrait. If you’re using A4 or Letter, set landscape pages for desktop mockups and portrait for phone mockups, or the image will be shrunk to fit the short edge. If a presentation mixes both, fit-to-image avoids the problem entirely.

Margins: only when printing is likely

On screen, a margin is just a white frame that makes the mockup smaller. On paper, most office printers can’t print to the very edge, so a margin of about 10 mm keeps UI edges from being clipped. Choose one approach for the whole document so pages don’t shift as the client scrolls.

Put the screenshots in presentation order

Most converters add files in the order you select them, and many sort by filename. Prefix filenames with two-digit numbers so the order survives any sorting:

01-home-desktop.png
02-home-mobile.png
03-pricing-desktop.png
04-checkout-desktop.png

Use 01, not 1: with single digits, 10 sorts before 2. Group desktop and mobile versions of the same screen next to each other so the client compares like with like.

Combine images into a PDF

On a Mac with Preview

1. Select all the numbered images in Finder and open them together in Preview.
2. Choose View → Thumbnails and check the order in the sidebar. Drag thumbnails to reorder if needed.
3. Select all thumbnails, then choose File → Print.
4. Pick the paper size and orientation, then use the PDF menu at the bottom of the dialog and choose Save as PDF.

Apple documents reordering and combining pages in its Preview user guide. Preview edits are saved automatically, so work on copies of your files.

On Windows

1. Select the numbered images in File Explorer, right-click and choose Print.
2. Set the printer to Microsoft Print to PDF, choose the paper size and a full-page layout.
3. Untick Fit picture to frame if it crops your mockups, then print and name the file.

Check the PDF before you send it

1. Page count: one page per image, nothing duplicated or missing.
2. Zoom to 100%: UI text should be sharp. If it’s blurry, the source images were too small; re-export at 2× before converting.
3. File size: keep client email attachments comfortably under the common 20–25 MB mail limits. If it’s larger, compress the source images and rebuild, rather than relying on a PDF “compressor” of unknown quality. The image compressor reduces JPEG and WebP files in your browser.
4. Open it on a phone: many clients review on mobile first.

When to export straight from your design app instead

Converting screenshots is the right choice when the images come from different places: a live site, a staging build and a phone. If every screen already lives in one design file, exporting a PDF directly from the design app is usually better: text can stay as text, links between frames can survive, and you skip the screenshot step. Figma, for example, can export selected frames as a single PDF. Use images-to-PDF for mixed sources, quick reviews and screenshots of real builds.

Troubleshooting

• Pages are in the wrong order: rename with two-digit prefixes and add the files again.
• Huge white borders: switch orientation to match the image, or use fit-to-image.
• Mockups are cropped: turn off “fit to frame” or “fill page” options; choose “fit” or “actual size”.
• HEIC photos from an iPhone won’t open: convert them to JPG first, or change the iPhone camera format to “Most Compatible”.

FAQs

Will converting images to PDF reduce their quality?

It depends on the converter. Some embed images unchanged; print-to-PDF workflows may resample them. Check at 100% zoom, and start from 2× exports if text must stay crisp.

Should I use A4 or Letter for a US client?

US Letter, if they might print. If the PDF is only for screen review, fit-to-image is cleaner for everyone.

How many images can go in one PDF?

There’s no fixed PDF limit, but file size grows with every image. For client reviews, 10–30 well-compressed screens is a practical range; split very long reviews into sections.

Can I add notes to each page?

Images-to-PDF converters place images only. Add annotations in your design app before exporting, or use a PDF editor’s comment tools afterwards.