How do I make high res' images?

I’ve been developing a game for some time now and I’m trying to make a nice stamina, XP, health, special attack meter bar.

It looks decent in the app that I made it in put when I import it into roblox,

it looks like this ;-;

I’m not a super good UI creator but the resolution on this isn’t very good.
I used the ‘Paint’ that automatically comes with my computer to make it and I used pxlr to remove the background yet it doesn’t look very good in studio.

So my questions are
What app should I use to make it?
What should I do to remove the background?
What would be the best way of doing this?

1 Like

Have you tried to check out all of its properties for the scaling?

I don’t know much about GUIs, but I know that if you scale a raster image up/down, it loses it’s quality. I’ve used Paint before and I have noticed some quality loss without scaling and I think the best kind of program to use, especially if you plan on scaling the your work, would be a vector art program (Affinity Designer, Adobe Illustrator, Inkscape).

I doubt it would lose its quality, he used a GUI defining only the black & white color.
Unless you try to scale up a straight line to some square.

As long as you do paint / edit the stuff in its photosho program, you can scale the GUI which keeps the quality. Just do not mess too much with the scaling, otherwise it might for sure turn out bad.
Adobe Photoshop is an good example to edit such GUI’s.

1 Like