Create a deep space background in photoshop
This tutorial will guide you through the creation of a crisp, textured background image with a deep space feeling for your latest website or your desktop.
Step 1. Where it all begins.
In Photoshop, create a new document (Ctrl+N) of 1020px by 1300px. Then fill the background layer with the Gradient Tool (G) by drawing a gradient #34383c to #6c6c6c to #090b0a from the top to the bottom of your document. The colors cursor positions are respectively: 0%, 30% and 70%
Gradient colors
Gradient settings
Step 2. Create some clouds
Create a new layer, then set your foreground and background colors to #f1f1f1 and #454545 respectively. Then add some clouds by selecting Filter > render > clouds. Then set the blending mode of this layer to ioerlay, and it’s opacity to 11%.
A first layer of clouds
Adjust blending mode and opacity of the clouds
Step 3. Add more clouds
Repeat the previous steps by adding a layer of clouds, changing slightly the different options. Set the foreground color to #e7e7e7 and the background to #404040. Set the blending mode to Overlay again, and use 7% for its opacity.
A second, slightly different clouds layer
Step 4. A few random brush strokes
On a new layer, use the brush tool (B) with a soft angled brush of 30px with 35% opacity and 30% flow to create some random transparent lines mostly vertical on the lighter area. Then set the opacity of that layer to 20~30% to make these highlights very subtle.
Add some highlights
Set the opacity to 20% to 30%
Step 5. Add more random strokes
Repeat the same process than step 4 and vary the size and orientation of the shape, but keep an elliptical brush to get some softer edges. Also change the opacity of the layer to keep this second layer even more subtle than the previous one.
Keep things tidy by grouping layers together again.
Add a second layer of highlights with a different brush
Set the opacity to 19%
Step 6. Add drama…
In order to bring a deeper and more dramatic feel to the image, we’ll add a transparent radial gradient layer. This will concentrate most light on the central area of the picture while clipping a bit the edges.
With the Gradient tool (G), add a radial gradient with a soft light blending mode, fading from #000000 to #333333 and respective opacity 100% and 55%. Apply the gradient following roughly 45 degrees direction from the center of the light area to a top corner.
Radial gradient parameters
Apply the gradient
Step 7. Let there be light!
Right, until now, we’re navigating in a rather dark corner of some galaxy. We need a bit of light to see where we are! But rather than reinvent the wheel, we’ll use some amazing brushes available for free. I used a particles and stars brushes set from brush king.
To add these brushes to photoshop, drop them in your brushes folder:
- /Users/{username}/Library/Application Support/Adobe/Adobe Photoshop CS3/Presets/Brushes on mac OS X
- C:\Program Files\Adobe\Photoshop\Presets\Brushes on Windows
Then select the brush tool (U) and open the brushes palette, select “Load Brushes” from the brushes panel preset picker and navigate to the downloaded and extracted .abr file.
Open the brushes options to load new brushes
Then, apply different brushes at your discretion to create star clouds and constellations. Working with opacities, you can achieve a balance of concentration and depth.
I used 4 layers of stars of different opacities (100%, 84%, 64% and 77%) with different brushes applied on them.
Different layers with different opacities
With 4 layers
Step 8. Contain the stars
As you can see, the brushes being quite wide, the shape of the patterns are quite visible on the dark region at the top of the page. We’ll cover this by adding a fade-in gradient over this region to cover the stars. That will also help finishing the textured region in case you want to use the image as a website background and set the color for longer pages.
A gradient to fade in the lower star clouds
Hide the lower star clouds
Step 9. Add a texture (optional)
If you want to give your background the impression that it’s been painted on canvas (yeah, space is always being painted on canvas!) then you can add a nice texture to your image.
Create a layer under the gradient fade-in layer, and fill it with the paint bucket tool (G) with white: #ffffff
Then, apply the texturizer filter with 130% scale and 12% relief.
Apply the texturizer filter
Change opacity of the resulting layer to 10% and its blending mode to overlay to obtain a nice horizontal texture on your image.
Change blending mode and opacity
Finally, duplicate that layer, rotate it 90 degrees and you’ll have something quite close to a canvas texture supporting your deep space image! Group these layers if you’re picky and you are done!
Duplicate the texture to finish your canvas
Final result
Here is the final .jpeg that you can use directly in your designs, or for reference. It free, but it wouldn’t be fun if you would not create your own! So go ahead, and show me your creations afterwards!
Thanks for reading.
