Christian Heilmann

Quick tip: creating round “talking heads” videos in Screenflow

Monday, August 23rd, 2021 at 9:56 am

Adding your face in a small circle to videos has become fashionable lately and some extensions do that automatically for you. Good old Screenflow, which I’ve used for years now, has no masking option though. But you still can achieve round videos using a setting and learning that screenflow’s sliders are weird.

By default, Screenflow will record the video in full size (in my case 1920 by 1080 pixels), resize it and place it on the bottom right.

The default size and setting of the camera recording in Screenflow

Make sure the video is active, indicated by a yellow border around it, and select the Video tool. This gives you all kind of settings to play with. First, reset the scale to 100% and the position to 0 and 0, which shows the video as full screen covering the other recording.

Resizing and placing the video to be full screen so that you can change the dimensions

Now you need to ensure that your video is square and that you set the right border-radius. The problem here is that Screenflow’s sliders don’t go further than 400. I suppose that’s some legacy debt when videos were 800 by 600 pixels. You can, however, enter any number in the text fields.

In my case, the video is 1920 by 1080, so in the crop setting I need to take 420 pixels from the left and the right as (1920 – 1080) / 2 = 420. For the radius I need to set 540 because the final video is 1080 by 1080:

The video settings panel with the right settings

And that results in a rounded video:

Final version of the rounded video

The last step is to set the scale and place the video. And you can add a drop shadow if you want to:

Scaled rounded video, placed bottom right with a drop shadow

Share on Mastodon (needs instance)

Share on Twitter

Newsletter

Check out the Dev Digest Newsletter I write every week for WeAreDevelopers. Latest issues:

Dev Digest 146: 🥱 React fatigue 📊 Query anything with SQL 🧠 AI News

Why it may not be needed to learn React, why Deepfake masks will be a big problem and your spirit animal in body fat! 

Dev Digest 147: Free Copilot! Panel: AI and devs! RTO is bad! Pi plays!

Free Copilot! Experts discuss what AI means for devs. Don't trust containers. Mandated RTO means brain drain. And Pi plays Pokemon!

Dev Digest 148: Behind the scenes of Dev Digest & end of the year reports.

In 50 editions of Dev Digest we gave you 2081 resources. Join us in looking back and learn about all the trends this year.

Dev Digest 149: Wordpress break, VW tracking leak, ChatGPT vs Google.

Slowly starting 2025 we look at ChatGPT vs Google, Copilot vs. Cursor and the state of AI crawlers to replace web search…

Dev Digest 150: Shifting manually to AI.

Manual coding is becoming less of a skill. How can we ensure the quality of generated code? Also, unpacking an APK can get you an AI model.

My other work: