Circular Progress Bar/Meter - how to generate smooth alpha channel for cutout?

Hey all;

So at this point I’ve seen the thread by Eric (awesome, thanks Eric) regarding how to put together a circular meter, and I understand what and how this is working in Unity.

However, every attempt that I’ve tried to re-create the alpha channel for my own asset always results in the asset “filling” oddly - as I adjust the cutout value for the asset in Unity, it does fill in following the arc of the circle, but it also fills from the inside of the arc outward; the best way to describe it is like ink bleeding into a napkin. So I also saw this post - where it appeared the compression settings within Unity could’ve been causing this as well.

So I’ve been monkeying around with that setting as well, but I can’t get the asset to fill as smoothly as Eric’s original from his demonstration.

So my question is probably less about Unity, and more about techniques on how to use either Photoshop or Illustrator to create a smooth angle gradient that follows a curve, but is the same white/black balance from the inside of the arc to the outside of it. Or, if Eric would be so kind as to just post how he made that gradient for the alpha channel in his example, that would be excellent.

Any help is greatly appreciated! And if there’s anything I should be including attached to this question, please let me know!


I just selected the gradient angular mode in my old Photoshop CS2:


…then dragged a line from the center of the image to the top…

NOTE: As @Agent654 said, this actually has the same “ink-blot” appearance - smells like a Photoshop gradient characteristic, not an Unity problem.

In order to solve this, I created a simple program in Delphi (oh God, Pascal sucks…) and generated a 16 bit RAW file, then saved it via Photoshop in the PNG format. The result can be seen (and downloaded) below, and worked as expected: the border appears jagged as it should be in a cutout shader, and definitely doesn’t look like a Rorschach test as before.