Create a web 2.0 stripe header with Gimp

In this tutorial I will show you how to create your very own web 2.0 stripe header, you may see this effect a lot on many web 2.0 websites as it is a very popular technique. I will show you how to create this in The Gimp. You can download the source (XCF) here: download, when finished it will look like this:

1. Firstly, create a new file. I am creating a 860px x 150px canvas as the website is designed for resolutions 1024 x 768 and above, if you are designing for lower resolutions then use a smaller width.
2. Next I am going to set the colours, to do this go to the main Gimp window (Ctrl+B) and change the forecolour to 31bcc8 and the back colour to 217077 so that the colour chooser looks like this:
   
3. Next select the gradient tool (L) and drag from the bottom of the canvas to the top so it looks like this:
   
4. Now we will add the stripes so create a new layer and call it Stripes.
5. Go to the main Gimp window and click the fill button (Shift + B), in the options change it to Pattern Fill and select the Warning pattern:
   
6. No click on the canvas and it should fill with this pattern.
7. Select “Colour to Alpha” from the “Colours” menu, click the big button with the white rectangle on it next to the word “From:” and type into the text box next to “HTML notation” the value “ffff00″, without the quotation marks and click OK.
8. Go to the layers window (Ctrl + L) and change the transparency of the Stripes layer to “3.0″, It should now look like this:
   
9. Go to the main Gimp window again and select the gradient tool (L) and change the Gradient option to “FG to Transparent” and drag the tool from the bottom of the canvas to the top.
10. It should now look like this:
    
11. Now create a new layer called Top and draw a rectangle the full width of the canvas and the top half of the canvas and fill it with the colour #FFFFFF
12. Go to the layers window and change the transparency of this layer to “5″ and your finished. The outcome should look like this:

Thats it, you can change the colours so that it fits your website template. You can also apply this effect to any component such as buttons, advertisements and many more.