I recently commisioned a UI designer in the community to revamp my UI’s for my upcoming project, RoStreams.
Everything went smooth to say the least, up till the point where I realized that the final product would be provided in a .PSD (Photoshop) file… when I was expecting it to be in an .rbmx (Studio) file. Unfortunately, I don’t work UI’s at all - nor do I know how to scale them, etc.
The UI designer has provided me with the exported images from Photoshop, all the images are in .PNG format. The only problem here is that I do not know how to work with UI’s (hence why I just commission people to do them for me) so unfortunately, I have these UI’s laying around that I paid 30,000 Robux for.
If someone here could help me import the images into Studio that would be appreciated. I cna provide you with either the .PSD file or with the exported images from the .PSD file.
Please shoot me a DM on Discord, Twitter, or the DevForums if you can do this. I will obviously pay you, although it is not a lot - our remaining funds for the UI’s is 3,000 Robux, so that’s what the payment is.
Discord: OfyFTW#1526 Twitter: OfyFTW
Example of how the UI looks like in Photoshop, this is one out of 9 screen UI examples:
The thing with UI (on Roblox) is that is takes more effort to properly make UIs in studio than it takes to design them in Illustrator or Photoshop for example. That’s because the designer in Roblox has to make a lot of difficult UI behaviour decisions (scaling, positions, images vs roblox-elements).
Example; In Photoshop you got this 200x200 frame, do you want the frame to scale properly? You might want to consider using a custom 9-slice system. Do you want the corners to scale too? You have to upload the background seperately. (After exporting from photoshop).
There are a bunch more things you have to consider when making UI inside studio; like positions, text scaling, custom fonts (which you cannot later combine with Localization).
There are obviously exceptions, or games that don’t really care about scaling. (When the buttons look tiny on a high DPI display, or huge on a low-res phone, for example.)
What I’m trying to say is, that if you spent 30.000R$ on a professional design, you should not cheap out on the actual design in studio, since it (in my experience) always takes way more effort.
I don’t know if this is going to make a lot of sense but here we go:
You would want to first remove aspects of the things that are going to change in game such as “player name”, “Some Instructional message here.”, the character image, and other parts that you would like to change during in game.
Next, you want to separate the buttons and such to turn into image buttons. For example, the buttons in the bottom right (the green ones) can be separated from the HUD bar. Later on, you can put them back into the normal spots using the UI editor Roblox provides.
Then, you would want to put back the text where you deleted them was. Including the imagelabel for the character. With scripting, you can automatically change the image endpoints to the player.
Once you’ve finished tidying things up, you can try learning a bit of UI and fit things into Roblox using scaling and such so that different screen resolutions will fit all.
You can get help from this guide:
Or if you want to do it quickly, (might not look too swell but works temporarily) use this plugin:
You may want to try out Adobe XD, it’s a program for creating UIs and has an easier importing and exporting process than Photoshop (in my opinion). It also has a feature to add transitions to help visualise the UI and you can also import the UI prototype to your mobile device to see how it would look in real time.
Wow… That is really disappointing. I am a UI designer myself and I can tell you that the process of exporting UIs from something like Photoshop to Roblox isn’t that difficult, it’s just a time-consuming process. (Importing it in, getting it the correct scale, making it work on multiple devices, etc.) It’s just disappointing someone would just do the fun part for 30k robux and then just leave like this… I don’t know what is common for other UI designers on ROBLOX, I personally always do the importing task even if it is boring and long, it doesn’t matter to me if its a 5k robux project or a 50k robux project. In my opinion, whoever you hired seems extremely lazy and unprofessional.
To import the UI’s in, I’d recommend importing in a full screen image of all the UI’s open, then taking the individual UI elemtents (images) and just placing it over the matching element in the full screen image.
)