Design an Elegant Abstract Site Header Image in Photoshop

Posted on February 21st, 2009 under Abstracts, Web Graphics, it has 65 Comments and 69,934 Views so far.

In this tutorial, I will show you the processes I used to design this really cool, abstract style site header image in Photoshop, similar to the one I currently have on psdvault.com.

Personally I can see an increasing trend of having a big and eye-catching header image for website/blogs, especially since broadband has become a commodity amongst the majority of the population.

Along the way, we will practice the use of Pen Tool, various image adjustment options, free transformation tool, layer blending styles and filter effects. Hope you enjoy it!

Here is a preview of my final results:

abstract-background-final

abstract-background-final-21

abstract-background-final-3

abstract-background-final-4

PSD File for this Tutorial

You can have this PSD File for only $2.00 via Paypal! Click the link below and you will be taken to the Paypal checkout page, after payment you will be redirect to the download page automatically.

Ok let’s get started!

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)

1-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:

1-angle-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:

2-drop-shadow1

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

2-effect3

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:

2-paint-brush

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

2-effect-2

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: (reduce the top width)

3-perspective

Here is the result after perspective the layer:

3-effect3

Step 4

Create a new layer called “shineline”, use the Pen Tool to create the a work path as shown below: (For those who are yet to be familiar with pen tool, I have a post here with some useful links to pen tool tutorials)

4-pen-path-2

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:

4-effect4

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:

5-duplicate

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:

5-duplicate-2

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

5-gau-blur

You should have the following effect so far:

5-effect5

Step 6

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

6-make-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:

6-shape-dyn2

6-scattering1

6-color-dyn

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:

6-effect4

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)

7-cloud

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

7-lens-flare

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

7-effect3

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

7-effect-21

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: (click to enlarge)

abstract-background-final-2

Alternative versions:

abstract-background-final-3

abstract-background-final-4

Hope you enjoy this tutorial, drop me a comment if you have any question, I will try my best to help you out.

Cheers and have a nice day!

Like this post? Share it around!

65 Comments

AoRGuN Says:
Nice tut, thx.
hello123456 Says:
I like that black one with blue pink and green light :)
psaddict Says:
Added to http://www.psaddict.com
Murray Says:
Wow, that looks absolutely amazing.

I’m gonna try this.
Adrian Says:
Here’s what happened… I used the pen tool and then right clicked and created the stroke path to a brush… I chose what looked like the correct brush. But the ends of mine are rounded, not fading away like yours… am I doing something wrong?
admin Says:
Hi Adrian, make sure you tick “simulate Pressure” option in pen tool when you stroke the path.
and thanks for pointing this out, I will add it into the tutorial immediately.
Johnson Koh Says:
Cool effect!
admin Says:
Thanks Johnson!
btw your site is awesome, I’m one of your regular visitors :)
lYcAr ? - Cvetan Says:
NIce Tut 10X !!!!
Matt Says:
Gotta say man, 100% better :)

Original tutorial with an original idea and technique, I love it, keep it up.

I would really love to see you make a tutorial for a sleek web layout sometime soon ;D
admin Says:
Hi Matt,
will try sometime soon!
Brian Says:
hey i was wondering if i could get some help.
my simulate pressure wont work. is there anything i need to do to make it work??
please and thank you

Great tutorial by the way!
Majo Says:
great tutorial !
jess Says:
After doing the gaussian blur part you say that the image should look like and your imagemakes the lines look as though they fading into the gradient block, but you don’t say how to achieve this. Apologies for being a noob, but could you explain how you made your lines look like the were disappearing into the block?
jess Says:
nevermind, the noob figured it out :)
Lars Says:
Thank you so much for this tutorial. I absolute love the tentacle looking things and I’m gonna use this technique for my next logo.
But I’m dying to know how you do the blue/pink/green coloring. Is there a tutorial for that kind of stuff? thanks in advance
aklanta Says:
Hi,
I am new to your site, will be a regular visitor. You have great tutorials. In this tutorial, i can’t get the effect like you have in step 4.(What Adrian mentioned before). Still i forwarded to the next steps. But in step 6, as you mentioned, i couldn’t do load selection etc to the merged duplicate layers. Please explain in details. I was looking for tutorial particularly for this effect, i got only this till now. So please help. Since i couldn’t make step 4 and 6 , i stopped working on it. Please add the details in tutorial or email me. That will be great help. Thanks
Diamond Says:
Umm awesome tutorial! This is a technique I’ve been trying to learn for about a month and I lucked out and stumbled upon this! The only problem is my lines aren’t in their own selection so therefore I can’t load them onto the dots layer….what am I doing wrong?
admin Says:
@diamond: you can merge those layer together first, and load the selection from the merged layer and transform the selection into path.
hope this helps
admin Says:
@aklanta: try this link: http://www.command-tab.com/2007/10/07/10-photoshop-selection-tips/, this article contains some great info in detail about loading selections.
Hope this helps, and thanks so much for the support!
Diamond Says:
Yaaaay! I did it! Thank you sooo much!
Thomas Says:
Great tutorial, very usefull
admin Says:
@Thomas: Thanks!
admin Says:
@Diamond: no worries, good work!
Lars Says:
I’m dying to know how you do the blue/pink/green coloring. Is there a tutorial for that kind of stuff? thanks in advance
admin Says:
@Lars: To do this, you can create a new layer on the top of all other layers (black and white those layer if needed), set the new layer’s blending mode to overlay, then grab a big soft brush and choose the blur/pink/green colour, simply paint over the desired area.

Hope this helps :)
PSDesignZone Says:
Pretty good tutorial, like the effect, one part wasn’t completely clear, on yours after you create the paths the squiggly lines seem to go behind the Angle Gradient but there is no explanation on how to do this. I came out with a good result otherwise.
Patrick Says:
Amazing! Thats a very nice tutorial wich really inspirate me! Thank you very much James!
Rasheed Says:
Dude – awesome tutorial(s) thanks
Boris Kuskarov Says:
Awesome!
josh Says:
I applied the simulate pressure after the pen stroke but it just wont seem to fade in the beginning and end like yours. whats wrong?
admin Says:
@josh: make sure you brush setting is right. Use a soft round brush with 0% hardness.
Hope this helps :)
josh Says:
ahhh i had to go into the brush presets and change all of the ‘Shape Dynamics’ to pen pressure. great tutorial though thanks for the help!
Wolly Says:
I really want to get this to work but being the noob that I am I can’t even get past Step 1 without problems. What do you mean by setting the background to transparent when setting up the angle gradient fill? If it’s the colour then I just can’t get it to work, or I don’t understand. Would you mind explaining it to me?
Brochures Says:
Excellent technique, and I love the multicolored version you did. Thanks for sharing another great, informative tutorial. Keep up the good work!
T-rav Says:
Hey, I believe I’m having the same problem as Wolly. Whenever I try using the Angled Gradient (white foreground, transparent background, layer: overlay), the rectangular area just gets lighter.

Perhaps I am missing a setting? I am using CS3.
T-rav Says:
Wow I feel dumb.

Wolly this might help you too. I didn’t check the Transparency option on my gradient bar, i just selected the transparent preset.
Eric Says:
Hey Great Tut. But Im haveing trouble with step 4 I done every step you said to do and even triple check to see even something is wrong but im just not getting the same effect that you have what do i do???????
huwaw69 Says:
Great results i am definitely going to use this technique later on… thanks for sharing…
Alexander Says:
Really nice tut! my only problem is that i cant get past step 6:( after make selection i cant “make work path” when i right click i cant select anything, its “unclickable” :) what am i doing wrong?
James Says:
@Alexander: make sure you have the “Pen Tool” selected when right-click. Hope this helps :)
Efe Says:
thanx, i learned photoshop only a few months ago and sometimes i can’t make the exact work that is written in the tutorial. but your’s is so helpful and explains everything good. anyway, soon you can see my work on my blog. :)
yarismak Says:
Thank you so much for this tutorial. I absolute love the tentacle looking things and I’m gonna use this technique for my next logo.
arbuuzinjs Says:
Can u give me .pdf file?
aerialss88 Says:
OMG. It´s the best header i´ve ever seen!.
The free transformation is really good. And the pen tool is a powerful tool.

I try to make the fantastic header.
Stuart Says:
when i do the rectangular tool in stage one and fill gradient i just get a hard line of colour going horizontally and i can’t change this no matter what I do? any ideas??
Italia Amadoras Sexo Says:
nice! i’m gonna make my own journal
Eikai Says:
As an extra touch of sparkle, just after you have sprinkled on your shiny dots on step 6, add an inner and outer glow to them, looks nice :]
iddaa Says:
Thank you so much for this tutorial
Cissy Says:
Hey!

Great tutorial but there’s one thing I can’t do.
Step 4: I don’t get the same effect you have, I have choosen an soft brusch with 0% hardness then I right click after using the pen tool and I select “brush” and “stroke Path”, but it don’t work.
ahmed Mostaf Says:
Nice tut, thx
Mark Says:
Joo,

Nice tut, but how do you get al those different colors? Like on the last picture. With the Blue, Pink and Green colors?

C ya
Syed Hussain Ali Says:
please tell me the effects functions of sketch thank you….
Dora Says:
Thank you so much for this tutorial