Why Adobe XD UI are blurry in studio and how to fix it?

Help and Feedback Art Design Support
, ,
#1

Hello!
So I try to do some UI using Adobe XD and export file as PNG image (Except text element because I can do it in game anyways) and put it in Roblox Decal to make them able to see in game but the problem is The UI are blurry and not what I expect about I don’t know what I doing wrong but It might be something about the Exported Size like Photoshop UI does or maybe It’s a Roblox fault?

Adobe XD

image

Roblox Studio
SurfaceGUI

image

ScreenGUI

image

If someone know please reply this topic I’m so worry about other UI that I haven’t export from Adobe XD that It will be export like I expect or not ;-;

3 Likes
#2

Does lighning affect it? The lighting can be doing something to make the gui look like that.

1 Like
#3

I didn’t mess with anything in Lighting section and The lighting in UI is just a fake DropShadow feature in adobe XD to make them look Unique

#4

If you look at the PNG file, does it have this blur?

1 Like
#5

Make sure your resolution is lower than 1024x1024, it obviously should be for such a small element but just in case. Any dimension higher than that gets lowered.

2 Likes
#6

Can you show me how to export it in adobe XD please

#7

I’m sure my PNG file are not blurry like this

#8

it looks fine to me (except surface gui). maybe the image resolution has something to do with it?

1 Like
#9

I think Roblox fails to upload anything higher than that.

I’m not that experienced with SurfaceGUIs, try messing with lighting (not game.Lighting but instead the LightInfluence (might be named something else idk) property in SurfaceGUI). This isn’t an Adobe XD issue, it could happen in Figma, Lunacy or something else.

1 Like
#10

Yeah after 1024x1024 Roblox will downscale the image, which lowers the quality.

1 Like
#11

It’s happening to me right now in Lunacy. Any way I can lower the resolution?

1 Like
#12

I don’t know if it’ll be of any use, but try running Pixelfix before you upload to Roblox.

It removes some stuff which makes images appear glitchy (which I didn’t know about at the time of writing in 2021).

1 Like
#13

Thank you, however, I found a fix. When I enlarge the image in Lunacy, the image actually retains its quality in studio. The reason appears to be that lunacy sizes are smaller than Roblox’s, even though they appear to be the same. Either way, I have Photoshop now and am currently trying to learn it.

2 Likes