Joris Kluivers

I like to build software.

Rendering Vectors From Custom Shape Files on iOS and Mac

Generating artwork using code has been a long time obsession for me. First fueled by resolution independence on Mac OS X (removed from 10.7) and more recent with the Retina displays.

Those Retina displays also make me spend time with Photoshop more than I want, creating all those normal and high-res (@2x) versions. Trying to avoid graphics tools, I prefer generating artwork myself in code. Code lets me simply create any size graphic I want and gives me a feeling of being in control, something I miss in Photoshop.

Apparently it is not just me, others are looking for ways to make their lives easier too. One suggestion is to use PDF images. New software also popped up that will export your art to drawing code directly.

Simple shapes

While trying to animate a simple vector shape in an iOS app I found that the hardest part was not to get a shape, but to use it as a path in an app. Eventually the shape was imported by copy pasting a part from an Illustrator file source and parsing that using the ShapeUtilities class created by Jeff Menter. It worked, but it’s kind of an ugly hack.

Symbol shapes

It is a task that is repeated over and over by me:

  1. Find a nice vector shape
  2. Give it a nice style (optional)
  3. Generate both normal and @2x versions

I usually end up with a vector shape from one of popular free or paid interface icon packs available in the Adobe Custom Shape File format. They are ideal for use in iOS navigation and tab bars. Most designers I know have at least one set installed.

That is why I’m currently working on creating a renderer for this format for iOS and Mac. I’ve already successfully reverse engineered the file format and I am now fine tuning the rendering.

Demo

A small demo application shows what currently is possible.

Download the demo app (ShapeDemo-0.1.zip, 66kb)

Future

  • More complete and better rendering
  • The demo app will be expanded with exporting and customization (styles)
  • A library will be created for usage in iOS and Mac apps

Let me know what you think. Send me an email or mention @kluivers on twitter.