Posted on

ATV Yesterday and Today

If you’ve read my blog before, you may have come across some posts about my friend Roddy Buxton. Roddy is an incredibly inventive chap – he’s rather like Wallace and Grommit rolled into one! He has his own blog these days and I find everything on it fascinating.

One of Roddy’s cracking contraptions

One of the subjects recently covered on Roddy’s blog is the home-made telecine machine he built. The telecine was a device invented by John Logie-Baird at the very dawn of broadcasting (he began work on telecine back in the 1920s) for transferring pictures from film to television.

Roddy also shares my love of everything ATV, so naturally one of the first films Roddy used to demonstrate his telecine was a 16mm film copy of the ATV Today title sequence from 1976.

This title sequence was used from 1976-1979 and proved so iconic (no doubt helped immeasurably by the rather forgetful young lady who forgot to put her dress on) it is often used to herald items about ATV on ITV Central News. Sadly, as you can see below, the sequence was not created in widescreen so it usually looks pretty odd when it’s shown these days.

How the sequence looks when broadcast these days.

The quality of Roddy’s transfer was so good I thought it really lent itself to creating a genuine widescreen version. In addition, this would provide me with a perfect opportunity to learn some more about animating using the free software animation tool Synfig Studio.

The first thing to do when attempting an animation like this is to watch the source video frame by frame and jot down a list of key-frames – the frames where something starts or stops happening. I use a piece of free software called Avidemux to play video frame by frame. Avidemux is like a Swiss Army knife for video and I find it handy for all sorts of things.

Video in Avidemux

I write key-frame lists in text file that I keep with all the other files for a project. I used to jot the key frames down on a pad, but I’ve found using a text file has two important advantages: it’s neater and I can always find it! Here is my key frame list in Gedit, which is my favourite text editor:

Key-frame list in Gedit

After I have my key-frame list I then do any experimenting I need to do if there are any parts of the sequence I’m not sure how to achieve. It’s always good to do this before you start a lot of work on graphics or animation so that you don’t waste a lot of time creating things you can’t eventually use.

The ATV Today title sequence is mostly straightforward, as it uses techniques I’ve already used in the Spotlight South-West titles I created last year. However one thing I was not too sure about was how to key video onto the finished sequence.

Usually, when I have to create video keyed onto animation I cheat. Instead of keying, I make “cut-outs” (transparent areas) in my animation. I then export my animation as a PNG32 image sequence and play any video I need underneath it. This gives a perfect, fringeless key and was the technique I used for my News At One title sequence.

However, with this title sequence things were a bit trickier – I needed two key colours, as the titles often contained two completely different video sequences keyed onto it at the same time.

Two sequences keyed at once

Therefore I had to use chromakeying in Kdenlive using the “Blue Screen” filter, something I had never had a lot of success with before.

The first part was simple – I couldn’t key two different video sequences onto two different coloured keys at once in Kdenlive. Therefore I had to key the first colour, export the video losslessly (so I would get no compression artefacts), then key the second colour.

The harder part was making the key look smooth. Digital keying is an all or nothing affair, so what you key tends to have horrible pixellated edges.

Very nasty pixel stepping on the keyed video

The solution to this problem was obvious, so it took me quite a while to hit upon it! The ATV Today title sequence is standard definition PAL Widescreen. However, if I export my animation at 1080p HD and do my keys at HD they will have much nicer rounded edges as the pixels are “smaller”. I can then downscale my video to standard definition when I’ve done my keying and get the rounded effect I was after.

Smooth keying, without pixel stepping

The other thing I found is that keying in Kdenlive is very, very sensitive. I had to do lots of test renders on short sections as there was only one “Variance” setting (on a scale between 1 and 100) that was exactly right for each colour.

So now I was convinced I could actually produce the sequence, it was time to start drawing. I created all of my images for the sequence in Inkscape, which is a free software vector graphic tool based around the SVG standard.

However, in order to produce images in Inkscape I needed to take source images from the original video to trace over. I used Avidemux to do this. The slit masks that the film sequences are keyed on to are about four screens wide, so once I had exported all the images I was interested in I needed to stitch them together in the free software image editor The GIMP. Here is an example, picked totally at random:

She’ll catch her death of cold…

Back in Inkscape I realised that the sequence was based around twenty stripes, so the first thing I did before I created all the slit mask images was created guides for each stripe:

These guides saved me a lot of time

The stripes were simply rounded rectangles that I drew in Inkscape. It didn’t take long to trace all of the slit masks for the title sequence. Two of the masks were repeated, which meant that I didn’t have as many graphics to create as I was fearing.

Once the slit masks were out of the way I could create the smaller items such as the logo:

ATV Today logo created in Inkscape

And, with that, all the Inkscape drawing was done. It was time to animate my drawings now, so I needed to export my Inkscape drawings into Synfig Studio. To do this I was able to use nikitakit’s fantastic new Synfig Studio SIF file Exporter plug-in for Inkscape. This does a fabulous job of enabling Inkscape artwork to be used in Synfig Studio, and it will soon be included as standard in Inkscape releases.

When I did my Spotlight title sequence I exported (saved) all of my encapsulated canvases (akin to Symbols in Flash) that I needed to reuse within my main Synfig file. This was probably because I came to Synfig from Macromedia Flash and was used to the idea of having a large file containing all the library symbols it used internally.

I have been playing with Synfig Studio a lot more since then, and I realised a far more sensible way to work was to have each of what would have been my library symbols in Flash saved as separate Synfig files. Therefore I created eight separate Synfig Studio files for each part of the sequence and created a master file that imports them all and is used to render out the finished sequence.

The project structure

This meant that my finished sequence was made up of nine very simple Synfig animation files instead of one large and complicated one.

The animation itself mainly consisted of simply animating my Inkscape slit masks across the stage using linear interpolation (i.e. a regular speed of movement).

I could type my key-frames from my key-frame text file directly into the Synfig Studio key-frame list:

Key-frames for one part of the animation

The glow was added to the ATV Today logo using a “Fast Gaussian Blur”, and the colour was changed using the “Colour Correct” layer effect – exactly the same techniques I used in the Spotlight South-West titles.

ATV Today logo in Synfig

In order to improve the rendering speed I made sure I changed the “Amount” (visibility) of anything that was not on the stage at the present time to 0 so the renderer wouldn’t bother trying to render. You do this using Constant interpolation so that the value is either 0 or 1.

I had a couple of very minor problems with Synfig when I was working on this animation. One thing that confused me sometimes was the misalignment of key-frame symbol between the Properties panel and the Timeline.

This misalignment can be very confusing

As you can see above, the misalignment gets greater the further down the “Properties Panel” something appears. This makes it quite hard at times to work out what is being animated.

Some very odd Length values indeed!

Another problem I had was that the key-frame panel shows strange values in the time of length columns – particularly if you forget to set your project to 25 frames per second at the outset.

However, overall I think Synfig Studio did brilliantly, and I would chose it over Flash if I had to create this sequence again and could choose any program to create it in.

The most important technical benefit of Synfig Studio for this job was the fact that it uses floating point precision for colour, so the glows on the ATV Today logo look far better than they would have done in Flash as the colour values would not be prematurely rounded before the final render.

I rendered out my Synfig Studio animation as video via ffmpeg using the HuffyUV lossless codec, and then I was ready to move onto Kdenlive and do the keying.

Obviously I needed some “film sequences” to key into the titles, but I only have a small selection of videos as I don’t have a video camera. To capture video I use my Canon Ixus 65, which records MJPEG video at 640 x 480 resolution at 30fps.

My 16mm film camera

Bizarrely, when the progressive nature of its output is coupled with the fact it produces quite noisy pictures, I’ve found this makes it a perfect digital substitute for 16mm film camera!

I “filmised” all the keyed inserts, so that when they appear in the sequence they will have been filmised twice. Hopefully, this means I’ll get something like the degradation in quality you get when a film is then transferred to another film using an optical printer.

Once the keying was done the finished sequence was filmised entirely using Kdenlive using techniques I’ve already discussed here.

And so, here’s the finished sequence:

Although I’m not happy about the selection of clips I’ve used, I’m delighted with the actual animation itself. I’m also very pleased that I’ve completed another project entirely using free software. However, I think the final word should go to Roddy:

Thanks for the link. I had a bit of a lump in my throat, seeing those titles scrolling across, hearing the music, while munching on my Chicken and Chips Tea… blimey, I was expecting Crossroads to come on just after!

If you are interested in ATV, then why not buy yourself a copy of the documentary From ATV Land in Colour? Three years in the making, over four hours in duration, its contains extensive footage (some not seen for nearly fifty years) and over eleven hours of specially shot interviews edited into two DVDs.

Posted on

Cheap Dirty Film

Three years ago I talked about the programs I used to simulate old 16mm film. Back in 2008 I was using Windows XP, Adobe Premiere Elements 4.0 and a VirtualDub filter called MSU Old Cinema. I found I could use them to create some half-decent 16mm film:

These days I’m using Fedora 15 as my operating system and Kdenlive as my off-line video editor. That meant I’ve had to change the way I simulate old film quite a bit. I have been continuing to use VirtualDub and the MSU Old Cinema plug-in via WINE. Although VirtualDub is free software, the MSU Old Cinema plug-in is not, and this bothered me. I wondered what I could achieve in Kdenlive alone and I started experimenting.

In the course of this blog post I’m going to use the same image – an ITV Schools light-spots caption from the 70s that I recreated in Inkscape. Here’s the original image exported directly from Inkscape as PNG:

Created in Inkscape

The most obvious sign that you are watching something on a bit of old film are the little flecks of dirt that momentarily appear. If the dirt is on the film itself it will appear black. If it was on the negative when the film is printed it will appear white.

Kdenlive comes with a Dust filter that tries to simulate this effect. However, it has a very small database of relatively large pieces of dirt. In total there were just six pieces of dirt, drawn as SVG files, and that limited number led to an unconvincing effect. If I used the filter on a long piece of video I found I began to recognise each piece! There were also no small bits of dirt.

I drew 44 extra pieces of dirt in Inkscape and added them to the Dust filter. I also redrew dust2.svg from the default set. I call this particular piece of dirt “the space invader” as I found it was too large and too distracting!

The video below compares the Dust filter (with identical settings) before and after I added my extra files:

You may find you prefer the Kdenlive dust filter with just the default six SVG files. However, if you prefer what I have done you can download my extra SVG files from here.

With the modifications I’ve made, I actually prefer the dirt created by the Dust filter in Kdenlive to the dirt you get in the MSU Old Cinema plug in. The dirt from Kdenlive’s filter is less regular in shape and simply by changing the SVG files in the /usr/share/mlt/oldfilm folder I can tailor the dust to any specific application I have in mind.

After flecks of dirt, the second most obvious effect that you are watching old film is a non-uniform shutter causing the picture to appear to flicker very slightly. The MSU Old Cinema plug-in can simulate this effect, but wildly over does it. It is not suitable for anything other than simulating silent movies, so I never used it.

Luckily the Kdenlive Old Film plug-in does a much more convincing job. The settings that I found worked for me are shown below:

KdenLive Old Film settings for uneven shutter

And they create the results shown below:

It looks a bit odd on it’s own, but when added to all the other effects I’m describing here it will look fine.

I’ve noticed that when I am creating these effects it’s best if I move away from the monitor to a normal TV viewing distance to see how they look – otherwise I tend to make the effects too subtle to be noticed when I come to watch the results on my television!

The next thing that will help to sell the output as film is having some film grain. Film grain is irregular in shape and coloured. In fact, I used the Colour Spots setting of the MSU Noise filter to create film grain in VirtualDub.

Kdenlive has a Grain filter, which simply creates random noise of 1 pixel by 1 pixel in size. Although technically this is not at all accurate, it can look pretty good if you are careful.  The settings for film grain will vary from job to job, so some trial and error is involved.

As a starting point, these settings are good:

Kdenlive Grain settings

And will look like this:

Again, it looks odd by itself (and you can’t really see it at all on lossy YouTube videos!) but it will look fine when added to the other effects. You’ll start to notice the rendering begin to slow down a bit when you have added Grain! Incidentally, Grain is still worth adding even if YouTube is your target medium because it helps break up any vignette effect you add later.

The next thing you need to do is to add some blur – edges on 16mm film in particular tend to be quite soft. Kdenlive has a Box Blur filter which works just fine for blurring. How much blur you add depends on your source material, but a 1 pixel blur is fine as a starting point.

Colour film is printed with coloured dyes, so it has a different colour gamut to the RGB images you create with The GIMP, Inkscape or a digital video camera. In addition, it also fades over time. Therefore to make computer-originated images look like film-originated images some colour adjustment is normally required.

Luckily, Kdenlive has a Technicolor filter that allows you to adjust the colours to better resemble film.

Kdenlive Technicolor settings

The way colour film fades depends on whether it has been kept in a dark or light place. If I’m recreating a colour 16mm film that has been stored safely in a dark tin for many years, I make it look yellowish. If I’m recreating a colour 16mm film that’s been left out in the light a bit too much I make it look blueish. Both these looks rely adjusting the Red/Green axis slider – not the Blue/Yellow axis slider as you might think!

Source image faded with Technicolor

You soon begin to notice that the telecine machines used by broadcasters could adjust the colours they output to make colours that were impossible to resolve from the film. For instance, some of the blue backgrounds on ATV colour zooms were too rich to have been achieved without some help from the settings on the telecine machine. So the precise colour effect you want to achieve varies from project to project, and sometimes you will be actually increasing colour saturation rather than decreasing.

The Technicolor filter is, ironically, the filter you use to make colour source material monochrome too!

The biggest problem when trying to recreate old film is recreating gate weave – that strangely pleasing effect whereby picture moves almost imperceptibly around the screen as you watch.

MSU Old Cinema created an accurate but very strong gate weave which was too severe for recreating 16mm film. The Kdenlive Old Film filter has what it calls a Y-Delta setting, that makes the picture jump up and down by a set number of pixels on a set number of frames. It’s easy and quick (a Y-Delta of 1 pixel on 40% of frames is good) but introduces black lines at the top of the frame and is so obviously fake it won’t really fool anyone!

So there is, sadly, no quick way to create gate weave in Kdenlive. However, the good news is there is a way, provided you’re prepared to do a bit of work. You need to use the Pan and Zoom filter. The Pan and Zoom filter is intended to do Ken Morse rostrum camera type effects – it’s particularly good if you have a large image and want to create a video to pan around it.

However, what we can do is use the Pan and Zoom filter to move the frame around once per second. Firstly you zoom the image in by 108%. This means you won’t see any black areas around the edge of the frame as the picture moves around.

First of all, zoom the image very slightly

Next, you create key frames on each second:

Then add one key frame per second

Then you move the image around slightly on each keyframe – plus or minus two or three pixels from the starting position is often plenty.

Obviously, for a 30 second caption that’s 30 keyframes and 30 movements – a lot of work if done “by hand”. However it won’t go to waste, as you can save your Pan and Zoom settings as a Custom effect and resuse it again and again on different clips.

And, luckily, doing all this by hand isn’t even necessary. Custom effects are stored as simple XML files in the /kde/shared apps/kdenlive effects folder so it is possible to write a small Python script to automatically create as much gate weave as you want – something I’ll come back to.

As well as gate weave, you can also use the Pan and Zoom filter to stretch the frame, which is perfect for simulating stretched film. Again, that’s hopefully something I’ll return to another time.

Here’s an example of video moving with the Pan and Zoom filter:

The Pan and Zoom filter also adds hugely to your rendering time, so it’s best to switch it off until you do your final render.

Glow is a very important effect to add when simulating film, particularly monochrome film. Kdenlive does not have a glow filter, so if I need to add glow to a video file I have to improvise. I export the video as a PNG sequence, add glow to the PNG files using a GIMP batch script (written in Scheme), and then reimport the video file. It’s worth the effort, as it’s amazing how much glow helps to sell something as being originated on film.

Glow added using The GIMP

The GIMP glow filter tends to be rather harsh, and tends to wash out images if you use too much glow. Therefore you have to experiment a lot.

Finally, there is often uneven brightness or contrast visible across a film frame. In VirtualDub I used a filter called the Hotspot filter. The hotspot filter is actually designed to remove this effect from old film, but turned out to be just as good at putting the effect in!

However, with Kdenlive, this effect is best achieved in the GIMP when required as Kdenlive’s Vignette effect is too unsubtle to be of any real use.

So, put it all together, and you get something like this:

All in all, Kdenlive does a pretty good job of making digitally originated images look like 16mm film but although there is room for improvement. The film scratches filter needs work, there is no glow and the film grain is really just noise rather than grain. However you can still get some excellent results and I’m really pleased with it.

Posted on

You Know When You’ve Been Tango-ed

My friend Samwise and I are both enthusiastic users of the GNU/Linux operating system and also enormous fans of the incredible range of retro computing emulators produced by the brilliant Tom Walker.

Tom (left) and Samwise (right)
Photo courtesy regregex

There’s seemingly nothing that Tom isn’t able write an emulator for. He’s written emulators for everything from the humble Acorn Electron to the StrongARM-ed Risc PC with Spectrums, Amstrads, Beebs, Archimedes and much else in between.

Elkulator, running on Fedora 14

So it wasn’t altogether surprising when, last month, Sam asked if I could create some icons for his desktop he could use with Tom’s emulators.

Superior’s EGO:Repton4, running on RPCEmu

Sam is a KDE desktop power user, whereas I’ve always been a GNOME numpty. Fortunately for us starving scribblers and colourers in there is a project that aims to standardise all free software desktops and ensure we can create icons once that look good on all of them. The project is called the freedesktop project and the part concerning icons is called Tango.

There are numerous tutorials on the web that explain how to create Tango icons in both Inkscape and The GIMP.

The first icon I tried to create in Tango format was the three dimensional RISC OS era Acorn logo, to use with Arculator. Below, you can see the real Acorn logo on the left, and the “Tango”-ed version on the right.

More Tango-ed than Judith Chalmers

As you can see, the Tango version looks rather cartoonish – and the colours are rather muted and pastel. And the direction of the light source has been changed. This was all done deliberately and in order to follow the Tango guidelines.

Sam was happy with this icon and asked if I could create icons for all of the Acorn-related emulators. And that’s when sticking to the rules started to get a bit of a pain. For Tango icons, each icon should be a distinctive shape in order to help those with poor eyesight and each icon should also contain a metaphor as to the icon’s purpose.

However, for the emulators all that we really needed was a square icon with a logo that told you at a glance what computer you were using so the guidelines rather went out the window. The Tango colours were also very restrictive as far as what I could use so I just threw caution to the wind and did what I felt!

Here’s the Elkulator icon:

I really like the background grid, which was the trademark of the Acorn Electron.

Here’s the B-Em icon:

And here’s the RPCEm icon:

I also created some Archimedes artwork – here’s the Archimedes logo I created as an SVG file in Inkscape:

Click to enlarge.

Here it is “Tango”-ed!

And here are the full set of icons I created for Sam:

Click to enlarge

In future, when I have more time, I’ll create proper Tango themed icons for all of these emulators. I spent about two minutes on each of the icons above and it shows! This will require me to actually draw the systems being emulated and make sure that I’ve got a different shaped outline for each one.

So I’ll probably return to this topic when I’ve done some decent, real, Tango icons!

Posted on

Inkscape to Flash 8

These days, if at all possible, I like to use Inkscape for creating vector artwork. At one time I used Macromedia Flash 8 for all my vector illustration work. But these days, if I have to create artwork in Flash it makes me feel like I’m being forced to write with my left hand.

There are also a number of things I can achieve easily in Inkscape that are harder to do in Flash. One recent example was when I was working on the animated menu for Simon Buckley’s new website. I was given a signed off design as a bitmap illustration and was asked to turn the design into a vector animation in Macromedia Flash format.

Most of the design was very straightforward to achieve, but there was one part that was more fiddly. The name of the website was written in a font called Chalkdust, and it was fringed with a thick black outline. This is one of those things that looks simple to do until you actually try and do it in Flash.

The way I tackled getting an attractive vector outline for the Chalkdust text was to enter the Chalkdust text into Inkscape, turn the text into vector outlines and then use the Inkscape “Linked Offset” option to enable me to expand the text outline to the desired extent.

 Cleaning up Chalkdust in Inkscape

Chalkdust, like most typefaces, has very messy vector outlines with large amount of redundant nodes. This meant that the resulting expanded outline needed a lot of cleaning up and simplification – a job I could do very quickly with the node tool in Inkscape.

It’s always worth making your vector outlines as clean as possible.  In the old days of dial-up modems this was because you hand to shave every last byte off of download times – I used to hand optimise everything I did in Flash to get Flash animations within bandwidth quotas set by customers. However these days it’s because the more elegant your outline the better it looks (due to the vagaries of anti-aliasing routines) and the better it animates.

Cleaned up outline

The finished outline was soon cleaned up and ready for transferring from Inkscape 0.47 to Flash 8.

After some experimenting, I found that my favoured method of transferring vector Inkscape artwork into Macromedia Flash 8 is the Encapsulated Postscript or EPS format.

There is one important thing to be aware of when transferring between the two programs using this format. Take this Inkscape vector drawing as an example – it’s 400 by 400 pixels in size.

400 x 400 pixel Inkscape drawing…

When imported into Macromedia Flash as an EPS it arrives as a vector drawing 320 by 320 pixels in size.

…becomes 320 x 320 pixel Flash drawing.

There is absolutely no way around this – Flash thinks EPS files should be 72dpi, Inkscape thinks EPS files should be 90dpi and neither program lets you do anything about it.

However, it’s simple enough to use the Flash 8 Transform panel to scale all the EPS files you import into it by 125% to make up for the difference in dpi between the two packages.

Doing this becomes automatic after a while!

One final point to bear in mind with EPS transfers between Inkscape and Flash 8 – avoid gradient fills. These always seem to be imported as bitmaps in Flash 8. You will have to recreate any Inkscape fills again from scratch in Macromedia Flash so I never bother creating them in Inkscape in the first place.

The finished animated menu can be seen here. I’ve also written a blog post about my preferred method of getting my vector drawings from Flash 8 into Inkscape here.

Posted on

Set Piece

A few months back Roddy Buxton asked if I could do him a favour. His son had a school project about “the 70s”, and one of the things they were doing was making a 70s style news programme. As Roddy is from ATV land, that had to mean ATV Today. But in order to make the video authentic, Roddy wondered if I could recreate a section of the ATV Today set to key in behind his son on the video.

Reg Harcourt – ATV Today

I knew exactly the set he had in mind. It was the lovely beige one with an abstract geometrical design. If ever a set designer managed to capture the essence of the seventies current affairs in one set, this was this one. I managed to get a couple of pictures from Jase Robertson’s site sub-TV.

At the time, I had mislaid my serial number for Swift 3D version 5, so I couldn’t do this in 3D – which would have been the logical way to tackle this job. So, I fired up my trusty copy of Inkscape, and tried my best to muddle through using that.

All I did was take the best screen grab I had to hand (which, sadly, weren’t as large or as clear as I would have liked) and trace one square section of the design.

Tracing the set in Inkscape with Margaret Hounsell

I then used gradient fills to create the 3D effect. I’ve found watching “Paint Along With Nancy” a great help with colouring in vector designs. I use Nancy Kominsky’s technique of using three tones (light, medium and dark) and using purple for low-lights and lemon yellow and white for highlights if necessary. Nancy knows her stuff – it works!

Output from Inkscape

After exporting the resulting SVG file as a PNG I used the GNU Image Manipulation programme (otherwise known as The GIMP) to finish the job off. I adjusted the colours to match the image, blurred the image slightly so it would be slightly out of focus, added a tiny bit of HSV noise and then a very slight lens distortion completed the job.

After GIMP-ing, the end result

I’ve included the images I created at full size in this post, just in case you want to have a go at being Reg Harcourt or Derek Hobson and report on strikes at British Leyland in the comfort of your own home. Just click on them to enlarge.

Posted on

As Advertised…

The Acorn World show is still on today, and one of the things you’ll be able to see there are some rather retro looking adverts for games from Retro Software.

Dave Moore always liked the Superior Software adverts of 1984-1985 vintage. In particular there were two styles he liked. The full screen blue version that advertised one game:

Vintage advert for Matthew Atkinson’s Tempest

And the “split” ad that advertised two games:

A vintage advert for two of Superior’s games

He wondered if I could do something similar in Inkscape for him to use as promotional materials at the show. The job turned out to be quite straight forward as I had all the things I needed. I had created the svg of the Retro Software logo as well as the original cover artwork for Zap! and The Krystal Connection.

Here’s my rendition of The Krystal Connection:

I like the way this turned out

And here is my “split” ad:

Not my rubbish “Zap!” artwork again…

The main thing I had to watch was keeping the colours muted, and again the Tango icon palette was my friend here. I used it to create the artwork for The Krystal Connection and I’ve become rather fond of it. The font was Bahaus – it was difficult to resist adding the Access credit card logo though!

Posted on

Round Spherical Objects

With the addition of things like filters, the boundary between vector art and bitmap art is getting fuzzier and fuzzier all the time.

To put this to the test, I decided to have a go at recreating in Inkscape something that was done on card using an airbrush to see if I could create a piece of vector art entirely in SVG format that looked like a piece of bitmap art. The piece of artwork I decided to use was taken from the Central Independent Television styleguide (many thanks to Roddy Buxton for giving me a scan of his copy), and is their colour logo from 1982. The most useful thing about the style guide illustration is that it contains a grid, precisely so that other people (like me!) can reproduce the artwork from scratch at a future date if necessary.

The original image, taken from Central style guide
The version of Inkscape I used was an early build of 0.47. The first thing I tackled was the border around the sphere. To be honest, it was the centre of the sphere I really wanted to tackle, so I didn’t spend much time on this at all, and did it as two gradient fills (blue and black) one on top of the other. I may well go back and revisit this at some stage.

The next job was to tackle the first colour. I started with the blueish red at the top of the sphere, and drew the rough shape of the red as a vector shape:

Red area added

Then I applied a filter. I made my own filter, which I imaginatively called “central” to do this. The results are shown below.

Red area filtered

As you can see below, my filter is actually nothing more than a Gaussian Blur.

This is where all the magic takes place

The “air brush” effect I was after comes from the Standard Deviation, which makes the softness slightly random.

Next I added yellow, on a separate layer, and applied my “central” filter. However, it doesn’t quite look right.

Yellow added on a separate layer

The trick here is to use “Multiply”‘ to Blend Mode to blend the layers containing colours together. Then the yellow mixes with the red to make orange:

Multiply blend mode makes the yellow and red orange

Then, if you carry on for light blue and purple (you only need four colours) then you get the familiar Central coloured sphere logo. So there you have it, an “air brushed” Central logo which is entirely described in an SVG file.

Scan on the left, my entirely vector SVG version on the right

And of course, the nicest thing is the entire logo SVG is only 9.3Kb – and that’s uncompressed and without the Inkscape editor information removed!

Now I can have fun making captions like this one

Posted on

Repton: The Lost Realms artwork

Some time after the release of Repton 3, Paras Sidapara started work on “Repton 4” for the BBC Micro and Acorn Electron, a new Repton game with several novel features. When Repton Infinity came along the game was reworked as a new game, Cyroid:X, before being dropped completely.

Paras’s Repton 4 game was thought lost until a year ago when it was recovered from an old 5.25″ disc. Development on the game resumed, and Retro Software got permission from Superior Interactive to release the game for the BBC Micro and Acorn Electron. The project was retitled “Repton: The Lost Realms” in order to avoid confusion with the Repton 4 game in Repton Infinity and Superior’s Repton 4:EGO game for the Archimedes.

Dave Moore of Retro Software approached me and asked how I would feel about trying to come up with some cover art for the game.

I bit his hand off. Repton was a bit of an obsession to me when I was growing up, and no Christmas was complete without me receiving the latest Repton release. I spent hour upon hour playing, designing screens and designing graphics. The game itself looks like Boulderdash superficially but is a very different creature to play – it’s more of a logic puzzle and attracts large numbers of chess players.

The first thing I did was to doodle on the back on an envelope whilst I was on the phone:

The Scream

The Repton in the sketch owes more to Edvard Munch than Tim Tyler, but it showed roughly what I wanted to do. My idea was a bit like “The Secret Garden”, with Repton opening a door and finding fantastic “lost realms” inside. Doors are also a feature of the game itself, so it seemed the obvious thing to do.

I chose to produce the artwork in vector format. This was because as we planned to print everything from small tape inlays to A2 promotional posters from the artwork. This meant I had to export 600dpi bitmap images from my work, so vector artwork seemed the best way to go. I chose Inkscape as I’d heard it’s the best vector artwork package available, it runs perfectly on Ubuntu Linux and because it saves artwork as, svg, a completely free format.

The original Repton artwork was done by Ellis Ives Sprowell Partnership in Wakefield. They gave Repton a very strong brand image so all I had to do was follow their lead and not mess it up. The REPTON logo was traced in Inkscape from a scan of the advert for the original REPTON release to get it as accurate as possible. The subtitle was in the font Eras, just as it was in the original releases.

As this was my first major project in Inkscape I started simple. Just outlines and solid, non-gradient fills. I drew Repton, a couple of doors and a transporter and then sent it to Dave and Paras.

Start off simple

Paras’s wife seemed fascinated by Repton’s bum, but apart from that everyone was happy so I decided to explore flood fills and shading.

Gradient fills gave me endless trouble in Inkscape for a long time. This is because having been so used to the way Adobe Flash handled gradient fills: creating them in a dialog box. Therefore I simply assumed I was supposed to use them the same way in Inkscape and it gave me endless headaches – creating gradient fills using the dialog in Inkscape is for masochists. It wasn’t until after I created the botched artwork for “Zap!” I finally worked out the “Inkscape” way to handle flood fills – using the gradient tool and the mouse – and never had a problem with them again.

Anyway, taking about three times as long as I needed to, I finally created a shaded image. I also tried some blurring and glowing too, and was happy with the results so far. The idea is that Repton is in darkness but lit by light coming from the transporter. I had to fight a bit for this with Dave as he understandably wanted everything light and bright to make his posters and packaging eyecatching, whereas I wanted the lighting to be more moody.

I wish I had known what I was doing…

I chose cartoony black outlines for the poster, to match the original Repton artwork, and also tried hard to make my Repton character look like the Repton in the original artwork.

Next, I needed to create all the other game characters eminating from the “lost realms” doorway. Because of the need to create cover artwork of varying aspect ratios for cassette, disc, posters and in order to make life simpler I created each of the game characters in a separate Inkscape file. That meant I could put the picture together at the end. This saved me hours and hours of work in the end, as the final composition was a result of a lot of too-ing and fro-ing between Dave and myself.

The individual characters took between an hour and four hours to create, the crown taking the longest. Many of them are deliberately based on the original artwork for the Repton games – for instance the diamond, safe, boulder and cage. I did this to underline the fact that the game is part of the same family as the rest of the Repton games. I’m particularly pleased with the way the safe turned out.

Bunch of dodgy characters

The spirit gave me the most trouble as it’s a very difficult thing to portray in a “cartoon” like way. Look at the spirits in the previous Repton artwork to see how tricky they are to do justice too. In the end I based the spirit on Matthew Atkinson’s Repton 3 design. I also had trouble with the egg – my first attempt looked like “a yellow finger nail” according to Paras! Incidentally, you may notice a fly agaric – I’ve always liked toadstool fungus in Repton, but Paras and Dave vetoed the idea.

After abandoning my idea of a brick wall (like the one in my pencil sketch), I’d originally intended the artwork to be on a black background, but Dave Moore suggested a green gradient fill, which worked out very well indeed. And with that, it was finished.

The end result

The final artwork worked out very well – as a first major project in Inkscape I’m quite proud of it. It has the Repton feel that I was after and also shows off the new features of the game prominently. Dave Moore told me he asked Richard Hanson of Superior Interactive if he would have used my artwork at the time. He said “Yes”, which put me on a high for a week.

Contributing to an officially sanctioned Repton project of any kind makes you part of BBC Micro history and I’m very proud to have contributed to a real Repton game – it’s a long standing ambition fulfilled.

Repton: The Lost Realms is currently under development by Retro Software. Repton name used with permission from Superior Interactive.

Posted on

Converting .ai files from Flash 8 to .svg

This morning I wanted to use a number of the graphics I have done in Flash in Inkscape.

The .swf and .fla files are stuck at the moment until I have access to a copy of Flash, but I also have a large stock of .ai files. I exported them from Flash 8 to use in Fireworks, which allowed me to use various raster effects on my vector artwork.

Inkscape would only import Adobe Illustrator 9 files, but Flash 8 exported .ai files in Adobe Illustrator 6 format. However, the solution was already available and installed on my computer with Inkscape. It just needed a bit of “command line love” (as they say on the Ubuntu UK podcast). The program in question is a command line tool called Uniconvertor, and it’s very easy to use.

Open a terminal, put the .ai files in your Home folder, and type:

dave@dave-desktop:~$ uniconvertor source.ai destination.svg

Very, very useful.