Some notes before we get started:
HUD shit is incredibly fun to poke around with, but also can be a pain in the ass when something goes wrong, so loads of patience and willingness to try again must be present.
So with that said let's get started.
Requirements:
Image editing software such as Adobe Photoshop, Gimp, etc.
Troy's latest Entity build.
a bit of patience.
Section 1: Creating Meter
So take any clean map, and find the Rocket Launcher's ammo meter. Take a look at it in Photoshop. What do you see? Be sure to check the alpha, and the RGB channels.
Even if you are new to HUD editing, It doesn't take a rocket scientist to figure out what's going on.
Let's take a look...

The image on top is the Rocket Launcher's RGB, or Red Blue Green, channel. The image below it is the Alpha channel.
So in the RGB channel, we see the Rocket launcher ammo counters indicated by the Green and light blue figures, and around them are blue and black. Well exact color data shows...
RGB Colors
Ends at
██████████████
Surrounded by
██████████████
Starts at
██████████████
Surrounded by
██████████████
So what we know is that the Light blue and dark blue are the lighter end of the meter. And we know that meters flow from dark to light so that covers how to map out the colors. Now to make a meter...
I kinda am a fan of Nerf dart guns, so I figure I could make a standard clip ammo meter. I know that a standard clip holds at max, 6 darts. So I will make an image at size 6x1 pixels right? Wrong. I will explain why.
If I where to take the light blue and green colors exact, put them next to each other at 1 pixel size and transformed them over the length of the image I get these results.

As you obviously see, there are only 2 pixels that are different. So we will only get a meter that moves 3 places evenly. The meter will crumble if we tried it in-game.
So there must be a trick to get around this. The truth is that there is. Basically because 2/6 pixels where different. This ratio stays about consistent no matter what size your working with. But if you are working with anything over 128 pixels, just go for a 1/2 ratio instead of a 1/3.
So lets duplicate the original process but change the size to the correct width. So if we want 6 spots, we will need to multiply 6 by 3 and get 18. So instead of 1x6 make it 1x18 and then stretch the two pixels over the length. But this isn't enough. You want the number to be odd. So add one to the even number to get 19.

Now we can still see the same repeating color, but there are more differences in the middle. So basically use the Canvas Size option to change it to 6 pixels and you should get every color different. That's the trick. Now what do you do with these pixels? You basically make one bullet one pixel color then move on to the next.
Repeat the process for the blue colors as well. Here are my results.

This only leaves the alpha which shows up behind the bullets to show depleted bullets.
Shield meters also work this way, but the alpha will tell how transparent the meter is.
Section 2: Injection
I recommend getting a clean map and copying it to its own directory, then editing the image, save it and build it into your main map to reduce the chance for error.
So before you begin I recommend you Resize or Add submaps to your bitmap.
When ready, just simply inject your bitmap, link it to your HUD tag, and test.