Left a bit...

Unfortunately, whilst I was working on the odds and ends for the Kaleidoscope "Bob's Full House" event my wife became ill and was taken to hospital. This meant I didn't have the time or, to be honest, the right frame of mind to finish all the jobs I wanted to do for Rory.

The thing I'm most disappointed about is that I didn't get the chance to finish off the title sequence for "Bits and Bobs", the compilation of continuity clips taken from Bob's collection.

This is the sketch I did that to show Rory roughly what it would have looked like:

Click to enlarge

The Bob Monkhouse Collection

The documentary "The Bob Monkhouse Collection" documents how the Kaleidoscope organisation catalogued and archived the incredible archive of films, video tapes and sound recordings collected by the late Bob Monkhouse.

Charles Wheeler, apparently

The documentary was presented by Liz Barker, the Charles Wheeler of Blue Peter presenters, and was put together by my friend Rory Clark, the Lord Derby of Farcical Films. Rory asked me, the David Blunkett of graphic design, whether I wanted to put together a title sequence for it.

As time was getting short before the event, I thought the best thing to do was do dig in my bag of animations and see if I could adapt something I had already done. The Bob Monkhouse collection encompassed television, radio and cinema. So my main concern was finding something that could evoke all three media.

I remembered an animation I had done some time ago for another archive organisation, Transdiffusion. Chris Bowden-Smith of Transdiffusion had asked me to recreate an ABC Television start-up sequence from the late 50s, and I thought this could be just the thing I needed.

ABC Television was the weekend television contractor in the Midlands and North in the 1950s and 60s. They were set up by the Associated-British Picture Corporation, who were a company that both owned cinemas and made films. Their 1950s start-up sequence had radio waves, a cinema projection effect, and had a logo that would have been very familiar to television viewers tuning in to programmes such as "Oh Boy!".

Much more fun than Granada

I simply replaced the "ABC" lettering with "BOB", added the word "Monkhouse" in my B12JP typeface and added "The" and "Collection" in the face Forte.

Much more fun than Norman Vaughan

Rory was very happy with how the sequence worked, and thought the logo was so nice he wanted it as a badge for the end credit roller. Therefore he needed just the logo on a transparent background.

Much more fun than Charlie Williams

I exported it the logo from Macromedia Flash 8 as an Adobe Illustrator file, then converted that to an Inkscape .svg file using the uniconvertor tool method I explained in a previous post.

Steps (no Ronnie Hazlehurst)

In my recent post about the creation of my Monkhouse font, I complained there seemed to be no way to specify how much the Inkscape Inset and Outset commands inset or outset a shape by.

Well, there is, and I've now found it, in the Inkscape Preferences Window, filed under Steps. Needless to say, if only I had found this earlier it would have saved me an awful lot of time so I'm feeling a bit daft, as usual!

You Have Been Watching...

As you probably know if you come here often, recently I've been helping out my friend Rory Clark by doing some graphical odds and ends for three documentaries he was making for the "Bob's Full House" Kaleidoscope event at BAFTA.

One of the things Rory asked me over the phone was whether I could knock him up an endcap for the documentaries that would credit his company "Farcical Films". Rory was quite firm over the phone that he wanted something very, very simple and didn't want any animation.

I was equally firm that I wanted him to have some animation as I thought he was being far too modest and thought he needed to blow his own trumpet a bit more.

So what I came up with was a bit of a compromise - I would do him a little silent animation in muted BBC Co-Production endboard style.

In actual fact I already had an animated ident for Farcical Films that goes back many years that never actually got used for anything and I thought it was about time it got dusted off and used.

In the distant past I was living in the village of Mélykút on the Hungarian/Serbian border and watched an awful lot of Croatian (HRT) and Serbian (RTS) television. This was because they showed many English programmes with subtitles whereas in Hungary they dub everything - badly. I got quite familiar with their presentation, and one of the RTS idents back then started off with EBU colour bars and resolved into the RTS logo. As a television presentation fan I thought this was fantastic idea, and definitely worth pinching.

So I created a "Farcical Films" ident using this idea for Rory. It was also an learning exercise for me in Swift 3D, which I had just started using for the first time. Swift 3D is an incredible program that creates vector 3D, and can export in .swf format. It also features a number of nice features to make very small 3D images which are excellent for web work, and also a number of options for "cartoony" 3D for 2D animation use. I used it for many jobs over the years and if you've never used a 3D program before it's an excellent one to start with due to its ease of use and high quality of its documentation.

I started with what looked like colour bars, but were the Farcical Films letters arranged in a line end on.

I then animated the letters into place, whilst making them white.

I finally faded on the word "FILMS" to produce the Farcical Films logo.

As Rory obviously wanted something more muted, and so that Kaleidoscope got their credit too, I created something a bit more BBC.

K logo starts formed, Farcical films logo starts as bars.

The bars animate.

And the logo is revealed.

I speeded the ident to double speed so it would run at 50fps. This meant that both the animation was short and sweet (under 3 secs) and that Rory could interlace the animation to get smoother movement, which is something he is always keen to do when possible.

G Spots

While I was producing a title sequence for the "A Shower Of Shot" documentary, Rory Clark asked me if I would also produce some little animations that would appear in the documentary itself.

Rory had decided to break the documentary into sections, with the title of section being a word beginning with the letter g. He asked me if I would produce a few seconds of animation that would introduce each of the sections. He gave me a list of words "girls, gifts, gags, gaffes, etc." and let me get on with it.

I started by creating all the words Rory gave me in Inkscape, and exported them all for import into Macromedia Flash 8 as .eps (Encapsulated Postscript) files.

Why don't you build yourself a word...

My first idea was a bit too elaborate; I got carried away, which I often do! I produced an apple on a gradient background...

...that gets hit by a bolt coming out of a crossbow...

...smashing the screen...

...and revealing the name of the section underneath.

Rory gave me a bit of much needed direction and said he simply needed the word "golden..."...

...which would then be hit by a bolt...

...you'd see a flash...

...and with a quick shudder...

...the title of the section would be revealed.

Another thing Rory asked me to do was a breakdown caption. One of the things he remembered about watching "The Golden Shot" as a child were the breakdowns caused by technical difficulties, strikes or IRA bomb threats. These were the joys of live television in the 70s.

Obviously there was no argument about the style - Rory wanted an HTV holding transparency in the style we both remembered from the seventies which was handy as I would have probably given him one of those anyway! I selected a suitably naff publicity shot of Bob from a selection Rory sent to me and recreated in Inkscape what we would have seen in Wales and the West in the case of one of the aforementioned catastrophies.

The polyester clad stars of Wednesbury Co-op cheese counter...

Another thing Rory asked me to do was to add, for technical reasons, a few seconds of grey onto the beginning of the ATV Colour Zoom. Whilst I was happy to oblige, I suggested that he might also like to add this:

A fitting place to finish, I think.

I created it by tracing the caption that appears on the front of a telerecording of the last Golden Shot Bob presented in 1972 after he had been sacked for no reason whatsoever by Francis Essex. I used Inkscape to create the entire caption -  I couldn't face drawing something as fiddly as this in Flash anymore! I must be getting old...

And with that, my work on the "A Shower Of Shot" documentary was done.

A Shower of Shot

Now I'd produced my "Monkhouse" font, my next job was to produce a caption using it. The Monkhouse font needs to be used very large to be legible, so the ATV graphic designers merged the letters together to give themselves enough room.

I also love the fact that the words are not centred.

I looked at the example above and noticed that the outer two outlines were fused together. By putting my letters over the ones in the screen-grab I worked out that the fourth outline of each letter should overlap the third outline of the letter to its left.

To do this letter fusing I used Inkscape and the letter outlines I'd drawn to import into FontForge. I used them rather than the true-type font simply because they were already the right size. I did this fusing a letter at a time, left to right. First of all I'd overlap the letters.

Overlap the letters

Then I'd merge the two outer outlines using the Inkscape Path Union feature. After that I deleted the areas of the merged path I didn't want. The quickest way to do this was simply to draw a rectangle over an area of the overlap...

Rectangle over the overlap

...and then use the Path Difference feature....

Path Difference

...and then tidy up the paths using the Nodes tool.

And Bob's Your Uncle

Then I'd do the same thing again for the second outline in.

Here's the finished caption in Inkscape:

The end result.

After Rory OK-ed the end result he asked if I wanted to have a go at animating a title sequence for him. I said I would, provided I could get Macromedia Flash 8 to behave on Ubuntu GNU/Linux (I don't have a copy of Windows). WINE is a very clever piece of free software that allows programs written for Microsoft Windows family of operating systems to run on the GNU/Linux operating system.

I already had WINE installed so I tried installing my copy of Macromedia Flash 8 and it worked perfectly. The only problem was the lack of anti-aliasing on some of the smaller fonts used on the interface and some of the keyboard short-cuts I liked using not working.

The next problem I had was how to export my Inkscape design into Flash. After doing a few tests the best format to use for the Inkscape to Flash 8 transfer seemed to be Encapsulated Postscript or ".eps".

Now I was sure I could do something useful in Flash I got back to Rory and asked him which music he wanted to use. Rory quite rightly sent me back a copy of the late sixties/early seventies theme that was used for the longest amount of time. However, there was something missing - I wanted the "left a bit, right a bit, fire" that I remembered from my childhood. I suggested Rory cull it from the start of the final season's title sequence.

I wanted to include this because I wanted to add the iconic ATV Colour Zoom logo at start of the sequence and have Bob smash it to pieces with a crossbow.

First of all I traced the bolt and bow from the final season titles - this was a very easy job as the shapes were quite simple. I layered a few gradient fills on top of each other to get a kind of "airbrushed" effect.

Running on GNU/Linux? That's Flash...

Then I needed to smash the ATV logo to pieces. The first thing I needed to do was break apart my ATV logo in Flash so that it was all one symbol on one layer with no groups. Then I drew a "crack" shape on top of it. Finally, I turned the pieces inside each bit of the "crack" into separate symbol so I could animate them.

Lady Plowden did this too...

Although it's very simple it worked quite well. As far as the titles themselves were concerned I wanted to copy the final season titles with the bolt setting off on a journey with concentric rings of airbrushed items giving an impression of movement.

This is what I wanted to copy...

One of the items I needed to borrow from those original titles was, naturally, an apple. Tracing the apple in Flash was an absolutely horrible job, and reminded me how lucky I am to be able to draw things in Inkscape most of the time. I decided not to draw the apple in Inkscape as I had no way of getting the gradient fills from Inkscape into Flash - they come across as bitmaps in all the formats I tried. This was no good as all of the objects I drew had to change size dramatically in the finished animation so they really had to be totally vector shapes.

Looks sweet, but rotten to do.

If you've never watched "The Golden Shot" you may not know that over the theme music an announcer says "...Live, from Birmingham...". To illustrate the "from Birmingham" part I wanted a ring of ATV logos to appear. That was simplicity itself. But for the "...Live..." part I wanted to show the reason for the program being live - a telephone. "The Golden Shot" was a program where viewers at home could phone in and play.

In the later seasons of "The Golden Shot" a gold plated Trimphone was used, and I just had to have a trimphone in the titles as they are the essence of Britain in the seventies. I found a website with pictures of trimphones and I'm sure you'll be delighted to know the trimphone I used as reference material was one of the series designed by Lord Snowden.

Something beginning with T: Trimphone - lovely!!!!!

Finally, I wanted to have a postcard, as viewers writing-in was an important part of the programme too. I used my Queen's head and stamp perforations I'd designed many moons ago to use on a recreation of an ITV Schools and Colleges interval transparency. Anyone familiar with Bob's life story will understand the significance of what's actually written on the card.

And I want them served on that nice silver cake stand...

Sadly I currently don't have access to the fantastic Swift3D here in England - I left my serial number in the UK and you can't export without it. If I had, I would have used it to realise one of Rory's original concepts for the title sequence.

What he asked me to do was to make the "O" rotate when it is hit by a crossbow bolt so that it looked like an "i" when it was on its edge so we got a shit/shot gag on the main title card. In fact, if I had had Swift3D I would also have recreated the wonderful psychedelic silver tube effect from the 1972 title sequence as well - it truly has to be seen to be believed.

Write a bit...

My friend Rory Clark does an awful lot of work for the classic TV organisation Kaleidoscope. One of the many things he does for Kaleidoscope is produce documentary films for their events. Their most recent event, "Bob's Full House", was held in The David Lean Room at BAFTA in London on the 24th October 2009. The event was to feature, amongst many other things, three specially made documentary films about Bob Monkhouse and I ended up helping out Rory a little by contributing some bits and pieces to two of them.

The first documentary Rory asked me to contribute to was "A Shower Of Shot" - a half hour history of the popular ATV Sunday afternoon game show "The Golden Shot". The Golden Shot is one of my earliest television memories, so it was something I was delighted to contribute to.

Left a bit, right a bit, fire!

Initially Rory asked me to just create him an opening caption in "one of the Golden Shot typefaces". There were four to choose from. The original Golden Shot title sequences used the one of the "grots" or Grotesque fonts.

Safe, dull, grot.

The colour era heralded something much more exciting - a wonderful "disco" engraved font complete with coloured targets.

Almost illegible, but who cares! ATV graphics at their outrageous best.

The Charlie Williams era was heralded by the strange arts and crafts Arnold Boecklin font. The typeface was as out of place as Williams, so it all made some kind of sense.

Are you alright my flower? No.

Then we get to the transatlantic schmaltzy Stephanie De Sykes and Rain era, with the rather transatlantic schmaltzy looking "Flamenco" face.

Life is a Beautiful Book; your mileage may vary.

There was really no contest as to which font I wanted to use but there was one small problem - I couldn't get hold of the "disco" font for love nor money. I then recalled the advice of a friend, the great Southern/TVS graphic designer Alan Scragg: "I design fonts for clients as a matter of course as part of a design." So I thought I'd try and do a Scraggie and do the same thing.

My plan was to draw the letter shapes in Inkscape for import into Fontforge on Ubuntu GNU/Linux. I was a bit nervous about this font as the nature of the typeface meant that I would be drawing many, many more outlines than I would be drawing for a normal face.

I thought the most sensible place to start was with the lower-case letter "l". I took a screen grab of the end caption from a DVD of the program that Rory sent me. I imported this into the bottom layer in Inkscape so that I could trace over it. I then corrected the geometry of the grab so that the horizontals and verticals of the screen grab were properly straight. Next I cheated a bit - I played with the scale of the screen grab so that the white elements of the letter "l" sat on pixel boundaries. This would make my job in creating the letters much easier. Once I had done this I added some horizontal guides and turned on snapping to guides.

That was an l of a job...

From the letter l, I could see that the letters all followed a consistent pattern. An inner letter, which is 3 pixels thick, two pixel gap, three pixel thick shape, two pixel gap, three pixel shape, three pixel gap, three pixel shape, three pixel gap, three pixel shape, eight pixel gap, five pixel thick shape.

Just to check, I then did the lower case "o", which was easy as it was made out of concentric circles. This worked perfectly so I knew I was on the right lines, so to speak.

My problem was this - creating concentric circles and rectangles was easy. However, how would I create concentric "g" or "f" shapes? Inkscape does have an "Outset" command, that would seem to solve this problem. You give it a shape and it creates an expanded version. However, it gives you no control over how much it expands the shape by. This was no good to me - I needed my shapes expanded by exact amounts.

In the end I resorted to using stroking. In other words, I'd draw the inner shape. Then stroke the inner shape with a two pixel thick stroke. I'd then convert that stroke to a shape and stroke that with a three pixel thick stroke and so on. It was repetitive and slow, but it worked a treat. If any Inkscape gurus can tell me a better way to do this I'd be grateful as there's another engraved font I want to create soon!

After I had stroked a shape and converted the stroke to a fill, I had to remove a large number of extra, unneeded points created by the stroke/convert lines to fill process before I stroked the shape again. This was particularly important as I would be importing my shapes into a font editor later - I needed to keep each one as simple as possible.

This was a lovely "listen to music" type of job that you get with graphics sometimes, but in order I didn't get lost or confused (my default state) I made sure I wrote down where I was on my pad. It ended up looking like this (click to enlarge):

Notice the crossed out alphabet!

The other problem I had was more minor - I had to "make up" the letters that didn't appear in the caption. Luckily it was pretty clear from the style of the letters I had got how the other letters should look.

The next job was to sort out all the letters I had made so I could import them into FontForge 2.0. This was quite a confusing job. In this typeface all of the letters (or glyphs) have a number of "cut out" areas inside them which should not be filled with colour.  The font renderer that displays them needs a way of working out which bits of the glyph to fill and which bits not to fill. It does this by looking at the direction in which you joined up the points on each outline (or path).

You have to join up the points that make up outermost path in a clockwise direction (to show it should be filled), the points that make up the next path in in an anti-clockwise direction (to show it should not be filled) and so on. This meant that I needed to know which path was which. To make it easier I filled the concentric shapes in Inkscape with different colours so I could see what was going on.

The outlines got very confusing, thanks to the "targets".

Without the colours, it wouldn't be at all clear that the yellow area was in fact all one outline. The blue area would be a bit of a tricky one to work out as well.

I then exported each letter as a separate .svg file, in the same way as I did for my Central and Picasso faces.

Individual letters as svg files, ready for importing into Fontographer.

The import into FontForge 2.0 was quite straightforward, apart from the fact there seemed to be a bug in the FontForge svg parser. It didn't seem to recognise "corner" points properly which meant I often had to spend time connecting the corner points up by hand. In other words I was a grown man spending hours on end doing dot-to-dots.This bug has since been fixed - which would have saved me hours. C'est la vie...

The letter "m" imported into FontForge.

Once I exported the truetype font, I named it "Monkhouse" in Bob's honour. If you want to have a play with the Monkhouse font yourself I've released it under CC-BY-SA and you can download it from here. It's lower case only and has no punctuation. One day I'd like to return to the typeface and finish it off properly.

In a future post I'd like to explain what I actually ended up doing with the "Monkhouse" font, but I think that's been quite enough stupid rubbish from me for one day!

The finished font: Monkhouse.

By the way, the Kaleidoscope event was to raise money for the Prostate Cancer Research Fund, so if you do make use of the font, if you give a few bob for Bob that would be lovely.

Granada wrongs...

Sometimes, despite trying your best, you can still get things incredibly wrong. Seven years ago I wrote an article for Transdiffusion called "Granada writes...". I tried really hard with the article to research it and back up what I wrote but it's full of errors.

There are several incidences of me saying Venus was used on this caption or that caption when the font employed was actually one of the "grots" or Grotesque fonts.

Absolute bobbins - Northern News is written in Grotesque Bold!

The diagonal cuts on the E should have really given the game away (click on the picture to enlarge)...

It should have been obvious that Granada's Northern News was grotty.

There's a whole article to be written about the use of grots in 60s and 70s television - but probably not by me, or it would be full of factual errors!

However, the most grievous and embarrassing error was that I said that the Granada corporate face from the 1968 was Clarendon Bold. It's actually Egizio Bold.

The give-away here is the fact there are curves rather than right angles inside the R and the D (click on the picture to enlarge).

Next on Granada - making Joy Division oven gloves...

Egizio was designed by Aldo Novarese (1920-1995). He also, with Alessandro Butti, designed Microgramma and Eurostile. These two faces would also play an enormous part in television presentation in the late sixties and early seventies. A good list of Novarese's other faces can be found here.

If you want to get a good starter collection of typefaces that were used on television in the 1960s and 70s including an excellent version of Egizio (called E710 on the disc) then you could do a lot worse than invest in the SoftMaker MegaFont XXL 2.0 CD. Although the price (45 Euro) and number of faces might suggest low quality, I've heard a number of people claim that many of the fonts on it are not only historically important and unavailable elsewhere but many of the others are more faithful reproductions of the originals than those offered by the big name font sellers. As soon as I get the money I'm certainly going to invest in a copy.