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.
You have the perspective. Now draw into it.
Drop any of 46 grids onto a layer in Procreate, Photoshop, Clip Studio or Krita: transparent PNG, SVG and PSD, no setting up. Or draw over 252 finished scenes with the lens, camera height and tilt already written on them. The same 46 grids print as vector sheets if you work on paper, and thirty worked exercises teach the geometry behind all of it. Every one has a free starter, so you can try the real files first.
Free starters: seven layers, twenty scenes, five exercises. The three grid-and-reference packs together are $24, seven less than the parts. The printable templates and the reference library stay free whatever you do — a pack sold is what keeps them that way.
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.
Other image tools
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.