Payment app mockups for videos and thumbnails

Not every payment screen in a video has to be tapped. A thumbnail, a title card, a storyboard frame or a screen composited onto a phone in post needs a picture, and the picture has to read in a fraction of a second. This guide covers making one from Tender, Pozer’s Cash App-style payment app, and the handful of decisions that make it work: where the picture comes from, which number carries it, and what it claims.

A picture is a claim

An image travels further than the video it was made for, and it carries none of the context with it. A picture of a payment, sent to a real person as a real payment — a seller, a landlord, someone selling tickets — is fraud, whichever tool drew it, and accounts that do it are closed. The same goes for a picture of incoming payments put up to talk people into sending theirs.

A balance on a thumbnail is a claim too. Beside a title about making money, it reads as your money, and presenting simulated money as real earnings, to sell a course, a method or a mentorship, is prohibited by our acceptable use policy. Make the picture say what the video is: a skit, a story, a parody.

Two ways to get the picture

Export it from the editor

At the bottom of the editor’s panel, under Create home-screen app, is Export PNG (3x). It saves the screen exactly as the preview shows it — the app alone, without the phone frame, glare or shadow around it — at three times its drawn size: a tall image, 960 by 2079 pixels, named cash-mockup.png. On the free tier the preview carries the SIMULATED · POZER.COM mark, so the export does too; Pro exports the screen without it. Either way it’s a plate for dropping onto a phone in a thumbnail, or tracking onto a screen in post.

It exports whichever tab the preview is showing. Tap Activity in the preview’s bottom bar and the export is the Activity list; tap Money to go back. The buttons that open the keypad do nothing in the editor — the keypad belongs to the installed app — so an export is always one of those two tabs, at whatever figures you’ve typed.

Export while the figures are in front of you. The editor opens on the template’s defaults every time, and a published app is changed from its own Edit panel on the phone, which has no export. So set the figures, export, change them, export again. While the editor stays open, Update app republishes the same link with whatever you’ve changed — any phone still holding an old take gives it up for the new version when that reaches it — so the app you film and the stills you export can come out of one sitting. Reset values, under the export button, puts every field back to the defaults — export before you press it.

Photograph the installed app

For a thumbnail with a hand, a face and a phone in it, shoot the real thing: the app installed on a phone and photographed like any other object. It looks like a phone because it is one, with the phone’s own status bar across the top. The installed app carries a SIMULATED · POZER.COM mark on the free tier, and Pro, at US$12.99/mo, removes it.

Make one number carry it

A thumbnail is seen small, and at that size a whole phone screen is texture. On the Money tab one line survives: the Cash balance, the largest type on the screen. The account and routing tails, the Paychecks row and the to-goal line are detail for a close-up, not for a thumbnail.

• Let the balance lead. Scale the screen until the Cash balance reads at thumbnail size; the rest of the screen can fall back into texture around it.
• A shorter number reads faster. $42,680.50 is ten characters to take in at a glance. Decide whether the story needs one that long.
• Let it have cents. The balance always prints them, so $40,000.00 on a thumbnail announces that somebody typed it, where $39,412.06 doesn’t.
• Contrast with the thumbnail, not the app. Out of the box the app is pale grey with white cards, the brightest shape on a dark thumbnail. For a light thumbnail, set Background to a dark colour and everything on the screen follows it.
• Match the video. If the thumbnail shows $1,240.18, the video should show $1,240.18 somewhere. People who click for a number notice when it never appears.

Three layouts that work

• Phone in hand. A face, a hand and the installed app, photographed. Tilt the phone a few degrees off the light so the glass doesn’t flare, and let the balance be the brightest thing in the frame after the face.
• The screen, enlarged. Scale the export up beside a face or an object until the balance line reads. It’s drawn at three times the screen’s size, so it holds up at that scale without going soft.
• Before and after. Two exports side by side, framed identically, with only the figure changed. The same screen at $2,316.40 and at $16.40 tells a story without a word of text.

Keep it your own app

Nothing on the Money tab names the app — the header is only initials and a tag — and the app’s name and icon live on the home screen, not on the screen you export. So a mockup leaves the brand out, and it should stay out.

• No real company’s logo beside it. Tender is described as Cash App-style so it can be found, not so it can be passed off, and it isn’t affiliated with Cash App. Adding another company’s logo or trade dress to the picture is against our acceptable use policy.
• An accent of your own. The accent colours the $ button, the savings ring, the check beside Paychecks and the initials. Keep the default teal or pick a colour for your fictional app, not a real payment app’s signature green or blue.

Stills inside the video

Stills belong in a video in a few places: a storyboard or animatic before the shoot, a one-second cutaway to the balance, a screen composited onto a phone that was shot blank or green. Export the plate at the figures the scene needs, and export again for every state the story passes through — before and after a payment are two images, each typed in the editor.

The export is 9:19.5, close to the shape of most current phones. For a phone with a different screen shape, trim a sliver from the top or bottom edge rather than stretching the image: a squashed balance is the kind of thing viewers notice without knowing why.

For anything a character does on the phone — typing an amount, tapping Pay, the receipt coming up — use the installed app instead. A still can’t respond to a thumb, and those moments are all thumb; how to film a money-sent scene covers them. For thumbnails that come out of a skit, each of the payment app skit ideas lands on one line of the screen, which is the line to build the thumbnail around. The simulator guide walks through the whole app.