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.
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.
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.
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.
The handle is hard to see but I decided to make it from a curved Bezier path as opposed to a Round Rect.
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.
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.
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.