Making Custom Skyboxes from Scratch
By: TheWinners152 | 2nd Edition
This topic covers making your own custom skybox step-by-step with minimal tools that can be removed after creating the skybox. This tutorial is simple, and almost anyone can do it. It’s fast and doesn’t need high-end components, and did I mention it’s also free?
Requirements
What you need to get started:
- Windows PC
- Qbit
- Google Account or a program with custom gradient abilities
What will be used in Roblox Studio:
- Skybox
- Atmosphere (Optional)
- Clouds (Optional)
Making the Skybox Gradient
You will need Google Drawings, a free program developed by Google. If you would like to use another program to make the gradient, skip this step, create the gradient yourself, and download it.
Opening Google Drawings
You need to create a Google Drawing to put your gradient on.
Open your Google Drive and on the top left corner, go to New > More > Google Drawings and click on it. This should open another tab with your newly made Google Drawing.
On your Google Drawing, in the top left of your screen, change the Name from Untitled drawing to Skybox or anything you would like to name your skybox. It doesn’t matter.
Changing Page Size
Once you have your drawing, go ahead and change its size of it to Roblox’s maximum image size, which is 1024x1024 pixels.
On the top of your screen, under your drawing name, there should be some chips. Go to File > Page setup and click it.
When Page setup is open, change the Page size from Standard 4:3 to Custom. After that, there should be more options. Now change the Units from Inches to Pixels and type in 1024 for both the Width and Height. The Page setup should look like below. When you’re done, click Apply.
Creating the Text Box
Next up is creating the gradient, which will be your skybox.
Under the File chip, there should be a 2nd row of chips. Select the Text box chip by clicking on it. The Text box chip should now be blue like below.
Hover the mouse on your drawing and click it, this will insert a Text box. Go to the Do not autofit square, click it, and select Do not autofit.
Now, resize your Text box by dragging the corners of it to fill the entire drawing. The corner will snap into the edges of your drawing. Your Text box should look like the one below.
Making the Custom Gradient
You will be making the Custom Gradient for your Text box now.
Select your Text box, and where you found the Text box chip, select the Fill color chip. This should open a menu, and on the top of the menu, change from Solid to Gradient. Your menu should now look like the one below.
Click the CUSTOM button on the menu and another menu labeled Custom Gradient should open.
You are now able to edit and make your own custom gradient. Click Add to add a Gradient stop and Remove to remove your selected Gradient stop. Click Gradient stop color dot to the right of Remove to change your Gradient stop color. Click and drag Gradient stops to move their location. On the left of the menu will be a preview of your menu. When you are done, click OK to apply your gradient to your textbox. Below is the gradient I used.
Downloading the Gradient
Now after making the Custom Gradient you will download it for Qbit to process it into a skybox for you.
After all the previous steps you should have a Google Drawing like the one below.
Go to the 1st row of chips you used before and go File > Download > PNG image (.png) and click it. A .png should download. Note you may need to give the site download permissions for whatever reason.
Using Qbit to Generate the SkyBox
Before on how to use Qbit, here is some info about it. Qbit is a pragmatic skybox generator that processes the gradient into a skybox. I’ve used it a lot on my computer. So far it has not triggered my anti-virus and on a VirusTotal Scan of the installer, it seems to not have anything dangerous or malicious in it.
Downloading Qbit
You will be downloading Qbit, the pragmatic skybox generator, to process your gradient into a usable skybox for your Roblox Experience.
Download Qbit from the Microsoft Store or the publisher’s website. If you download from the publisher’s site, then you will need to install it. It just one Install button for the installer, if you cannot click and install the button by yourself then you shouldn’t be following this tutorial.
Generating the Skybox
You shall now generate your own gradient into a skybox in which you can use.
After downloading and installing Qbit it should open itself automatically, if not then open the app manually.
Upload your Source Image which is your gradient you just made. The file should be in your Downloads folder and named Skybox.png. (“Skybox” is what you have named your Google Drawing followed by “.png”)
Select your Output Directory which is where your generated skybox will be located. I recommend your Pictures folder for easy access and organization.
Change the Output Size from 25% of Source Width to 1024 ✕ 1024.
When you are done with all those steps, Qbit should look like the one below.
You can now generate your skybox by clicking Generate. You can also enable Supersampling, not it will take longer to generate. This is optional.
Now you have your skybox. I have attached files below for you to see the results and see if you did anything wrong.
Adding the Skybox to your Experience
You have just made a skybox, if you made it this far, congratulations, it will be a lot easier now just porting your skybox into your Roblox Experiance.
Porting your Skybox into Roblox
Open up Roblox Studio on the Place you want to have the custom skybox.
Go onto the Explorer panel and go to Lighting > Sky. If sky isn’t there then click the + and add in Sky.
Select Sky in your Explorer panel and on your Properties panel, fill out the following properties SkyboxBk, SkyboxFt, SkyboxLf, and SkyboxRt. Click the value and click + Add Image… then click Choose File.
Choose the images that match the Property name. You can double click the image file to attach it. Click Create after uploading each image to upload then.
Example:
- For SkyboxDn select Skybox.down.png
- For SkyboxUp select Skybox.up.png
Now you are done and you have added and made your own custom skybox. You can add finishing touches down below. These are optional.
Adding finishing touches
I won’t be giving you a tutorial on how to add Clouds and Atmosphere as I don’t want to add more to this. Futhermore, there is already great documentation on how to do so by Roblox themselves. Below are links to those resources which you can follow too.
Final Skybox Results
You can view the final results of my custom skybox below. I have used atmosphere and clouds in mine. Once again, congratulations of finished your custom skybox.
End of Tutorial
This is the end of my tutorial. How well did I do? Any feedback is appreciated, and I will try my best to assist you in the replies if you do encounter any problems.
Below are some polls on my tutorial.
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
0 voters
- Very Easy
- Easy
- Okay
- Hard
- Very Hard
0 voters
- Will use
- Might use
- Will not use
0 voters
