---
title: "Transforming videos 101: How to create animated photo-realistic mockups with Photoshop"
description: Have you ever wondered how to create a photo-realistic mockup with Photoshop? This blog talks you through how to transform your VideoScribe video into one.
image: https://blog.videoscribe.co/hubfs/15%20transforming%20videos%20create%20animated%20photo-realistic%20mockups%20with%20Photoshop.png
---
[](https://www.videoscribe.co/)
- [Home](https://www.videoscribe.co/en/)
- [Using VideoScribe](https://www.videoscribe.co/en/using-videoscribe/)
- [Pricing](https://www.videoscribe.co/en/pricing/)
- [Blog](https://blog.videoscribe.co/)
- [About](https://www.videoscribe.co/en/about/)
- [Help](https://support.sparkol.com/knowledge)
- [Login](https://www.videoscribe.co/en/login/)
- [Try for free](https://www.videoscribe.co/en/free-trial/)
- [Home](https://www.videoscribe.co/en/)
- [Using VideoScribe](https://www.videoscribe.co/en/using-videoscribe/)
- [Pricing](https://www.videoscribe.co/en/pricing/)
- [Blog](https://blog.videoscribe.co/)
- [About](https://www.videoscribe.co/en/about/)
- [Help](https://support.sparkol.com/knowledge)
- [Login](https://www.videoscribe.co/en/login/)
- [Try for free](https://www.videoscribe.co/en/free-trial/)
1. [Home](https://www.videoscribe.co/)›
2. [Blog](https://blog.videoscribe.co)›
3. [How-to Guides](https://blog.videoscribe.co/tag/how-to-guides)›
4. Transforming videos 101: How to create animated photo-realistic mockups with Photoshop
# Transforming videos 101: How to create animated photo-realistic mockups with Photoshop
Posted by [Ashden Walker](https://blog.videoscribe.co/author/ashden-walker) on March 4, 2020
Have you ever wanted to create a photo-realistic mockup with a video in place of the still image? We did, and now we know the trick, we use mockups to showcase VideoScribe all the time! Mockups are a great way to showcase a website, app or design without going through the laborious build process. It helps your client or teams picture a concept and puts them in the perspective of a user with the chosen device or collateral.
You may have read our first [Transforming Videos 101 piece on how to create an animated GIF](https://blog.videoscribe.co/transforming-videos-101-how-to-create-an-animated-gif-from-your-video) from your video. Well, this instalment is specifically about how you can use video within a photo-realistic mockup using Photoshop. Like in our previous post for this series, we will be using our ‘Penne for your thoughts’ video because a) we love pasta, and b) we love puns. Check it out:
Like what you see? Did you know you can create your own whiteboard animation style videos with VideoScribe - sign up today to get access to our [7 day free trial](https://www.videoscribe.co/en/free-trial).
Now, this edition of Transforming Videos 101 is written with an assumption that you have a basic understanding of Adobe’s Photoshop app and of course, an active Photoshop subscription.
## How to create photo-realistic mockups using Adobe’s Photoshop
One of our favorite sources for free mockups is [Mockupworld](https://www.mockupworld.co/). These guys have stacks of free .psd mockups, from business cards to magazine covers - there’s a free mockup for every piece of your marketing collateral. In this example, we’re going to show you how to make your video ‘play’ on a device.
### **Step 1:** Find a design that you’re happy with
We searched ‘iPad’ to find our mockup.
### **Step 2:** Open your downloaded .psd file in Photoshop
Open your chosen design in Photoshop and locate the editable screen layer.
### **Step 3:** Add a new video layer
Double click on the layer and clear the placeholder content. Once you have a blank canvas, you add in your video file. Click ‘Layer’, scroll down to ‘Video Layers’ and select ‘New Video Layer From File…’. Locate your video and import.
****
### **Step 4:** Make the background fill the canvas
Once your video layer has been imported, adjust the size of the video so it fills the canvas. Because our video doesn’t perfectly fit the canvas size, we’re going to add in a generic iPad background so it looks as though it’s playing through YouTube.
Before:
After:
### **Step 5:** Save your video layer
Once you are happy with the positioning of your video, click ‘Save’ and then head back to the master mockup. Here, you’ll see the video in situ of the mock.
### **Step 6:** Adjust the timings
Make sure your Timeline view is visible on your master mockup screen and adjust all of your assets “run length” to the full length of your video. That way all layers - including the iPad mock, background and shadow - will be visible for the length of our video. Here’s our before and after:
Before adjusting:
After adjusting:
### **Step 7:** Final touches and export your mockup
With these timeline adjustments, the video and mockup will now play alongside each other. With a few additional tweaks to the primary colors (to make it more in line with our VideoScribe brand), we’re now ready to export. Click ‘File’, ‘Export’, ‘Render Video…’, make your preferred adjustments then click ‘Render’. That’s it. Here’s our finished product, in GIF format, thanks to EZGIF:
-1.gif?width=525&name=ezgif.com-crop%20(17)-1.gif)
Want to know how you can transform your video into a GIF? Read our blog post on [how to create an animated GIF from your video](https://blog.videoscribe.co/transforming-videos-101-how-to-create-an-animated-gif-from-your-video).
## How other brands have showcased using photo-realistic mockups
By now, hopefully you’ve got some ideas on how you can create a range of photo-realistic animated mockups. But in case you’re lacking in the inspiration department, we’ve done some digging and found three examples of other brands using photo-realistic animated mockups.
### Apple
In this [Activity support article](https://support.apple.com/en-gb/HT204517) by Apple, the Apple Watch loads with a blank face. After 3 seconds the activity rings load and you get a full idea of how you’d be tracking your activity with the Apple Watch and the Activity app. Very nice execution by Apple with an infinitely looping GIF to showcase the users experience with the watch face.
-1.gif?width=804&name=ezgif.com-video-to-gif%20(18)-1.gif)
### Google
Google has showcased the collaborative use of Google Docs very cleanly on their [About page](https://www.google.co.uk/docs/about/). The white laptop mockup plays host to an example of multiple contributors editing a Google Doc in real time. Like Apple, they have also opted for an infinite loop with this animation.
-2.gif?width=809&name=ezgif.com-video-to-gif%20(19)-2.gif)
### Venmo
The final example we're showcasing is by [Venmo](https://venmo.com/). These guys make paying back friends and family easy and their animated mockups showcase the user interface in action.
-4.gif?width=808&name=ezgif.com-video-to-gif%20(20)-4.gif)
Regardless of how you choose to use your animated photo-realistic mockup, the main thing is, now you know how to do it! Keep your eyes peeled for our upcoming blogs in the Transforming Videos 101 series, with the next release suited for the presenters and pro-PowerPoint users among us.
If you’d like to create a similar video about how much you love pasta, pizza, or just the Italian cuisine in general like us, sign up to your [7 day free trial](https://www.videoscribe.co/en/free-trial) with VideoScribe.
Topics: [How-to Guides](https://blog.videoscribe.co/tag/how-to-guides)
[.png "VideoScribe")](https://www.videoscribe.co/en/free-trial)
## Start your 7 day free trial today
Instant access, no upfront payments, no risk
[](https://cta-redirect.hubspot.com/cta/redirect/5474140/fedeff97-352f-4443-a1ed-2d842315ae4a)
### Subscribe to our blog
### POPULAR POSTS
- 
[8 Powerful storytelling techniques for unforgettable presentations](https://blog.videoscribe.co/8-classic-storytelling-techniques-for-engaging-presentations)
- 
[The 12 brand archetypes, and how to bring yours to life in video](https://blog.videoscribe.co/12-brand-archetypes-all-successful-businesses-are-built-on)
- 
[These 8 Christmas Movie Speeches Will Yank At Your Heartstrings](https://blog.videoscribe.co/these-8-christmas-movie-speeches-will-yank-at-your-heartstrings)
- 
[65% of People Prefer Visual Learning, Is Teaching Keeping Up?](https://blog.videoscribe.co/65-of-people-prefer-visual-learning-is-teaching-keeping-up)
- 
[Why the First 10 Seconds of Your Video Matter (And How to Nail Them)](https://blog.videoscribe.co/first-10-seconds-video-engagement-tips)
### YOU MIGHT ALSO LIKE
[How to build VideoScribe projects that are easy to update and maintain](https://blog.videoscribe.co/how-to-build-videoscribe-projects-that-are-easy-to-update-and-maintain)
June 17, 2026
[Blackboard animation videos? VideoScribe can do that too!](https://blog.videoscribe.co/blackboard-animation-videoscribe-can-do-that-too)
May 28, 2026
[Video Themes: How to Choose and Set One in VideoScribe](https://blog.videoscribe.co/how-to-choose-and-set-a-theme-for-your-videoscribe-video)
May 25, 2026
### COMMENTS
[](https://www.sparkol.com/en/)
### Company
[About us](https://www.videoscribe.co/en/about/)
[Using VideoScribe](https://www.videoscribe.co/en/using-videoscribe/)
[Help and Support](https://help.videoscribe.co/knowledge)
[Pricing](https://www.videoscribe.co/en/pricing/)
[VideoScribe Legacy](https://www.videoscribe.co/videoscribe-legacy)
[Security](https://www.videoscribe.co/en/security/)
[VideoScribe by Sparkol](https://www.videoscribe.co/en/who-is-sparkol/)
### Partners
[Affiliates](https://ui.main.com/merchant-profile-terms/18788)
[Resellers](https://www.videoscribe.co/en/resellers/)
### Legals
[Terms of use](http://www.sparkol.com/legal?__hstc=174690109.1bad370ff82786bc535d3bdf9bc915a2.1733304386981.1767788977555.1767789106068.1165&__hssc=174690109.3.1767789106068&__hsfp=425688717)
[Privacy policy](https://www.sparkol.com/privacy?__hstc=174690109.1bad370ff82786bc535d3bdf9bc915a2.1733304386981.1767788977555.1767789106068.1165&__hssc=174690109.3.1767789106068&__hsfp=425688717)
[Cookies](https://www.sparkol.com/cookies)
### Inspiration
[Templates](https://www.videoscribe.co/en/templates/)
[Our blog](https://blog.videoscribe.co/)
[Academy](https://www.videoscribe.co/en/our-academy/)
### Get in Touch
Sparkol Limited - UK
T: +44 (0)117 428 6117
Sparkol Limited - USA
T: 646-475-1630
```json
{
"@context" : "https://schema.org",
"@type" : "BlogPosting",
"author" : {
"@type" : "Person",
"name" : "Ashden Walker",
"url" : "https://blog.videoscribe.co/author/ashden-walker"
},
"dateModified" : "2021-11-23T11:32:07.245Z",
"datePublished" : "2020-03-04T08:41:25.000Z",
"headline" : "Transforming videos 101: How to create animated photo-realistic mockups with Photoshop",
"image" : [ "https://blog.videoscribe.co/hubfs/15%20transforming%20videos%20create%20animated%20photo-realistic%20mockups%20with%20Photoshop.png" ],
"mainEntityOfPage" : {
"@id" : "https://blog.videoscribe.co/transforming-videos-101-how-to-create-animated-photo-realistic-mockups-with-photoshop",
"@type" : "WebPage"
},
"publisher" : {
"@type" : "Organization",
"logo" : {
"@type" : "ImageObject",
"url" : "https://blog.videoscribe.co/hubfs/VideoScribe-Logo%20(1)-min.png"
},
"name" : "Sparkol"
}
}
```
```json
{
"@context" : "http://schema.org",
"@type" : "Article",
"author" : {
"@type" : "Person",
"name" : "Ashden Walker"
},
"dateModified" : "October 1, 2026, 10:01:49 AM",
"datePublished" : "2020-03-04 08:41:25",
"description" : "Have you ever wondered how to create a photo-realistic mockup with Photoshop? This blog talks you through how to transform your VideoScribe video into one.",
"headline" : "Transforming videos 101: How to create animated photo-realistic mockups with Photoshop",
"image" : {
"@type" : "ImageObject",
"url" : "https://f.hubspotusercontent40.net/hubfs/5474140/15%20transforming%20videos%20create%20animated%20photo-realistic%20mockups%20with%20Photoshop.png"
},
"mainEntityOfPage" : {
"@id" : "https://blog.videoscribe.co/transforming-videos-101-how-to-create-animated-photo-realistic-mockups-with-photoshop",
"@type" : "WebPage"
},
"publisher" : {
"@type" : "Organization",
"logo" : {
"@type" : "ImageObject",
"url" : "https://5474140.fs1.hubspotusercontent-na1.net/hubfs/5474140/VideoScribe-Logo%20(1)-min.png"
},
"name" : "This email is sent to you by Sparkol Ltd on behalf of The Sparkol Group: home to VideoScribe, Sparkol Studio & Sparkol Academy https://www.sparkol.com/legal. Sparkol Ltd. is registered in England and Wales with registration number 06762963"
}
}
```
```json
{
"@context" : "https://schema.org",
"@type" : "BreadcrumbList",
"itemListElement" : [ {
"@type" : "ListItem",
"item" : "https://www.videoscribe.co/",
"name" : "Home",
"position" : 1
}, {
"@type" : "ListItem",
"item" : "https://blog.videoscribe.co",
"name" : "Blog",
"position" : 2
}, {
"@type" : "ListItem",
"item" : "https://blog.videoscribe.co/tag/how-to-guides",
"name" : "How-to Guides",
"position" : 3
}, {
"@type" : "ListItem",
"name" : "Transforming videos 101: How to create animated photo-realistic mockups with Photoshop",
"position" : 4
} ]
}
```