STREETS IN TIME: Preparing the images for the site

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…..

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s