I have done a tutorial on star fields with The Gimp before, but I have found a new method that yields much better results. It’s very easy and can be done in a few minutes.
Start up The Gimp and create a new image. In this tutorial, I’ll use a 480×320 image (otherwise it would be too big for this page), but you’ll probably use something bigger. Fill the background with black and create a new layer named “Small stars”. Fill this with black as well and add some RGB noise (Filters -> Noise -> RGB noise). Uncheck “Independent RGB” and set every color to 0.5. Set the mode to screen. This won’t make a difference against a black background, but it will if you want to put other layers behind the stars.

Now we’re gonna adjust the density and brightness of the starfield. Open the brightness and contrast dialog (Colors -> Brightness-Contrast) and set the brightness to -40 and the contrast to 40. This will filter out a lot of the noise and create something that already looks a lot like a decent starfield.

Duplicate the layer with the stars and rename it to “Big stars”. Scale this layer x2 (Layer -> Scale Layer). You will probably end up with a layer of blurry dots. To turn them into stars, open the Treshold dialog box (Colors -> Treshold). By moving the left slider, you can control the density of the second layer of stars and it will sharpen the dots. Here’s the result:

This already looks like a pretty good starfield! For a finishing touch, you can adjust the opacity of the small stars layer. The final result, with the small stars layer’s opacity set to 70%:

Okay, here’s the final part of the tutorial on the background image. I will explain how I created the bright star and the planet, both quite easy effects. But let’s begin with the star. This consists of three layers: the star core, the four rays of light and the halo. We’ll start with the core. Create an empty layer, pick the brush tool and select a large circle fuzzy brush. For the color, I picked a very light (almost white) blue. This is what I did next:

1. Place a dot with the fuzzy brush;
2. Select the dot and enlarge it 400%;
3. Blur with a radius of 30 pixels;
4. Place a second dot in the middle of the blurred dot.

This resulted in the following effect:

Next, the rays. I created another layer and selected a circular region around the star core. Next I feathered the selection, with a radius equal to the radius of the selection itself. I filled it with the star color and cut out a circular section in the middle. Finally, I blurred the layer (radius about 20 pixels) and set the transparency to 50%, giving this result:

That’s beginning to look like something! Finally, the rays. This effect starts out the same way as the halo. I created a blurred disc, but bigger than the halo. I then cut out rectangular sections so only the four rays remained. This should be done precisely, so use the grid and guides for this. The final result:

That’s it for the star. Next, the planet. I had been experimenting a bit, without much succes, when I discovered a very easy way to create realistic looking planets. Gimp has a built-in filter called sphere designer (Filters->Render->Sphere Designer). With a noise type texture, something that can pass for a planet’s surface can be created. Here’s a screenshot of the dialog box with various settings (click for large version):

This turned out to be quite impressive. And that’s it for the background image! Stay tuned for a game progress report in a few days.

In this article, I will explain how I created the hills. For this I used POV-Ray and Moray; basic knowledge of these tools is assumed for this tutorial. The key element in this tutorial is the so-called heightfield. This element takes a bitmap image and turns it into a 3D object using the brightness of the pixels. White pixels forms mountaintops, black pixels form valleys. The trickiest part is generating the image for the heightmap. This is done with The Gimp. First, create a new image and apply the clouds filter (Filters->Render->Clouds->Solid Noise), wich will generate a random cloud-like pattern. You should set the size to the same aspect ratio as the image you’re using. For example, I used a 1680×420 image, so I set the size to 8×2. Next, the detail. The more detail you add, the more peaks and edges your hills will have. Low detail results in smooth hills, while high detail yields detailed mountain peaks. Here’s the cloud pattern I used:

Using this as a height field will give you a uniform field of hills, but that’s not what I needed. I needed two hills with smooth slopes, that appear to rise out of the ground. For that, I created a new layer, filled it with black and added two white elliptic shapes with feathered edges. The mode of this layer was set to multiply. Now the pattern looked like this (first with the second layer in normal mode, then in multiply mode).

This will already yield two hills, but the transition from the hill to the valley between them is too sudden. This should also be a smooth slope. For this, I added another layer with a gradient. It’s a double gradient that goes from white to black and then to white again. The mode was, again, set to multiply. Here’s what the layer and the final image look like:

Okay, that’s it for the map. Next, it’s time to fire up Moray and create a heightfield. I gave it the same width and depth ratio as the map. I then loaded the heightfield file and rendered it, using a widescreen camera and omnidirectional lightsource. The material you apply to the hills isn’t important since we will adjust the colors later it The Gimp. One final thing for the heightfield: I checked “smooth” and set the water level to 0.15; everything below that will be cut off. Here’s the result of the rendering (click for full size). For the sake of clarity, I rendered it with a black background for this tutorial, but for further processing I rendered it with a transparent background.

Next, I opened the image in The Gimp and copied and pasted it as a new layer in my background image. At this point they still looked gray, but with the colorize tool (Tools->Color Tools->Colorize) I changed it to brown. I also tweaked brightness and contrast a bit, resulting in this image:

Almost finished! The only thing left is some sort of shadow at the bottom of the hills, to make them blend better into the rest of the image. I created another layer, turned the alpha channel of the hills layer into a selection (right click in layer dialog box, “Alpha to selection”) and filled it with a gradient that goes from white at the top to black at the bottom. The transparency of this layer was set to 50% and the mode to multiply, yielding this final result:

And voila, a pair of cool looking hills! I added another one in the center, lower and darker to make it appear far behind the other hills, but I used the exact same method for that. By varying the settings for the could filter in the initial map image, you can get different types of hills. That’s it for this tutorial, in the next and last one I’ll explain how I created the bright star and the planet.

In the previous article, I explained how I created the sky for the Wasabi Defense background. Let’s move on to the ground! This is a pretty easy one. Let’s start by creating a new empty layer named “Ground”. In this layer, I created a texture pattern for the ground, like this:

1. Apply the solid noise clouds filter (Filters->Render->Clouds->Solid Noise) with X and Y size set to 10 and detail set to 4;
2. Go to Layer->Colors->Colorize and adjust the values until you have the color you want. In my case, I set hue to 40, saturation to 100 and lightness to 20;
3. Apply gaussian blur with a radius of 5 pixels (Filters->Blur->Gaussian Blur).

You can experiment with these values a bit to get different results. Mine looks like this:

This looks a bit like a rocky landscape viewed from above, but what we need is some sort of perspective view. Gimp has a perspective distort tool, but I wasn’t really satisfied with the result of it, so I decided to try something else. I’ll try to explain this as good as I can, so try to follow. I enabled the grid (with snap) and set it to 80×50 (wxh). Next, I selected everything except the top row of grid squares. Here’s a screenshot:

Now select the scale tool (shift+T) and make sure “None” is checked under “Constraints”. Click on the selection and the scale dialog box will pop up. The current height of the selection is 1000 pixels, and now I reduced it to 950. When you click OK, the entire selection is shrunk 50 pixels vertically. Next, a new selection is made, but this time two rows of grid squares are left unchecked. Also, I didn’t select all the way to the bottom but just to the lower edge of the texture, like this:

And again, the selection is scaled vertically by 50 pixels. This step is repeated, and every time, another row of squares near the top is left unselected. When you can’t scale any further, flip the layer vertically and you’ll end up with something like this:

Of course, this is still too big, so we need to do one more step of scaling. Right click on the layer, select “Alpha to selection” and apply the scale tool (shift-T). Set the height to 210 pixels and move the layer to the bottom of the screen. Here’s what we currently have:

Now there’s one thing needed to finish it. The ground should get darker in the distance, and for that I used a black to white gradient. I created a new layer and applied a vertical gradient with black on top and then set the layer mode to multiply and the trasparency to 40%, so the white becomes transparent and the black darkens the ground. I tweaked the brightness and contrast of the ground a bit, and here’s the final result:

As usual, experiment away with the settings to get different results. In the next tutorial, I’ll explain how I created the hills!

Creating the background image was quite a bit of work, so I’ll split the tutorial up in several parts. I’m gonna start with instructions on the sky. The background started as a 1680×1050 (the typical resolution of a 22″ widescreen display) image with a black background. The sky occupies the upper 4/5 part of the image, so I created a new layer named “Sky gradient” and selected a 1680×840 region. This was filled with a linear three color gradient that goes from black to red to magenta.

This is way to bright, however, so I set the opacity of the layer to 40%:

Now we need some stars in the sky. That’s done like this:

1. Create a new layer named “Stars”, select the top 1680×840 region and fill it with black;
2. Go to Filters->Noise->Scatter RGB, uncheck “Independent RGB” and set the color values to 1.00 and alpha to 0;
3. Go to Filters->Blur->Gaussian Blur and set both values to 3.0 pixels;
4. Go to Layer->Colors->Treshold and lower the treshold value until you are satisfied with the density of the star field;
5. Go to Filters->Blur->Gaussian Blur and set both values to 2.0 pixels;
6. And finally, set the layer mode to “Screen”.

This is what it should look like:

Now there’s one more thing we need to do. The stars should fade a bit near the horizon, and for that we use a layer mask. Right click on the stars layer in the layer dialog box and select “Add layer mask”, and set it to white. Now we need to apply a white to black gradient to the mask. Make sure the mask is selected in the layer dialog box and apply a white to black gradient on it so the stars fade near the horizon. You have to experiment a bit with this to get the right result. Here’s what it should look like:

That’s it for the sky. In the next tutorial, I’ll explain how I created the ground.