Archive mashup pics with extra interactivity

Mashups of archive and current images do well on sites and social media
Mashups of archive and current images do well on sites and social media

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

two images

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 Pixlr interface

  • Open 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.

History pic mashups   Google Docs1

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.

History pic mashups   Google Docs3

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


  • 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


  • 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


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

Archive mashups   Google Docs5

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

History pic mashups   Google Docs7

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.

See the Pen An image before and after slider by Andy (@digitaldickinson) on CodePen.

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.

Ivory tower dispatch: A tale of two websites

Across a number of classes this week, two websites have stood out.

To start the week I had this from China

Worst headline of the week!

Shoddy! Which thesaurus did they drag that one up from!

This was paydirt for me as I talked to the class (a group of chinese students) about writing headlines, seo. Something that “Shoddy railway project closed down” fails at in every measure.

Worse still the story is really good:

The 74.1-kilometer railway project [Jingyu-Songjianghe Railway project in Changchun], with a total investment of 2.3 billion yuan ($360 million), was recently found to have illegally contracted a fake company and a couple of laymen who barely know anything of building bridges.

Two blokes stroll up and blag $360 million! Come on!

The week ended with a lot of talk about video and a chance for me to roll out my favourite example of the use of online video

Visceral video at its best

It’s an old story but for me it perfectly illustrates the way that video can enhance a story.  This is clip video at its finest – the text tells the story and the video shows you the visceral experience. It enhances the story and works with the text in a combination of media that’s unique to the web.

When I play this in a class I know that one minute in I will get a reaction, a big ooooh that underlines what video is great at. Watch and see what I mean.

Does journalism need a fail whale?

I thought about the title of this post as I was reading around how the recent update to twitter has caused a flurry of posts outlining what it will mean for journalists.

Over at the Nieman Lab Megan Garber ponders what the new twitter might mean for networked journalism. She makes a good point about how this might be effected by “Twitterers, end-user innovation-style”.

But she ultimately concludes that:

The of today, as compared to the of yesterday, is much more about information that’s meaningful and contextual and impactful. Which is to say, it’s much more about journalism.

You could take a view that she means Twitter has now become more useful to journalism. But I have to ask how much journalism is ready to take advantage of what it has to offer.

In amongst the early comment I particularly liked Laura Olivers pondering on what the new features could offer:

I can also see clever journalists using the embedded feature to tease stories with video snippets and by giving their Twitter audience more content encourage those followers to visit a news site and engage there too

I love that idea. But how many newsrooms are ready to take advantage of it?

It’s easy to dismiss putting time in to getting your multimedia on twitter as a waste of time. Like the ipad, it’s easy to dismiss things like twitters new features as gadgets and technology that get in the way of proper journalism.

But experimenting with getting a video on to twitter is not about video on twitter. That’s the easy (now easier bit). It’s about exploring if you have the capacity to do video at all. Just like exploring delivery of content to the ipad is a way to experiment with html5. Hell, if nothing else it’s a convenient excuse to try.

If you don’t take the opportunity to experiment then you will find that you have less of a capacity to produce the content your audience will want and no ability to chase them as they migrate to platforms that do.

When they come to you, you may as well have the newsroom fail whale up: “Sorry we are over capacity”

Real capacity

Maybe we should be more honest about what we can and can’t do. Be more bullish about what we do well. Perhaps we should get over wanting to chase them everywhere (or corral them in one place behind a paywall).

Or maybe we should take advantage of the free, open and engaged platforms to see just what capacity we really have.

Original image: iwona_kellie on Flickr Multimedia review site

News reaches me via the newspaper video group about  me about an excellent new project called Findingtheframe by  Colin Mulvany,  multimedia producer at The Spokesman-Review in Spokane, Washington.

According to Colin the site was set up as a website

for the sole purpose of connecting those who need feedback on their multimedia, to professionals willing to share some time and knowledge.

It came off the back of a post on his (excellent) blog Mastering Multimedia where he voiced his disappointment at the quality of the video being submitted to the NPPA Best of Photojournalism Multimedia Contest

The plan is to have onboard as many “expert” volunteers as possible that have solid foundations in video storytelling, audio slide shows or Flash projects. This pool of reviewers will peruse the submitted links of multimedia in the “Story Pool”. If they decide to comment on a story, it will then become public on theFinding the Frame home page where anyone else is free to give added feedback.

The site has already drawn in some great content and some lively debate. Well worth a look and if you are in that game then sign up to help review.

Enhanced by Zemanta

Sell your redesign – make a commercial

I’m getting back to my roots this week with lots of video stuff including my Newspaper video survey. So it was nice to get an email from James Cuff at the South Wales Echo who gave me the heads up for a video he produced as a promo for their re-design:

Your Echo through the ages from James Cuff on Vimeo.

How cool is that.

How did he do it. In a nice piece of cross-promotion for the video James told

“I filmed several of our journalists, who feature both in print and online, in our new green-screen studio before animating the elements in After Effects and editing the final video to a soundtrack.”

Green screen! After effects! Well, James does have a multimedia degree. But to have that kind of production skill in house is a coup for the paper. It shows through in James’ other video work.

Now my advice would be to take advantage of the advertising downspend and get some prime TV space for the ad whilst it’s cheap. Really get that disruptive strategy working

Enhanced by Zemanta

Video workload survey

A twitter tag cloud of newspaper video (generated using
A twitter tag cloud of newspaper video (generated using

It’s grim times out there for video at the moment. The tag cloud above, generated from twitter, tells a familiar story.

As Colin Mulvany recently put it

Newspaper produced video is at a crossroads. As many U.S. publications turn inward to focus on their traditional print products, many online producers are wondering if they should continue to invest the extra time it takes to shoot and edit video. It’s such a crazy time to be a visual journalist. Newspaper photo staffs are being slashed and devalued, as publishers try to protect what’s left of their bottom lines.

If anyone is qualified to ask if video will survive it’s Colin. But I’m interested to find out whether video is still on the agenda and how it’s being done.

I’ve asked this question before when I conducted a survey of the who, what and how of video in 2007. The results of that little survey are still up and, according to my stats, get a regular look.  So I thought I would try the survey again and see how things have changed.

So if you are involved with producing video for the web,  I’d really appreciate you taking the time to complete the survey. It’s short and easy so won’t take too much time and I’ll share the results as I did last time.

You can take the survey on this blog at

or(if the scripting is playing up) at

Feel free to share the link. The more the merrier.

A timeline of online media landmarks

I’ve been doing a bit of ‘multimedia’ with students including maps and the wonders of Dipity timelines. Whilst picking through the backlog of posts in my reader I came across a few posts with defining moments for online journalism. So, as a bit of fun, I thought I would add them to dipity as an example to use.

I’ve used Mindy McAdams’ Timeline of breaking news and Paul Bradshaw’s post asking “Are these the biggest moments in journalism-blogging history?” as the main sources. Alf Hermida also pitched in suggesting the BBC election coverage and Death of Diana as defining moments. I agree so I’ve added them as well.

I’ll add some more when I find them or , of course, if you want to suggest any.

(nearly)Free video editing from Avid

It’s been a while since I’ve posted anything directly video related. Something that will be remedied over the next few weeks. In the meantime I wanted to point you to a PC only, free video editor called VideoSpin from Avid. Well technically it’s from Pinnacle, who are now owned by Avid.

It offers an impressive little feature set including titles, sound effects and an easy export to YouTube. But it does have some flaws. oh,and it’s only PC)

At a glance:

  • Only one video track
  • Great for hard disk cameras but no control for tape based camcorders.
  • Three audio track. One for the video and two that will take any file.
  • Rubber band editing for audio]
  • A great title tool
  • MPEG2/4 capacity limited to 15 days then you need to buy the codec pack (Less than 10 pounds)
  • A great (nearly free) editor that is a big step up from Windows movie maker.
  • Did I mention it’s only available for the PC

In more depth.

The interface

Videospin has a nice clean interface which should be an easy transition for people used to Windows Movie Maker. As nothing is really free these days the screen is dominated by the ad in the middle of the screen. You can’t get rid of it but it isnt as intrusive as you may think.


Here is one of the areas where Videospin falls down a little for some. There is no camera control so tape based capture straight in is out of the question. You could use one of the advertised Pinnacle apps or just use windows movie maker to create the files.

It’s pretty obvious that this is aimed at the hard-disk/removable media mob and it’s no worse off for that. I tried a drag and drop import of a 1080i M2ts file for the demo movie below and it worked fine.

According to the FAQ it will deal with a number of different formats through its import settings:

Video: (.avi, mpg, .mpeg, .mod, .mp2, .mp4, .wmv)

  • AVI (DV AVI)
  • MPEG-1
  • MPEG-2 (optional) MPEG-4 (optional)
  • DivX (optional)
  • WMV

Audio: (.Wav, .mp3, .mpa, .m4a, .wma, .AVI)

  • Dolby 2ch (optional)
  • MPEG-1 Layer 2
  • MP3 Audio

But notice the optional. The software has a 15 day grace period and then it will no longer handle MPEG-2/4 and DivX. That’s a clear problem for people editing off hard disk cameras as the M2TS files are MPEG 2. To get that MPEG functioanlity back you need to buy the Spinpac codec bundle. But it’s only £6.99 (11 bucks) so not a budget busting hobble.

Through the import you have all the usual scene detect options which display as a neat thumbnail. In a nice touch you can scroll automatically through the scenes using the play bar in the playback window.


It may be limited to one track but Video editing is a straighforward drag and drop effort. Drag a clip from the clip album and all the trimming is done on the timeline. This is done with the standard dragging of the in or out or you can split a clip with a Razor blade function. Clips can also be dragged around to re-order a movie with any gaps closed up behind you as you go.

Audio editing is one of the features that Videospin has over WIndows Movie Maker. Essentially you have 3 audio tracks to play with;  sound from the video clip, a music track and a second audio track although the music and audio tracks are interchangeable.   You can also take a video clip and lay it on the audio track and it will just take the video, effectively splitting the sound and picture, which gets you more than a way to getting over the lack of a B-roll video track.

Another great audio feature is the rubber band editing for all tracks. Mixing your audio is not just a one shot thing any more. A high quality feature for free software.

Bells and whistles

The FX are pretty limited even by Movie Maker standards, but useable. The more interesting part is the Title generator. Behind the ‘okay’ set of presets is actually a pretty powerful title tool that allows you add pics and has some snazzy text effects. Definitley worth a play with. The effects can also be added to the titles to.


The list of export formats in Videospin is equally impressive, nearly identical, and equally limited by the 15 day thing as the import option.As well as being able to save to a standard file on your desktop they also offer an ‘Upload to Youtube’ option which will compress, login and upload a file to an account of your choice. This is also available for Yahoo video as well but this requires the extra MPEG 2/4 codec.

But beware. It says in the Faq that it will do Flash Video but I couldn’t find the option for exporting anywhere. Maybe it’s because I was working on XP not Vista or maybe they are passing the YouTube export off as flash encoding.


Here’s a little demo of what I played around with:

A number of people have commented on Videospin’s limited feature set but praised it’s stability. And I’m still disappointed that Avid got rid of Free DV, its try avid product, and this won’t fill that gap. But I have to get over the fact that it isn’t meant to. It’s clear that the app is a marketing tool for getting people to upgrade to Pinnacle Studio – and app with a less of a reputation for stability. Its also aimed to sit between other products like Video Transfer and Instant DVD recorder. But in reality, who cares.

Being strict it’s not a free app as most of us will want the MPEG2/4 capcity. But even costing in the cost of the codec pack, Videospin is an absolute bargin at less than 10 pounds.

If Windows movie maker is looking limited but the budget just won’t stretch then this is a must have for PC based video people.

Download it from the Videospin website

Zemanta Pixie

Newspaper video: Playtime = happy journos

Picture from Flickr user Huladancer

This has been sitting in my list of things to blog on, so with a bit of delay, here is an interesting bit of data from a recent report on digital journalism from a couple of PR companies.

[T]he study has uncovered a ‘40/40 Factor’ in action – 41% of respondents now produce more than 40% of their output online in the first instance. The ‘40/40 Factor’ is even more interesting when one considers it was only in October 2005 that the Daily Telegraph became the first UK newspaper to publish online, before the print edition.

Interesting stuff. A 40/40 distribution of web first. Could this be a candidate for 50/50?


But more interesting for me was the what the report has to say on video

61 per cent of UK respondents said their publications offered video or TV content as part of their online presence compared with 41 per cent of respondents from other European countries

That from Laura Oliver’s article on the report over at

Sounds like good news. But wait there are some howevers (they’re the new but you know):

However, over three quarters of UK respondents said that producing additional multimedia content for the web was the biggest challenge to their jobs.

Oh, dear

However, only 10 per cent of the overall respondents – and 14 per cent of those in the UK – said they had received training for producing multimedia content.

Double oh, dear.

In fact the survey says that 65% of those surveyed said they had trained themselves in podcasting and video.

Here is the reports take away graphic:

That’s pretty shoddy isn’t it.

But video seems to happen regardless. Some form of training must be happening.

My experience is that there is a lot of under the wire training going on. That’s born out by something I read on today.

In an interview with Alison Gow about the Liverpool Daily posts fantastic efforts online, we get an insight in to the way video works in Liverpool.

Video is a separate entity altogether – one video journalist is responsible for managing libraries, cutting pieces and training newsroom staff and reporters in video-journalism.

She has trained eight other staff so far, giving them a week’s hands-on training so that they can manage handicams and cut footage. They aim for a new web video each day.

That seems to be the way a lot of this is happening. A few people are training in house but the majority of journalists are doing it themselves.

I get (some) satisfaction

Does that make them unhappy?

It seems not.


This may come as a shock to the more for less brigade and, though it may be it’s a leap of logic on my part, it would seem that journalists enjoy learning new skills – wherever they are doing that.

For me that just underlines again the real importance of my hobby horse of playtime (set aside time for journalists to try new things). Give your journalists time to learn the new skills and maybe that ‘enjoy it more’ figure will grow.

Zemanta Pixie