How to Create a "Screenshot" with an Image in a Computer Screen

TayBird Screen.png

 

What You'll Need for this Tutorial:

  1. Photoshop   
  2. Blank computer screen stock photo   
  3. Screenshot of webpage to go inside computer screen

How to Create a "Screenshot" with an Image Inside of a Computer Screen

1. Find a stock computer image on stock photo website. I used Google for this one, and searched for 'laptop image.' Either drag the image to your desktop or select 'Save Image As...' from the File menu and rename it as a document on your desktop

1. Computer Stock Photo.png
 
2. Desktop.png

2. Open the image in Photoshop. Over on the right-hand side, you will have one layer that says 'Background' with a lock icon. Double click on the lock icon and this will bring up a 'New Layer' dialogue box. Name the layer 'Computer Background.'

4. Unlock Background1.png
4. Unlock Background.png

3. Next, we're going to delete the white background. Head over to the tool panel on the left-hand side of the screen, and select the Magic Wand Tool. With the Magic Wand Tool, click on any part of the image outside of the laptop (i.e. click on any of the white space surrounding the laptop. Once you've clicked, and the white space has been selected, go ahead and click 'Delete' (the backspace button on your keyboard).

5. Magic Wand.png
5. Take out backround.png

4. You'll see that the outer white space has disappeared, but the area is still highlighted. Go ahead to the 'Select' option and choose 'Deselect.'

5. Now we're going to get rid of the empty white space on the computer screen. To do this, head back over to the tool panel on the left-hand side of the window, and select the Rectangular Marquee Tool.

7. rectangular marquee.png

6. Start from the upper left corner of the space inside the computer screen image, click and drag your rectangle across the size of the white space on the screen. 

8. Make white screen disappear.png

7. Hit 'delete' (or the backspace button on your keyboard). You will now have only the laptop frame on your Photoshop screen. Go back to the 'Select' option and again choose 'Deselect.'

8. Make white screen disappear 2.png

8. Next, we will take a screenshot of the webpage we want to place inside of this image. To do this, go to the webpage and hold down 'Control', 'Shift', and '4' all at the same time. (Please keep in mind that these are the controls for a Mac computer - if you have a PC, you may want to consult how to take a screenshot!) You will then be able to click and drag your pointer to make a box of something you want to take a photo of. Once you let go of the pointer, a screenshot will be captured and saved directly to your Desktop. 

Note: If you need to make the screen smaller or bigger to capture more in your screenshot, you can always zoom in (to make the captured image bigger) or zoom out (to make the captured image smaller).

Screen Shot 2017-12-13 at 11.53.48 AM.png

9. Drag the screenshot image from your Desktop to your Photoshop document (right on top of the laptop image). From there, you will be able to transform the size of the webpage screenshot until it fits right inside of the laptop screen. Once placed, hit 'Enter' or 'Return' and your image will be placed.

Note: if you need to reformat the size of your webpage image, just press 'Control' and 'T' at the same time and it will bring up the 'Transform' controls for you.

11. Drag corners and place.png

10. Although it's not necessary, I changed the layer name to "Website Image" once it was placed onto the Computer Background. Next, go ahead and drag the 'Website Image' Layer (the screenshot of the webpage) UNDERNEATH the 'Computer Background' Layer. This ensures that the 'Website Image' will fit perfectly "inside" of the screen with no overflow.

12 layer underneath.png

11. Almost done! To finish, head over to the File menu, and click 'Save for Web...' From there, I'll save my image as a PNG-24. 

13. Saving.png

TayBird Screen.png

Alex Morton