THIS WEEK'S SPONSOR:

Backblaze

Astonishingly Easy And Unlimited Cloud Backup


PaintCode: Vector Drawing to Code

header-image

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

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

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

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

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

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

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

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.

Unlock More with Club MacStories

Founded in 2015, Club MacStories has delivered exclusive content every week for over six years.

In that time, members have enjoyed nearly 400 weekly and monthly newsletters packed with more of your favorite MacStories writing as well as Club-only podcasts, eBooks, discounts on apps, icons, and services. Join today, and you’ll get everything new that we publish every week, plus access to our entire archive of back issues and downloadable perks.

The Club expanded in 2021 with Club MacStories+ and Club Premier. Club MacStories+ members enjoy even more exclusive stories, a vibrant Discord community, a rotating roster of app discounts, and more. And, with Club Premier, you get everything we offer at every Club level plus an extended, ad-free version of our podcast AppStories that is delivered early each week in high-bitrate audio.

Choose the Club plan that’s right for you:

  • Club MacStories: Weekly and monthly newsletters via email and the web that are brimming with app collections, tips, automation workflows, longform writing, a Club-only podcast, periodic giveaways, and more;
  • Club MacStories+: Everything that Club MacStories offers, plus exclusive content like Federico’s Automation Academy and John’s Macintosh Desktop Experience, a powerful web app for searching and exploring over 6 years of content and creating custom RSS feeds of Club content, an active Discord community, and a rotating collection of discounts, and more;
  • Club Premier: Everything in from our other plans and AppStories+, an extended version of our flagship podcast that’s delivered early, ad-free, and in high-bitrate audio.