Video Tutorial: Scrolling Video Mockup

don’t stop this scroll!

In this tutorial we’ll teach you how to record your own scrolling video (think a video showing off your website revamp, sneak peak of an upcoming release, or anything you feel like showing off in depth!), and then add it to the screen of a desktop mockup image in order to add a compelling element to a static image.

IMPORTANT: Make sure to choose a large background image in order to keep the quality of your video as high as possible (you can always scale it down later).

YOU’LL LEARN HOW TO USE PHOTOSHOP TO INSERT A SCROLLING VIDEO TO A COMPUTER MOCKUP BY:

1. Picking the correct dimensions for your document in Photoshop

2. Setting up your background image

3. Creating a smart object overtop the laptop screen in the image

4. Resizing the smart object to match the background image

5. Capturing a scrolling video of your website for the mockup

6. Inserting & resizing your video into the smart object layer

7. Creating a video timeline in order to have your video play properly

8. Adjusting opacity for realism

9. Creating a video timeline for your background image to create the final animation

10. Adding layer styles to your screenshot mockup to create gradients, patterns and different blending modes & opacity to make your screen blend in with your image

11. Exporting your file as an mp4

Watch the Tutorial Video Now

Not a Photoshop user but still want to use mockups to their full potential?

While you can’t create the same scrolling feature in Canva, you can insert a static photo — whether it’s a screenshot of your website, latest service offering, or newest product, mockup stock photos are there to help you promote your brand!

Learn how to add your website screenshot to a mockup photo using Canva.