Tutorial - Remove White Background on Images

So you've created your new header for your blog (or any image for that matter) and now you're left with that pesky white background which for some reason never seems to match the white background on your blog. Being one of my biggest pet peeves I couldn't go past writing up a tutorial on how I remove this by created a transparent background using Gimp.
This tutorial may seem long however this is because I have included as many images as I can to make the process as simple as possible.
First of all if you haven't already you will need to download Gimp - a free image manipulation program which is available on the following supported platforms:

• GNU/Linux (i386, PPCP
• Microsoft Windows (XP, Vista)
• Mac OS X
• Sun OpenSolaris
• FreeBSD
• 
  

Once installed open the Gimp program which will look like this.

To open your header/image click 'File' - 'Open' and choose your designated file.

Now turn your eyes to the 'Layers - Brushes' box highlighted in yellow and click the 'Create a duplicate of the layer and add it to the image' button which will create a copy of your image.

Now we are going to create a white layer. Keeping with the  'Layers - Brushes' box highlighted in yellow you will click the 'Create a new layer and add it to the image' button.
This will open a window 'New Layer' highlighted in blue where you will select the 'white' option. You can rename the layer - I have named it White to avoid confusion. Press OK.

Your screen should now look like this with both the copy layer, white (new layer) layer and the original layer.

Back to the 'Layers - Brushes' box highlighted in yellow you are going to move the new layer you created down by clicking on the new layer highlighted in blue and then clicking the 'Lower this layer one step in the layer stack' button.
The new layer should now be in the middle.

Next you have to delete the very original image you opened in Gimp. This will be the bottom layer and will be the one without the word 'copy'. You will click on the original layer highlighted in blue and click the 'Delete this layer' button which looks like a rubbish bin.

You will now be left with the white layer and the copy of the original layer.

I hope you haven't had trouble so far as I've tried to outline it as simple as possible.
The next step is to go back to the 'Layers - Brushes' box highlighted in yellow and click the copy layer highlighted in blue. Now on the top of your screen click 'Layer' - 'Transparency' - 'Color to Alpha...' which are highlighted in green.

This will open a window 'Color to Alpha'. As you can see Gimp automatically chooses to change the colour white (#ffffff) to alpha, so then you just click OK.

You will now be left with a screen like this. Although it may look no different you will see the copy layer has a transparent background. See where the arrow is pointing.

The next step is to again go back to the 'Layers - Brushes' box highlighted in yellow and click the eye icon next to the new layer (which I have named White) highlighted in blue.

You will now be left with a screen with a transparent background. Yay! 

However as you will see some of the colours in your header/image may also appear transparent. To bring them back to the correct colour you will need to go to the 'Layers - Brushes' box highlighted in yellow and right-click the copy layer highlighted in blue and click the 'Alpha to Selection' box highlighted in green.

This will show an animated dotted line around the coloured parts of your header/image. This means these are the only parts selected.

The next step is to again go back to the 'Layers - Brushes' box highlighted in yellow and click the eye icon next to the copy layer highlighted in blue.

You will now be left with a screen like this.

Breathe, we're almost done. Back to the 'Layers - Brushes' box highlighted in yellow click the eye icon (for the eye icon to appear) next to the new layer (which I have named White) highlighted in blue. You are also going to make sure you have clicked on the new layer highlighted in green.

Your screen will now look like this.

Now you are going to invert the selection by pressing (ctrl + I) once. Then press the delete button. Your screen should look like this.

FINAL LAST STEPS! Well done everyone. Back to the 'Layers - Brushes' box highlighted in yellow click the eye icon (for the eye icon to appear) next to the copy layer highlighted in blue.

Your screen will now look like this.

Lastly, go to the 'Layers - Brushes' box highlighted in yellow and right-click the copy layer highlighted in blue and click the 'Merge Down' box highlighted in green.

Your screen will now look like this and you are finished. Don't forget to click 'File' - 'Export' to save your header/image onto your computer for uploading into blogger. See How To - Make a Custom Header for details on uploading your header onto blogger.

Clicking 'Save' or 'Save As' in Gimp won't save the header to your computer in a readable format. It will save the image as a .xcf file which allows it to be later altered in Gimp.
As mentioned in my How To - Make a Custom Header post the colour of the white will now match up to the white of your blog background however when tilting your computer/laptop screen you will be able to see the outline of the header/image as I have not yet been able to remove this.
I hope this has been of some help to you.
Happy blogging! xox