So I'm making an XP bar for an RPG, and here's what it looks like when it's full: Screenshot (I know it's bad)

But whenever I try to resize it to show when somebody has less XP it distorts itself ultimately ending up something like this: Screenshot

How can I resize it but not stretch the image to match the change in size? I've messed around with it for about 30 minutes to an hour, but I'm kinda tired right now so if there's an obvious solution and I'm missing it I wouldn't be surprised.

Thanks for any responses.