Simple stripes on the Site Header has also got its place in the Web 2.0 Trend. This concept of repeating a pattern looks pleasing and doesn’t even increase filesize.

Here you will learn how to create simple headers like the below example.

The best part is you need not have the whole header as the image.Very simple and as usual, just have the first “x” pixels width and using CSS you can “repeat-x”.

Creation of the pattern.

The first time when I was new to this, I never found even a single pattern like this on the web. Ofcourse there are a lot of pattern making softwares but we need not spend time downloading them.

Here is the texture I created for you. Just Right Click and “Save Image as”.

Now we create a simple header with some rich Web 2.0 Gradient. You could pick some from my previous article of “Free Web 2.0 Gradient Collection“.

Open the image in Photoshop, make selection of the whole image and under EDIT you could simply define a pattern.

Come back to your Web 2.0 header. Create a new layer above it and using the fill pattern tool just apply the pattern to the whole header. Now Play around with the Layer Blending Properties such as Diffuse, Darken … and reduce the Opacity of the Layer and you are done.

Not Free But Good