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.
Open the laptop image in Photoshop.
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.
Rename the layer to "Screen".
With the "Screen" layer selected, go to Layer > Smart Objects > Convert To Smart Object.
Go to Edit > Transform > Distort.
Select the top left anchor point and drag it to the left top part of the laptop screen as shown.
Repeat the same process for the other 3 remaining anchor points and hit the Enter key on your keyboard to commit the transformation.
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.
Rename the layer to "Light".
Go to Layer > Rasterize > Layer.
With the "Light" layer still active, go to Layer > Create Clipping Mask.
In the Layers Panel, set the blend mode of the "Light" layer to Soft Light and decrease the opacity to about 15%.
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.
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.
In the new window, place your content.
When finished, press Ctrl+S on your keybard and close the file. Now, your new content is on the recently created mockup.