How to Create a Custom Hand Painted Skybox
There are worlds of fun to have out there when it comes to skyboxes. A skybox is the most distant background visual in your scene, other than the sun. Background landscapes can place the viewer on mars, the old west, underwater or wherever the imagination can take you. If you have ever wanted to create your own hand painted skybox before, you have come to the right place.
I will be using Photoshop and Unity in this article.
Let’s begin in Photoshop by creating a blank 4k document.
Head to the 3D tab and scroll down to the Spherical Panorama option, and then select New Panorama Layer from Selected Layers.
There should now be one background layer with a texture and a Sphere Map attached.
The bottom left of the canvas should now have a 3D widget.
Double-click on the Spherical Map to open the texture map and edit it
A second linked file will open and the 2D texture map can be painted on.
I hold shift to draw a straight line, and then add some horizontal and vertical lines to create a point of reference in the 3D view.
Here is the same grid in the spherical view using the V key to look around the environment.
The top and bottom of your skybox will have the greatest distortion, as you can see with these circles drawn in different perspectives.
Holding the shift key with the paint brush while moving in a direction will lock the stroke to horizontal or vertical depending on your hand movement. This action makes for a quick hand fill of the land area in the scene. I create a new layer in the texture file and fill in the ground. While the main 3D Photoshop file acts as a single layer, working in the texture file opens up all layering and other options PS has to offer.
A background layer is created for the sky and it is filled in. Alternatively, you can press ctrl + A to select your entire canvas area, and then shift + F5 to bring up color fill options for the selected area.
While these files are linked, they can become broken easily for some reason. Always check back in the 3D view to make sure the changes are coming over from painting on the texture and vice versa. Save the files often.
The horizon line can be done quickly with a soft round airbrush and some white color.
Turn the flow down to about 20–30%, and then with the background layer selected, draw a single line across the horizon while holding shift to snap to a perfect horizontal line. The [ and ] keys can be used to quickly shrink or grow the size of your airbrush.
Keep shrinking the brush down while making a few more passes until you get the horizon you are looking for.
Check the 3D view to make sure the changes have moved over.
The top and bottom of the sphere house the most distortion as the 2D image smashes together. You can make some visual adjustments by painting directly in the 3D view. Whatever layer is selected in the texture will be the active layer for painting in the 3D sphere view. Here I use some cloud brushes from the Jonas De Ro environment pack to fill in the most upwards sky area.
I continue around the scene using a cloud brush as an eraser to pull out some overly puffy clouds and add depth and texture.
Here is the sky texture after painting in both the 2D and 3D views.
Most games with have an actual ground, but in case you want some quick ground texture, here is an easy way to go about it. Create a new layer, select all an then fill with your desired ground color. Keep in mind this will blend with the starting base ground color. I use a custom lava brush I made with another color variation to add some texture to the ground.
Head to the edit tab, and then scroll down to the Transform option, and select Perspective.
I zoom out on the canvas to get a larger viewing area, and then drag one of the lower corners to pull the bottom forwards into perspective. The deeper the pull here, the deeper the perspective.
After saving the perspective changes, I can resize the background by dragging the center cube at the top. Holding shift keeps the width while only reducing the height. Drag this down to the horizon line to add some deeper perspective!
Back in the 2D view, I paint tiny mountain shapes in the background on the base ground layer. Any hard edged brush will do fine here.
A soft eraser is used to clean up the line where the ground texture meets the horizon. This is a way to blend the two layers as well by soft erasing the top of the ground texture layer where it gets closer to the horizon line. Having less contrast in the background will make it appear farther away.
Now that the skybox is complete, export it as a PNG.
The skybox PNG file can be dragged into the Project folder in Unity.
With the new skybox asset selected, head to the inspector and change the Texture Shape to Cube.
Generate Mip Maps can be turned off.
Adjust the compression level to your desired quality, and then press the Apply button.
The skybox asset should now have a 6-sided cube icon.
There should also be a live preview option at the bottom of the inspector.
A new material is created for the new skybox art.
Head over to the inspector on the material and change the Shader to Skybox , and then select the Cubemap option.
Click in the Cubemap (HDR) icon where it should say None as the current assignment, to load up some available options. Select the new hand painted cubemap to assign it to the material.
Now it’s time to try it out in the game scene. Go to the Lighting settings, then select Environment. Drag and drop the new skybox material from the project folder into the Skybox Material slot to assign it.
You can see the effects immediately take place.
Now that the skybox is loaded into Unity, some real magic can happen. Unity reads the PNG file as a linked file, in the same way that Photoshop reads liked files. You can open both Photoshop and Unity, to edit the skybox. Feel free to paint on the scene in photoshop, save and let Unity recompile to see the changes live!
Thanks for reading along and I hope you have a great time hand painting your own skyboxes! If you want to read about the 6-sided skybox option, which works like a cubemap but takes image assignments for each direction, please check out my short article here. https://jaredamlin.medium.com/fun-with-skyboxes-in-unity-58a5c385aacb