Can anyone tell me /point me in the direction of a good photoshop tutorial for taking app screen shots and putting them in as a layer in a photoshop psd file i.e website screenshot into a macbook pro psd (https://dribbble.com/shots/980800-Devices?list=searches&offset=0)

I have googled this for ages but nothing really came up



  • Are you asking how to get the layers into Ps, or how to position the layers in the mock-ups?
    – Circle B
    May 22, 2014 at 13:32
  • how to alter the screenshot image to have the same aspect as the layer i want to replace it with. The screen shot of the website I want to take is 100% of the browser width. When I import that screenshot into the above psd file to set it as a layer it need to be scaled - how do i do that?
    – Jon1123
    May 22, 2014 at 13:34

2 Answers 2


In case you still need it, here's a step-by-step tutorial my partner and I have on our website (with screenshots) that explains how to place your app screenshot inside a frame: http://blog.appdemostore.com/2014/10/how-to-add-your-screenshot-to-phone.html.

Basically, here's how to do it:
1. Open your Adobe Photoshop CS6. From the top menu, select File —> Open, choose your macbook psd and click Ok or hit Return.
2. Drag and drop your app screenshot to Photoshop, in the center of the macbook frame. Grab a corner, hold Shift and drag with your mouse in order to make the screenshot smaller. You can also move the image around to position it. Next, right click on the screenshot and choose 'Distort'.
3. Click & hold each corner and place it in its correct position. After you're done, hit Return.
4. Done. Save the final image from File —>'Save for Web...'.

I'm not sure if you are aware of the fact that you can easily achieve this task without Photoshop, by using online tools. This article lists some of the best online tools for this: http://www.versedtech.org/11293/add-device-frame-to-screenshot/ - such as such as picapp.net, placeit.net or appdemostore.com/frameapp. My favourite one is picapp.net because it's easy-to-use and free for small images.

Hope this helps. Good luck!


Here's a mock-up:

enter image description here

And here's a screenshot that is too big:

enter image description here

Select the layer in the Layers Panel, then check this box enter image description here (in the upper left hand side of the screen). Now you have handles that you can use to resize the screenshot layer.

Hover over one corner of the screenshot and click and drag to start resizing. Hold dow shift to constrain the proportions of the screenshot.

Now the screenshot is the right width but too tall. Make a selection as pictured below. (using the marquee tool enter image description here)

enter image description here

Double check that the screenshot layer is still selected in the Layers Panel and then click the mask button enter image description here at the bottom of the Layers Panel.

Now you're all set and you should have something like this...

enter image description here

  • Great thanks! With that psd for the macbook pro in the above link when I take a screenshot on my mbp and try and do the above the screenshot is always to wide i.e. if I make it the right width it is not tall enough. Are the aspect ratios correct for that psd or am I missing something?
    – Jon1123
    May 22, 2014 at 13:59
  • If you're using a screenshot of your entire screen, it should match the mock-up, if it doesn't you can either change the size of the mock-up screen or crop your screenshot in the opposite direction than I showed above.
    – Circle B
    May 22, 2014 at 14:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.