How to Create Website Mock‐Up Templates in Adobe Photoshop

Step-by-Step Guide

1. 1

   Step 1: Start with a backdrop of a laptop or mobile device.

   Get an appropriate high resolution photo on which can represent your website snapshot properly.
2. 2

   Step 2: Open the picture in Adobe Photoshop.

   Use the rectangle tool (Keyboard Shortcut U) and draw a rough rectangle roughly the size of laptop screen. , Select Convert to Smart Object. ,,, Click and hold any edge of rectangle and move it to match the related edge of the laptop screen.
   
   Repeat the above step with rest of the three edges to match all the four rectangle edges exactly with the laptop edges.
   
   To get better results zoom the image to match the edges. , You'll see that a new tab will open and there will be an plain image in front of you. , Then paste it on the above mentioned plain image.
   
   You may need to adjust the screenshot on the rectangle shape plain image. , And it's done! You'll see that the screenshot has perfectly overlapped the existing image and your website is ready to be presented to the whole world.
3. 3

   Step 3: Right click on the new layer called Rectangle.

4. 4

   Step 4: On the top tool menu

5. 5

   Step 5: go to Edit > Free Transform Path (Keyboard Shortcut Ctrl+T).

6. 6

   Step 6: On the top tool menu

7. 7

   Step 7: go to Edit > Transform > Distort.

8. 8

   Step 8: Move the edges of the rectangle freely to match the tilted laptop screen.

9. 9

   Step 9: On the rectangle layer

10. 10

    Step 10: click on the small Smart Object icon on the bottom right.

11. 11

    Step 11: Take a screenshot of the website you want to display on laptop screen.

12. 12

    Step 12: Save the image (Ctrl+S) and close the tab.

Detailed Guide

About the Author