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.
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.
After importing the assets to the asset catalog, make sure to select all of them and set the select properties:
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.
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.
1-click handoff for design assets
Having all your assets up to date on a given project is key to provide the users with the best the design team can offer. It is really…
Coloring across the hole project
When creating assets for iOS, it’s really good practice to take the best advantage of capabilities the system provides. This blog talks a…