Introduction
Have you ever wanted to make your own Space Game but didn’t know where to begin when it came to making space graphics? In this tutorial, we will go over several techniques for making beautiful space backgrounds with stellar objects like stars, nebulae or gas clouds using nothing but free software. Many of the techniques and concepts covered in this tutorial can be done with most image editing software, but for the sake of this tutorial, we will be going over several techniques using our absolute favorite free image editor, GIMP.
Starfields
It only makes sense that we begin with the most basic of all backgrounds in an outer space environment: The Starfield. All you need to begin prototyping your first space game might be nothing more than a plain, black void filled with tiny stars. This is easy to describe, but here is an example just in case:
Example Starfield
You could absolutely make something like this by hand if you preferred, placing each white star one by one using the pencil tool. Or you can create countless variations in mere seconds by following this simple technique! The very first thing to do is create a blank image in GIMP and fill it with Black (Or set the background color to Black before creating a new image.) For the sake of this tutorial, I am going to use a 512×512 canvas.
Empty Black Canvas
There is a built in Filter we can take advantage of called CIE Ich Noise which will generate a grainy mess that looks like TV static. In the menu bar at the top, click on Filters -> Noise -> CIE Ich Noise to bring up the CIE Ich Noise window. We need to bring the Lightness slider all the way to the right (or a value of 100) while bringing the remaining sliders all the way to the left (or a value of 0) so the settings match the example image below.
CIE Ich Noise Settings
This is also where you can change the variation of the placement of your stars, by changing the Random Seed value or pressing the New Seed button. As of right now, the image doesn’t quite look much like a starfield at all. Press OK to confirm the noise filter and you should end up with something that looks similar to the next example image.
Generated Noise
The final step is to adjust the brightness levels of the image to remove most of the lighter areas, leaving just a few points scattered around the image. Go to the menu bar at the top and select Colors -> Levels to bring up the Adjust Color Levels dialog box. All we really need to do here is drag the Black triangle from the left all the way over to the right. This is where you may need to experiment a little, or enter different values, in order to get the correct number of stars you wish to show in your image.
Black Set to 250
For this example, I’ve decided on a value of 250. You can use different values to make more or less stars appear in the final image, so feel free to try slightly different values here. Once you have decided your starfield looks okay, press OK to confirm your adjustments. The resulting image should now resemble the original example image from the beginning of this tutorial, or the one below:
Final Starfield Image
If you bring the black slider closer to the right, it will result in less stars being visible in the image. This can be useful for creating multiple layers of sparse stars that you can overlay and move (parallax) at different speeds to simulate depth.
Sparse Stars
Now you can save and export your starfield, or you can create as many variations as you wish by changing the Seed value when you first run the CIE Ich Noise filter. Another thing you can do is duplicate your stars and apply a Blur filter to make them look a little bit more realistic. First, right click on the current layer and select Duplicate Layer to create a copy of our starfield. Now select Filters -> Blur -> Gaussian Blur to bring up the Gaussian Blur options window. Feel free to mess around with the scale settings to your liking and press OK when you are finished.
Blurry Star Layer
All there is to do now is change the Layer Blend Mode to something more useful, like Addition. You can try other blend modes if you like or even try mixing different layers of blurry and non-blurry stars to give some stars the appearance of standing out while leaving others untouched.
Final Starfield with Blurred Stars
I’d like to show off one more GIMP filter that can be useful for starfields, and that is the Sparkle filter. This adds almost a diffusion effect to certain parts of the image that can simulate brighter stars. Click on Filter -> Light and Shadow -> Sparkle to bring up the Sparkle options window. Choose a very low threshold value like 0.001-0.003 to keep the number of sparkling stars to a minimum. Press OK to confirm your changes.
Final Starfield with Sparkling Stars
You might get tired of me repeating this, but do not be afraid to experiment! Try using the selection tool to isolate certain areas of your starfield and applying filters to certain stars. Even something as simple as changing the order of your layers or their blend modes can provide variations that you can use to produce many starfields in a short amount of time.
Nebulae
Sometimes stars just aren’t enough to convey the feeling of being lost in space. You might also want to distinguish different levels or areas of your game using distinct features, like stellar nebulae or gas clouds. There are actually a lot of different ways to make nebulae and gas clouds built right into GIMP that can save you a lot of time. The example image below shows a composite using the stars from the first section of the tutorial combined with the nebula we will make in this section.
Example Nebula
Nebulae and Gas Clouds can be made using a number of different Noise Generators or Noise Filters to create the illusion of clouds or gas. You should absolutely experiment with different combinations of Noise, Scale, Seed Values, or even Layer Blending Modes to get different results for your own Nebulae. As we did in the first section of the tutorial, create a blank image with a black background. For the sake of this tutorial, I will stick with 512×512 for the image size.
In the Filter menu, there are several different Noise types to choose from when making your Nebulae. To start with, we will be using the more familiar filter called Difference Clouds for our first layer. Select Filters -> Render -> Noise -> Difference Clouds to generate the bottom layer of the nebula.
Difference Clouds
You can also use any of the other Noise Filters if you prefer. Difference Clouds always generate the same pattern, while some of the other filters allow you to change the Seed value or tweak various settings such as scale or position, which may be more desirable depending on your needs. It may also be helpful to rename the Layers in your image to keep track of things.
Next, create a new layer above the Difference Clouds and fill it with black. For this layer, we are going to use a different Noise Filter to add a little more detail to our nebula. Select Filter -> Render -> Noise -> Solid Noise to bring up the Solid Noise options. Set both the X and Y Scale sliders to 1 and the detail slider to 15. It is here you can also change the Seed Value or press the New Seed button to get a completely different variation of noise. I have also gone ahead and made sure to select the Turbulent option. This adds another layer of noise iterations and provides more detail to the nebula.
Solid Noise Filter Settings
Once you have found a Seed you like, press OK to confirm the settings and you should see your new Solid Noise layer. In order for this new layer to have any effect on the image, we need to change the Layer Blend Mode to something other than Normal. I have chosen Grain Merge, as this is one of my personal favorite blending modes, but you are free to choose whichever mode you think looks best.
Blended Noise Layers
What this will do is obscure, or Mask, certain parts of the bottom layer using the values of the top layer. Currently, this still looks like a bit of a blobby unusable mess, but we haven’t begun to add any color to our nebula yet.
The quick and dirty method is to simply add a Color Overlay layer on top of the image. To do this, create yet another new layer and give it a name if you wish. Now all there is to do is select a color for the nebula and use the Fill Tool to fill in the entire layer with a single solid color.
Solid Color Layer
Once again, this layer will have no effect on the overall image until we change the Layer Blend Mode to something other than Normal. In this case, we simply want to apply the color of this layer to the rest of our image, so change the blend mode to Overlay. This should look something like the image below.
Nebula with Color Overlay
The next step is not required and can actually be interchangeable with the previous step if you prefer. You can also experiment with different types of gradients or blend modes for different results. Create yet another new layer and leave it blank for now. If you click and hold on the Paint Bucket tool, a drop-down menu will pop up allowing you to switch to the Gradient Tool instead. On the left side of the screen, you can select a palette for your gradient as well as change the shape. I’ve selected Radial for the shape and Deep Sea as the color palette.
Radial Deep Sea Gradient
With the Gradient Tool selected and your settings chosen, click somewhere in the center of the image and drag outwards to create a radial gradient. As with the previous steps, you will not see any changes until the Layer Blend Mode has been changed to something other than Normal. For this tutorial, I went ahead and chose Soft Light as the blending mode for the Gradient Layer.
Nebula Blended with Radial Gradient
At this point, you may wish to keep your Starfields separate from your Nebulae if your project requires it. Often it is desirable to allow for the different background layers to scroll at different speeds, which produces the illusion of depth in Space Shooters or Side Scrolling games.
If you would prefer to merge the starfield with your nebula into one single image, it is incredibly easy to do so. First, go back to the starfield we created in the first section of the tutorial and Copy/Paste it into a new layer above the Nebula (Or import a starfield you have already saved and exported as a new layer.) All you need to do is change the Layer Blending Mode to something that pleases your eyes. For the sake of this tutorial, I have selected Addition for the blend mode.
Stars with Addition Blend Mode
You can try different blend modes for different effects. It is even possible to continue this process of adding layers of stars and noise clouds to produce even more complex colorations and variations, so don’t hold back from experimenting!
Seamless Backgrounds
In order for your space backgrounds to work correctly as backgrounds in your game projects, you need them to be Seamless. This means that you can duplicate, or tile, the image along all four edges and have no visible seams between them. Thankfully, GIMP also has a built-in feature that makes this an incredibly simple task.
Example Nebula
Let’s take the example nebula from the previous section of the Tutorial and open it in GIMP. If you were to place copies of this background side by side, you can see sharp edges between each copy, as shown in the image below.
Image with Seams
In order to avoid this, we need to apply another filter to our image in order to create a seamless tiling version. Click on Filters -> Map -> Tile Seamless to bring up the options window. Simply press OK to confirm. This filter duplicates sections of the image and copies them to the four corners, along with some blending effects, in order to create a Seamless version of the image.
Seamless Background
The main downside to this method is sometimes you lose a bit of color or brightness in certain areas of the image, depending on where they were in the original. You can experiment with the different blend modes in the Tile Seamless filter options, but this can also cause issues with the edges not actually remaining seamless. If you were to tile or duplicate this background and place copies next to itself, the edges are now seamless and the transition is no longer apparent.
Tiling the Image
Once you are happy with your results, simply save and export your new Seamless Space Background, or combine it with more layers to give it even more detail.
Final Seamless Background
Just like we did in the very first section of this tutorial while making starfields, it is absolutely possible to adjust the color values in the final image to bring some of the brightness back to the nebula. At the top of the screen, click on Colors -> Levels to bring up the Adjust Color Levels options window. Drag the white triangle slider over towards the left side of the screen to bring up the lighter values in the image. I went with a value of 136, but you can choose whichever you prefer.
Adjusted Nebula Color Levels
Press OK to confirm your color adjustments. The resulting nebula should have at least some of its original brightness restored and a bit more color. You can also do this step before adding your star layers, or you can simply apply the adjustments to your final image as a whole.
Nebula with Adjusted Color Levels
All that is left now is to save and export your image. These very simple methods can save you a ton of time when prototyping, especially for simple projects where you just need some basic assets to work with.
Final Exported Background
Try combining the methods outlined in this tutorial in different ways, like changing the order of your layers, or experimenting with different blend modes. Sometimes, you will surprise yourself with results you didn’t even consider beforehand, just through experimenting.
Don’t forget, you can already grab a ton of FREE backgrounds rendered at multiple sizes in the Seamless Space Backgrounds Pack from Screaming Brain Studios to save yourself some time!
*This article will be expanded over time!