A blog post by Ed Bryan, Head of Apps Development (Creative) at Nosy Crow, on the making of Animal SnApp: Farm. Click on any picture to expand.
I’ve tried to make this post as interesting as possible and hopefully shed some light on how we went about making Animal SnApp: Farm.
My initial sketches based on the original script.
Before handing over to Beakus (the creative studio who animated Axel Scheffler’s artwork for the app) it was really important for us to know exactly what we needed to ask them to do.
To start with I went through the script for each story and worked out what would be happening in each scene, what interactions would push each story along, and how all the individual animations would link together. This mostly involved some very, very rough drawings and sticking bits of paper on other bits of paper, as you can see.
Paper prototype for working out what animations we were going to need and what interactions each scene needed.
This low-tech way of prototyping is quick and requires no engineering or anything fancy – and if you don’t like something you can easily chuck it away and start again. This stage also highlights any technical issues that might cause trouble. For example, with Cuddly Cow, we needed to be able to tap each lamb and have Cuddly count. We also wanted to be able to hatch Higgly Hen’s eggs in any order you liked.
For the first three stories I even went as far as scanning these diagrams on to the computer and used Adobe InDesign to build very crude flash documents that gave me (at least) a better idea of how the stories would look and feel when you interacted with them – this is something that I’ve done on other apps too.
Once I had the prototypes for each story and we were all agreed on the interactivity within the app, it was time to start taking Axel’s illustration and assemble it into the final artwork for each scene.
Axel’s original artwork, scanned and ready to go!
Axel had illustrated everything separately so it would be easier to composite together. For me this way of working is normal because you’ve always got in the back of your head that you’re going to want to animate characters and reuse background elements whilst building the app. I think for Axel, this was a new way of doing things, but as you can see he did a fine job!
Once all the artwork was scanned I had to remove all the white background so I could take all the different bits and put them together to fit each scene in each story. The trickiest parts to clean up were the piles of straw and all the little gaps in the wire fences, but thankfully Photoshop has some pretty nifty tools for helping with this!
I kept all the artwork at full resolution even though that’s way bigger than what you’d need for even iPad 3’s retina display, so the files were pretty big – I learnt a long time ago that it’s easy to reduce the size of stuff, but impossible to make things bigger!
The biggest background was for Higgly’s story; she runs around the farmyard looking for her lost eggs and meets a few of the other animals there, so the scene had to be very wide.
Final farmyard background for Higgly Hen’s story.
Here’s the final background for Higgly’s run through the farmyard. It needed to loop at the end so the animation would appear to run forever. The rectangle over the pig shows the small area that would be visible on the iPad at any one time.
Pig sty and horse’s stable for Higgly’s story.
Working with other people’s art is always fun and I tried my best to end up with backgrounds that were faithful and respectful to the original artwork. I even made a couple of custom brushes in Photoshop to try to mimic the subtle watercolour strokes that Axel makes look so effortless – this allowed me to put in the odd shadow here and there.
I always (well, nearly always) like the technical challenge of having to use what you have to get the job done; for example, Higgly needed to be in the pig sty looking for her eggs AND have the horse present too. I had to use all my crafty Photoshop skills to magically combine the sty with parts of the two barn/stable interiors to get the finished background. I guess this is the one benefit of working on a computer – you can repurpose and tweak artwork to your heart’s content!
So, over a couple of weeks I managed plan out and make six huge layered Photoshop files for the first three stories ready to be uploaded to Beakus and whilst they began to animate those, I carried on with the other three stories.
It wasn’t long before started to receive piles of DVDs in the post – and I’ll talk about that next time.
So many discs!
Part Two of the making of Animal SnApp will appear on this blog shortly! You can find the app on iTunes here and see Axel talking about making the art for the app below:
