Jump to content
You must now use your email address to sign in [click for more info] ×

Perspective Projection in AP: a worked example


Recommended Posts

I’ve been having a lot of fun playing around with the different features of AP and AF. One of these days I’ll stop enjoying myself and do some proper work. But not today ... today I’m going to make use of (i.e. ‘play around with’) perspective projection, which you can find on the menu bar at Layer > Live Projection > Perspective Projection.

 

You’ve seen those outdoor events where they project images or movies onto buildings? I thought I’d have a go myself and paste this first photo onto the second:

4778.thumb.jpg.861a6443a0068ab2454e3720151710c9.jpgpan03.jpg.586ef71b2fae8ec8fbde9f8c44d6dbd7.jpg

I’m going to call the overlaid image the source and the laid-on image the target. (If you’re wondering, btw, the first is Norbury Old Manor in Derbyshire, and the second is a big posh garden somewhere in Bedfordshire that I've mislaid the name of.)

 

Putting an image on a flat ‘surface’ is pretty straightforward, so I searched out something a bit more awkward: this one will have to spread over four different walls at an angle to one another.  All we have to do is split our source image into four and stick each bit onto the target image one at a time. Easy-peasy? Yes ... and no. we’ll use the Export Persona’s Slice tool ...

 

Now, you cold guesstimate the widths of the slices, but we shall do it the hard way for this one. We’ll have a little excursion from our workflow. If you’re not happy with a bit of arithmetic you can skip this part, but I’ll try and keep it simple. What we really need here is an aerial photo of the house … and thanks to Google Maps, I’ve found one; it’s not very big, but I’ve blown it up and straightened it.

s06a.jpg.e3e8055e6d6023382a868b529390d6d7.jpg

 

The target image photo was taken from the direction of the bottom left-hand corner, so we want to measure those sides of the building. I’ve drawn two rectangles  to line up with the edges of the building.

s06b.jpg.34c469398793d11b51e42a3fee26e035.jpg

 

Now we can read off their sizes in pixels ...

 s06c.PNG.0452d9e8a50be1fd23c91a1eabb89968.PNG

... as we adjust the corner nodes: you’ll see them displayed next to the cursor. (I couldn’t capture this in a screen shot – but you’ll see when you do it yourself.) Working from the upper left side, the measurements come out as: 141, 23, 41, 335 pixels. (This looks very accurate, but given the rough image I was measuring from, it’s more of an educated guess! Still, nothing ventured…) Quick check: the first side looks roughly half the width of the fourth; the second side looks roughly half the second; and the second & third together look roughly half the first. The numbers agree with that. Roughly.

 

Now for a few Hard Sums. You’ll have spotted that our source image is 1,000 pixels wide. This is a happy coincidence, as it saves us a bit of calculating. What we have to do is work out what fraction of the source’s width each side is. We add up the total pixels we measured just now: 141 + 23 + 41 + 335 = 540. Get your calculator out (Windows has one built-in; I presume Mac OS does too.) Divide each dimension by 540 and we get (after rounding up) 0.261, 0.043, 0.076, and 0.620. Quick check: add these up – they come to 1, so we haven’t made any mistakes. Now, since our source image is 1,000 pixels wide, we can easily work out that the slices will be 261, 43, 76, and 620 pixels wide. (If it hadn’t been a nice round figure, we’d have had to multiply each decimal by the actual width to get the required results. I apologise if (a) you are not very good with numbers or (b) you are very good with numbers, but you feel your intelligence has been insulted.:()

 

If you skipped the last bit, carry on from here.

OK, back to the Export Persona and Slice.

59c285ffbc6e6_s0.PNG.6af6940d610908096927c51e5e81ae06.PNG

 

Open the source image file. We’ll turn on snapping to make slicing a bit easier. Starting in the top left-hand corner, click & drag a rectangle down to the bottom edge (it will snap) and then rightwards until the width is 261 pixels (or your guesstimate).

s01.PNG.d001a7d3144f030eae3bd4ebc130d83f.PNG

 

The slice will appear in the Slices panel.s02.PNG.71ec4e91da44d5761c41b4125fe9fd65.PNG

You can select the export format here, but we’ll leave it as the default as this is just a demo. Now click somewhere on the top or bottom edge to create the next slice; drag the left-hand edge up to the right-hand edge of the first slice and snap them together; now adjust the width to 43 (you may need to zoom in to see the figures).

 s03.PNG.6ddb2e67bdd9dbd9280c1e51a0a1337f.PNG Again, the new slice appears in the Slices panel. s04.PNG.bcbe138681529bd1afd9d2f847cff9ef.PNG

 

Do the same for the third and fourth slices, and click on Export Slices:

s05.PNG.1faac17b776dbf6fa42662cd9b247615.PNG

AP will ask for the name of a folder to save them to. As it stands, it will also export a copy of the source image, unless you clear the tick/check box in the list; we don’t actually need it here. This is what we have in our slices folder:

s07.PNG.c9a4ace16807098fe7b96e584df09312.PNG

 

And now we’re ready to set up the perspective projections. Open the target image file, and from the menu bar select Layer > Live Projection > Perspective Projection.

 

(You can do this quicker with the Perspective Tool, but you can only do one plane at a time, and you can’t edit the different planes’ alignment if you do; our method is non-destructive, remember.) First of all, save the target image as a new file so you don’t overwrite the original. Create a new pixel layer above the Background. Now go to Layer > Live Projection > Perspective Projection to apply a perspective plane to the layer. Drag the corner nodes to match the left-hand wall.

s100.PNG.69057ade3eb319ec39934452eae88c3a.PNG

(I’ve turned off snapping here, because the nodes keep trying to align with one another.) Although one corner of the wall is hidden by bushes, we can use the brickwork to help align the grid correctly.

Now click Add Plane
s101.PNG.2b217f88d79b2e5d18acc2bd53523cee.PNGand match the new grid to the next bit of wall. It may help to zoom in so we can see more detail in the source image.

We need to position the left-hand corners to the right-hand corners of the first plane; if they’re still hard to see, turn off the background layer while you line them up.

s102.PNG.108f4d83b7534d5292b59fdb2cb215da.PNG

Warning: do NOT make the background layer active, because it will remove the perspective planes, and you can’t get them back with Edit > Undo. If you need to adjust the other plane, just click on it to make it active. (You’ll have noticed there’s some barrel distortion in my target, giving a slight curvature to the edge of the wall where the two planes meet, but I’ll get round that later with a sneaky trick.) Now we’ll add two more planes and line them up, then we’ll be ready to start adding the source image slices..

s103.PNG.9495df0640a5534e7fefa5fabb62d28f.PNG

You can turn snapping back on now.

 

Open the four slices and copy (Ctrl+C) slice 1, then go to the target image, click on the first (left-hand) plane, then click on the Move tool. (The grids disappear. Don’t panic! The active plane has transformed itself to fill the whole frame.) Paste (Ctrl+V) the slice ...

s104.PNG.75012cc8aced3ff1784e75cb2121be42.PNG ... and drag the sides until it too fills the whole frame. Now click on Edit Live Projection s108.PNG.9a0a291fd7ce5658bda980940f2270ff.PNGand click the next plane; and repeat the steps until all the slices are copied.

s105.PNG.aa6f724cf292fd6211676ca40f4b1d7d.PNG s106.PNG.deb90af531d418dd5c9dc0915b4fea65.PNG s107.PNG.ef08c2b9d953ad5c8bb3841f238a6fef.PNG 

When you’ve finished go to Layer > Live Projection > Remove Projection. It’s probably a good idea to save everything in afphoto format now, if you haven’t done so before.

 

All we have to do now is to clean up the source image layer and find a suitable blend mode. We’ll apply a mask to the source layer

s109.PNG.e365b0274fdf8c24a498ed561b4a6b6b.PNG

and use a big brush with Hardness of zero to soften the edges and uncover the bushes and stonework and stuff that should be “in front” of the source image. And I’ll use my sneaky trick, which is to just let the quoins, the corner stones, show through; I’ll also uncover that drainpipe in the corner to put that in front too. It’s helpful to reduce the transparency of the top layer to see the target layer’s features. As we’re using a mask, we can paint black onto it to show the target, or white to hide it and make corrections. Finally, I’ve just tweaked the source layer’s Blend Options and reduced the layer opacity slightly to let the bricks and other details show through. (I’m not going top talk you through these, as there are some much better video tutorials on these things.)

 

Et voilà!

4778-pan3.thumb.jpg.eeb5950c188c1654dcb7d6a0429d4fa5.jpg

s107.PNG

s105.PNG

s106.PNG

Link to comment
Share on other sites

45 minutes ago, Kasper-V said:

the second is a big posh garden somewhere in Bedfordshire that I've mislaid the name of

 

Woburn Abbey? :/

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.4.1 (iPad 7th gen)

Link to comment
Share on other sites

Aha -- Mrs K to the rescue! It is, in fact, Castle Ashby in, er, Northamptonshire (blush). The original photos are safely tucked away on my back-up disks, which are indexed by place names. The stash on my laptop simply says "Beds hol" -- we were staying in Harrold village at the time.
Good guess though! Funnily enough, my great-great grandfather came from Woburn, but moved to Notttingham; my great grandfather moved to Canada, but later came back and settled in Walsall, Staffs (otherwise I wouldn't be here!)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.