Parentheticals & Excursions

Last night I continued to experiment with using POV-Ray, this time to create some 9-patch button backgrounds for an Android application. Where appropriate, I try to retain the standard Android buttons in an application, so that users have nothing extra to learn. But in this case I want a darker UI to avoid detracting from the application’s content. This is what I ended-up with:

For general purpose use, I think this is the minimum number of button states you need images for:

• Obviously you need a normal unmodified state to display the button.
• You need a pressed state otherwise the user won’t trust that the button is working.
• You must have a focused state because users navigating with a D-Pad or trackball need a visual cue to indicate where focus lies.
• If your button can be disabled you need to clearly communicate it visually so that the user doesn’t waste time, or suffer confusion, clicking on an inactive button.
• Finally, I think you should have a state which is both disabled and focused; users may still need to navigate focus over disabled buttons.

You may need fewer in specific cases, or more, if your buttons are selectable. Either way, you probably have several button images to produce. And though only the colour varies within my button images, one of the advantages of 3D models is that they make it painless to produce multiple versions of an image with slightly different geometry (eg. a button being pressed in/out).

There are some particular issues that arise from the use of rendered images as 9-patches. You want to be able to quickly composite the rendered image with the necessary black border pixels. This means that it’s worth spending time framing the model in the camera just right, so you don’t need to crop or translate the image later. You also need to consider the lighting of your model to ensure that you have somewhere that the 9-patch can be stretched without visibly distorting the shading or texture (my first attempt at brushed metal buttons failed in this way).

All of this is general to creating buttons in 3D. What’s good about POV-Ray is that you can produce ‘inorganic’ geometry very simply and repeatably; its support for #defines and macros means that you can effectively parameterize your scene which comes in very handy when you make a change and need to crank out all of the button images again.

Here’s a complete POV-Ray scene for rendering a simple button image. I’ve supplied some basic comments, but I think it’s short and comprehensible (more so than many of the PSDs I’ve seen).

And here’s the image it produces: