On occasion you need to be able to control not just the content of a graphic element (its shape) but also it's color, separately to the shape. For example, an icon and its color, or some text with the ability to make it a dynamic text color.

Let's use an example, an insurance company can insure a home, a holiday or a pet and they use icons to show each. However you can be a customer with different levels of service, silver, gold, and platinum, and that's reflected in the color scheme.
One way of tackling this is to create all 9 variations of these elements (a home icon in the three colors, a palm tree icon in the three colors and so on). However, for more freedom I would recommend using two layers, a solid layer that represents the color, which is held in another layer representing the shape.

Watch this video to understand the details:


Total running time: 2:05


This can work with both media and text, however emojis can't be used with this method as the text is only used as a matte. For emojis you need the text to be both the matte and the color.