How To Fit Your Screenshots To Mock-Ups

Let’s talk about how we can instantly make your opt-ins, blog posts and branding look super professional by using smartphone and tablet mock-ups to show off your content.

Firstly, what is a mock-up?

Mock-ups span a variety of categories, but simply put:

A mock-up is a stock image with a certain, intended place for your design, screenshot or message to make it look like it was intentionally photographed that way.

Case in point, the image on the left is a mock-up, and the image on the right is the final result once I’ve inserted my screenshot.

What kind of mock-ups can you get?

Pretty much anything! Typically for online businesses, the most common ones tend to be:

Smartphone or tablets
Frames
Mugs and tote bags
Plain notepaper and business stationery
Invites and event stationery

But you can also get t-shirt mock-ups, product packaging mock-ups, even mock-ups for cars!

What are they used for?

You can use them for so many things, but a few examples include:

Blog posts
(insert a screenshot of your blog post into a smartphone mock-up for instance)

Opt-ins
(showcase your opt-in landing page on a big computer screen)

Products
(display your designs on mugs, bags, journals etc)

Branding
(show off your logo, moodboard or values on stationery mock-ups)

Designs
(showcase your wedding invites or calligraphy services on stationery mock-ups)

Quotes
(show off your prints, quotes or headshots in frame mock-ups)

There’s seriously so many more uses for mock-ups, but you get the drift. If you need some more ideas, check out this post for 7 unique ways to use mock-ups.

(If you fancy picking 9 FREE mock-ups from the members library, sign up by taking the Instagram Quiz here)

In this post however, I’m talking about smartphone and tablet mock-ups, and how to overlay your design or screenshot in Canva so it looks realistic – and I promise, anyone can do this!

(Not got a Canva account? Why not? You can sign up with a free plan here)

How To Make Your Smartphone or Tablet Mock-Up Look Realistic

1: Let’s start with your intended template open and the mock-up image as the background. In this instance, I’m using an iPad mock-up from the Tide & Tree members library.

2: Now, lock this background image down by clicking the padlock in the top right corner.

3: Screenshot your phone or tablet on the page you want to capture (for instance your opt-in page) and upload it to Canva.
(Sync your phone to your desktop using an app like Dropbox, or if that’s too complicated; just email yourself the picture and open it on your desktop!)

4: Click Elements on the left hand side and then choose the plain square grid. It should appear over your background image. Don’t worry – it hasn’t disappeared! Now, drag the handles at the side of the grid until it’s the right size for your iPhone screen. (Don’t forget with most phones, there is a small black border around the image)

5: Now that’s aligned nicely, go in to Uploads and locate your uploaded screenshot. Click, hold and drag it over the grid and it should automatically insert into the space. (You may need to double click inside the grid and move the image around a bit if it doesn’t fit the space exactly.)

Voila! Download your finished graphic from Canva and you’re ready to use it!

A quick tip for a common problem

Sometimes you may find you do all of the above and yet the screenshot still looks angled on certain sides, and not on others. This leaves it looking unrealistic and well, a bit fake.

Case in point:

Can you see how the black border isn’t even with the screenshot?

Usually this is because there was a slight distortion when photographing the image. For the photographer to correct this when editing, it could render the rest of the image looking weird. It’s such a small distortion you’d never spot it, until you overlay your screenshot that is.

Luckily, there’s a really simple solution for both Canva and Adobe Photoshop!

Canva

1: With your screenshot in place over the mock-up screen space; select a plain square shape from the Elements tab, colour it black and place it over your screenshot upload.

2: Size and angle the shape to be the exact same size as your uploaded screenshot. (It helps to lower the opacity of the shape so you can see the screenshot behind the shape)

3: Now slightly extend the size of each side of the shape ever so slightly so that it covers the black space intended for the screenshot, and therefore ‘hides’ the distortion. Make sure the shape has an even border around the screenshot upload.

4: Position the shape behind the screenshot (top right corner when the shape is selected) and bring the opacity back to 100%

Voila!

Photoshop

1: In the document with your mock-up and screenshot, right click on your screenshot layer and select Blending Options.

2: From there click and select ‘Stroke’, select a size that looks like a realistic border, pick black as the colour, and select ‘Outside’ as the position. Keep blending mode normal.

3: This adds a small rounded border to the image; you can now extend the size of the screenshot ever so slightly to overtake the black space of the mock-up screen. This effectively ‘covers up’ the distortion.

Using any the above techniques will help your mock-up to look realistic, keep any minimal distortion from being noticeable and make your branding, designs, quotes & screenshots look super professional!

Do you use mock-ups for your business? Share your tips in the comments!

One thought on “How To Fit Your Screenshots To Mock-Ups

  1. Pingback: 7 Ways To Use Mock-Ups (For your marketing and social media)

Leave a Reply

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