Create an Ornate Website Header Photoshop Tutorial
February 28, 2006 by Oli · 12 Comments
This tutorial will show you how to create a decorative header that you can use on websites or blogs.
This is what you will be creating :
First step is to create a blank canvas of around 770px wide and 400px high, then select the rounded rectangle tool, set the radius to 9px and draw out the shape of your header how tall you would like it :
Next up will add a gradient to the shape – right click on the shape’s layer and add a gradient overlay settings :
Choose a light purple and dark purple for the gradient, I used #190141 for the dark and #5E01F7 for the light
Your shape will now look like this :
Now we need to choose a pattern to on the header, for this tutorial I used one from the excellent squidfinger’s site.
My chosen pattern was :
You can use this one, just right click on the image and save it or browse through squidfinger’s to find one you prefer.
Now open the pattern in photoshop, select it and cut and paste into your header psd, ctrl + click on the pattern layer to select it, like so :
Next, go to > Edit > Define Pattern > And give it a name.
Ctrl + Click on your main header shape layer to select, create a new layer above it and click the paint bucket tool. Switch the fill type from ‘foreground’ to ‘pattern’ and choose your pattern from the dropdown.
Fill the new layer with your pattern :
Right click the pattern layer and select blending options, change the blend mode to ‘overlay’ and take the opacity down to 39% :
Your header will now look like this :
Select the header shape layer, right click and go into blending options, we will now add some outer glow:
An a 4pixel inside stroke :
You should now have :
Now finally add your logo / text and navigation and your header is finished :
You can also download the psd for this tutorial.
About Oli
Excellent tutorial
this is good tutorial. would like to see gimp tutorial in the future
Cute
This is really nice, thanks. Keep up the good work..
Very Very nice information here… Thanks
Nice tutorial!
You can download lots of free web design elements similar to this at http://www.stemplate.com
Thanks, nice tutorial!
Thanks I really enjoyed this tuturial. Easy effects that can be used in alot of ways really help out coders who try to put out something graphical now and then without getting laughed at =)
Nice effect. Will try it soon. Tnx again !
Great tutorial, thanks!
Great tutorial – Basic but with some features I was looking for, added bonus.
Thank you.