I’m a UI Designer and have recently started looking for jobs and commissions. I create my shapes and text in Adobe Xd and import them into Roblox Studio.
Whenever it gets imported and I add the images into the game, they’re not as crisp and sharp as they looked in Xd.
So my question is, how do people make your user interface look so sharp after it’s been imported into Roblox Studio?
If you could help me or point me in the right direction that would be great.
A lot to unpack here.
If you’re using scale to size the UI elements, the absolute size changes depending on the user’s screen size. This means that the UI element will likely not be in its native pixel size or aspect ratio (Use an AspectRatioConstraint to combat this), which is a problem because things get a little blurry if they’re not at their correct size (literally). You can use a slicing technique called 9-slice to help with this. You can read more about that here: How to use SliceCenter (Roblox's 9-Slice GUI Property)
If you’re using pixel data to size the UI, (offset), this more or less becomes a non-issue. You may still notice some black edges around the UI, which is normal for Roblox and has an easy fix. Use the Pixelfix executable Corecii made to get rid of weird black lines.