iOS applications are an image-driven species. When developing an app, you need icons in various sizes, Default.png images in different sizes, and also @1x and @2x images for each image file inside the app. All of these images make applications look attractive, but the downside is you have to generate these image files individually. With the introduction of the iPhone 6 and 6 Plus last week, I couldn’t help but think how difficult it will be to manage yet another group of assets: @3x assets.

Fortunately, Apple has provided some great tools in Xcode 6 for managing assets. Even better, this is a way to prepare your apps for future iOS devices. One piece of this is the ability to generate Storyboard-based Launch Images in Xcode 6 and iOS 8, leaving behind the notion of individual images for each device type. Another piece of this technology is the ability to generate vector-based images from a PDF at build-time in Xcode 6. In this article, I want to delve into how you can do the latter, saving yourself time (and your sanity) in the process.

Session 411 from WWDC “What’s New in Interface Builder” discussed—albeit very briefly—Xcode’s support for creating your PNG files at build time from a vectorized PDF. I share with you exactly how this is done.

Step 1. Generate vector PDFs in Illustrator

Screenshot of Adobe Illustrator showing the export settings.

To begin, you’ll need a vector PDF exported from Adobe Illustrator (or your other favorite vector-based drawing tool) at the @1x size you need in your applications. This is very easily done in Illustrator by:

  1. Create a new document with the size of the @1x asset you’ll be exporting.
  2. Place your path in the new document, just as you would normally.
  3. Export by selecting Save from the File menu.
  4. Remember to uncheck the ‘Preserve Illustrator Editing Capabilities’ option when saving.

The PDF that gets exported from Illustrator will be a scalable vector, perfectly capable of scaling to the @2x, and @3x resolutions in iOS. Let’s look at how to set this up in Xcode.

Step 2. Set up your Xcode project

In order to use this feature, you’ll need an Xcode Asset Catalog to manage your images. Don’t worry, though, you can mix standard image imports and XCAssets without issue. Follow these steps to tell Xcode to use vectors when specifying images:

Screenshot of Xcode showing the Attributes inspector in an Xcode Asset Catalog.

  1. If you don’t already have an XCAsset file, then create one; otherwise, open one you already have in your project.
  2. Select “New Image Set” from the Editor menu.
  3. In the new image set that appears, select the blank image set, then show the Utilities panel.
  4. Select the Attributes Inspector.
  5. Under the types drop-down menu, select “Vectors”.
  6. The image set will change to just one drop point, labeled “All - Universal”
  7. Drag and drop your vector PDF created above onto the drop point.

Next, you’ll simply use the Xcode Image Catalog image set as you would with any other image (either in code or through Interface Builder). For instance, calling --imageNamed: in code, and passing in the NSString literal name of the image set.

Step 3. Watch the magic happen

When you build your project, Xcode will go to work, creating @1x, @2x, and @3x PNG files from the PDF that you’ve used in the Xcode Asset Catalog. For instance, if you had a @1x PDF that was 150px x 150px, then Xcode will generate the following PNG sizes for use in the application:

When you run the application, iOS will automatically pick the appropriate @1x, @2x, or @3x image that Xcode generated based on the device requirements. Be sure to specify your AutoLayout constraints so that the image isn’t resized on larger devices, otherwise you’ll end up with blurry images. Xcode generates raster images that are based on the @1x PDF image instead of scaling a vector at run-time.

Notes about PDF support in Xcode

Some notes about this method of adding images to your project:

More information and resources

Cory Bohon

Cross Platform Engineer