Streaming live at 10am (PST)

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.

IMG_5216

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”):

@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.

renderforest.com


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.

http://www.telestream.net/screenflow/overview.htm

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.

1 Like