Tools / Images & photos

Perspective Warp Online

Place any image onto a plane in a photo. Four handles, a true projective transform, transparent PNG if you want it alone.

sample image — drop, paste or open your own
drag the corner handles
Canvas
no background: transparent canvas
How

Drag the four handles to the corners of the surface in the background photo (a wall, a screen, a sign). The image is mapped onto that plane with a true projective transform, so straight lines stay straight and the far edge foreshortens correctly. No background? You get a transparent PNG of the warped image alone.

full resolution on export · processed in your browser

Putting an image onto a plane

A wall in a photo is a rectangle seen from an angle. Placing artwork on it means finding the transform that takes the artwork's four corners to the wall's four corners, then resampling the artwork through that transform. That is a homography, and four points define it exactly, so all you have to do is put the handles where the corners are.

Open the image to place, then the background photo. Drag TL, TR, BR and BL onto the wall's corners, in that order (clockwise from the top-left as you see it). The preview shows the composite; download at the background's full resolution.

Getting the corners right

Use corners of real rectangles: the edges of a frame, the screen bezel, the tiles on a wall. If the surface has no visible corners, extend two edges you can see and imagine where they meet. Small errors show as the image "sliding" off the plane; compare its edges with lines in the photo and nudge the handles.

Lighting is not simulated. For a convincing mockup, lower the placed image's opacity in your editor afterwards, or multiply it over the wall texture.

Without a background

Remove the background and you get the warped image alone on a transparent canvas, useful for building composites in another app or for exporting a "3D card" version of a flat graphic. Set the canvas size with the sliders. For rotating an image in 3D with a proper lens instead of dragging corners, use change image perspective.

The same thing inside your app

Photoshop: Edit → Transform → Perspective (symmetric) or Edit → Perspective Warp (any quad). Affinity: the Perspective tool. GIMP: the Perspective tool. Illustrator: the Perspective Grid (lesson). This page does it without installing anything.

Related

The reverse operation, taking a plane out of a photo and making it flat, is perspective correction. To plan the scene before you place anything, the 2-point grid shows where a wall's vanishing points are.

Questions

What is the difference between perspective warp and a skew or distort?

Skew and distort are affine: parallel lines stay parallel, so the far edge of a wall does not get shorter. A perspective warp is projective: the far edge foreshortens and the pattern compresses toward it, which is what a real photograph does. Four independent corners define it.

Can I use this for mockups?

Yes. Put a screenshot onto a laptop or phone screen in a photo, a label onto a bottle face, a poster onto a wall. For curved surfaces (bottles, mugs) the flat plane is an approximation; keep the placed area small.

How do I get a transparent result?

Do not load a background. The output is a PNG with only the warped image on a transparent canvas, sized by the width and height sliders.

Does it upload my images?

No. Both images are processed in your browser and never sent anywhere.