Latest Posts from PSD Vault
- February 21st, 2009
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:
PSD File Download
You can download the PSD File for this tutorial via the VIP Members Area for only $4.95/Month (or less)! You will not only get this PSD File, but also 40+ other PSD Files + Extra Goodies + Exclusive Photoshop tutorial there. Signup now and get exclusive! Find out more about the VIP Members Areas
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)
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:
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:
Then reduce the previous “Radial Gradient Fill” layer opacity to 60% and you will have the following effect:
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:
Set the layer blending mode to “overlay” and you will have the following effect:
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)
Here is the result after perspective the layer:
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)
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:
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:
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:
Duplicate the merged layer, apply Gaussian Blur with the following setting on the duplicated layer:
You should have the following effect so far:
Step 6
Create a new layer called “shining dots”, load the selection of the “shineline” layer, then right-click and select “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:
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:
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)
You may notice I also use the Len Flare with following settings to highlight the centre portion of the cloud:
Change the layer blending option to “overlay” and you will have the following effect:
Lastly we place the site name and the navigation on the image:
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)
Alternative versions:
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!
User Comments:
Nice tut, thx.
I like that black one with blue pink and green light :)
Added to http://www.psaddict.com
Wow, that looks absolutely amazing.
I’m gonna try this.
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?
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.
Cool effect!
Thanks Johnson!
btw your site is awesome, I’m one of your regular visitors :)
NIce Tut 10X !!!!
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
Hi Matt,
will try sometime soon!
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!
great tutorial !
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?
nevermind, the noob figured it out :)
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
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
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?
@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
@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!
Yaaaay! I did it! Thank you sooo much!
Great tutorial, very usefull
@Thomas: Thanks!
@Diamond: no worries, good work!
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
@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 :)
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.
Amazing! Thats a very nice tutorial wich really inspirate me! Thank you very much James!
Dude – awesome tutorial(s) thanks
Awesome!
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?
@josh: make sure you brush setting is right. Use a soft round brush with 0% hardness.
Hope this helps :)
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!
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?
Excellent technique, and I love the multicolored version you did. Thanks for sharing another great, informative tutorial. Keep up the good work!
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.
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.
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???????
Great results i am definitely going to use this technique later on… thanks for sharing…
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?
@Alexander: make sure you have the “Pen Tool” selected when right-click. Hope this helps :)
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. :)
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.
Can u give me .pdf file?
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.
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??
nice! i’m gonna make my own journal
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 :]
Thank you so much for this tutorial
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.
Nice tut, thx
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
please tell me the effects functions of sketch thank you….
Thank you so much for this tutorial
Very nice work, although I completely failed with the pen tool and ended up just trying to improvise as much as possible. A bit unhappy with the quality and I couldn’t decide what text font to use so I just threw one in there, but I think the overall image looks pretty cool. The text is just for a school project I’m doing.
Here’s what I got.
http://i45.tinypic.com/1498rh4.jpg
http://i45.tinypic.com/2nvcr7.jpg
WOW! Amazing. Great Tutorial. Thank you very much :D
RE: ”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?”
I’ve got the same problem..
I DID use the right BrushTool, Hardness 0%, And I DID apply the simulate pressure.. Yet I can’t seem to find the problem .. :( Anyone who knows what I’m doing wrong D: ?
Never Mind I found the problem :) ..
Window > Brushes > Check the box ”Shape Dynamics” and make sure ”Control” is on ”Pen Pressure”.
Hope this helps anyone else with the same problem :)
Awesome, thanks!
Thank you very much =) Simply cool
Im having the same problem that Alexander is having. Once i get to step 6, I load the selection, then when I right click all the options are greyed out and there isnt even a “Make work path” option.
Great Tutorial so far BTW. I love the site!
Thank you so much for this tutorial
thank u very vry much for sharing this tutorial
I wanted to thank you for this awesome tutorial!! I really, really enjoyed working through it and i hope to see more tutorials from you. I personally love tutorials like this as they take you from start to finish without the need of an external photo. Great job, looking forward to more!