I start off with the ‘then’ as these are much smaller images than the ‘now’ images and so set the dimensions of the final pieces:
Next I open the ‘now’ image and copy the ‘then’ image over the top:
I then crop the ‘now’ image to exactly match the parameters/scope of the ‘then image’, and correct the perspective (this is usually necessary as the camera I use has a considerably wide-angles lens and tends to ‘fish-eye’ images in comparison to the ‘then’ images.
I now have two layers in one PSD file – ‘then’ and ‘now’. I select the ‘now’ layer and use transform to reduce the scale of this image to match the ‘then’ image, and crop to size. Then, with the ‘then’ image on top, I reduce the opacity so that the ‘now’ image starts to show behind. I then finely adjust the image, lining up as closely as possible the landmarks and buildings.
Once fully lined up, I crop if necessary, then increase the opacity of the ‘then’ image back to 100%, hide the ‘now’ image and Save As sitxxx_then.jpg. I then hide the ‘then’ image, unhide the ‘now’ image and save as sitxxx_now.jpg.
With the two files now in place, I simply need to open up one of the previous html pages, then Save As a file name that matches the sequence number of the new images, and hey presto – a fully functioning page without any input / tweaking required**well, apart from that annoying issue where I have to re-input the image file name to set the height of the div container, but I hope to be able find a fix for that soon…..