Game Development Community

How to create space nebula backgrounds in photoshop

by Rob Evans · 08/14/2007 (4:43 pm) · 3 comments

Create a new file in Photoshop (File -> New) and make sure your settings are:

Width: 1024 pixels
Height: 512 pixels

Color Mode: RGB - 8 bit

Then press OK.

v2.wastedwebspace.co.uk/gamedev/nebula_1.png
Select black in the colour picker and paint your new file black... coz we're in space...

v2.wastedwebspace.co.uk/gamedev/nebula_2.png
Now create a new layer that we will put our nebula clouds on (Layer -> New... -> Layer then click OK)

v2.wastedwebspace.co.uk/gamedev/nebula_3.png
Next, select the Ellipse selection tool and set the feather to 50px.

v2.wastedwebspace.co.uk/gamedev/nebula_4.png
Select a region where you would like to create your first nebula section.

Next select a foreground colour for your nebula section and make sure your background colour is black.

v2.wastedwebspace.co.uk/gamedev/nebula_5.png
Now click Filter -> Render -> Clouds.

v2.wastedwebspace.co.uk/gamedev/nebula_6.png
Keep doing this for different areas of the image until you have a nice coloured nebula. Keep the colour changes small between nebula sections so that the nebula looks natural and not forced.

v2.wastedwebspace.co.uk/gamedev/nebula_7.png
If you want to add a little bit of extra colour as an undertone to your clouds, select the layer that you have your current clouds on and select blending options (Right click the layer -> Blending Options...) and set the blend mode to screen. This makes the stuff on the layer see-through based upon its distance from black.

v2.wastedwebspace.co.uk/gamedev/nebula_8.png
v2.wastedwebspace.co.uk/gamedev/nebula_9.png
Next create a new layer and move it underneath our clouds layer.

v2.wastedwebspace.co.uk/gamedev/nebula_10.png
Now select a dark foreground colour (close to black but with colour) and then create another cloud under your current ones. See the effect it creates?

Before:
v2.wastedwebspace.co.uk/gamedev/nebula_11.png
After:
v2.wastedwebspace.co.uk/gamedev/nebula_12.png
Ok, so we've got our nebula cloud looking pretty nice, lets get some highlights going on. Switch your second cloud later to blend mode -> screen like the first one, then create a third layer and move it below the second.

Paint this layer completely black like our background layer.

Now select Filter -> Render -> Lens Flare. Set the brightness to 80 and then click ok.

v2.wastedwebspace.co.uk/gamedev/nebula_13.png
v2.wastedwebspace.co.uk/gamedev/nebula_14.png
The lens flare is rendered onto your nebula but it's super huge so...

Select the center area of the flare with our ellipse tool like so:

v2.wastedwebspace.co.uk/gamedev/nebula_15.png
Now press CTRL-C to copy your selection.

Delete layer 3 and deselect your ellipse.

Now press CTRL-V to paste your selection. This looks the same but we've got a much more natural flare because of the feathered edges.

v2.wastedwebspace.co.uk/gamedev/nebula_16.png
The flare is still too big so lets scale it down. Select Edit -> Free Transform then whilst holding shift (to maintain aspect ratio), drag a corner marker until your flare looks about this big:

v2.wastedwebspace.co.uk/gamedev/nebula_17.png
Now move your flare into the middle of the picture. This is where we add the magic... select Filter -> Distort -> Twirl... and set the degrees to 250 then click OK

v2.wastedwebspace.co.uk/gamedev/nebula_18.png
Now select Filter -> Distort -> Wave..., click the randomize button then click OK

Your flare will now look something like this at the moment:

v2.wastedwebspace.co.uk/gamedev/nebula_19.png
Now repeat that a few times by pressing CTRL-F... two or three times is fine and should produce a flare like this:

v2.wastedwebspace.co.uk/gamedev/nebula_20.png
Lastly, select Filter -> Blur -> Gaussian Blur. Set the radius to 7 pixels and click OK. Move your flare into a nice position and set the layer Opacity until it looks natural:

v2.wastedwebspace.co.uk/gamedev/nebula_21.png
Now repeat the flare creation and create some more nebula lighting until it looks finished...

v2.wastedwebspace.co.uk/gamedev/nebula_22.png
That's it!

#1
08/15/2007 (6:47 pm)
What an awesome resource..
#2
08/15/2007 (6:51 pm)
Thanks! :o)
#3
08/27/2007 (5:19 am)
Thank you for your lesson Rob!

I'm programmer and I have no sufficent experience in Photoshop. I use UniverseCreator for my nebulas. Now I will use new knowledges to make nebulas better.