How to IMPORT AND SCALE GUI into ROBLOX STUDIO!

This is by far the most asked question I’ve gotten from everyone and that is HOW DO I IMPORT GUIS! This can be done in many ways, I’ve explain this in the video below but for those who cannot watch it i’ll type it out!

  1. First you will have your GUI made on photoshop you will flatten everything you wish to import into studio.

  2. Next you want to select the asset and press Ctrl+C and open a new file, which should have the EXACT dimensions of the UI.

  3. Now we open the next space and paste the asset we merged/copied.

  4. After you have done that save the file as a .png (will not include screenshot where as it’s really easy file>save as>.png)

  5. Next you want to open studio and since the thing I chose was something which the player clicks you add a ImageButton. (All I did was just place the button inside the label)

  6. Next for the scaling part for this what we want to do is set both of the values on the size to use the first value so (x,0) (x,0) and it should set it as scale, in the video I show me using a plug in.

  7. Next all you have to do is add the “UIAspectRatio” into the button and BAM!

  8. You enjoy the satisfaction of knowing you did what many people struggle with B)

Let me guys know if you have any questions :slight_smile:

22 Likes

It’s nice to have more information out there, but when I see threads just linking a video or an external source - it reads like a self-plug. If you’re going to post a thread, can you at least put instructions on the thread? If no, and the answer is just to watch the video, then what’s the point of posting a thread in the first place when they could just google to find the video?

1 Like

Post as been updated, was working on it while you commented.

1 Like

Nice. Personally how I import UI’s is I export the entire artboard as an image and create a full-screen image label and put it in the picture of the artboard. Then I export the individual UI elements and basically scale them to match the BG artboard image. This way the size and position will be almost exactly the same as it was in whatever vector graphics program you used.

Then I just delete the artboard image and only the UI’s are left. I personally recommend this method because your UI will be almost exactly the same in studio as in your vector graphics program. Nothing will be too stretched or distorted, and clients will get a more accurate UI compared to the ones you initially presented to them.

4 Likes

I’m pretty sure you misunderstood, I do the same thing but this choice I just used a button since a label should just be common knowledge I stated “I used a button cause the user will be interacting” somewhere in the video, thanks for clearing up the water for others though!

A quick tip, for faster exporting right click onto the layer you want to export and go to ‘Quick export as .png’

1 Like

I’ve seen some plugins to convert PSD’s to Roblox UI’s I believe those make things easier; Especially with the layers and stuff.

Oh yeah, here’s the link:

2 Likes

Please send a video so that I can visually see these instructions; I don’t see why post a resource without one; Thanks

in fact that program I know is called Photoshop

it is a good program to make GUI designs

do I need to spend robux to upload my photoshop gui?