Question on screen recording WF websites for Social media portfolio

Hey

I want to screen record my Webflow websites and somehow crop them so they show the website only and then add a nice background and drop shadow to the video (like the attached) with the aim of creating nice-looking Instagram content of my work.

Is there software that is relatively easy to use to do this? Or am I going to have to learn how to use After Effects? I have tried VEED but it’s not got what I need.

Thanks

Hey Reece! I like to use useloom.com for my screen recording and screely.com for my screenshots. (Check out Screely’s Chrome extension - it’s fantastic.)

If you use Loom, then just select “Record Current Tab” instead of “Record Full Screen” and it will crop to just the viewport. (Note that there’s an issue [maybe it’s a feature?] when you do this where when you click a dropdown, the dropdown items do not show in the recording. That’s the only issue I’ve found in this mode versus full screen!)

Hope that helps!

1 Like

Hey @mattvaru

I already used loom but there isn’t an option to record just the website and not the full window, is there? I don’t want to include all my bookmarks and extensions etc.

Screely looks awesome for screenshots, thanks :slight_smile:

1 Like

Hey Reece - correct me if I’m wrong here, but choosing “Current Tab” (see below) cuts it down to just the viewport, excluding bookmarks, extensions, etc.

See here (a recording of “Current Tab”):
https://www.loom.com/share/f242736078e142e28240e6529028ab46

@mattvaru You are 100% correct - I have no idea what I pressed previously.

Thanks for your help. Now to add the background and drop shadow :thinking: Do you know what the best software for this would be?

edit: I have Adobe CC and sketch etc., just not sure what can or should be used for stuff like this.

:grin:

1 Like

Honestly, I’m not well-versed in that part, but I think @vincent might be of some assistance! I think he’s got experience in post-production software like Premiere/After Effects, if I’m not mistaken. Wish I could be of more help!

1 Like

@mattvaru No problemo thanks for the help

1 Like

Automatic shadow for capture is handled by numerous screen capture tools but for images only, not video. Cloudapp, Monosnap… they kind of do that. You can try looking for more of those tools to see if one have such a feature for videos. There are tons of tools. There aren’t a lot of chances one does it by default. As Matt said it’s a post production job so you’re looking at Premiere Pro, After Effects, Photoshop (not the best at video but it’s capable), Final Cut & co.

You can also try to see what the marketing specialists tools can do, they have tons of the exact templates you’re refferring to, they’re the tools used to craft social media videos.

Those services are quite incredible.

2 Likes

Thanks @vincent. Will do some more research into the above and will post a link in this thread if I happen to find some amazing tool that does it all. (and simple to use)

Also After Effects isn’t needed here, it’s overkill. Premiere and Photoshop should do ok.

2 Likes

Hi there.

I think you’ll find that Screenflow will do what you want. It’s pretty amazing.

1 Like

Thanks Ill check it out :slight_smile:

Hey @PiXL3

Are you able to crop the media/video you import in Screenflow?

Thanks,
Reece

Yes. You can use Screenflow to crop prior to recording or even after.

The timeline based editing is really useful and you can import external stuff like other video and images.

Screenflow is perfect for something like this!

It’s easier to work with than Premiere or Photoshop for simple screen capture needs because it’s not intended to be a full video editing/photo editing tool.

What you’re trying to do is the exact process I used to create this. The background is just a static image and the animation is a separate video file. The cropping, shadow, and rounded corners were all done in Screenflow.

3 Likes

Hi @Reece_Gunningham

Sabba from http://veed.io here :raised_hands:

We made a video to show you exactly how to make a mock up video online

Thanks!
Sabba

Adding such effects seems too complicated with general screen recorder. My RecMaster screen recorder doesn’t have this editing function too, even it helps me cut or trim video in a desired way.

The only screen recording software I know that is able to help you achieve that is Camtasia. You will be able to complete your work easily and quickly. But it’s too expensive. If you’ve already had a video editor, maybe you could use Joyoshare Screen Recorder to record videos first. It is simple, yet very capable. It is much cheaper as well.

I use Movavi Video Suite for that.
This suite combines the products of:

  • Movavi Video Editor.
  • Movavi Video Converter.
  • Movavi Screen Recorder.
  • Movavi’s extra multimedia features, such as its player.
    If you would like to learn more about Movavi Video Editor, please check out the article: Movavi Video Suite Review