Showing posts with label howto. Show all posts
Showing posts with label howto. Show all posts

Wednesday, 9 March 2016

John Dee: how I made the exhibition gifs

The RCP library has the largest known surviving collection of books owned by John Dee, the Elizabethan polymath. In several of these Dee’s signature has been over-written or obliterated by a man called Nicholas Saunder.

It’s possible to disentangle the two different signatures if you examine them very closely. As part of the exhibition research I edited an image of them in order to show Dee’s original signature and then Saunders’ over the top.

Astrologiae iudiciariae ysagogica. Jean Taisnier, published Cologne, 1559
I’d hoped to use this image in the exhibition proper, and to display it next to the book itself. The image didn’t make the final cut, but we’ve been using a gif (animated image) of the two different signatures fading in and out as part of the exhibition publicity.


I started with a high-quality close-up photograph of the signatures, and I edited it using Photoshop Elements. Other photo-editing programmes (such as are available, such as the free GNU Image Manipulation Programme) and would work just as well. The functions will probably look a bit different, though

As in the editing process I described earlier, you need to use layers to create gifs. Layers are like old-fashioned sheets of acetate that you can pile up on top of each other. You can edit what’s on each layer individually, and can set the transparency (and other attributes) of each layer.

You need to make one layer for each individual frame of the animation.

For this animation, the frames followed this progression:
  • Original image alone
  • fading in the layer which highlights Dee’s signature (ie by decreasing that layer’s transparency step by step)
  • fading in the layer which highlights Saunder’s signature
  • fading out the layer which highlights Dee’s signature
  • fading out the layer which highlights Saunder’s signature
  • original image alone.
I started with a copy of the Photoshop file I’d made to extract the two signatures. Then, for each frame of the animation, I did the following:
  • set the transparency(/ies) of the overlay layer(s)
  • duplicated the overlay layer(s) and background layer (you need to keep the originals to continue working with them)
  • used ‘Merge down’ to stick the overlay layer onto the background layer – to make the one single layer needed to run the animation
  • re-named this new layer to say which transparency value(s) were used.



The transparency value were more-or-less as follows:
  • No overlay
  • Dee on its own: 10%, 20%, 30%, 40%, 50%
  • Dee at 50% with Saunder at: 10%, 20%, 30%, 40%, 50%
  • Saunder at 50% with Dee at: 40%, 30%, 20%, 10%, 0%
  • Saunder on its own: 40%, 30%, 20%, 10%.
After all the layers were ready, I made sure they were in the correct order (you can drag and drop to move them around).

Then I duplicated the first and frames a few times so that they would show for longer.

So save as a gif us the File>Save As option, and choose ‘gif’ (‘CompuServe gif’) as the file type. Tick the ‘Layers as Frames’ box. In the next dialogue box, tick ‘animate’ and then choose the frame rate. Remember to save the Photoshop file, too, in case you want to change things later!



And that was it, more or less.


I used more-or-less similar processes to make the other exhibition gifs. Some were much more straightforward: I just took lots of slightly different photos of a book with the camera mounted on a tripod, in the fashion of traditional stop-motion animation. It’s then just a case of layering up those images, by cutting and pasting them into a Photoshop file.

John Dee: photo editing to reveal hidden signatures

The RCP library has the largest known surviving collection of books owned by John Dee, the Elizabethan polymath. In several of these Dee’s signature has been over-written or obliterated by a man called Nicholas Saunder.

Astrologiae iudiciariae ysagogica. Jean Taisnier, published Cologne, 1559

It’s possible to disentangle the two different signatures if you examine them very closely. As part of the exhibition research I edited an image of them in order to show Dee’s original signature and then Saunders’ over the top.



Months and months ago I showed these images to a group on a visit to see some John Dee books from the CILIP RBSCG annual conference. I promised to explain how I'd made them, and at long last, here's a how-to.

I started with a high-quality close-up photograph of the signatures, and I edited it using Photoshop Elements. Other photo-editing programmes are available (such as the free GNU Image Manipulation Programme) and would work just as well. The functions will probably look a bit different, though.

The first step is to create a new layer. Layers are like old-fashioned sheets of acetate that you can pile up on top of each other. You can edit what’s on each layer individually, and can set the transparency (and other attributes) of each layer. Create your new layer via the layer menu.
 

 
Next, I painted the new layer white using the bucket tool.



Then I set transparency of the new layer to around 40%. You can switch which layers you can see by clicking the little eye icon next to the layer name.


To reveal one of the signatures, I used the eraser tool to remove areas of the white layer, to reveal the full-colour ink beneath. There was no magic involved – just a lot of careful editing, using the book itself as a reference. You can change the size and shape of the eraser tool using the controls at the top of the window. If you erase too much then you can add it back using the brush.


I used exactly the same procedure to uncover the Saunder signature. It took ages, with plenty of switching between the two to check that all the bits of ink were accounted for.



When I was happy with the images, I saved each as a separate jpg file, and saved the Photoshop file so that I could come back later and tinker with the images further.

I’d hoped to use this image in the exhibition proper, and to display it next to the book itself. The image didn’t make the final cut, but we’ve been using a gif (animated image) of the two different signatures fading in and out as part of the exhibition publicity. Watch this space for a post about how I made the gif itself.

Thursday, 24 May 2012

Behind the scenes at #cpd23: automating (some of) the registration process

A couple of weeks ago, I asked for thoughts about ways of automating the process of adding new subscriptions to a single RSS feed drawn from multiple sources.  This was to try and streamline the process of managing registrations for 23 Things for Professional Development. I seem to have come up with something that works, albeit in a somewhat ungainly fashion, so I thought I'd write it up.
Here's a diagram of what's what.  Red lines and text are manual steps done by the cpd23 team, and the blue lines and text are the automated bits.  The yellow stars show the outputs that are intended for general use.  If you can't see the image for whatever reason don't worry - I explain all the steps below.
Diagram of the process to process cpd23 registrations, explained the the text following this image
Icons by Mysitemyway Design Team via iconfinder.com


The aims of the system are
  1. to generate a tagged list of participants, so that participants and others can find blogs that interest them, based on geographical region and professional sector
  2. to create a feed of recent posts by participants to show on the cpd23 homepage
  3. to create a combined feed of all cpd23 participants' posts, to which anyone who is interested can subscribe
This is achieved in the following way:
  1. Participants register their blogs using a Google Docs form (embedded into this blog post).The data submitted into a Google Docs form is stored in a Google Docs spreadsheet, which can be accessed and edited.  
  2. Cpd23 team members manually visit each blog that is registered, and (if the link submitted is valid and the blog is a personal cpd blog) they add it to Delicious, including tags for place, sector, year and an alphabetical tag for the first letter of the blog title.  (I use the handy Delicious bookmarklet for this.)
    • Delicious provides scripts that power the 'recently signed-up' widget on the cpd23 blog, and the participants list on the participants page.  There is a limit to the number of links that Delicious will provide (100 at a time), which is why the alphabetic tags are added to the bookmarks: the participants list is powered by a script for each letter of the alphabet.
  3. An ifttt task takes all new bookmarks added to Delicious with the tag '2012' and submits them to the Google Reader folder 2012. Where possible, Google Reader can automatically extract an RSS feed from the link given.
    • Cpd23 team members periodically update the 'Participants posts' widget on the cpd23 blog, which runs using the Blogger blogroll widget.  It's easy to add new subscriptions in the 2012 folder from Google Reader.
  4. Another ifttt task takes all new posts in the Google Reader 2012 folder, and bookmarks them in Diigo, adding the tag 'cpd23feed'. (It could bookmark them in Delicious instead, but I wanted to keep the Delicious account just for links to blogs, and not confuse matters by adding lots and lost of links to posts there).
  5. And that's it.

Benefits of this system:
  • It minimizes the number of manual steps - we only need to get involved at two points in the process
  • It enables us to offer the 'added value' service of a combined RSS feed, on top of the Blogger blogroll and the tagged Delicious participants list.
Disadvantages of this system:
  • It relies on a lot of services running correctly
  • Time lag: the ifttt tasks, and the feeds from Delicious and Diigo update periodically, so new blogs and posts aren't available everywhere immediately.  The lag is usually up to an hour.
  • Ifttt only recognises new tags, so if Delicious recognises a 2011 participant blog such that we're just adding a new 2012 tag to an existing bookmark that blog has to be added to Reader by hand.
  • Google Reader doesn't always correctly find the feed of a link submitted from Delicious.
  • The resulting RSS feed, because it's a feed of bookmarks not posts, only shows links and not post text.  This really isn't ideal, but it's the best I could come up with.