Today is part three of this series on creating content and is a tutorial on preparing images for use in websites, blogs and information products, using GIMP (The Gnu Image Manipulation Program).

Here’s the video, and below you’ll find the rest of this blog post if you’d rather read along than watch. (Plus you’ll also find all the links mentioned in the video below!)

Links

Download GIMP: gimp.org (Windows and Linux)

Download Mac GIMP: Mac only versions

Example image: gimpexample.jpg (Right click and choose Save As)

GIMP Tutoral - Editing and preparing images

The GIMP is a very powerful application, and today’s tutorial will only scratch the surface - but it should give you a grounding in using the software. Even if you’ve never used an image editor (like Photoshop or Paint Shop Pro) before, this tutorial should teach you enough to edit images, and prepare them for use on your sites, or in your products.

The GIMP interface uses separate windows for each panel. Some Windows users will find this a little strange to begin with, but once you get used to it, you’ll find it very easy and intuitive to work with, especially if you are using a dual monitor setup (as you can expand the image to the full screen on one monitor, and have your tools on the other!)

GIMP - Separate interface windows

All menus associated with the open image (Select, Colour, Layer etc.) are found at the top of the image window, while menus associated with the applications (Preferences, Plugins etc.) are in the toolbar window.

The toolbar itself is split in two, with icons for the tools at the top, and attributes and settings for the currently selected tool at the bottom. In between the two is a double box showing the currently selected foreground and background colours and clicking on that opens up the palette to select new colours.

Toolbar

If you’ve ever used Photoshop or a similar package before, you’ll probably be fairly familiar with most of the tools available. If not, don’t worry I’ll show you the ones that you’ll find most useful.

The first few tools are all for making selections. You can choose from rectangles or elipses (circles) for set shape selections, while the lasso tool allows you to draw your own selection. The Scissors Select Tool icon is for ‘intelligent shape selections’ and allows you to find the edges of objects in the image, and the two before that are for choosing areas of similar shade or colour.

If you pick the Select By Colour tool and click on the sky (download the example image here) you’ll find that only blue pixels within a set range are selected. You can change the threshold at the bottom of the toolbar. Hold the SHIFT key while you click to add areas to the selection, hold CTRL to remove areas.

Try to select the entire sky and when you’re done, go to Colours > Hue-Saturation from the image window menus. Adjust the sliders and you’ll see that the effect only applies to the area of the image currently selected.

This is a great technique for changing parts of an image, such as changing the colour of a car, or darkening a sky. Just experiment and have fun as you’re learning!

Below the selection tools are more useful tools such as a colour picker (for choosing a colour from an image) and the zoom icon (magnifying glass). The blue icons with arrows on are for manipulations such as rotating, scaling and distorting the image. Again, try each one and note the effects.

The A allows you to add text to an image. Click on the image, type your text into the dialog box and use the attributes on the toolbar to set the font, weight, size and colour.

After the text tool there are tools for fills, gradients and drawing. Each of these again have settings which affect their use.

Possibly the tool I use most when preparing images for the web is the Clone Tool which looks like a rubber stamp. This allows you to clone an area of an image and is great for removing unwanted distrations like telephone wires, scratches or background clutter. As an example, let’s remove the yellow flower at the bottom of the image.

Select the Clone Tool, move the mouse over the grass to the left of the flower and click the left mouse button while holding the CTRL key down. This selects the area to clone from. Now draw over the flower to see the effect. With a little practice, this technique is very powerful and can be quickly and easily implemented to great effect.

Cropping and resizing

More often than not, the image you have will be too large for using where you want it. Cropping an image means removing the outer parts of the image to improve framing, and/or reduce the size. To do this, select the part of the image you want to keep, using the Rectangle Selection Tool, then go to Image > Crop To Selection.

Finally, to resize your image ready for use go to Image > Scale Image. Choose your new width in pixels (or choose percentage, cm etc. from the dropdown). Now click on the chain link icon which will ensure that the height is altered in correct proportions to the new width. Click Scale, and your image is now resized and ready to use.

Saving

GIMP saves in it’s own native .XCF image format but can just as happily save to a large number of other formats. While there are times when using specific image formats can be an advantage, JPG will be appropriate most of the time.

OK - so that was the GIMP and how to prepare images for the web. If you think I missed anything important or have specific questions do leave a comment, otherwise I’ll see you tomorrow when we’ll be looking at creating audio content with Audacity!