How to import UI into Roblox Studio from Photoshop

I recently used a tutorial by @Tedwai on making UI with photoshop and it didn’t include what to do after you make the whole UI. (Tutorial Here) This is a test UI I made using the tutorial.


I need help importing that UI into roblox.

Thanks for the help in advance!

(Contact me on discord, Cr_8tiveDev#5908, if its hard to explain on devforum.)

Never used photoshop, so I’ll kind of have to guess how it works.

Click on file, then save as or export, whichever one you see, then export it as a png or any image format. Go to Roblox, then develop, then decals, then create new decal, then select the image you want to upload.

Alternatively you can go in studio and upload an image there using game explorer.

1 Like

This is the export menu.

@VegetationBush

@VegetationBush do you have discord

Export it into a png or whatever then make a image label or button and make the image that button.

I did that, I also removed the white background, but it still shows in studio, and how do I make it so that it scales to the roblox UI size?

Make the scale type fit and make the background transparency 1.

YES Thanks so much! @VegetationBush @StodiusDev

Wait 1 question. Which way is it, frame > screengui, or screengui > frame.
In the screenshot above, it is frame > screengui.

ScreenGui —> Frame (Frame is the child of ScreenGui)

Screen gui > frame
30 charsssssss

1 Like

Okay thanks, and is there a way to lock aspect ratio?