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.

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.

 

1  2  3  Next Page 

Sign up for MIS Asia eNewsletters.