» Create an Ornate Website Header Photoshop Tutorial- tutorial blog

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.