PaintCode: Vector Drawing to Code

header-image

If you are active in the Apple developer community, you are probably already familiar with PaintCode. It is a unique Mac app capable of turning your vector graphic design into pure Objective-C code. PaintCode is a professional quality app and the price tag is a reflection of that fact. The normal selling price of $99.99 (currently $19.99 via MacHeist) is a big pill to swallow for the average user but for a professional iOS/OS X developer it is merely a business investment. However, it is up to you to get your money’s worth out of the app.

PaintCode is full of tools that blend together the look and feel of traditional vector drawing apps while including customizable fields you would more commonly see in Apple’s Interface Builder. It supports numerous object shapes and custom bezier paths, as well as detailed color options including linear and radial gradients. The app is versatile and the uses are limited only by your imagination.

I thought the best way to give you an overview of PaintCode would be to come up with a sample project that I could walk you through. So I decided to make a menubar icon for a non-existent app. This app lets you drag files to the menubar icon to delete them, thus the icon needs to be a little trash can.

To start this project, I decided to customize the PaintCode canvas to better reflect the final location of my icon. To do this, I simply took a screenshot of my actual menubar and set the PaintCode canvas image to that screenshot and changed the dimensions of the canvas to match the dimensions of the screenshot as shown below.

paintcode-image-0000

I made a little container to constrain my icon and then began by drawing the body of the trash can. What I find most interesting about PaintCode is the way that it tightly couples the manipulation of visual settings to the output of code. Creating a group like I did with the Trash Can Body creates a scope in the code for specifically drawing that portion of the icon. As you can also see, whatever I name the shape in PaintCode’s visual editor, that name is then used in the resulting code for comments and variable names. This is an extremely handy way of keeping your code clean and readable.

paintcode-image-0001

Next up, I created some ridges in the side of the can. I created 3 vertical Round Rects, selected them all, and clicked the Union button to create a single object out of them.

paintcode-image-0002

Just to demonstrate more code separation I decided to break out the trash can lid into its own scope consisting of the canLid and the lidHandle. The object names look a little strange in the visual editor when written using camel-case but the resulting code better fits the Objective-C standard.

paintcode-image-0003

The handle is hard to see but I decided to make it from a curved Bezier path as opposed to a Round Rect.

paintcode-image-0004

Now that the icon is fully drawn we can zoom out to get a better feel for how it looks right in the menubar along side all of the other apps I use everyday. I can even scroll through the code and make sure everything is the way I want.

paintcode-image-0005

Finally, before I can insert this code in to the app I need to change the canvas to a more fitting size. You can play with the settings to add a little buffer around the edges, however here I kept it pretty tight. PaintCode makes it easy to export this code to a file which you can import into your Xcode project or you can simply copy and paste the code into your draw method.

paintcode-image-0006

This is a highly simplistic walkthrough and PaintCode is capable of some extremely powerful tasks such as SVG import to code and there is even an IAP to unlock PSD file import. PaintCode can handle standard and Retina images, colors, and complex gradients. I am certain that it has something for just about every possible iOS/OS X project.

The PaintCode website has some helpful examples and tutorial videos I highly recommend. In addition, the great developer tutorial site NSScreencast also has a 10 minute walkthrough that I found useful. If you are a subscriber be sure to watch that episode. If you aren’t a subscriber I would definitely recommend it.

PaintCode is available on the Mac App Store for $99.99 or available as part of the $19.99 MacHeist Bundle for a limited time, which is an insanely good deal.