Making colors within an image transparent

Images with transparency are everywhere

In web development, there are many situations where a developer or administrator may need to modify an image so that portions of it are transparent. Transparency means that you can see through an image to the content behind the image.

This tutorial will show you how to change an image so that all of the pixels of a given color are transparent.

GimpShop – a free image editor

Fortunately, the process of making portions of an image transparent is greatly simplified with the GimpShop image editor.  GimpShop is a simplified version of the popular open source GIMP image editing tool. GimpShop has been configured to use similar keyboard shortcuts and has a GUI layout which is similar to Adobe Photoshop.

GimpShop may be obtained for free here: http://www.gimpshop.com/. Since GimpShop is open-source and free, you should never pay for it. If you come across a site which is charging for GimpShop (or Gimp), then do not download it from that site. The Gimp and GimpShop licenses permit your use of the Gimp software for free.

The conversion of all of the pixels of a given color is relatively straight forward once you are familiar with the Gimp.  If you are new to the Gimp, then you may have already experienced the high learning curve required to be proficient in it’s use.

An example scenario

As a simple example, let’s say that you have an image with a white background and black text.  You would like the white background to be transparent so that when you overlay the image on your website, the black text shows and you can see the web-page background through the transparent portions of the image.

Step by step instructions…

  1. After installing GimpShop, start the program up.
  2. Open the existing image file via the File…Open menu item.
  3. Make sure that the “Layers, Channels, Paths, Undo | …” window is visible.
  4. Click the small left arrow on the “Layers, Channels, Paths, Undo | …” window to open a menu
  5. Click or hover over the “Layers Menu” item to open the Layers menu
  6. Click the “Add Alpha Channel” menu item
  7. Right-click on the image, then click on or hover over  the “Select” menu item.
    1. This will open the “Select” menu.
  8. Click the “By Color” menu item.
    1. This will open the color selection widow
  9. Click on a location in the image that has the color that you wish to be transparent
    1. The Gimp will auto-draw selection lines around all pixels with that same color
  10. Click on the “Edit” menu and then click the “Clear” menu item.
    1. This will result in a gray checker-board pattern being shown in place of all of the selected color in the image
  11. Click “File…Save As” to save the image
    1. Remember that JPG images don’t support transparency.
    2. Save the image as GIF or PNG
      1. PNG transparency is not supported by all browsers (in particular Microsoft Internet Explorer 6 and prior), so for best compatibility one should save as GIF.
      2. If saving to GIF and you receive a pop-up message indicating that “GIF can only handlegrayscale or indexed images” don’t panic.  Simply select the “Convert to Indexed…” option and then click the “Export” button.
      3. Set the GIF comment and then click “OK”

Conclusion

That’s all there is to it.  Now you can modify existing images so that they contain transparency in place of opaque colors… This technique is used all over the web to remove background content from images. It is also used to create logos that can overlay any background color or content.

References

While the web is a great resource for quick information, there are also a number of excellent references which go into much greater detail on how to work with the GIMP based software. Here are a number of references that I have rounded up which will help you become more efficient in your graphical design with the GIMP:

Leave a Reply