Fade Out Images with GIMP

August 26, 2009 by
Filed under: HowTo, image editing, linux, web development 

There's no need to go out and buy Adobe Photoshop and take Photoshop classes. Just follow this simple GIMP tutorial to learn how to fade out the edge of an image.

One of the features that gives images a web 2.0 kind of look is fading out the edges. This is most commonly seen in the image reflection effects. I'm not going to cover a reflection in this post. I'll just cover the image fade out part for now.

I'm going to start out with an image of our favorite Linux mascot, Tux. I've already trimmed out the white background and made it transparent.

Tux in GIMP

Affiliate Link

Add a Layer Mask

  1. Open up the Layers menu [CTRL][L]. If you're opening just a basic jpeg or png there should be just one layer at this point.
  2. In the Layers menu, right click on the layer and select Add Layer Mask.
  3. Make sure White (full opacity) is selected and click Add. You should see a white box show up next to the thumbnail of your image in the Layers menu.

Create the Fade Effect

  1. Right click on your layer and make sure that Edit Layer Mask is selected.
  2. Make sure that the Foreground Color is set to Black and the Background Color is set to White in the GIMP tools menu.
  3. Click on the Blend Tool (it should be just to the right of Bucket Fill).
  4. Drag a vertical line from the bottom of the image to where you want to stop the fade effect. (Hint: Hold down the [CTRL] key to help make the line vertical.)

If you right click in the Layers menu, you can select Show Layer Mask. It should look something like this:

GIMP with Layer Mask shown

GIMP with Layer Mask shown

Right click again and select Apply Layer Mask.

Tux in GIMP with Fade Effect

Tux in GIMP with Fade Effect

You can now save your file. In the image window select File?Save As. Enter a new name and click Save. A menu will pop up with save options. The defaults should be fine. Click Save.

Here's the final product.

Tux with Fade Effect

Tux with Fade Effect


36 Responses to “Fade Out Images with GIMP”

  1. Rob says:

    Perfect! Thank you.

  2. Abby says:

    THANK YOU! Also, advice for anyone who can't seem to get it to work, even though they follow all the steps is to make sure that it is saved as a .png file!

  3. Chris says:

    thanks for the tut, nice and helpful, cheers!

  4. karen says:

    thanks, I'll try, newbie and all that :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>