Create Sleek, Stylish Laptop and Monitor Mockups in Photoshop

In this tutorial, I will walk you through the process of creating sleek and stylish mockups in Photoshop from scratch. We’ll create laptop and monitor mockups, which are a perfect choice for displaying your artwork, websites, or apps. Along the way, we’ll use of different shape tools, the pen tool, layer styling, and a technique for creating a subtle reflection of an object through an easy, step-by-step approach.

Resources:

Wallpaper by Suzie Hunter

Before we start, have a look at what we are going to create.

laptop and monitor mockups

Step 1

Create a new document in Photoshop with a 600px Width and an 800px Height.

Laptop and Monitor Mockups

Step 2

I’m using a lighter gray textured background; you can start with a white background or whatever background you prefer. We’ll make the laptop’s screen first. Set #1c1c1c as your foreground color and select the Rounded Rectangle Tool to draw the rectangle with a 20px radius.

Laptop and Monitor Mockups

Step 3

Now press Ctrl + Click on the rectangle layer to make selection around it. Then, create a new layer and go to “Edit” > “Stroke.” Use the values provided below to make a stroke.

Laptop and Monitor Mockups

Step 4

Double-click on the stroke layer to open the Layer Style window, and apply the settings provided below for “Bevel and Emboss.”

Laptop and Monitor Mockups

Laptop and Monitor Mockups

Step 5

Next, to make display screen, select the Rectangle Tool to draw a rectangle inside the rounded rectangle, as shown below. I’ve used #303030 as the rectangle’s color.

Laptop and Monitor Mockups

Step 6

Open the wallpaper file in Photoshop, press Ctrl + “A” to select it, and then press Ctrl + “C” to copy the selection. Come back to your document and press Ctrl + “V” to paste the wallpaper here. Resize and position it using Free Transform Tool (Ctrl + “T”). Click on wallpaper layer, then press Ctrl + <the smaller rectangle layer layer> to make selection around it. Then, click the “Add layer mask” icon, which is present at the bottom of the layers panel. This way, the wallpaper would be confined to the main screen.

Laptop and Monitor Mockups

Step 7

Now, to change color of the wallpaper, press Ctrl + <the layer mask thumbnail of the wallpaper layer> to select it. Then, click on the “Create new fill or adjustment layer” icon. Choose the option of “Hue/Saturation” and use the given values to give it a violet tone.

Laptop and Monitor Mockups

Step 8

Draw two circles as shown below using the Ellipse Tool. Use the color #08174e for larger circle and #000000 for the smaller one.

Laptop and Monitor Mockups

Step 9

Double-click on blue circle layer and apply the following setting for “Bevel and emboss.”

Laptop and Monitor Mockups

Now, to create highlights over the blue circle, press Ctrl + <click on blue circle layer> to make a selection around it. Now, select the Soft Round Brush with 40% opacity and use it on a new layer inside the selection as shown below in white.

Laptop and Monitor Mockups

Collect both circle layers into a group, resize this group using the Free Transform Tool (Ctrl + “T”), and position it as shown below.

Laptop and Monitor Mockups

Step 10

Now we’ll add text. Select the Type Tool, Arial font and #777777 color to type in your text.

Laptop and Monitor Mockups

Step 11

Next, we’ll create light reflection on the screen. Select the Pen Tool, choose the “Shape” tool mode, and draw the shape as shown below. You can use any color to draw the shape, because we’ll apply gradient on it later.

Laptop and Monitor Mockups

Now, right-click on the reflection layer and select the option of “Rasterize layer.” Confine this reflection to the screen with a layer mask using the same technique as explained in step 6.

Laptop and Monitor Mockups

Step 12

Set “Fill” to 0% of the reflection layer and then apply a “Gradient overlay” with the following settings.

Laptop and Monitor Mockups

Laptop and Monitor Mockups

Step 13

We are done with our screen, so collect all the layers in a group and label it as “screen.” Now, we’ll move ahead to create the laptop part. Select the Rectangle Tool to draw a thin rectangle, as shown below.

Laptop and Monitor Mockups

Step 14

Apply the following gradient on this rectangle.

Laptop and Monitor Mockups

Laptop and Monitor Mockups

Step 15

Next, we’ll add noise to the rectangle. Click on the rectangle layer and go to “Filter” > “Convert for smart filters” to covert the rectangle into a smart object. Then go to “Filter” > “Noise” > “Add Noise.” Use the values shown below.

Laptop and Monitor Mockups

Step 16

Now select the Rounded Rectangle Tool to draw two rectangles in black color as shown below.

Laptop and Monitor Mockups

Rasterize the larger rectangle layer and select the Rectangular Marquee Tool to make selection of the upper half of this rectangle. Then, go to “Edit” > “Clear.”

Laptop and Monitor Mockups

Laptop and Monitor Mockups

Step 17

Double-click on this half rectangle layer and apply the following layer style settings on it.

Laptop and Monitor Mockups

Laptop and Monitor Mockups

Laptop and Monitor Mockups

Step 18

Select the Pen Tool to draw the shape as below. Use color #838688 here. After that, make four ellipses over this new shape using the Ellipse Tool with #000000 selected.

Laptop and Monitor Mockups

Step 19

Collect the laptop layers in a group, duplicate this group and merge it. Now go to “Edit” > “Transform” > “Flip Vertical” and arrange it below the original laptop. Select the Soft Round Eraser Tool to nicely erase the laptop reflection to get the effect shown here.

Laptop and Monitor Mockups

Step 20

Now we’ll make a shadow between laptop and its reflection. Create a new layer and select a thin area using the Rectangular Marquee Tool, and fill it with #000000.

Laptop and Monitor Mockups

Now, blur it with a 1.5px Gaussian Blur, and erase its edges using the Soft Round Eraser Tool.

Laptop and Monitor Mockups

Now, to enhance the shadowing effect, apply the given settings as a drop shadow.

Laptop and Monitor Mockups

Laptop and Monitor Mockups

Step 21

Lastly, duplicate the screen group to preserve the original screen proportions. Now, select the stroke and the black rectangle layer in the duplicated screen group and increase its size vertically a bit, as we don’t want rounded corners at the bottom of the screen.

Laptop and Monitor Mockups

Step 22

We are all done with our laptop mockup. Now, we’ll create a monitor by following few easy steps. First, click on the stroke layer in the original screen group, decrease its size a bit, and position the stroke in such a way that it would be visible just at the top of screen, as shown below.

Laptop and Monitor Mockups

Step 23

Draw the shape shown below using the Pen Tool in #f7f7f7.

Laptop and Monitor Mockups

Duplicate this shape and give it darker gray shade just to differentiate it from the original. Drag the original shape layer a bit downward.

Laptop and Monitor Mockups

Step 24

Double-click on the darker shape layer and apply the following settings as a gradient overlay.

Laptop and Monitor Mockups

Laptop and Monitor Mockups

Step 25

Now click on the lighter gray shape layer and apply the following layer style settings.

Laptop and Monitor Mockups

Laptop and Monitor Mockups

Laptop and Monitor Mockups

Step 26

Next, we’ll create highlights over the stand. Select the Soft Round Brush Tool with a 50% opacity and choose a pure white color. Now press Ctrl + <click on the stand layer with gradient> to make selection around it and then apply the brush on a new layer within this selection.

Laptop and Monitor Mockups

Lastly, create the reflection for the stand using the same method that we used for the laptop in step 19.

Laptop and Monitor Mockups

That’s it guys. What do you think?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Me

    Why such a focus on iApple products?

    I know that most “designers” are indoctrinated into adopting that closed and draconian platform. However, I have used Adobe products for a long time, in particular PhotoShop since V4. And I have NEVER thought, “Gee, I need a Mac to do what I do!”.

    Despite Macs holding single-figure market share, nearly ALL web and conventional design “tutorials” and articals are Mac-centric. Please acknowledge and accommodate the majority.

    • OsakaWebbie

      I was thinking the same thing, wishing for a typical-looking PC mockup. But I guess the problem is that there is no such thing as a “typical” PC appearance – it’s easier to decide how to draw a Mac because there is a standard.

      Also, it’s artists who draw stuff, and among artists, the market share is much higher than the public at large. They tend to draw the computer they have.

      Anyway, I second the motion to request a mockup for something more commonplace – pick a simple-looking PC (probably laptop) and show how to draw that. For my purposes, I want to showcase my software on less-expensive hardware, to give the idea that anyone can use it, not just super-computer people with fancy machines.

    • Bob

      Duh. The tutorial was done on a PC.

  • Hiren Mehta

    Awesome.. Cool :)

  • Alashmawi

    I loved it.. Perfect and realistic.. Thanks a lot..

  • Dewara

    Beautiful. I want my monitor just like it.

  • Katya

    Thank you so much for sharing. Can’t wait to create my own.

  • Charles

    Brilliant tutorial df you guys rock!

  • http://www.yasinokumus.com yasin

    Great but without Apple would be more amazing.

  • http://debbshosting.com Debbs Hosting

    This is an excellent tutorial. And there weren’t any complicated steps, too. It’s very easy to understand and most of the tools used here don’t require high proficiency in Photoshop. Pretty much everyone can do this for practice. What other mockups do you make?