The original prototype used 3 frames for the main character: 1 x top down, 1 x left-profile, 1 x right-profile. It looked a little flat in motion - something that a few idle frames can remedy. 

I started with the top down frames. His cape was the element that really had to animate, so I focused firstly on that. A few extra touches were also fun to add, such as his hair quiff, the little bit of lighting on his hood and the boost under his feet. The line art is crucial to everything, so it's important to lock that down before busying yourself with posh things like shading, etc. Here are the basic steps I adhered to:

1) Draw line art
2) Duplicate line art and modify animating objects ( 'onion skinning' technique)
3) Once all the line art frames are complete, paint the flats (flat colour fills)
4) On a layer above, paint all shading/highlights 

All painting was done in Photoshop, using a Wacom Intuos 4/5 (depending on whether I was at home or in the studio!). The basic circular brush is more than adequate, obviously with smoothing turned on for natural, pressure-based line tapering. The Spriters Resource is a great site for reference (though the sprite rips are of questionable legality).

The last touch was a custom animation for the Green Atom's super attack - a move you can trigger by swiping downwards once you have accumulated enough power. Steve had created a circular spinning particle effect, which looked amazing, but didn't seem to fit with the standard idle animation (the aura's head was poking out a little at the front, etc). A couple of custom frames later and bang, all looked better! A custom png of the aura was created to rotate around the Green Atom with code (saved me outputting unnecessary graphic assets). 

Steve used his particle gun to add particles for the Green Atom's trail and attacks which made everything look instantly cooler. If we had more time, it would have been great to prep some extra 'hurt' and 'death' animations, but there's always something. 

In space, no one can hear you avoid asteroids

Before moving onto the enemy graphics, the background art was something I really wanted to pin down. An iPad is quite a large screen area and without decent background art, all the work you put into the characters is wasted. After deliberating between a 'city from above' and 'space', we decided to go with space as it was a nod to what the prototype used. Also, stars and galaxies are far easier to draw than an intricate cityscape! The prototype used 2 background layers moving at different speeds to create a basic parallax effect. We ended up going with 3 layers in the end as it offered us an extra level of depth (1 x distant space, 1 x close objects, 1 x stars whizzing past for a sense of intense speed). 

The whole background was painted up in Photoshop at double size (you never know when you want a higher res asset!). Each of the 3 layers had to tile vertically. This was easy for the space colony (essentially a tube) and stars, but slightly harder with the gradient background. Each layer was then exported as a 1024 x 768 png. To tie everything together, I also exported a vignette image to sit on top. It just helped frame everything more nicely. 

UI

On top of the all the gameplay graphics of course sits the user interface. Matching the space theme, Emma designed a techy-style background for the various bars and numbers to sit on top of. 

Typefaces is a useful app that shows you all the fonts that exist on your iPhone. The benefit of this is that you're referencing available fonts and not having to include custom fonts as part of your bundle (which in turn brings up the issue of licensing). We found a digital-style font "DB LCD Temp" that fit just right. The energy bars are 2 pngs each, one for the background, and one for the coloured bar that is masked in.