I’m trying to put together an Inventory User Interfact for my game and am struggling with appropriate designs. The theme is fantasy / mythical.
My question being more so how is this done within Photoshop and then uploaded to ROBLOX? - As I’ve never personally done a UI on PS then Uploaded it, I was wondering if anyone could perhaps give me any tips on how I could do this - Followed with how I would allign everything once done?
Once you’ve designed your UIs, you need to export each UI object individually as a PNG and upload them via the Create page.
You can then insert the images via the Toolbox by right clicking them and selecting the Copy Asset ID option. From there, you can paste them into ImageLabels/Buttons where needed and set your properties using the Properties window.
Alignment is done by making use of Position and AnchorPoint properties, and parenting techniques (e.g. aligning a TextLabel to the centre of an ImageButton by parenting the TextLabel to the ImageButton and setting the TextLabel’s AnchorPoint to 0.5, 0.5 and Position to {{ 0.5, 0 }, { 0.5, 0 }}).
Every piece of the UI you create on photoshop should be created on seperate layers so you can adjust them however you need to on roblox studio, then once you get into roblox studio, import the specific layers you need into image labels/buttons. I recommend adding the functionalities after importing and adjusting everything to your liking, just so you dont have to do extra work on your scripts later on.
Alright, first off, USE THE SEARCH TOOL!!!
Secondly, I use the UICorner for making my UI elements rounded (it is more user-friendly that way) and use UIGridLayout for inventory-style UI. If you are putting in any text or images in the grid, I suggest using UIPadding to fit the text/image inside the UI element within the grid. Hopefully this helps!