Jump to content
2Hex

Graphical User Interface Design: Shadows

Recommended Posts

Hello! This is 2Hex here, your favorite UI designer (not really). Today for our GUI designing, we'll be focusing on shadows. In UI designing, shadows can add effect to the GUI. Here, is a picture of a recent GUI I made that involves using shadows. As you can see, the shadow helps make a 3D effect to the GUI. 

image.png.05da791e2cabc9b7a6ba914cc8e54ec7.png

I'll be showing you two different methods you can do quick and simple shadows to your game. 

1. Let's begin by inserting the ScreenGUI. The ScreenGUI is basically the interface you will be creating on the screen that's in front of you (as shown above). To do so, simply click the + button next to the StarterGUI and the first thing you'll see is ScreenGUI. Simply click on it and you'll see ScreenGUI inside the StarterGUI folder

image.png.99c37267e7b42ad65f00c7ae6f7133fd.png

image.png.cb4692fa960e81a7e0f9ffa8f1a6fde2.png

2. Next, we shall insert a frame object. The frame is a rigid structure that you'll allow to adjust later on your screen. Simply, click the + button next to the ScreenGUI inside the StarterGUI folder and type in "FRAME." You will see a frame object when you type it in. Simply double-click the frame object. Once you double-click it, you will be able to see the frame object inside the ScreenGUI. And what you will also notice is that the "Frame" is on the top left of your workspace. We can simply move it to the center. Look down below for details.

image.png.a6946f5ffd6a08ae5f62270faa4fa095.png

image.png.d003f3f0fdb619255e858dc7a203a767.png

3. When you click on the "Frame" object, you will see a bunch of properties that you haven't discovered before. You will need to read the Basic User Interface Designing Guide (URL soon TM) to know what each property does. But we'll be focusing on four different properties, Anchor Point, Position, Size, and zIndex in this case. But let us start by centering the frame. As you can tell, the frame is on the top left corner originally. To do so, we'll need to set the anchorpoint to 0.5,0.5 instead of 0,0 (Always 0.5 if you want your GUIs to be centered). You will notice that the frame is pushed back even further from the left corner. But that's ok! Because we're gonna change the position of the frame so it can be perfectly centered on your screen!

image.png.7e4a7fc2e32bbc51126f71b684f7798b.png   image.png.64d711aa6b952f493979906d4d539e62.png   image.png.c2b3f820403c1513bccd4eaa4c05dd25.pngimage.png.6643aab51f861e7e279b11983f642755.png

4. We'll need to change the position of the frame. There are two brackets, one for the X-Axis and one for the Y-Axis.  It should look like this when default {0,0},{0,0}. We're gonna be focusing more on the left side of the brackets rather than the right size (it'll be used later!). All you gotta do is simply change the left side of the brackets to 0.5. When putting in the numbers, it should be {0.5,0},{0.5,0 }. Now you can see that the frame is centered perfectly on your screen. 

image.png.2adf6cdca1ce60e76877a5c1ccee3c49.png (due to the fact that HD cannot upload big images, you can see on your screen that it's exactly in the middle lol)

5. Now, this is optional but if you want to change the size, you can. But I'm pretty sure you know how unless you look at Basic User Interface Designing Guide. Now just like step two, let's insert another frame inside the frame (look at step two if you are confused). We'll name it shadows to know that we're inserting the shadow and not just another frame. For instance, I'm gonna make the size {0.4,0},{0.4,0} just to show you an example. I'm also gonna color the shadow "cyan" [73, 213, 255] in order to see what the shadow looks like.

image.png.7705aad530e58c535a7b988af2ca8be9.png    image.png.d91daaedd7c10f9335a09c1a9b7de21c.png

6. Now, let us stretch the shadow so that it can touch both endings and not just one end. To do so, simply change the size of the shadow to {1,0},{1,0}. This will stretch the shadow from one end to another. Then set to a position where you want your shadow to be. Obviously, we want the shadow to be at the bottom of the frame. To do so, change the position to something like {0,0},{0.9,0}. But then we have a problem, if we set the shadow position to 0.9, we notice that there's a big collision between the shadow and the frame and how the other end does not touch the bottom frame.

image.png.98e8acbd3d6b90f822eb70670cbe81dd.pngimage.png.aa2887f2711ded42fb1cdf9447a1fb81.png

(Welp, I can't upload any more images so for the rest of the tutorial, I'll just send links)

The problem: https://prnt.sc/j347iy 

7. No problem! We can simply fix that by using math! (yay math). We can subtract 1 which is the max size for the shadow from the Y position which in this case is 0.9. So if we do {0,0},{1 - 0.9, 0}.  You would end up with {1,0}.{0.1,0}. And you will notice that the shadow is lined up with the bottom frame.

Position equation setup: https://prnt.sc/j348r3

After the equation: https://prnt.sc/j348um

8. Now there are two methods when adding shadows. We can copy Frame background3 in the properties and paste it in the shadow backgroundcolor3. Then by using the light/dark scale, just simply scale it down just a little around 95 - 90% (just look at the picture of the range). Problem is that if you want to change the frame color, you'll have to do step 8 again to get the shadow color that matches the frame color.

Background3Color Location: https://prnt.sc/j349kv

Before the color change: https://prnt.sc/j34bpd

After the color change: https://prnt.sc/j34bst

9. [THE BEST METHOD] To be honest, this method is 10x better because it doesn't involve you doing step 8 all over again. To create this easy and simple shadow so you don't have to change the colors ever again, we'll need to set the shadow backgroundcolor3 to Really black [0,0,0]. Then after that set the background transparency to around 0.8 - 0.99. Trust me, when I say this method works, it works like a charm. I've posted some examples of some colors that correlates this method. You'll save almost 5 minutes of you trying to re-color the shadow you want.

Really Black: https://prnt.sc/j34cmy

Transparency 0.9 (example): https://prnt.sc/j34d5o

Example (Red): https://prnt.sc/j34dc2

Example (Orange): https://prnt.sc/j34ddt

Example (Green): https://prnt.sc/j34dhu

Example (Dark Purple): https://prnt.sc/j34dtg

This concludes the tutorial! I hope to see you post some GUI designs with using shadows to enhance your design and mobility. If you have any questions, please send a direct message to 2Hex#3676 on discord (or just look below for all my social media). If you're planning to post your GUI on Twitter, be sure to send a @2Hex_ so I can take a look at it!

GUIDE TO ROBLOX STUDIO USER INTERFACE: [coming soon]

  • Upvote 3

Share this post


Link to post
Share on other sites

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use.