23 February 2008 - Posted in Gimp
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:
- 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.
- 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:
- Next select the gradient tool (L) and drag from the bottom of the canvas to the top so it looks like this:
- Now we will add the stripes so create a new layer and call it Stripes.
- 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:
- No click on the canvas and it should fill with this pattern.
- 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.
- Go to the layers window (Ctrl + L) and change the transparency of the Stripes layer to “3.0″, It should now look like this:
- 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.
- It should now look like this:
- 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
- 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.
re said...
great result
February 26th, 2008 at 2:30 pm
Tylor said...
Yay! Thanks I loved the tutorial!
May 20th, 2008 at 6:54 pm
kev said...
thank you very much. worked perfect.
August 10th, 2008 at 12:16 am
DS said...
Thanks. I was looking for this tutorial for quite awhile
November 12th, 2008 at 2:00 pm
Rae said...
When I click the layer and set it to 3, the box turns into dark grey checked box. It doesn’t look like your photo.
January 19th, 2009 at 5:38 pm
Rae said...
cannot find any setting on the gradient tool to set it to: FG to Transparent
Maybe I have a different version of gimp??
January 19th, 2009 at 6:19 pm
Rae said...
Ok, found the fg to transparent setting but my image still looks like a grey checkerboard.
January 19th, 2009 at 6:22 pm
Rae said...
I finally got it! Looks nice!
January 20th, 2009 at 2:17 am
Angelily said...
Great instructions although I’d prefer to skip the last step. Thanks!
June 12th, 2009 at 7:04 pm