Using Adobe InDesign for LC design work

[append[x]]

This might be obvious knowledge for the more experienced LiveCode developers, but just in case I would like to share my workflow of artwork creation for LiveCode stacks, as this workflow proved incredibly smooth for me in the past.

We have a strict separation between design and coding at append[x]. The app/user interface design is done by a highly awarded graphic designer, who is not familiar with programming. She is doing her work in Adobe InDesign, producing layered vector art that is completely independent regarding resolution/scaling issues. The approach is pretty much the same way that is often gone for web development, where the webpage is drawn in Photoshop and then sliced into the individual image elements. The main difference here is, that the InDesign document can easily be scaled and rearranged due to its vector character. The graphic designer will also produce all states of ui elements, like the highlighted versions of buttons and the like (in separate layers) and she will also define a color scheme that we have to follow by the number when coding the app.

In the end, we have to produce pixel images for LiveCode, though, and in the past we would export either into some pixel format like jpg or png or transfer screenshots through Photoshop. The direct export feature cannot be precisely scaled in InDesign, as you can choose only a resolution, not an absolute size. It took us some time to find that we can define the document size in Adobe InDesign in pixels and make it match the screen size of the LiveCode stack. We were really familiar with InDesign and it is soo damn obvious afterwards, but we did not discover this option for half a year. In consequence we can now export entire pages (at card size) or single elements of the InDesign file into a 1:1, pixel-precise rendered image with perfect transparency and zero resampling. We do all this in the retina resolution and then we sample down all images to the non-retina resolution with an image-magick script, that also takes care of the renaming.

There are some serious issues to watch regarding color management. As some ui elements will of course be generated and colorized within LiveCode it is essential to disable the standard color management settings in InDesign (at least for the documents involved) as otherwise it will be impossible to get matching colors in the InDesign-generated images and native controls of LiveCode.

We learned, that colors can change quite often througout the development phase of a project (due to customer feedback or design changes). Whenever possible, we produce ui elements in InDesign in black color and then overlay them with a graphic object in LiveCode. Using proper blending options, this allows us to set all colors programmatically. Usually we create a global array of colors in the preopenstack-handler, where the colors get functional names as array index. So we can change the color values afterwards in one spot to take effect in the entire stack.

Happy coding!

Andreas