1-Minute Tutorials: Design Mockups
3 minutes, 3 approaches to creating design mockups
This series of 1-minute tutorials will teach you how to show off your designs as realistic, subtle, or custom mockup in videos or looping GIFs.
To show your design as a video inside a realistic device mockup:
Facebook has a ton of free mockups. You can download all of them or find what you want and download the ZIP. I’m going to download a watch template and I’m going to make a recording of my design in Adobe XD.
I’m gonna make my recording, clicking through to demo the app in use and then I’ll then take the template and the video into Photoshop to make the final, combined recording.
First I’m gonna crop the video with a clipping mask so that I don’t have that extra stuff around it and I’m gonna resize that a bit to fit the watch. I’m gonna move this video below the frame and add a branded background color, pattern, or photo.
Then I’ll look at the timeline to make the animation. I’m gonna check and adjust the length of the animation layers so they all line up and noting is too long or too short. I want them all to be the same length.
When I’m done with all of this, I can render it as a video or export as GIF so it will loop forever.
To show your design as a GIF inside a subtle device mockup:
Sometimes you want a more subtle look to your mockup. A “clay” mockup is a minimal 3D mockup. These examples are from InVision.
When you open the download folder you can read the licensing agreement which tells you how you’re allowed to use the mockups and you can see all of the different device options.
I’m going to take a recording of the phone app I designed in Adobe XD. I’m going to make a recording so it will be able to loop and save that. Then I’ll open the file in Photoshop and bring my screen recording inside.
I’ll resize it to fit and then I’ll go through and organize all these loose layers by converting them to a smart object I’m gonna call ‘Background”.
Next, I’m gonna open up my timeline and create a video timeline. I’ll extend all of my extra layers to be the same length as my video.
I’m also gonna edit my video here in Photoshop, clipping the video so it will make a cleanly looping GIF. When I’m ready, I could render to video or save for web to make it a GIF.
To show your design as a GIF inside a custom mockup:
What if you want to make your own mockup? First I’ll make a recording of my app in XD. I’m also going to adjust the clip using Quick Look on my Mac to make a clean looping video, and I’ll test it a few times just to make sure it works before I save it.
Then I’ll export a PNG of one of my screens to help me draw the custom mockup. I’ll drag that PNG into Illustrator and center it, then draw a custom frame around my screenshot. This could look like anything I want it to look like!
I’ll copy the frame and paste it as a smart object into Photoshop. Then I’ll drag in my video, adjust the size, move it below the frame, and group these as a mockup folder so I can apply a subtle drop shadow. I can adjust this drop shadow however I want.
I’ll open up the timeline, create a video timeline, and adjust my layers to be the same length and then Export > Save For Web to make a GIF.
The takeaways
One minute isn’t a lot of time to cover everything you need to display your work, but these approaches should help you to show off the screen-based work you’re proud of.
