How to Make a Laptop Mockup

How to Make a Laptop Mockup

From Blank Screen to Reusable Mockup

Making a mockup from any kind of device is so easy if you have the right tools. In photoshop, there are tons of ways to make your own mockup, some take more time, while others can be done in less than 10 minutes. Today, you will learn how easily you can make your own laptop mockup from an exiting photo and put any screen content you wish.​

But before we start, and if you want to follow this tutorial exactly as described, please download the following free laptop image from Pxhere: Download.

Step 1

Open the laptop image in Photoshop.

Step 2

Select the Rectangle Tool (U), be sure to have the mode set to "Shape" in the top toolbar, and make a rectangle with the same dimensions that your screen have.

Step 3

Rename the layer to "Screen".

Step 4

With the "Screen" layer selected, go to Layer > Smart Objects > Convert To Smart Object.

Step 5

Go to Edit > Transform > Distort.

Step 6

Select the top left anchor point and drag it to the left top part of the laptop screen as shown.

Step 7

Repeat the same process for the other 3 remaining anchor points and hit the Enter key on your keyboard to commit the transformation.

Step 8

Select the Pen Tool (P), be sure to have the mode set to "Shape" in the top toolbar and make a white triangle as shown.

Step 9

Rename the layer to "Light".

Step 10

Go to Layer > Rasterize > Layer.

Step 11

With the "Light" layer still active, go to Layer > Create Clipping Mask.

Step 12

In the Layers Panel, set the blend mode of the "Light" layer to Soft Light and decrease the opacity to about 15%.

Step 13

Go to Filter > Blur > Gaussian Blur. Set the Radius to about 25 pixels and click OK.
Note: depending on your image size you may need to change this value a bit. Aim to blur the edges so it does not look too sharp.

Step 14

With the mockup ready, you can now update the screen with any content you want. To do that, double click over the "Screen" layer thumbnail.

Step 15

In the new window, place your content.

Step 16

When finished, press Ctrl+S on your keybard and close the file. Now, your new content is on the recently created mockup.


Comments

X

You've successfully logged in!