iHerr

Suppose you have some clip-art, maybe in JPEG or GIF or PNG format, but you would like to resize it for use on a webpage. Maybe you want to give it a transparent background so that the shape of the item in the clip-art doesn’t have an ugly rectangular box around it. And suppose you want to add a drop-shadow just around the item in the clip-art (not around the rectangular outline). This tutorial shows you, step-by-step, how to use the public-domain program Gimp to perform these operations on an image to prepare it for use on a webpage.

Note: Internet Explorer 5.5 and 6 still have a bug that keeps transparent backgrounds from displaying correctly. The folks at Microsoft are aware of the issue and claim that they will release a fix in IE version 7. If you’re still using IE5.5 or IE6, I strongly suggest you move to a more up-to-date and more secure browser like Firefox, Netscape, Opera or Safari.

Step 1: Open the File

The first step is to run the Gimp program, and then choose File->Open…. For this tutorial, we’re using the Mac OS X version of Gimp (a free download from www.gimp.org).

When the File->Open… dialog box pops up, choose the file from whichever directory/folder it exists in (possibly your Pictures folder).

 

Step 2: Select the Background

The next step is to select just the background, using the fuzzy select tool. This tool is found in the menus under Tools->Selection Tools->Fuzzy Select….

 

After you have clicked on the fuzzy select menu item, then simply click on the background around the clip-art (this only works if the background is a solid color, like white).

 

At this point, you have selected the area around the clip-art item, not the item itself (in our example, we selected the white background, not the dog). Therefore, we need to invert the selection. Choose the menu item Select->Invert. This causes the selection to be just the dog.

 

Step 3: Copy the Clip-Art and Paste As New

Now that we have just the dog selected, we copy this part of the image by choosing Edit->Copy.

 

Then we choose Edit->Paste as New to paste the dog into a new image with a transparent background.

 

The image below shows the new window that appears with the dog pasted into a transparent background, shown as a gray checkerboard pattern.

 

Step 4: Scale the Image

The original image is much too large for use on our webpage, so we want to scale it down. We choose Image->Scale Image….

 

In the resulting Scale Image dialog box, we set the width and height to a reasonable size, and then click on Scale.

 

The image is rescaled to the size we entered, and now appears much smaller:

 

Step 5: Add a Drop Shadow

To add a nice drop shadow around just the shape of the dog, we choose the pull-down menu item Script-Fu->Shadow->Drop-Shadow….

 

The Drop-Shadow dialog box appears, and we click on OK.

 

After a brief period, the resulting image shows the drop-shadow against the transparent background.

 

Step 6: Save the File as a PNG

The transparent background is a feature of certain image formats. The PNG format has transparent background capability. We click on File->Save as….

 

When the Save Image dialog box pops up, be sure to make the extension .png, not .jpg. Then click on Save.

 

Since a PNG file is only a single-layer format, the Export File dialog box pops up. Click on the Export button to continue.

 

One last dialog box pops up (the Save as PNG dialog box) to ask what options to use. The defaults should be fine, so click on OK.

 

…and Voila! The final image is shown below:

 

That’s it! Now you can use your ftp or website management software to upload the new image to your webpage!