Hello, I have just finished making my first UI, this is my first ever software made UI, I made it in photopea. It is also scripted and I think it looks really cool, let me know what I could do to make it better.
Link takes you to the video, sorry about that.
Generally looks great! Here are some tips from me:
math.random to decide if the open button and close button will rotate to the left or to the right when hovered over. In my experiences little details like this make the UI feel more polished and professional.I think that your frames look great and you show great potential! It’s definitely exceptional work for your first time, keep it up!
Thank you, I am a pretty basic scripter but that really explained a lot, I am going to try that. And yes, I am thinking of making a portfolio for logo design and UI design in the future.
The font is too bulky, and I don’t like it and the close button with black stroke doesn’t match the UI, overall the scripting of it looks good.
Nice UI so far! But please imbed the video. It’s really not that difficult.
looks pretty good for your first ui,
I’d do some more outlines to be honest, white might work but the colors are decently bright.
(by the way you can download the mp3 of a gyazo clip by right clicking on it, then saving video. Post that instead nextime so it imbeds)
Some extra things I should’ve mentioned: (art wise)
Gradients could help a lot
Brighter Colors/Colors that pop more could help a lot with this GUI
with just those two changes and the scripting changes that other guy was talking about I could easily see UI of this quality being commissioned!
and something about the importing of the art, did you use scale or offset?
Hey, sorry, what do you mean by scale and offset?
How you moved it around,
Unlike a part, (Which has a position that looks like 0,0,0) a gui object has a position that looks like 0,0,0,0 . But why four? it only needs two positions (x,y), but in roblox, they have scale (the first number in each pair), and offset (the second number in each pair). Scale basically means it’s a portion of the screen. let me give an example.
with a position of 0,100,0,0 this guiobject is always exactly 100 pixels from the left side of the screen, or atleast it’s origin point is (top left corner if you haven’t set anchor point yourself).
with a position of 0.5,0,0,0 this guiobject is always on the exact midpoint of the x axis of the screen. (or atleast it’s origin point is)
the four numbers can be broken down as (x)0scale,0offset,(y)0scale,0offset. This kind of value is known as a UDIM2. This is also used for the size of the guiobject.
The anchor point simply sets which position inside of the object is used as it’s origin, the origin is what gets the position applied to. so if your anchor point is 0.5,0.5 then it’ll be in the middle of the guiobject and your guiobject will be perfectly centered on the given UDIM2 position.
I didn’t use this, but it helped a lot. Thank you. Also I have a quick question, how do I import UI’s as full objects, because with the frame and the close button, I used 1 photopea tab for the frame, and another for the close button, this is because when I import them as a whole, I can’t make it so you can click the close button, so I have to make them seperate, do you know how to fix this, I don’t know if you can?
They have to be separate, because the close button, is a button.
However if you wanted the button to move with the menu you could parent the button to the menu.
Note, whenever you parent something to something else how UDIM2 functions completely changes.
Instead of scale being based off of the whole screen, it’s based off of the parent. The parent basically becomes the screen in the eyes of scale. And offset is now based off of the top left corner of the parent instead of the screen. TL:DR the parent becomes the screen for UDIM2. so if you had a 0.5 scale then it’d be in the middle of the parent now.