Subscribe / Unsubscribe Enewsletters | Login | Register

Pencil Banner

PaintCode excels at transforming vector images into code

Marco Tabini | April 23, 2013
Pixel precision is an essential part of the software experience that users have come to expect from OS X and iOS. It requires a kind of accuracy that is usually best left in the hands of experienced designers who know how to manipulate every detail of images and icons to get the best possible result. This goal is time-consuming and expensive to achieve, however, and only really makes sense when an interface has completely taken form.

Once I read through PaintCode's documentation, though, I realized that the PixelCut's was to create an "editor's editor" that could augment, rather than replace, existing tools by extending their functionality. (You can see some of the cool things the app is capable of by reading through its documentation, which is well written, to the point, and also includes a number of handy tutorials and examples).

PaintCode's editor allows you to isolate individual portions of a drawing and manipulate them in ways that make it easier to interact with them in code; at the simplest level, this means that you can change the name of the variables used to reproduce each element of your document so that you can animate them separately, or group them together as appropriate. Most importantly, though, it also allows you to parametrize various aspects of your images, greatly enhancing their usefulness.

For example, you can define colors dynamically based on an initial set of constraints, which makes changing the overall tint of an image a matter of specifying an initial starting point--a great feature for user interface elements like buttons and icons. You can also set up a shape so that it scales up and down from its initial dimensions in a predictable way, replicating the edge-inset resizing functionality offered by Cocoa classes like NSImage and UIImage. This is very handy when you want, say, the middle of a button to stretch horizontally, while keeping the sides a fixed size.

From graphics to code

PaintCode's export functionality takes whatever you have created and converts it into code that you can use in your apps. There are a few options available: you can choose which operating system to export to, as well as your pick of either Objective-C or Microsoft's C#. You can also choose whether to support Apple's ARC memory management technology, target specific versions of iOS, and even determine whether your code uses a normal or flipped coordinate system.

Having been burnt by automated code generation tools before, I wanted to check the quality of PaintCode's output firsthand, so I wrote a very simple app that animates several shapes, morphing one into the next every two seconds. This very basic test isn't going to win any design award, but it's a good example of something that would be very hard to do using bitmaps, both because of the animations and because of the requirement that the images scale without becoming pixellated. With PaintCode, it took me around 15 minutes from beginning to end.

As you can see by taking a peek at the source if you are so inclined, the quality of the code that the app outputs is quite good; individual lines are indented well and generously commented where appropriate. Each parametrized aspect of your document is rendered so that you can easily manipulate the values, making it very easy to iterate through different versions of your code without having to continuously make changes manually.

 

Previous Page  1  2  3  Next Page 

Sign up for MIS Asia eNewsletters.