Repurposing print graphics for the web

Posted in: Archive

As part of the latest sprint for the online prospectus, we looked at the possibility of reusing the Course Structure diagrams that are part of the printed brochure.
As the old adage goes, a picture paints a thousand words (and these pictures have words on them as well, so that's probably something like a million words worth of content in each graphic...), so it was essential we found a way to use them online.

One issue we had to resolve was the legibility of the text contained within the diagrams when they were downscaled to work within a web browser - of particular concern was the fact that all the text was faced in a Serif font. A few hours of research and playing with real world examples and we came to the following conclusion: in general, there is no difference with legibility between Serif and Sans Serif fonts - it comes down to the end user's familiarity with the font and therefore their ability to 'interpret' it. Alex Poole has published a really good essay on this matter.


The University uses ITC Stone Serif as the default font for the Course Structure diagrams, which looks brilliant in print. Unfortunately, at 72DPI and squished to fit into a 1024x768 browser window, it loses a lot of its legibility and the modern sweeps and curves of the serifs become annoying artifacts that hinder letter recognition.
Our initial solution was to open the graphics up in Illustrator and switch to a clearer, simpler font for web use (I'm looking at you, Arial) - however due to the way Quark exports an EPS file, it was only possible to change the font one word at a time. For almost 100 course diagrams this would amount to nigh on a week's work. We simply don't have enough web monkeys to achieve this task. In fact, it would probably be more straightforward to completely redo the graphics from scratch.
Not an option.

Moving away from Illustrator and back into Photoshop we then played around with JPGs exported from Quark, and with different filters (such as Sharpen, and - indeed - Sharpen More) in an attempt to increase the legibility of the text. This worked to a certain extent, but also made the final graphics pretty scruffy-looking.

The solution

As pretty much a last resort, we decided to import the EPS files into Photoshop - but specify a much larger document size than they open in by default. This left us with a massive but very clear graphic, so we experimented with different percentages until settling on simply "twice as big". Unlike rasterised files which would require some interpolation in order to increase their size - an EPS file is basically vector information, meaning that it can be resized without any loss of quality.
We could then use Photoshop's excellent resizing algorithms to reduce the file down to the dimensions that fit within our target browser, without sacrificing the ability to actually read the content.

I'm sure there's a moral to this... however the upshot of it all is that the new online prospectus will be resplendent with images from its offline cousin that can be repurposed (now) with the minimum of effort - we've even prepared an automatic 'droplet' within Photoshop to do the majority of the donkey work, meaning we can just step in at the end and push a few pixels (and take all the glory).

Posted in: Archive