When preparing a picture for the web, often you don’t want to include the background. In the last tutorial, the background of my desk was quite obvious. Lets use the path tool to remove it.

We are going to start with the same base image from last time.

In the last tutorial, I showed one way to zoom in on an image. A faster, and much more convenient way is to hold “Ctrl” and scroll up to zoom in, or down to zoom out. In order to put a path around the mouse, we are going to zoom in on the mouse.

After zooming in on the object that we are about to put the path around, we will select the path tool.

The path tool is a bit tricky to figure out, but once you understand it, it is very easy to use. The following screen capture shows me quickly putting a path around the mouse. Following the video, I explain exactly what I’m doing.

The first thing to do is select the major corners if there are any and the parts where curves change. To close the path, hold “Ctrl” and click on the first point. Once the rough path is complete, extra points are added in the curve by holding “Ctrl”, clicking on the line, and dragging out to the edge of the mouse. When these points are added, we can use the adjusting handles to adjust the curve. If “Shift” is being held, both handles will move together.

A curve can also be put in just by dragging the line without holding “Ctrl”. This generally produces a steeper curve, but once again, can be adjusted using the same adjustment handles, but from either size point.

Additionally, holding “Ctrl” and dragging from any point will add the handles for further adjustments.

After the path is finalized, it is time to turn the path into a selection. This is easily done by selecting the “Selection from Path” button.

With just the object selected, we will crop the image down to just the selected object. Just like in the last tutorial, select “Image” then “Crop to Selection”. The outlying image is cropped down to just a rectangle around the selected object.

Next, it is time to remove the rest of the area. The first thing to do is to select the area we want to delete. Currently, the object is selected. To do this, we want to invert the selection. Select this from the menu as seen below, or “Ctrl+I”.

Once the outlying area is selected, hit Delete. You will be left with a white background. At this point, you can save for web as shown in the last tutorial.

A few side notes: You may notice the brown tint around the completed image above. This was caused by reflection of light off the desk. Most of the time when I do this I use a white background instead of a desk or other color for this reason. It can be adjusted, but that is beyond the scope of this tutorial.

GIMP Save for Web
The first step of this process is to grab the Save for Web plugin for GIMP. If you are running Ubuntu, grab the .deb from here. Windows users and users of other Linux operating systems can grab it from GIMP’s plugin site.

Image cropping
The first step is to open the image in GIMP.

Next, select the rectangle select tool.

Make a selection around the part of the image that you want to crop out, you don’t have to be exact at this point, we will adjust later.

To adjust the selection, move near any edge or corner. The mouse will change to an adjusting handle, and you can proceed to drag to the desired size. Unlike nearly any other image editing program, you do not need to be right on the line, rather anywhere in the box will work.

Once you are happy with your selection, the next step is to crop the image down. This is easily done by selecting “Crop to Selection” from the “Image” menu.

You will be left with just the selected area.

This next step isn’t required, but now is the best time to introduce it. You can easily zoom into the image using the handy zoom feature on the bottom left corner of the image window.

We are now ready to save the image for uploading to a website. At this point, the image I’m working with is too large to upload as is, but otherwise it is ready. We will now select “Save for Web…” from the “File” menu.

What we now see is the Save for Web window. On the right of this window we see the image, as it will be saved. Below that is the file size that it will be when saved. To the left, we have options of the file type, along with other miscellaneous options.

The left side of this window has two tabs. We are interested in the second one, which will allow us to resize the image. Enter the width you desire and hit tab. The preview image will change to that size, and the height will be updated to match.

Finally, when you are happy with the way it looks, hit the “Save” button, and select where you want it saved.

A side note: You will notice the cropping options in the Save for Web window under the resize options. I prefer not to use these, as when I save something, I have the size in mind that I want the saved image to be. The cropping done in this tool takes place after the resize instead of before.

The next tutorial will teach you how to remove the background from around an object of any shape or size using the path tool. If you would like to know how to do something in GIMP, leave a note in the comments and I’ll work on that for a future tutorial.