How to Create Vector Images with Xcode
Creating artwork for your mobile application is a crucial part of the development process. Strong imagery gives apps more character and makes them more engaging. But with all of the different device and screen sizes, creating and managing that artwork for all the permutations has always been a challenge. For iOS, using Xcode to create vector images helps mobile app designers and developers simplify that task.
For many apps, you need icons and splash screen images in different sizes, and also @1x, @2x and @3x versions for each asset inside the app. Vector images, a feature first introduced in Xcode 6, allows single assets to scale to all sizes. When you create vector images, instead of using three copies of the same image in three different sizes, only one file is required. Xcode does the heavy lifting so the image displays in the proper sizes on the different devices and in your app’s different screens.
You may be asking, so how do I create vector images in Xcode? The process involves two major steps.
Step 1. Create Vector Images in PDFs
To begin, you’ll need a vector PDF exported from your favorite vector-based drawing tool at the @1x size. The app design team at ArcTouch typically uses Sketch.
Once the design is complete, the exported PDF will be a scalable vector, perfectly capable of scaling to the @2x and @3x resolutions in iOS.
Step 2. Add the Mobile Vector Image to Xcode
In order to create vector images in Xcode, you’ll need an Xcode Asset Catalog to manage your images. You can mix standard image imports and XCAssets without any issues. Here’s how you can add the vector image in Xcode:
Create an XCAsset file, or open one if you already have it in your project:
Select “New Image Set” from the Editor menu:
In the new image set that appears, select the blank image set, then show the Utilities panel:
Select the Attributes Inspector. Under the Scale Factor drop-down menu, select “Single Vector:”
The image set will change to just one drop point, labeled “All – Universal:”
Drag and drop your vector PDF created above onto the drop point:
Done. Just go to your ViewController and add the image as usual:
Now you can run the app either on devices that feature screens with different resolutions (retina and non-retina), or do so using the Simulator. As you’ll see, the image is displayed perfectly on all screen types and sizes.
When you build your project, Xcode will do the hard work, creating @1x, @2x, and @3x PNG files from the vector PDF that you’ve used in the Xcode Asset Catalog. For example, if you had a @1x PDF that was 150px x 150px, then Xcode will generate the following PNG sizes for use in the application:
- @1x PNG at 150px x 150px
- @2x PNG at 300px x 300px
- @3x PNG at 450px x 450px
When you run the application, iOS will automatically pick the appropriate @1x, @2x, or @3x image that Xcode generated based on the device requirements. Xcode generates raster images that are based on the @1x PDF image instead of scaling a vector at run-time. As you can see, when you create vector images for your Xcode project, you save app design time and development time — and ensure predictable results in the user interface on all devices.