When starting to skin TB, as like many other games, its very important that the artist understands what controls and abilities the code supports.
Likewise the coder needs to be able to play around to see what control systems work, and what don't.
This normally leads to the phase I call "Programmer Art".
Its proof, if any is needed, that programmers should be kept at arms length from all art packages except in rare cases.
Here are some screen shots of my programmer art that was supplied to Aurelio, our graphics artist.
The first consideration for the final skin is how it will scale to different screen sizes so that in the future we are not overly hampered when trying to support more devices.
Here are the planning images showing how the active areas translate to different screen sizes.
Logo and Fight Mockups (Not Screenshots)
Having planned the screen layout, attention was turned to the heart of the game, the fight engine as well as the logo.
Some general mockups of the fight ring have been created, although its possible these will not be used until TBCB3.
Initial Mockups (Not Screenshots)
With all the ground work laid out, it was time to get down to the 'nitty gritty' of the matter and design the skin.
It went through a number of refinement stages as you can see in the following screen shots.