I have a screen shot image for my app. What I am trying to do is insert it into a nice image of the actual device.

So I downloaded this image:

enter image description here

but I am clueless about how I can cut out just the front-facing ipad image, and place my screenshot instead of its screenshot.

Could someone please explain the process?

Thank you!

3 Answers 3


In the PSD, the layers for the iPad images are arranged into folders. Inside each of these top level folders is a layer called "Screen design", this is the smart object you'll need to edit to change the display:

Screen design

To edit this layer, right click on it and choose Edit Contents. This will open up the smart object in a new window. Insert whatever artwork you'd like to be displayed on the screen in this document:

new image

When you've finished, save and close the Screen design document. The new artwork will be displayed in the original document.

finished product

This will only update one screen, you will need to rinse & repeat for each group.

  • thank you. I was able to delete the two ipads on the side using the layers area. But I am not sure how to get of all the gray background. Could you please suggest how I can do that?
    – Genadinik
    Mar 19, 2013 at 15:40
  • @Genadinik, the grey background is just a layer called "bg". It is the very bottom layer, just hide or delete it
    – JohnB
    Mar 19, 2013 at 15:46
  • I have one last question. I am trying to resize the image, but it still shows it as pixels: 3285 by 2000. Is there a way I can get rid of the background as it seems that it is still effecting the image?
    – Genadinik
    Mar 19, 2013 at 16:01
  • @Genadinik The canvas, which is what the image is painted on, is the same size no matter what you add or remove. To adjust the canvas size, making the image smaller, you have to go Image -> Canvas size and adjust it there, or more convenient choose the marquee tool (M) make a rectangle selection of how big you want the image to be and choose Image -> Crop. Mar 19, 2013 at 18:36

If you downloaded the psd and not just an image inside there should be a smart-object. Double click this and it will open a psd of their mock-up image - simple place your mockup inside this psd save and go back to the original psd and it should be replaced.

  • I am a little bit confused. I opened the psd, but then I am not sure how to get to the tools you mention. Could you please clarify what I need to do inside photoshop? Thank you :)
    – Genadinik
    Mar 19, 2013 at 15:00

What you need to do is:

Step 1: Open your frame in adobe photoshop.
Step 2: Choose your screenshot and put it on your frame image.
Step 3: Right click on the screenshot and choose 'Distort'.
Step 4: Click & hold on each corner of screenshot and place it in its position.
Step 5: After you're done, hit Ok.

We wrote this step-by-step tutorial that explains it into more detail (with images) on our company blog : http://blog.appdemostore.com/2014/10/how-to-add-your-screenshot-to-phone.html


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.