Making Custom Skyboxes from Scratch

Making Custom Skyboxes from Scratch

By: TheWinners152


This topic covers how to make 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. You will need a PC that runs Windows for this.


Requirements

Requirements for Custom Skyboxes:

  • Qbit
  • Google Drawings or a program with custom gradient abilities
  • Roblox Clouds (Optimal if you don’t want clouds)
  • Roblox Skyboxes
  • Roblox Atmosphere (Optimal if you don’t want Atmosphere)

Making a Skybox Gradient

You will need Google Drawings for this. If you use another program then skip this step create the gradient by yourself and download it. This part only works for Google Drawings.

First, you will need to change the drawing size. Open up a new drawing. Go to the tabs and go to File > Page setup.

Change the ratio from Standard 4:3 to Custom. Now change the Measurement from Inches to Pixels and enter 10241024 for the size then click Apply.

Screenshot_11

Then, put down a Text box and make it cover the entire drawing (Make sure that auto-resize is off). Go click Fill color and change from Solid to Gradient.

Screenshot_12

Click CUSTOM.

And now you will be able to make your own custom gradient. Click Add to add an point and Remove to remove your selected point. To change a point’s color select that point and change the color from the dropdown. You can click CUSTOM again to use a custom color. You can drag points to move them.

Screenshot_15

Go and make your own gradient and click OK once you are satisfied with your gradient to apply then to the Text box.

Then head to File > Download and click PNG image (.png)

Now you have created and downloaded your gradient.


Using Qbit to Generate the SkyBox

Before on how to use Qbit here is some info about it. It’s a skybox generator that curves the gradient and generates the Bottom and Top skybox. I’ve used it a lot and it has no viruses as far as I know.

First, download Qbit from the website, install it, and upload your Source Image which is your Gradient and select your Output Directory which is your download path. Change the Output Size from 25% of Source Width to 1024 ✕ 1024.

Optimal: You can enable Supersampling which is recommended but it may take longer to generate.

Then, click Generate

Now you have your skybox. I have attached files below for you to see the results.

Inital Image:

Qbit Generated Image:

Front, Left, Right, and Back images:

Bottom and Top images:


Adding the Skybox to your Experience

First, open up Roblox Studio on the Place you want to have the custom skybox.

Then, go onto the Explorer and go to Lighting > Sky. If sky isn’t there then click the + and add in Sky.

Screenshot_17

Then, for SkyboxBk, SkyboxFt, SkyboxLf, and SkyboxRt. Click the value and click + Add Image… then click Choose File.

Screenshot_19

After that, select the image called Skybox.back.png or similar images it doesn’t matter they are all the same except for Bottom and Top. You will not need to name them. For SkyboxDn select Skybox.down.png and for SkyboxUp select Skybox.up.png. Click Create after uploading each image to upload then.

Now you are done and you have added and made your own custom skybox. You can add finishing touches down below. These are optimal.


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 onto this.

You can find a good tutorial on how to use Clouds and Atmospheres here:


Final Results

You can view the final results of my custom skybox below. I have used atmosphere and clouds on mine.

10 Likes

Please finish the tutorial instead of leaving it halfway done.

3 Likes

Done. I was tired and didn’t want to add any images. It’s now been added.

1 Like