It’s no surprise that here at Moyo, we love mockups. In fact, some could say that it’s our specialty! As a creative entrepreneur, there’s a good chance that you’ll be wanting to share your awesome work with the world whether that’s your own website, or your latest design work for a client. Device mockups (such as iPhones, iPads or laptops) offer a simple and effective way to do this. Not only do they put your work into context, but they elevate a basic screenshot and turn it into visual content that’s more sympathetic to your design and more engaging to the viewer.

How to insert a screen mockup

With stock photo mockups, at Moyo we use Photoshop smart layers so you can quickly and easily insert your screen designs. These smart layers are simply pre-made placeholders for your image, which have been specifically created to fit an image exactly in the designated screen space.

With a Photoshop mockup that uses smart layers, you simply double click the smart layer thumbnail, place your file and save. That’s it! You have a ready-to-go lifestyle image that shows off your design and is perfect for posting online. No spending hours setting up a photoshoot, battling with the light and dealing with dreaded screen glare. With a few clicks you have your work displayed in all its glory, ready to be posted on social media or added to your website.

Preparing the screenshot

To make this process as quick and easy as possible, this mostly comes down to the preparation of a screenshot. Have you ever needed to use an iPhone photo mockup, so you proceed to take a screenshot on your phone, then email or Bluetooth it to your computer? Or perhaps you’ve wanted to use an iMac mockup, and taken multiple screenshots on your laptop only to have to crop and stitch them together to a big enough screenshot that’ll fit the mockup image? Yep, we’ve been there too.

These types of processes are long, frustrating and waste valuable time and energy. Time and energy that can be better spent working on your creative, fulfilling and revenue generating projects instead. If you sometimes find yourself spending more time creating the screenshot than creating the image, these following screenshot hacks are for you!

Why you need the correct sized screenshot

If you want your website to look its best, firstly you’ll need to insert the right sized screenshot for the device you’re mocking it up in. If you’re trying to use a screenshot taken on laptop and then try to squeeze it into an iPad mockup, the dimensions will be all off. Not only will this compromise your original website design but it simply won’t be the right sized image for the space.

Fortunately, there are some easy ways to create the perfect sized screenshot that will fit your mockup exactly and best of all, they take a matter of seconds. Below, we’re going to be sharing with you our favourite tips and tricks for getting your screenshots prepared properly, so you can get the most out of your mockups and save valuable time, too.

Screenshot browser extensions

First off, you’ll be wanting to add a couple of tools to your design toolkit. When we say tools, we mean nifty browser extensions to resize the screen to the exact device ratio and to take a full length screenshot of a website. You may only want a certain section of your site, but having a full length screenshot is super helpful for adding variety to your mockups, more of that later on.

Our favourite browser extension for screenshots

We tend to use Google Chrome and there are a number of browser extensions that offer these features, but the two we use are:

1. ‘Window Resizer’

The ‘Window Resizer’ extension resizes your browser to the exact size and dimension of a specific device. So, if you want to take a screenshot of your website on an iPhone or an iPad from your laptop, this will do this for you perfectly. If you’ve ever guestimated a screenshot size by zooming in and out of your screen and hoping for the best (yep, we’ve definitely done this) this will be a lifesaver.

2. ‘GoFullPage’

This extension takes a full length screenshot of any webpage and allows you to save it in your preferred image format.

How to install browser extensions

To install these extensions, you simply need to go to your browser webstore and ‘add’ or install to your browser. For example, the Google Chrome extensions can be found here. You will then see that these extensions have been added to your browser toolbar and you can arrange these accordingly as to how frequently you’ll be using them. We use them often, so they tend to take pride of place in our toolbar.

How to take a full length screenshot

1. When you’re on the website that you want to take a screenshot of, click the Window Resizer icon and select from the drop down the device that you want to display your screenshot in. When you click it, your screen will automatically adjust to the exact ratio of the device.

If you want to flip the orientation of the screen, select the ‘Rotate the viewport’ icon on the right hand size. (This is perfect for showing responsive designs on on portrait or landscape iPad.)

If you want to create a screenshot for a custom dimension, you can even input specific values and it will adjust the screen size accordingly.

2. Next, you’ll be wanting to take the screenshot which is where the handy ‘Full Page Screen Capture’ comes in. Rather than taking a screenshot the old fashioned way (i.e. CMD+SHIFT+3 on a Mac) simply click on the Full Page Screen Capture icon, which will take a screenshot of the entire webpage from top to bottom. It also does so with a very aesthetically satisfying pacman style progress bar which always puts a smile on my face. (It’s the little things!)

3. Once it’s taken the screenshot, it will present it to you in a new window. At the top of the newly loaded webpage you will see a black toolbar with various options.

In the Full Page Screen Capture toolbar, you can also see that there is a ‘settings’ icon which is where you can specify the type of image format (jpg, png etc) that you want for your screenshot.

Click the download icon, which will automatically save the screenshot in your ‘downloads’ folder.

That’s it! You now have a full length screenshot of your website, with the perfect ratio and size for your mockup.

How to take a screenshot without a browser extension

Now, there is an even quicker way of taking screenshots for Chrome users. A simple keyboard shortcut can generate different sized screenshots without even having to use an extension.

1. To take a screenshot using Chrome, use the keyboard shortcut CTRL + SHIFT + I for Windows or CMD + OPTION + I for macOS to open the Developer Tools. In the left hand corner there should be an icon of a phone and tablet. Click this to turn on the device toolbar or press the CMD + SHIFT + M.

2. The webpage you are on will be presented in a formatted window. In the top toolbar you can select the various sized devices and even rotate the screen.

Don’t see the device you need? No problem. In the device dropdown you will see the ‘Edit’ option. Click this and then select your desired device and it’ll automatically resize your webpage to the correct ratio.

3. Next, in the right hand corner you will see three vertical dots. Click these and then select ‘Capture Screenshot’ or ‘Capture Full Size Screenshot’ for the full length screenshot of the website.

This will then automatically download and there you have your screenshot, ready to be inserted into your mockup!

How to display a website screenshot

Having a full length mockup image is always great to have on standby, as it gives you lots of options when you want to maybe display different sections of your site. It could be that you want to display below the fold of the landing page in cases when you want to highlight certain sections or design features.

To do this, you could use a laptop or horizontal iPad mockup and insert the full length screenshot straight on top of the image (no smart layer required). If you don’t use Photoshop and use other software like Canva, you could easily do this too!

Scale the screenshot to fit to the edge of the screen placeholder and allow the image to extend beyond the device. This is particularly effective when your device is centred in the frame and the screenshot extends to the edge of the image.

If you’ve had headaches over screen mockups, we hope that these tools and tricks prove to be useful and save you valuable minutes when preparing your images. Let us know in the comments section below if you have any favourite tools you like to use, or if you try out any of these tips we’ve shared!

The photo mockups used in this blog post can be found in The Modern Neutral Lifestyle and Lifestyle iPad collections, and we also used Montgo Multi Device Scene Creator to create the additional mockup graphics.