Cannot figure out how to have a UI Shadow

Hi!

I am trying to make a back-shadow for my UI (I dont know if its called that, im not sure)

Like this:

Im sorry for the white background- I had to change it to that so you can see the shadow

_

This is the UI I want to do it on:

I know there is a bunch of flaws-

I cant figure out how to do this. I’ve put a UI behind this UI and it looks a bit weird.

Can someone please tell me, It’s really annoying me.

2 Likes

Can you show me what your shadow looks like without the Shop opened?

Just your Shadow ImageLabel

Not really sure what is going on in your case if you want to create something like that, I’d make a circle in Photoshop or a editing app, put a good amount of a blur effect on it (Gaussian Blur is what I use in Photoshop), then upload it to Roblox as a Decal and Slice it in ImageLabel Properties. Hope that helps, I can clarify if necessary.

2 Likes

one quick trick, is using a couple rotated gradients.


image

This is just a very basic, demonstration.*

2 Likes

I don’t think you need that many gradients :joy:. Maybe 2. One going up and down and one going side to side. I recommend using photoshop it’s very simple to learn after the first week, but if you are looking for something that’s free I would recommend learning Pixlr E and X.

2 Likes

I used 4 initially, for each direction of shadow fade, but the corners doubled up, and so, i needed an additional 4, slightly smaller with no corners, to “double up” the middle sections.
And really this was just a bare bones proof of concept.

2 Likes

It looks weird when the shop is overlaying it. I haven’t used a ImageLabel for my Shadow, I’ve just used a normal frame.

Thats a good idea! I might try it on GIMP if it works for me :slightly_smiling_face:

I think it’ll work. Ill update u if it does or doesn’t

Oh, a normal frame isn’t really effective if you want to make the shadow of your Mac’s AutoSaves Window. I’ll demonstrate how to do it the way you did it, give me a second.

1 Like

It looks okay! But the only part annoying me the most is how the shadows are cutting off on the side- I understand its robloxs restrictions but apart from that it looks okay

Thats alot of UI-Gradients and its gonna take a-lot of time to do each one.

Thanks] for contributing though, it would’ve looked nice without roblox cutting off the shadows

I agree its quite alot-

Photoshop is quite expensive considering its £19.97/mo (I’m a cheap person most of the time lol)

I’m using GIMP now, its a bit hard to use since I was used to a paint . net UI, And now you know- this gimp ui.

Thanks for replying to my post

I see what you mean

You don’t need to, Ill try making the blur on GIMP.

Gotcha, when you make the blur, make sure it’s white when you import it so you can change it in Studio whenever.

1 Like

I’m a bit confused on how to do it- Do I just fill my canvas black and take the Layer Opacity down and then Apply the blur?

Make a white circle shape, using eclipse tool, or a shape tool, add a blur to it, then upload it to Roblox. Post the image here if you need help.

1 Like

Ohhhhhhhhh- thanks. I’m trying it now

I changed it to black for a more of a shadow-


I need to change it to a sqaure becuase. its coming out like this:

I resized the shop just for now

Alright, now go to ImageLabel’s Properties, there should be a thing called ScaleType, change it to Slice, and adjust the numbers and watch the circle change size.

3 Likes

I change ScaleType to slice, adjusted SliceScale and its not doing anything at all, it dosen’t change size or even more at all

I’ve made a square in gimp and did gussian blur and it looks okay now.

Thanks for contributing to my post, you’ve helped me alot.

You have to experiment to do it, but another easy way to do is estimate the size of the Shop’s size, which looks roughly a squarish rectangle, make that shape in your program, then upload it as a Decal. If you want a more accurate size, you can screenshot your screen, and upload it to your program and then estimate size.

1 Like

Roblox tells you in the corner of your UI - Screen Shot 2020-11-26 at 06.25.17 I think this is correct, I’m nto sure.

I guess that will work

Thank you! You’ve saved tons of hours on trying to do this. Thanks!

Also

Thanks to you and everyone who contributed to this forum