Step by Step Shop GUI

BiscuitCimp · March 21, 2022, 8:03pm

This tutorial will go step by step on how to make very basic Shop GUI.

Step 1: Insert a ScreenGui in StarterGui and add a frame. Name it ShopFrame.
tutorial 1

Step 2: This is what it should look like. You can scale it however you want.
tutorial 2

Step 3: Inside of the ShopFrame add a UICorner. This a good way of keeping your GUI clean and in good shape.
tutorial 3

Step 4: Open the UICorner’s Properties and set its CornerRadius to 0.1,0
tutorial 4

Step 5: Inside of the ShopFrame add a UIStroke, this setting allows you to have outlines in your GUI and it makes it look very fancy when used correctly.
tutorial 5

Step 6: Inside of the UIStroke’s Properties, set the Thickness to 2,you can also change the color of the outline to a color of your choice ( Keep the StrokeMode on Contextual )
tutorial 6

Step 7: Inside of the ShopFrame add a TextLabel, name it Title and copy the ShopFrame’s UICorner and UIStroke ( CTRL + D ).
tutorial 7

Step 8: Inside of the Properties of the TextLabel, scroll down to Text and change the text to SHOP and TextScaled to True ( checked ) you can also change the Font to anything of your choice ( my personal favorite is FredokaOne ) and its color to anything that you like.
tutorial 8

Step 9: This is how it should look like!.Move your Title in the center of your Frame and a bit upwards so it looks like a canister ( you can do whatever you want with it )
tutorial 9

Step 10: Back to the ShopFrame! Inside of the ShopFrame add a TextButton and call it Exit
tutorial 10

Step 11: In the Properties of the TextButton, change its BackgroundColor 3 to a nice red.

Step 12: Whilst you are inside of the Properties of the TextButton, scroll down to Text and change its Text Color3 to a nice white, its text to the letter X and its font ( you can change it ) to FredokaOne
tutorial 12

Step 13: In the Exit button add the same UICorner and UIStroke as in the ShopFrame
tutorial 13

Step 13.5: at the Properties of the UIStroke in the Exit button, make sure that the StrokeMode is on Border, or else it wont look like this tutorial.
tutorial 13.5

Step 14: Lets add a ShopButton! Insert a TextButton in the ScreenGui and name it ShopButton, then as per usual copy the UICorner and UIStroke from the ShopFrame ( and dont forget to put the StrokeMode of the UIStroke in the ShopButton to Border, or else it wont work )
tutorial 14

Step 14.5: Dont forget to go to its Properties and change its Text,Font and TextScaled as shown in the picture!
tutorial 14.5

Step 15: This is how it should look!
tutorial 15

Step 16: Lets start scripting!! Inside of the ShopButton add a LocalScript.
tutorial 16

Step 17: Simple yet effective script!
tutorial 19

Step 18: In the Exit button insert a local script.
tutorial 18

Step 19: Here is the script!
tutorial 17

Step 20: This is how it should finally look like!!

(Extra Steps)

Step 21: Go the Properties of the ShopFrame and uncheck Visible.
tutorial 21

Final Step: You may experience your GUI to be out of place and weirdly shaped, so i reccomend you use this plugin: AutoScale Lite - Roblox

( AUTO SCALE STEPS: )

Step 1: Download the Plugin
Step 2: Open it on Roblox Studio
Step 3: Here is how it should look

Step 4: click on the ShopFrame and then go over at the Unit Conversion Tab and click on Position: Scale and Size: Scale
Repeat the same proccess for everything else.
And that’s about it!!

Thanks for reading this small tutorial, its my first ever tutorial so i hope you like it!!
Much love
-BiscuitDev

EOASTUDIO · March 21, 2022, 8:06pm

Keep up the good work bro! Looks exactly like the tipical sim game gui

BiscuitCimp · March 21, 2022, 8:07pm

Thank you very much! I did try to make it look like the current gui that simulators have.

UItraEX · March 21, 2022, 8:54pm

How to make a basic shop GUI - Resources / Community Tutorials - DevForum | Roblox

Just wanna say, i made something like this just a day ago…did you like take inspiration from this because yours looks better but like its basically the exact same steps i used.

Anyway, looks great. Keep up the good work.

BiscuitCimp · March 21, 2022, 8:58pm

Hello there and thanks for this comment, firstly i will say it straight away and say that yes i did take inspiration and yes i do feel stupid that i forgot to credit you. I just wanted to make a semi-more simulator type version of what you made.

UItraEX · March 21, 2022, 9:00pm

I appreciate you taking inspiration from that, and making it look much cleaner and better. I mean it looks amazing. Good job.

No worries, no credit needed.

BiscuitCimp · March 21, 2022, 9:01pm

Thank you very much! I always like remaking GUI that other people make ( in my style that is ).

UItraEX · March 21, 2022, 9:12pm

Well, looks amazing. In fact i may use some of your tips for my future UI work.

ProBaturay · March 21, 2022, 9:17pm

You should also introduce people scale and offset options of the Position and Size property of the GuiObject super-classed objects rather than advising using a plugin to handle it. Somebody wouldn’t know if they were new to messing with such complexity. They need to comprehend what they are first and then use it preferably instead of editing via the Properties menu.

Besides that, other properties influencing the rendering of the graphics should be mentioned. For instance: the IgnoreGuiInset property of the ScreenGui, for which the GuiObject is the descendant, and the AnchorPoint or ZIndex property of the GuiObject.

BiscuitCimp · March 22, 2022, 6:01am

There are some great points in this comment, but unfortunately i am new to the IngoreGuiInset so i will probably do another tutorial once i learn it better. Thanks for the info though i will definetly take it into concideration!!