How do I make images for a UI like these?

Hello, everyone. I’m new to UI design, and I’m trying to make a store/inventory for my game. I’m trying to upload pictures of pets for the shop, but it doesn’t look right.
Here is a good example of what I want the pets to look like:


Here’s what my pets look like:

How can I improve mine?

You should maybe hire someone to create the images or create one yourself. :wink:

That does not answer his question at all, he is asking how to generate images and import them into Roblox like the examples.

Oh, I must have read it wrong.

Those guys, use a external program like Adobe XD, Adobe Illustrator, Paint.Net and import them into Roblox. Those frames are their art style. The reason why your pet images look like that, is because it does not have a transparent background. You need to fix that. You also need to use image frames and set the background to transparent.

This uses ViewportFrames, which require knowledge in CFrames and Orientation.

He’s trying to use Images and not view port frames, but the game he is trying to replicate, is using view port frames.

How would I make a transparent background? I have a gfx guy who could maybe do that? I’m new to this.

Take a screenshot of the item behind a white background, then use a external program to remove the white background and boom. I recommend paint.net or gimp if your looking for a free alternative.

I have paint 3D on my computer, would that work?

Idk if it has the magic wand tool to be able to remote the background.

Ah, ok. Thanks for the advice. So, once I remove the background, the image will be better, yes?

Yes, sorry if there was any confusion. I’m looking to make this myself.

1 Like

How do you think this looks?

1 Like

Hi there!
The issue may be with the size of the graphic. I know I’ve had issues with the scaling due to my UI not being scaled correctly in Photoshop.
Hope this helps!

Hello! I made this UI in ROBLOX studio. I haven’t used any external programs, except to remove the background. Do you think that issue may still exist?

I would suggest resizing the pet photos. Also, I would suggest using a program such as Photoshop or paint.net to make the UI’s look crisper and just a lot better in general.

If you want to make your images have transparent backgrounds set this value to “1” instead of “0.”

Screenshot_3

If you want to avoid that “squished” look go under images and set “stretch” to “fit.”

Screenshot_4

I don’t have either of those programs. I made all the UIs in Roblox Studio. There aren’t very many good tutorials on how to make roblox UIs, so I just had to teach myself in studio. If you have like a youtube series you recommend, I’d love that.

I was going back and forth on if I wanted the transparency to be 0 or 1. Thanks for the tip about the ScaleType, I didn’t know about that so that will help me a lot.