How to create opacity mask for progress bar material?

Shedels · November 16, 2021, 8:17am

I need to split the progress bar into 4 equal sections and round the corners on the sides.

I was thinking about using a mask, but I don’t know how to build it. Please tell me how I can do it

Everynone · November 16, 2021, 9:30am

Make the mask’s background transparent (easier to make soft edges this way if necessary), leave the stuff you want to see (blocks) white:

set Progess Bar’s background image’s tint to transparent, so it goes away (unless you want some background)
set the Fill Image to your png

use Fill Color and Opacity to control the colour of the elements you left out white.

Everynone · November 16, 2021, 9:34am

You could also make the whole thing in material if you need the number of bars to change dynamically. And for something a tad more snazzy, you could have a look at this old thing of mine: