Space Backgrounds

Inkscape Tutorial

This is another tutorial request (as well as a long time item on my to-do list) – creating a space background using Inkscape.

I set my document up to work in px as measurements. That way, I know it will work straight in the game. Adjust the setting in the top menu bar. They usually are set to inches or mm by default.

The top right and left and the lower middle and right samples use radial gradients. You can also add circles with a radial gradient on top of the coloured rectangles to create more detail. Keep in mind that this is supposed to be a background and the main gameplay elements as well as the UI need to stand out on top. Making the background too elaborate or too bright might draw focus from the more important game elements.

2Dgameartguru inkscape toolbar
2Dgameartguru space backgrounds

Let’s start with a rectangle for the background. Set it up in the desired size. I used 800x600px for mine.

Note:
For easier handling (as there will be rectangles added on top) I added a small ‘handle’ for easier selection.
Just a rounded rectangle added on the lower left and combined with the background element.

A duplicate version of the group is flipped and colour in a greenish tone.

Using the gradient tool create a linear gradient to fully transparent, dragging from the lower right upwards (~11 o’clock).

2Dgameartguru space backgrounds
2Dgameartguru space backgrounds

Duplicate both the black and the green element and flip them vertically.
Add e.g. a purplish tone and a blue to those two new elements and adjust the gradients until you get a setup you like.

Note.
You can also do a radial gradient on one e.g. to have a distant sun.

2Dgameartguru space backgrounds

Experiment

When it comes to finding the right colour combination, it’s a matter of trying and seeing what works. Remember, Google images is your friend! If you are stuck, have a look at some images of space theme games or actual nebula photos. Try colour schemes that work in those shots, vary them and build your own from there.

Keep in mind that usually, the background is not the main focus of the game. Too much colour, detail or contrast can easily distract from the gameplay.

2Dgameartguru inkscape toolbar
2Dgameartguru space backgrounds

When you are happy with your colours lock the background layer and add a new layer for the nebula.

Use the freehand tool (F6) to draw a random shape (trying not to have it intersect itself). This shape will be blurred later, so don‘t worry about its exact shape.
Reduce the nodes via Path/ Simplify (CTRL + L).

Duplicate the shape a few times. Scale, rotate and colour those elements to create a random pattern.

Note:
If you need a tiling background check the approach in one of the earlier tutorials about making a tiling pattern.

2Dgameartguru space backgrounds
2Dgameartguru space backgrounds

Lock the nebula layer and create a new one above for the stars.
The stars are a bunch of circles placed randomly on the background.

Note:
I find it easiest to create a small number first and then select those, duplicate them, rotate and move them around rather than draw each star separately.

2Dgameartguru space backgrounds

Library elements

The stars a great example of a reusable element. Saving them as a separate file in a “library folder” will make it easier to find them for future projects. E.g. the stars can be duplicated a few times, rearranged and altered a bit and work as snowfall in another scene. Alternatively, they can change colour and become the freckles on a portrait.

2Dgameartguru inkscape toolbar
2Dgameartguru space backgrounds

Using the stars and polygon tool add a few star shapes.

Note:
By moving the inner handle towards the centre you can make the stars more pointy.
You can also adjust the corners in the menu bar.

Lock the stars layer and create another layer for a planet.

Starting with a circle and two slightly smaller duplicates in the lower left.

Note:
You might want to check out the earlier tutorial about rings of Saturn when creating planets.

2Dgameartguru space backgrounds
2Dgameartguru space backgrounds

Using the freehand tool draw another random shape on the planet. Simplify the path and adjust if needed. This shape will later be blurred as well, so don’t worry too much about it looks.

Note:
As it will be visible in the lower left, I just added detail to the top right of my planet.

Add a few more circles for detail to the dark shape and some more as highlights on the top right rim.

2Dgameartguru space backgrounds
2Dgameartguru inkscape toolbar
2Dgameartguru space backgrounds

Use the gradient tool to colour the planet with a radial blue to lighter blue for the outer circle and a very dark desaturated blue for the other two with 50% opacity.

Set the black and white details to 50% opacity as well.

Lock the planet layer and create a new layer for some asteroids.

Using the pen tool, draw a simple shape.

As these elements will be background elements avoid too much detail as they would only distract

2Dgameartguru space backgrounds
2Dgameartguru space backgrounds

Duplicate the asteroid shape, scale, rotate and move them around to create a small cluster.

Duplicate the cluster and creating more variations for a more distant version.

Note:
As with all elements, play around and find a cluster shape you like.

2Dgameartguru space backgrounds

Adding blur

Inkscape has the cool functionality of adding blur while keeping objects editable. I like to add it late (preferably as the last step) in the project. Saving a non-blurred version of the file might be a good idea. I find it easier to edit more complex shapes or large numbers of objects that way.

2Dgameartguru inkscape toolbar
2Dgameartguru space backgrounds

Save a version of the file before starting to blur elements. I prefer to keep a clean version to fall back on in case I want to reuse elements.

Select elements (e.g. the nebula) and start blurring (Filters/ Blurs/ Blur…).
The range I used for the blur was between 5 for the nebula to 1 for the planet and stars.

2Dgameartguru space backgrounds2Dgameartguru space backgrounds
Turn on the Live preview in the Blur dialog to adjust the blur to your needs. I kept the outer circle of the planet without a blur but blurred both the inner circles and the dark details and highlights.

I hope this tutorial was helpful and you enjoyed it as much as me. This tutorial might be turned it into a video if there is demand for it. As usual, comments are always appreciated.

Have fun and create!
2Dgameartguru spaceship design1
2Dgameartguru spaceship design2
2Dgameartguru spaceship design review
2Dgameartguru spaceship side view
2Dgameartguru spaceship construction kit - VIDEO