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.
Before we start, have a look at what we are going to create.
Create a new document in Photoshop with a 600px Width and an 800px Height.
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.
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.
Double-click on the stroke layer to open the Layer Style window, and apply the settings provided below for “Bevel and Emboss.”
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.
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.
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.
Draw two circles as shown below using the Ellipse Tool. Use the color #08174e for larger circle and #000000 for the smaller one.
Double-click on blue circle layer and apply the following setting for “Bevel and emboss.”
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.
Collect both circle layers into a group, resize this group using the Free Transform Tool (Ctrl + “T”), and position it as shown below.
Now we’ll add text. Select the Type Tool, Arial font and #777777 color to type in your text.
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.
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.
Set “Fill” to 0% of the reflection layer and then apply a “Gradient overlay” with the following settings.
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.
Apply the following gradient on this rectangle.
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.
Now select the Rounded Rectangle Tool to draw two rectangles in black color as shown below.
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.”
Double-click on this half rectangle layer and apply the following layer style settings on it.
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.
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.
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.
Now, blur it with a 1.5px Gaussian Blur, and erase its edges using the Soft Round Eraser Tool.
Now, to enhance the shadowing effect, apply the given settings as a drop shadow.
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.
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.
Draw the shape shown below using the Pen Tool in #f7f7f7.
Duplicate this shape and give it darker gray shade just to differentiate it from the original. Drag the original shape layer a bit downward.
Double-click on the darker shape layer and apply the following settings as a gradient overlay.
Now click on the lighter gray shape layer and apply the following layer style settings.
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.
Lastly, create the reflection for the stand using the same method that we used for the laptop in step 19.
That’s it guys. What do you think?
User Interface Design with Sketch 4
Photoshop for Web Design
Introduction to Photoshop
Designing UX: Forms
Jump Start Sketch
The Ultimate Guide to Prototyping
- 1 Multi-Device Onboarding: What We Can Learn from Mint & Expensify?
- 2 Sourcehunt Design April: How About Adding Fedora to Your CV?
- 3 How to Quickly and Easily Remove a Background in Photoshop
- 4 Adobe XD Tutorial: A Pain-free Way to Import Assets
- 5 Type Nugget: Good Typography is About Finding the Right Playground