Have you been planning on getting around to learning how to use the GIMP someday? Well now that the GIMP has had its tenth anniversary, it’s about time to start. In this article, I will walk you step by step through the process of making a web banner using the GIMP. Hopefully this kickstart will encourage you to do more playing on your own.

Long regarded as one of free software’s “killer apps”, the GNU Image Manipulation Program (GIMP) is a tool that has amassed a large number of users and is one of the most popular free software applications today. The different versions of GIMP vary slightly in the way they are laid out. For this tutorial, I have used version 2.2.10 the most current stable version at the time that I am writing this article. The best way to learn from this tutorial is to open GIMP up and follow along as I explain how to make a web banner. It’s virtually painless, so take a seat and let’s begin.

Opening GIMP

GIMP saves the status of your open windows, so starting the program can sometimes cause a dizzying cascade of windows to open that can be quite overwhelming to the new user. The only window that you absolutely need to have open to begin is the tool window.

It is the small window containing all of the icons. It is titled “The GIMP”. To start, close all other windows until you need them.

The GIMP main tool window

The only window that you absolutely need to have open to begin is the tool window

Now that we are alone with the main GIMP window, let’s take a look at it shall we? It has three menu items: File, Xtns, and Help.

The File menu has your basic Open and New options as well as something called Acquire. If you have a scanner, you can configure GIMP to work with it, and your scanner interface will be found here. Acquire also has an option called screen shot which will allow you to grab an image of a window.

Xtns has plugins and scripts for advanced users. Ignore it for now. Help is very useful for new users, so take some time to see what the options do later. Now we will return to the main part of the tool window.

The major part of the tool window is taken up by several little icons. If you hold the mouse over each icon, text will pop up explaining what it does.

The bottom of the window shows the tool options. This will change as each tool is selected above. The tools can be changed to do many things allowing you a great deal of freedom.

Since GIMP is an image processing program it is best to begin with an image. Select the file menu and open an image file. I started with a digital photograph that I took named sunset1.jpg. I suggest that you simply open an image currently on your computer to practice with.

My starting image: sunset1.jpg

I want to use this image to make a web banner to put on a new webpage called “My nature page”. The size and shape of this image is wrong for a web banner, so I first need to cut down the image. To do this, I use the crop tool.

The crop tool

The crop tool is the one that looks like a little craft knife. When you select the tool the cursor changes. Make a box by holding down the left mouse button and pulling it across diagonally from the top to the bottom. Select the most important part of the image. Your selection will be highlighted.

Once you have drawn the box, you can adjust the size by selecting one of the dark squares on the corners and moving it while holding down the left mouse button. The size in pixels is displayed in the crop/resize tool window that pops up when you use this tool. You can change the units to inches or whatever you like best by selecting the little px next to the number.

To specify a size, grab a corner of the selection and move it slowly while looking at the tool window. I resized my image to have a width of 1600 and a height of 500. When you are satisfied with the selection, hit the crop button.

Once you crop the image, all of the rest of the image is gone! If you really didn’t want to erase the rest of the image? Don’t panic. Click the right mouse button over the image screen and a menu will pop up. Go to edit, and the top menu item says “undo crop image”.

GIMP has a long undo buffer and you can go back several steps if you need to. However,the best way to make sure that you don’t destroy the original image is to save your new image under a different name.

GIMP has a long undo buffer and you can go back several steps if you need to

Right-click on the image to open the menu, then under the File menu choose “Save as...” to save the image with a new file name. I saved my cropped file as sunset1banner.jpg.

GIMP almost always gives you options after you press Save. You have lots of control over the quality of the saved image. Take the defaults for now, as you understand more, you may want to change the settings.

We now have a long, banner-shaped image, but you can’t easily read text over a very colorful image, so we need to lower the contrast a bit. This can be done using layers.