Modern Asset Workflow for iOS Development

By Matt Morey | Sep 19, 2016

Using PDF vector assets on iOS is not new. With an ever increasing number of iOS devices with varying pixel densities, there is no time like now to move to a resolution independent asset workflow.

At ChaiOne we have used the following workflow with great success:

  1. Using Adobe Illustrator, 1 asset per artboard is created at @1x size
  2. Using Matthew Ericson’s script, PDFs are generated for each artboard
  3. ShrinkIt is then used to reduce PDF file sizes
  4. Next, the PDFs are added to the Xcode project
  5. In code, PDF assets are used like normal PNGs with the help of UIImage+PDF

A major issue with this workflow is that PDF assets cannot be used in Interface Builder. Xcode doesn’t recognize PDFs as image assets and as a result, our Storyboards tend to not be recognizable. You can’t manage the PDFs with Asset Catalogs either.

Interface Builder (Xcode 5.1) does not recognize PDF assets

With Xcode 6, this has changed. Interface Builder and Asset Catalogs now have support for PDF files (sort of).

If you add a PDF to an asset catalog and then set the type to vector, Xcode will generate @1x.png, @2x.png, and @3x.png files. For example, if circle.pdf is a PDF asset with a resolution of 100px by 100px, then the following assets will be generated at build time:

  1. circle@1x.png (100px by 100px)
  2. circle@2x.png (200px by 200px)
  3. circle@3x.png (300px by 300px)

See this StackOverflow post for more technical details.

Interface Builder (Xcode 6+) now supports PDF assets

Because the PDF assets are turned into various PNGs at build time, this method cannot be used to create arbitrary sized images on the fly. For example, say you wanted the circle from above at 500px by 500px. You can still produce the image, but it will be lossy since it will just take the Xcode generated PNG and stretch it instead of creating a new larger lossless image from the PDF vector file. Thankfully, UIImage+PDF can still be used in these situations.

If Xcode’s treatment of PDFs is good enough for your needs, there is no need to shrink the PDFs using ShrinkIt since bitmap PNGs are actually included in the app bundle, not the PDF.

Resolution independent assets save time and make supporting future Apple devices a non-issue.

Another option is to programmatically create assets manually or with the help of a tool, such as PaintCode.

Looking for more information? Check out some of these resources:


mobile_strategy

Get in touch

Marketo Form