Element TintingColoring across the hole project

Cover Image for Element Tinting

When creating assets for iOS, it’s really good practice to take the best advantage of capabilities the system provides. This blog talks a little bit about using template images to provide a consistent style between projects sharing the same assets.

Since iOS 7, UI Images can be marked as templates (masks) to apply colors. Therefore it’s possible to export non-colored shape assets from your design tool and color them directly on the app. For example, the glyphs below on this control element are simple shapes that can be outlined and colored.

Glyphs

Exporting from Sketch

A good example of exporting mask assets for this control element would be the individual buttons as transparent masks. Observe an example export on Sketch.

In this example, all elements are black shapes with no background exported as slices using the PDF preset. Just like PNG, PDF exports are able to retain transparency, but contrary to raster formats, it retains by describing the shape and ensuring assets resolutions independence.

Exports

Import on Xcode

After importing the assets to the asset catalog, make sure to select all of them and set the select properties:

  1. Rendering as: Template Image. This makes sure the image is treated as a mask when instantiated as UI Image. As this is an UI Image feature it is not guaranteed to work everywhere except UI Kit classes.
  2. Resizing: ☑️ Preserve Vector Data. iOS is able to preserve the outline of PDF graphics if they were make using vector tools, this ensures image quality on assets that resize, different button scales for interface size classes and crisp graphics on dynamic type resized elements. This is specially important for iconography and should be turned on whenever possible.
  3. Scales: Single Scale. Doing @1x, @2x and @3x is an asset segregation method for elements that cannot be expressed parametrically or via vector in an efficient manner. For all other cases, draw using Core Graphics or use PDF exports to ensure the highest quality with the smaller file size.

Xcode Asset Config

Using the elements

Tinted

Here is a screenshot of a drag and drop use on the Storyboard using the Media Library. On the left, there is an UI Image View for a PDF asset marked as template. As you can see, this assets is automatically tinted and need no further configuration as UI Image Views size themselves.

On the center is a UI Image View for a PDF asset either marked to render using the original image color or default. It is able to retain its intended point size and and even its quality if rendered on dynamic type accessibility sizes.

Lastly, on the right there is an element that was marked as template and its UI Image View as marked to have a red tint, thus, tinting the mask.

Conclusion

Tinting elements is the way to go when producing vector assets on iOS. It’s important to use as much as possible of the system features to benefit the user regarding conformance, quality and accessibility.

Make sure to take a look into the iOS apps that you have installed and notice which ones use tinting and which use full color assets. Take a moment to also notice pixelated assets on third party apps and think on how to avoid those pitfalls.

Other blogs