Incorporate an image into a web header

Images are always good on a website, they explain what the website is about instantly (well in most cases anyway). In this tutorial I will show you how you can professionally add an image to your website header, this is what the final outcome will be (obviously it will be different for you because you will use a different image).

1. Create a new file, mine will be 900 x 150 pixels
2. We will start off with creating a gradient, select two shades of the same colour, for example: #285557 and #30a0a4
3. Select the gradient tool (shortcut: “L”) and click and drag from the top of the image to the bottom image to give this effect:
   
4. Now we will insert the image you would like to incorporate, I am going to use a nice Macbook that I got from Wikimedia Commons, to do this Click the File menu and select Open as Layers and find the image. It will then add it to the image as a new layer
5. We need to now resize the layer to the height of the header, to do this click the Layers menu and choose Scale Layer, change the height property to the same height as the header and click Scale.
6. Move the layer to the far left of the image by selecting the select tool (shortcut: “R”) and using the arrow buttons on your keyboard to move it around. You should now have something like this:
   
7. Go to the main Gimp window and change the foreground colour to white (#FFFFFF) and select the Gradient option (shortcut: “L”)
8. You will see an option called Gradient, click the drop down menu next to this and select the option FG to Transparent.
9. Go back to the image window and choose the Layers menu and select Layer to Image Size.
10. Now click and drag from the right of the image (not the header, just the image) to about half way along the image. You should have something like this:
    
11. Now go to the Layers window and change the opacity of the top layer to an appropriate value ( I chose 30.0 because you could see both the image clearly and the gradient.) This is what mine now looks like:
    
12. Now to add it a web 2.0 look create a new layer in the middle of the two layers and select the Select Ellipse Tool (shortcut: “E”) and click and drag across the image so that it looks like this (you will need to resize your viewing area):
    
    
13. Now fill this with white and change the opacity of the layer to 5.0, you may also want to use the gradient tool again, drag it from the end of the image (the image, not the header) to about half way across the header (not the image), and the finished result is: