September 10th, 2009

Revisiting Jitterbug editor for Substance color schemes

Jitterbug is a visual editor for creating and editing color schemes in Substance look-and-feel introduced in release 5.1 of the library. It primarily addresses the scenarios where you need to translate design mockups or emulate existing UI visuals as a Substance skin. The original version of Jitterbug had two major constraints – it operated on a single color scheme, and did not address the full flows of creating, editing and saving color schemes.

Jitterbug had a major revision in the upcoming release 5.3. Targeting the creation of both Magellan and Gemini skins, it has been redesigned to provide the seamless flows of creating, as well as editing the color scheme definition files that can be used to create complex Substance skins. You no longer need to switch between Jitterbug and another text editor to save color schemes. You no longer need to work on multiple color scheme files, each defining a single color scheme.

The following screenshot shows the new Jitterbug in action (click to see full size view):

To see the Jitterbug in action, run the following signed WebStart demo:

The new version of Jitterbug aims to address deficiencies in the flows of creating and tweaking color schemes. I did try to make the flows straightforward and intuitive, as well as making Jitterbug the only tool you will need to create collections of Substance color schemes. However, i cannot be an objective judge of my own creation. As such, i am not detailing any instructions on how to use Jitterbug. If you find yourself stuck in the middle of the process, or the flows do not simply make sense, let me know in the comments.