How To Create Videos With Iphone Template

How to Create a Device Mockup Video from a Screen Recording

Introducing Mock

A few days ago, I needed to create a small-scale video advertizing for our recently launched A Quiet Place app. I figured the easiest thing to do was simply screen record the deployed application I spent so much time developing. 😅 Recording the screen was easy. It'south when I wanted to wrap that recorded video in a device mockup that I started to go crazy. I simply hate googling the same mockup templates and creating the same After Furnishings composition over and once again.

So I did the most sensible thing. I tweeted…

And and so I took action… and developed a uncomplicated MVP of an awarding that tin have a device selection, background color, and screen recording and generate a new video of the screen recording wrapped in the device. It turns a one-half hour job into a i minute job. Give thanks god.

Here's a tutorial

In club to record a screen, I use ane of ii methods: iPhone Screen Recording or ScreenFlow. For the sake of simplicity, allow'southward go with the functionality that'due south built into your iPhone. I borrowed these instructions directly from Apple.

First add Screen Recording to your Control Middle by visiting Settings > Control Center > Customize Controls, then tap "+" next to Screen Recording. Once you've enabled Screen Recording, you can follow the following steps:

Open up Control Center by swiping upwards on your phone.
To capture sound while you record, press deeply on the record button and tap Microphone Audio.
Tap on the record button, then wait for the three-second inaugural.
To terminate recording, open Control Heart again and tap the recording button again. Or tap the red status bar at the top of your screen and tap Stop.

A recorded video will and then exist added to your photo library. I so Airdrop that file to my computer and open Mock on my browser. I then choose the iOS device I recorded from and specify a groundwork color that compliments my recording. Finally, I select the screen recording file on my computer and click "Create Video" to generate a mockup. Depending on the length and size of your recording, this may have a minute or 2. In one case completed, you volition exist presented a link you can right-click to download the concluding limerick.

Created with a Screen Recording and Mock

I love a good timesaver and want to put more than energy behind this app so I created a Product Hunt upcoming page which y'all can subscribe to here. I'1000 inviting all comments and feedback every bit I spend a bit of my free time moving this app from MVP to Launched. I hope information technology saves yous some time and helps y'all share more screen recordings, in style. Thank you!