How to Create "Ui Shadows"

HELLO FRIENDS :hot_face:

I’m looking for a way to implement a “Ui Shadow” for my user interfaces.
My issue is that I don’t think Roblox has this feature - overdue.

Here is an example of what I would like to do:

(Free Draw 2)

The shadows around the UI.

The only thing I’ve found is a plugin on the forums but sadly does not support UiCorners.

5 Likes

I could create an invisible frame using the plugin, but I’d prefer rounded shadows to match with the UI.
How could I create my own?

Could recommend creating one with UIGradient but UICorner doesn’t affect clip descendants :cry:

4 Likes

Most complex and good looking Ui’s are made with photoshop. I wouldnt recommend making Ui’s with roblox studio’s tools because it isnt as reliable. If you cant afford Photoshop you can make Ui with sofware that is meant for it or you can just go for paint dot net.

2 Likes

I’d recommend just making another frame (make sure the ZIndex is lower than the primary frame) and colour it black, with around 0.5 transparency

1 Like

An example of a free software like Photoshop is Photopea.

I don’t recommend either Photoshop or Photopea, try something like Figma or Lunacy.

Photoshop and Photopea are more designed for raster graphics, Figma is really good for making UI and vector graphics. (to make drop shadows in Figma, just select a Frame and add an effect, it’ll automatically add a 4px width and 4px height drop shadow)

And also @Acvious UI designing in PDN is a really bad idea, just because it’s hard to select stuff after you’ve placed it, and as far as I’m aware, you can’t modify rounded corners that much.

5 Likes

what do you mean ui shadows? i dont get this do you mean uistroke? thats already there

I think they mean drop shadows

Yea, Figma is probably your best free tool for UI designing.

1 Like

I think you can do it with the slice properties of an image label:

drop.rbxm (4 KB)

I just used a rounded rectangle and applied a Gaussian blur to it

blurtest

Using slice allows you to resize it without having to make a new image every time:

Although the shadow frame should be resized a bit differently than the base frame, this is a proof of concept of the corners not being stretched.

10 Likes

Yeah now that i think about it there is more software that can be used. Don’t blame me, I’m no UI expert after all.

1 Like

Not sure if this has already been said, but I actually use a free Adobe Software called ‘Adobe Xd’ or ‘Adobe Experience Design’. It’s free for one user (meaning you can’t collaborate with other people on the same file, but I don’t see that as a necessity) and overall a great software. It comes with great colour tools and the ability to add plugins. However, to access it you need to download the Adobe Creative Cloud here.

If you don’t feel like downloading a piece of software, you can try using Figma which is a totally free online software very similar to Adobe Xd.

Hope this helps!

2 Likes