Custom health bar, buttons etc

So I have an idea for a custom health bar. Im not sure how to go about doing it, lets say for example the health bar is in the shape of a circle. The circle itself is outlined but the center is opacity much like you see in rectangle health bars FVXT7.png
Like that. However I want to create an odd shaped health bar, in the form of a waterdrop but upside down.
tnm.png
The center would be filled with your health. Once it starts to deplete the center would be opacity so you can see through it. I am not sure of the work flow of this, do they use Photoshop to make the health bars? If so does someone have a workflow I can reference to on how to create such an idea? Also, The same question for menu buttons before you would start your game, I have some buttons that are from unreal 4 in my menu now and when you mouse over them they change colors, however I am not sure on the workflow in making custom ones. If anyone has any ideas, please let me know. Thank you!