Archive mashup pics with extra interactivity
Update: Google maps streetview now has a history option which might offer some useful sources (not too historic though)
Update 2: And people are doing great stuff with video.
Over the last few weeks I’ve seen a number of sites making use of mashups of archive and current images. These world war II mashups , NY crime pictures and Cardiff Ghost cinemas are just a few I’ve come across.
It’s not a new thing, but it’s an easy way to add a bit of visual interest to archive by doing a ‘then and now’ kind of mashup where the past peeks through in the present image – like the example above. I think that, in general, they are a nice bit of content and one that plays to the strengths of a lot of media orgs who are sitting on massive archive.
So I set myself a few challenges. How easy is to recreate them using free tools and secondly could I add a bit more interactivity to them?
The archive image came from a local history site http://chorltonhistory.blogspot.co.uk/ and used with permission of the site owner Andrew Simpson (Thanks Andrew!). It’s taken from the LLoyd collection. It’s a great site a worth a look to show what depth and passion for local history there is to tap into.
I found the image, amongst others via a google image search and it’s worth mentioning just how important it is to click the Visit page option and not just the View image. Go to the site, find out more about how and who is using it. It was a very short process for me to get permission from (a very helpful) Andrew.
Armed with an archive image, I took the current image myslef. I took the new image with my iphone which also had a copy of the old image on it. I used that to get an approximate position and then took the pic. The most common of these kinds of archive mashup are often building. They are great as they give you clear lines and points of reference but railings, road kerbs and stuff like that can also act as hooks to get a good match for position.
The Pixlr interface
The old image is pasted as a new layer in the new image. Pixlr, like many image editing apps, mirrors the Photoshop model of being able to break an image down into layers so you can edit elements individually. The old image is pasted in as a new layer, Layer 2.
This next part is the creative (or depending on your view, fiddly) bit. You will need to use a number of tools to move the image around and and match the positioning. To make this easier we can change the transparency of the old image (the top layer) so we can see the new image below.
To move the image around to get it into generally the right position:
Sometimes the perspective of an image isn’t quite right. You can apply some distortion to an image to try and fix this.
Note: This isn’t as fine tuned or flexible as in photoshop so it’s worth a little effort to get the original image framed well if you can.
Whilst you are positioning or, as we will explore next, editing the image, it’s often useful to zoom in and move around an image to get a closer look at the detail you’re matching.
Once you have the image in about the right place you can begin removing the bits of the old image you don’t want. There are a mix of tools you can use to remove parts of the image with varying degrees of accuracy .
You can use the Lasso tool to draw round content you want to delete. This is often good for cutting round cars or people. One way of working is setting the opacity of the old layer you can draw round objects in the new layer and ‘cut a shaped hole’ in the old layer. Like the image above.
Pixlr has a history function which is really useful for a bit of trial and error. If you can’t see it then select View > History a few times to toggle it. To go back just scroll through the history and click on the last ‘good’ point.
The images alone can make for a really interesting and engaging slideshow. But with a small amount of code, you can add a slider that lets the user mix between the two images. You can see an example of the code below. It’s not a complicated bit of code (I’m no coder). All it does is layer the old image over the new image and then change the transparency of the old image with the slider.
BTW You can get a little more detail on how my approach to coding works on this blog post about journalism coders.
This exercise was, as much as anything else,a reason to create a tutorial that I could add to a list that students can experiment with. The actual process is pretty straightforward if fiddly. But its a good chance to stretch the creative muscles and get useful content that we know plays well with an audience. It also helps reinforce the value of local knowledge and taking a step beyond a google image search. The chorlton history blog was not only a diverting and interesting find. If this was something I was going to do more of, contacting Andrew would be the first step in building a useful contact.
The code part is just me playing but, and I’m going to blog about this, don’t be put off trying.It’s not tricky code and tools like Codepen make pulling it together more structured. Feel free to fork and play and as always, comments and feedback always welcome.