How to Replace a Screen in Photoshop

How to Replace a Screen in Photoshop

This technique cuts a screen out of a phone or tablet photo and drops a design mockup into its place — then, using linked Smart Objects, updates that mockup automatically on every device it’s placed on the moment the original design file is saved. It’s a fast way to preview a website or app design on multiple devices without ever needing to photograph a real screen.

Getting Started: Building the Design Mockup

Before anything gets placed on a device, the design itself needs to exist as its own separate file.

1. Assemble the Design Layout

   Bring your design elements — screenshots, graphics, or layout pieces — into one document with the Move tool, then use the Crop tool to shape the canvas into a rough approximation of the device screen you’re targeting.

2. Save the Design as Its Own PSD

   Save this design layout as a standalone PSD file. Saving it separately, rather than building it directly inside the device photo, is what makes the linked Smart Object workflow possible in the next steps.

Placing the Design with Linked Smart Objects

Rather than copying and pasting the design into each device photo, placing it as a linked Smart Object keeps every copy connected to the same source file.

3. Place Linked into Each Device Photo

   In each device image, go to File > Place Linked and choose the design PSD you just saved. Repeat this for every device the design needs to appear on — a tablet and a phone, for example.

4. Scale and Skew to Match Each Screen’s Perspective

   Scale the placed design to roughly fit each screen, then hold Ctrl/Cmd and drag a corner handle to skew it, matching the screen’s actual perspective — useful when a screen is wider at the bottom than the top, as many angled product photos are.

Why Place Linked Instead of Place Embedded

Place Linked keeps a live reference back to the original PSD file rather than embedding a static copy of it inside the current document. That distinction is what makes the automatic-update workflow possible later — an embedded copy would need to be manually replaced every time the design changes, while a linked one simply reflects whatever the source file currently contains.

Cutting Out the Screen with the Magic Wand

With the design roughly in place, the next step is masking it so it only shows up inside the actual screen area of the device photo.

5. Select the Device’s Border

   Hide the placed design temporarily, then use the Magic Wand tool on the device photo to select its dark border or bezel, raising Tolerance as needed to catch the whole outline in one selection.

6. Apply and Invert the Selection as a Mask

   Turn the design layer back on, click its layer mask button, then invert the mask with Ctrl/Cmd + I if the selection came out backwards. This should hide most of the border and reveal the design only inside the screen.

7. Clean Up Remaining Edges by Hand

   Use the Polygonal Lasso tool to select any leftover border area, then fill it with black on the layer mask (Shift + Delete) to hide it completely.

Refining the Mask Edge with Select and Mask

For a cleaner transition between the screen and the surrounding device, open the mask in Select and Mask and add a small amount of feathering along with a boost in contrast. It won’t be pixel-perfect, but it noticeably softens the edge compared to a raw Magic Wand selection — for an entirely clean edge, the Pen tool remains the more precise option.

Handling Icons, Cameras, and Screen Glare

A phone screen usually has extra details — a camera cutout, status bar icons, a bit of glare — that need their own attention beyond the basic border mask.

8. Include Non-Contiguous Elements

   Turn off the Magic Wand’s Contiguous option so that separate black elements — status bar icons, for instance — get selected along with the main border in a single click, rather than requiring individual selections.

9. Paint Out Any Remaining Visible Areas

   Paint black directly onto the layer mask over any spots — a front-facing camera, a rounded corner — where the underlying screen still shows through incorrectly.

Adding a Realistic Glare Layer

A new layer with a soft white brush stroke at low opacity, clipped to the design layer with a clipping mask, adds a subtle shine that only appears within the screen area — a small touch that goes a long way toward selling the mockup as a real photograph of a device rather than an obvious digital composite.

Editing the Design and Watching It Update Automatically

This is where the linked Smart Object setup pays off: because every device photo references the same saved PSD, a single edit and save updates all of them at once.

10. Edit the Original Design File

    Open the design PSD directly and rearrange, resize, or restyle its layers — move a section up, swap out an image, or extend the layout with a solid color background if it’s not tall enough for a particular device.

11. Save to Update Every Linked Device

    Press Ctrl/Cmd + S to save the design file. Every device photo using it as a linked Smart Object updates automatically — no need to re-place or re-mask anything on the device images themselves.

What Happens If the Design Doesn’t Fit

If a redesigned layout ends up shorter than the original — leaving blank space at the bottom of a device screen — adding a solid color fill layer underneath the design, sized to match the full screen area, fills the gap cleanly without needing to rebuild the mask or the placement from scratch.

More Free Photoshop Tutorials

To build out more compositing and mockup skills, check out these free tutorials:

• How to Use Smart Objects in Photoshop
• How to Use Clipping Masks in Photoshop
• How to Create a Packaging Design Mockup in Photoshop

Why This Approach Works

The real power of this workflow isn’t the screen cutout itself — it’s Place Linked. A regular copy-pasted layer breaks the connection back to its source the moment it’s pasted, so any future change means redoing the placement on every device photo by hand. A linked Smart Object keeps that connection alive permanently, which is what turns “update the design” into a one-time edit instead of a repeated, per-device task. For a deeper look at everything linked and embedded Smart Objects can do beyond this specific use case, How to Master Smart Objects in Photoshop covers the full range of that functionality.

Final Thoughts

This technique is especially useful for proof-of-concept work — showing a client or teammate what a design will look like in someone’s hands without ever needing to photograph a real device. Once the mask and glare are dialed in on a device photo, that same photo can be reused indefinitely: swap in a new linked design file and the whole mockup updates instantly, screen cutout, glare, and perspective all included. That reusability is what makes the extra setup time upfront worth it the moment a second or third design variation needs the same treatment.

Related Tutorials

• Change Background Using AI in Photoshop: 3 Easy Methods
• Nano Banana PRO in Photoshop: 4 Easy Steps
• Change the Color of Anything: 4 Easy Steps