Review: PaintCode excels at transforming vector images into code

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.

By the same token, there are some instances in which pixel-level perfection is hard or impossible to achieve due to a number of constraints, like overall file size, the need to support arbitrary resolutions, or, perhaps, the requirement for complex animations. In these cases, the old developer fallback is to use of vector images, which, being based on the mathematical representation of an arbitrary set of curves, are rendered on the fly and scale arbitrarily without loss of resolution.

Even though both OS X and iOS have excellent built-in programming interfaces for vector rasterization, their support for popular vector file formats like SVG is limited, often requires the use of external libraries, and makes it hard (though by no means impossible) to manipulate the resulting images in fine detail.

PixelCut’s PaintCode ( Mac App Store link) aims at solving these problems with its ability to transform a vector illustration into a series of code instructions. The code can then be embedded directly into an app written in either Objective-C or C# using Xamarin and give developers significant flexibility in its use.

What’s our vector, Victor?

PaintCode provides three primary functions: importing existing vector documents (as well as creating new ones from scratch), editing them, and exporting them to a series of source files that can be used in a development project.

The first of these is probably the most straightforward: the app can import either standard SVG files or documents saved using Adobe Photoshop’s PSD format, although the latter requires an additional in-app purchase ($20). In my tests, I was able to successfully load a wide range of vector-based graphics—including both UI elements from some of the apps I have worked on and other files that were not designed with app development in mind.

Almost without fail, PaintCode performed admirably; in one case—an old file that had been exported to SVG from Adobe Illustrator and contained an odd font—I was forced to make a few tweaks in order for the import operation to succeed, but the app was otherwise able to load up even the most complex documents I could throw at it without skipping a beat.

The editor’s editor

I must confess that the decision to incorporate an editor into the app had me a little confused at the beginning. I couldn’t see designers switching away from the tools they’re already familiar with, and it seemed unlikely that a developer would want to deal with adding yet another piece of software to their toolchain only for the sake of gaining a rudimentary ability to manipulate graphic documents.

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.

My only real complaint is that I would have liked a bit more control over the way the parameters are handled. For example, if it were possible to set PaintCode up so that it could use class properties instead of locally-defined variables, it would be easier to incorporate the code in an existing class. This is a relatively minor point, however, and one that it should be possible for the developers to fix in a future release.

Bottom line

At $100, plus an additional $20 if you want the ability to import PSD files, PaintCode is a fairly expensive tool. However, it has the ability to forever change the way you prototype and build your apps, and it will pay for itself nearly immediately once you start taking advantage of its features.

Even if you only plan on relying on handcrafted bitmap images to give your apps the shine and finish that they deserve, PaintCode can be used to rapidly prototype your interfaces; simply set all the UI elements up as vectors and change things around until you’re satisfied, at which point you can hand everything back to your designer colleagues and let them apply the finishing touches. The difference over relying on traditional bitmaps is that all the changes can be parametrized in code, which allows you to shortcut the traditional iterative prototyping process and shorten your development cycle.

Of course, if you actually need the ability to handle vector graphics in your code, this app could be a real lifesaver. Compared to simply rendering PDF or SVG files, PaintCode gives you significantly more flexibility and power at the cost of a one-time fee that is very easy to justify.