web design


warm coffee, sharp pencils, & good reads 

welcome to the blog



How to Create a Desktop Mockup in Canva


Desktop computer on a white desk showing the homepage of a website

Have you ever wondered how people create gorgeous desktop mockups? Today I’m sharing a step by step walkthrough to teach you how to create a desktop mockup in Canva in under 5 minutes!

Video – How to Create a Desktop Mockup in Canva

If you’re all about watching step-by-step tutorial videos, just click below and I’ll walk you through it all!

Step by Step – Written Instructions

If you love reading through the steps and taking a peek at screenshots, keep on reading!

Step #1

First, login to Canva or create a free account over at https://www.canva.com/

Screenshot of Canva homepage

Step #2

Second, select “Use Custom Dimensions” in the top right corner if you are going to be creating the mockup for a website banner.

Screenshot of Canva homepage

If you are creating the mockup to use on any social media platform (i.e. Facebook, Instagram, Twitter, etc.) select the “+” sign in the top right corner that says “More”. Then select the appropriate social media post template. This will make sure the proper dimensions are used.

Screenshot of the "Create a Design" screen on Canva

Step #3

If you are entering your own custom dimensions, get the pixel dimensions of your image by right clicking it and viewing its properties. Once you have the dimensions, enter them at the top and click “Design.”

Note that if you selected a social media template, you won’t need to manually enter the dimensions.

Screenshot of the dimensions screen on Canva

Step #4

Click “Uploads” on the left hand control panel and then click “upload your own images” to upload your images.

Screenshot of a blank canvas on Canva

Once your image appears on the left, click and drag it onto the blank canvas.

Then, resize the image by expanding it to take up the whole blank canvas space.

Screenshot of a desktop mockup stock photo on Canva

Step #5

Upload your second image. This is the image that you want to mockup on the blank computer screen.

Screenshot of a desktop mockup stock photo on Canva

Step #6

Resize the image to fit just inside of the blank computer screen. Remember to leave a black border for the frame of the computer.

Screenshot showing how to create a desktop mockup Canva

Step #7

Export your new image by clicking on “Download” in the top bar.

Select whatever file type is best for you.

Screenshot showing how to export a photo on Canva

Step #8

Congratulations! You’re all done!

The new image should be saved to your desktop, or downloads, or wherever you chose to save it!

Screenshot showing the completion of a photo export on Canva


Graphic showing how to create a desktop mockup in Canva

Leave a Reply

Your email address will not be published. Required fields are marked *