Website Mockups

Let's learn how to make some simple website mockups like the one you see below or the others on my work page for FREE, step by step.

If you search for website mockups or something similar you might find an automated service or different templates to use. I found automated ones when I first searched a while back, but they had the same page shown on each device. Sometimes, I want to showcase different pages or have a modal/menu open, so I ended up creating a step-by-step to achieve this easily in a couple of minutes.

Step 1

Go to your site, open the Chrome DevTools, toggle Device Toolbar, and set your width/height using the table below. Check out your site at each size and decide what you want each device image to focus on.

If you're doing a couple sites, you might want to add the following custom device dimensions to speed yourself up.

Step 2

When you're ready click the three dots along the top right, Run Command and type/run Capture Screenshot. Taking screenshots this way is much better compared to using an extension or another tool I've found.

Step 3

Once you've got your screenshots, you need to download the mockup template, which can be found in my Portfolio GitHub repo.

Step 4

Now go to Photopea, which is a free in-browser graphics editor, and open the template file you just downloaded.

I'd suggest installing their PWA to save some space along the top of your screen.

Step 5

In the layers menu (on the right-hand side), open the paste your designs here layer.

Step 6

Double click the picture-in-picture-looking box to the left of your desired device.

This will open a new tab/file with a paste here layer.

Step 7

Drop this device's screenshot taken earlier now and stretch it out to fill the whole box.

You can now save and close that tab.

Ctrl+S or click File > Save as Smart Object

Step 8

On your mockup_template.psd tab, that screenshot should now be visible.

Step 9

Repeat steps 6-8.

Step 10

When you're finished File > Export As > PNG. Change the file name, width, height, and save.

Step 11

Run the file through TinyPNG to compress it a bit and download it.

Note: This step isn't necessary at all.

Step 12

Voila! Finished.

As a side note, feel free to move around or remove certain devices if you don't want/need them. All of the mockup images on my portfolio are the same, but yours don't need to be!