Creation of an Abstract Style Site Header Image

Abstract Site Header Image

In this tutorial, I will show you how to create an abstract style site header image in Photoshop. Along the way, we will use Pen Tool, various image adjustment options, free transformation tool,  layer blending styles and filter effects.

Lets get start:

Step 1:
Create a document sized 1200 x 600 px (Please note that you may specify any size that you think suitable for your site design, this size can only be used for practice purpose only). Fill the background layer with Black.
Create a new layer called “Radial Gradient Fill” and grab the Gradient Tool (G), select the Radial Fill option and  fill the newly created layer as shown below: (you can specifiy any colour you like)

“Radial Gradient Fill”

Then Create a new layer call “Angle Gradient Fill” on top of the “Radial Gradient Fill” layer, set its blending option to “overlay”
use the Rectangular Marquee Tool to select the centre portion of the layer, again use the Gradient Tool (Set the foreground colour to white, with transparent background), this time we select the Angle Gradient option, fill the selection as shown below:

“Angle Gradient Fill”

Step 2:
Duplicate the “Angle Gradient Fill” layer once and keep the blending option of the duplicated layer as “overlay”, go to Edit > Transform > Flip Horizontal and flip the layer horizontally. Merge the twol layer together. Keep the blending mode as “overlay” after the merge.
Apply the “Drop Shadow” blending option to the merge layer as shown below:

Apply the “Drop Shadow”

Then reduce the previous “Radial Gradient Fill” layer opacity to 60% and you will have the following effect:

Opacity to 60%

Then create a new layer in between the previous two layers, name it as “centre light”. Grab a big soft round brush (600px in my case), set the foreground colour to white, and paint a single dot in the centre of the layer:

Paint Brush

Set the layer blending mode to “overlay” and you will have the following effect:

“overlay”

Step 3:
I decided to give this image a bit more depth and a bit 3D feeling. So on the “Angle gradient fill” layer, hit Ctrl + T and bring up the free transformation tool, choose the “perspective” option and transform this layer as shown below:

Choose the “perspective”

Here is the result after perspective the layer:

Result After Perspective

Step 4:
Create a new layer called “shineline”, use the Pen Tool to create the a work path as shown below:

Pen Path

Then right-click and choose “stroke path” and select “brush” (make sure you select a small soft round brush). Make sure you have “simulate pressure” option enabled as well.
Here is effect so far:

“simulate pressure”

Step 5:
Duplicate the “Shineline” layer a few times, use the Free Transformation Tool to rotate, distort, resize the duplicated layer and mixing those lines together:

Duplicate the “Shineline” layer

Merge those dupcliated layers together and duplicate the merged layer a few more times, again use the free transformation tool to add a few more lines on the image:

Merge those dupcliated layers

Duplicate the merged layer, apply Gaussian Blur with the following setting on the duplicated layer:

Apply Gaussian Blur

You should have the following effect so far:

After Effect

Step 6:
Create a new layer called “shining dots”, load the selection of the “shineline” layer, then right-click and select “Make Work Path”:

“Make Work Path”

Select 0.5 pixel tolerance for the work path. Now let’s grab a 3px soft round brush with the following dynamic brush settings:

Shape Dynamic

Scattering

Color Dynamic

Also make sure you tick the “Smoothing” option.
On the “shining dots” layer, stroke the path with this brush and you will see the following effect:

“shining dots”

Step 7:
Now we can add a bit of cloud/smoke at the bottom of those lines. To do this, we simply create a new layer and use the Lasso Tool with 40px feather to select the bottom portion of those shining lines, and go to Filter > Render > Cloud and render some cloud: (set foreground colour as white, background layer as black)

Cloud

You may notice I also use the Len Flare with following settings to highlight the centre portion of the cloud:

Lens-Flare

Change the layer blending option to “overlay” and you will have the following effect:

Change the layer blending option to “overlay”

Lastly we place the site name and the navigation on the image:

Place the Site Name and the Navigation

Ok that’s it for this tutorial! Of course you can further enhance it by adding some other filter effects, change the colour scheme, etc.

Here are my final image for this tutorial:

Final Image 1

Final Image 2

Final Image 3

Final Image 4

Any design and graphics help please visit Clippingimages.com.

-Credits: PSD Vault