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?

Mixing images –The ingredients

• An archive “old” image and a current new image.
• Access to Pixlr on the web

A word about the archive image

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.

The method

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

• Open http://pixlr.com/editor/ in your browser
• Use File > Open Image  to open your old picture
• Use File > Open Image to open your new picture
• In the toolbar down the left-hand-side of the window, click the Move tool Icon (first one on the right) or press the V key as a shortcut
• Click on the “old” image
• Select **Edit > Select All **of CTRL+A to select the whole image
• Make sure you have the Move tool still active, press V to make sure.
• Click on the “new” image
• Click** Edit > Paste**

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.

Matching up the image.

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.

• In the layers panel click the Layer 2 panel. I’d suggest clicking the image, clicking the text can put it in edit mode  – you can change the name of the layer.
• In the layer panel click the Toggle Layer properties button (it’s in the bottom Left-hand-side of the layers panel)
• The panel expands with a slider for opacity. Try dragging the slider back until you get a good mix between the two images. You may find that you change this from time to time as you work with the image.

General positioning

To move the image around to get it into generally the right position:

• Make sure you have the Move tool still active, press V to make sure.
• Click on the old image you pasted in and move it around to get an approximate position.

Resizing

• Make sure you have the Move tool still active, press V to make sure.
• Make sure you have the Layer2 (old image layer) active
• Click Edit > Free transform or press CTRL+T
• Drag the blue boxes to change the width and height TIP: Holding down shift whilst you drag will maintain the aspect ratio
• Hit **Enter **to commit the changes

Rotating

• Make sure you have the Move tool still active, press V to make sure.
• Make sure you have the Layer2 (old image layer) active
• Click **Edit > Free transform **or press CTRL+T
• hold your mouse near one of the four corners, a small, circular arrow will appear. Click and drag and the image will rotate.
• Hit Enter to commit the changes

Distort

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.

• Make sure you have the Move tool still active, press V to make sure.
• Make sure you have the Layer2 (old image layer) active
• Click Edit > Free distort
• Drag the blue boxes to skew the image
• Hit Enter to commit the changes

Getting a better look at the image

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.

• Click View > Actual Pixels to show the image full size
• Use the red square in the Navigator panel to move the view around
• If you need to get in closer use View > Zoom in
• To push out use View > Zoom out
• To return to seeing the whole image in the window use View > Show All

Deleting unwanted elements.

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 .

Erasing content

• Make sure you have the Layer2 (old image layer) active
• Click the Eraser tool icon or press E for the short cut
• Select a size and shape for the tool in the Brush options across the top of the screen
• Click and drag across the part of the image you want to delete.
• The soft-edge brushes are often the best as they make for a nicer mix between the two and you’ll get a better result mixing sizes and zooming in to pick out detail.

Selecting content

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.

• Click the lasso tool or press L for the shortcut
• If you want a soft-edge around the bit you cut out, set the Feather option. The value here will depend on the amount you’re removing. Try a large value (70 or so) for big chunks and smaller values for finer detail. Always set this first.
• Click-and-hold and drag the tool around the part of the image you want to cut out.
• Hit the Delete key

What if I make a mistake?

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.

Saving my image

• When you’re happy with the result.
• Select **File > Save **
• Save the image to a location of your choice.

Adding interactivity.

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.

Conclusions

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.