A few days ago, I needed to create a small video advertisement 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’s 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 Effects composition over and over again.
So I did the most sensible thing. I tweeted…
And then I took action… and developed a simple MVP of an application that can take a device selection, background color, and screen recording and generate a new video of the screen recording wrapped in the device. It turns a half hour job into a one minute job. Thank god.
Here’s a tutorial
In order to record a screen, I use one of two methods: iPhone Screen Recording or ScreenFlow. For the sake of simplicity, let’s go with the functionality that’s built into your iPhone. I borrowed these instructions directly from Apple.
First add Screen Recording to your Control Center 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 Control Center by swiping up 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 countdown.
- To stop recording, open Control Center 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 then be added to your photo library. I then Airdrop that file to my computer and open Mock on my browser. I then choose the iOS device I recorded from and specify a background 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 take a minute or two. Once completed, you will be presented a link you can right-click to download the final composition.
I love a good timesaver and want to put more energy behind this app so I created a Product Hunt upcoming page which you can subscribe to here. I’m inviting all comments and feedback as I spend a bit of my free time moving this app from MVP to Launched. I hope it saves you some time and helps you share more screen recordings, in style. Cheers!