Rhoda Fajardo 3D Rhoda Fajardo 3D: Tutorial: Photorealistic Laptop Mockup

Feb 25, 2016

Tutorial: Photorealistic Laptop Mockup


Tutorial: Photorealistic Laptop Mockup

What is a mockup? A mockup is a prototype/perspective of a device or product commonly used for presenting print and web designs, but can also be used for packaging, industrial, accessories and furniture design — a little similar to Digital Home Staging (and also a 3Design Solution that I offer to creatives).

For this week's blog post, I wanna share a simple exercise using the Smart Object tool in Photoshop to make a photorealistic laptop mockup. If you're new to Photoshop, don't worry! I made the steps super easy enough for you, so you can follow along. Let's start!

How to Make Your Own Photorealistic Laptop Mockup in Photoshop


Step 1: Take a photo of your laptop.


RF 3Design Solutions

My laptop is a Lenovo G480. I only used my phone to take this photo. If you're gonna use a phone, make sure that there's enough natural lighting so it won't be too pixelated. But if you have a DSLR, much better.

Please excuse the Barako Bull Energy Drink. This photo was taken outside with all the the saw dust and construction sh*t. Hehehe.

Step 2: Open the photo in Photoshop.


RF 3Design Solutions

The resolution of the original photo is 2560 x 1920 pixels so that it'll be easier to insert a new layer that will serve as the Smart Object (a.k.a. the web design screenshot).

Step 3: Click File + Select New + Click OK


RF 3Design Solutions

Ensure that the resolution of the new untitled file is the same as the resolution of the laptop's screen. Mine's 1366 x 768 px.

Step 4: Select the whole layer (Ctrl + A) then Copy (Ctrl + C).


RF 3Design Solutions

Step 5: Paste the copied layer in the previous file (Ctrl + V).


RF 3Design Solutions

Step 6: Right-click on Layer 1 then Select Convert to Smart Object.


RF 3Design Solutions

What are Smart Objects? Smart Objects are layers that contain image data from raster or vector images, such as Photoshop or Illustrator files. Smart Objects preserve an image's source content with all its original characteristics, enabling you to perform nondestructive editing to the layer. Bjango

Step 7: Click Edit + Transform + Skew


RF 3Design Solutions

Step 8: Move the vertices to the edges of the laptop's screen in the photo


RF 3Design Solutions

Step 9: Click the Move Tool (first icon on the left) then Select Apply.


RF 3Design Solutions

Step 10: Right-click on Layer 1 again then Select Blending Options then Check Inner Shadow.


RF 3Design Solutions

Step 11: Double-click on Layer 1 and a new file should open.


RF 3Design Solutions

Step 12: Paste your design or screenshot on top of Layer 1 in the new file, then Save (Ctrl + S).


RF 3Design Solutions

Step 13: Go back to the previous file.


RF 3Design Solutions

Duplicate the Background layer and adjust the brightness/contrast as needed. AND WE'RE DONE! YAY!

HERE'S THE FINAL OUTPUT.

Drag the small arrow on the lower left to the right to view the after photo. (If you're using a smartphone, you might not be able to view the image-slider below)

RF 3Design Solutions
RF 3Design Solutions

RF 3Design Solutions

RF 3Design Solutions

AND MORE MOCKUP SAMPLES.

Some of the photos below were created with Original Mockups, Cool Mockups, Photofunia, and Eamejia,

RF 3Design Solutions
RF 3Design Solutions
RF 3Design Solutions
RF 3Design Solutions
RF 3Design Solutions
RF 3Design Solutions
RF 3Design Solutions

RF 3Design Solutions

RF 3Design Solutions

RF 3Design Solutions

RF 3Design Solutions

RF 3Design Solutions

Originally published by Rhoda Fajardo in April 2, 2015.

Update as of February 25, 2016 8:28 PM


I had the chance to pick the brain of a photographer friend of mine a while ago, coz I'm currently very fascinated with photography. A new idea sparked my ADHD brain again and I can't wait to start! I've also pinned my Objects of Desire so I could start planning on how to get them.

I might start talking about photography in this blog in the future. I'm planning to get a second-hand
Nikon D90 DSLR, with an actuation count of 20,000 max (coz I wanna get this camera for a lower price). I've asked different people about the real cost of photography and . . . holy shit!

Anyhoo, I'm so off-topic already. I'll save my thoughts for another blog post. Ciao!


Rhoda Fajardo 3D



graphics

Did you like this post? Leave a comment!