Complex UI Shapes?

Help and Feedback Art Design Support
#1

Hi!

I’ve been building for a long time on Roblox for other people (mainly groups), so recently I’ve decided that I wanted to pick up other talents and give my own group a shot.

So, I’m just starting out on the place and I wanted to get the game systems done prior to building anything since I figure the systems will be the hardest part for me. Last night I drew up a sketch of what I want my UI to look like in GIMP. Here it is:

Untitled
Untitled1920×1080 122 KB

Obviously not to scale, lol. This is just to give an idea of where everything will go. Anyway, after giving it some thought I realized I’m going to need a LOT of rounded corners, custom icons, etc., so obviously I need to start using a paint software for this GUI. Here are my questions…

  1. Which paint software should I use? I’m running on a Mac. I drew up my sketch on GIMP, but I heard raster paint softwares are bad for UI.

  2. How big is the Roblox screen? Should I just go with 1920x1080? I want to make sure the scaling doesn’t result in pixelated distortions around my images.

  3. How should I go about exporting only specific elements and breaking the GUI apart while still maintaining the proper sizes? Lots of the parts of the GUI are gonna be moving or variable, so I need to have each asset separated.

  4. Tips to make my UI look more professional? How hard is icon creation for things like the exclamation point in the triangle or the minimap?

Thank you so much!

#2

  1. GIMP, Adobe XD, Photoshop, and whatever software will do as long as it allows you export assets as a png file. Personally prefer Photoshop because of the availability to resources online. Makes it easier to learn and advance.

  2. This isn’t a concern for you. Make use of UIAspectRatioConstraint to maintain the dimension of your UI assets irrespective of screen dimensions.

  3. No comment.

  4. Draw some inspiration from already existing UIs and try recreating the same effects, this should enough to create visually appealing UIs. Don’t waste your time creating icons, plenty of free icons that can be found on thenounproject, icons8, flaticon, freepik. You’re better off just googling “free icons” instead of making your own. Personally prefer thenounproject because of its vast icon library and the user experience.

1 Like
#3

  1. Personally I recommend using a vector-based image editor to create the physical UI shapes (Figma, Illustrator), and then use a raster-based editor (Photoshop) to add advanced effects afterwards; such as glows, highlights, etc.

  2. The screen size varies dependant on device. You’ll find that in Studio your screen size is different to when you’re playing a game, due to the fact that the viewport is smaller. You can use the Studio device emulator to test different screen sizes. Desktop players are generally playing on a 16:9 display (1920x1080, 1280x720, etc.), but mobiles vary a lot more, for example, my phone is 19:9 (3040x1440).

  3. Use the nine-slice technique and the slice property on ImageLabels/ImageButtons for elements you wish to scale the edges of. You can place all your UI images into one image and split it up using the ImageRectSize and ImageRectOffset properties, but keep in mind Roblox only allows a maximum size of 1024x1024 for image uploads.

  4. Bear in mind the style of your game. Try to make the UI fit in with the game. For example, use soft shadows and bright colours for things like social games (e.g. Adopt Me, Meep City), whereas you might go for sharp edges and lots of blues and greens for a sci-fi game.

5 Likes
#4

Thank you so much, this was a really great answer to all my questions! It’s so daunting trying to learn some of the aspects of Roblox that are less easy to understand for me and I really appreciate your answer a lot.

1 Like
#5

Thank you! I appreciate your help a lot, I assume my third question might be a little weird or unnecessary, but again I really appreciate it!