Where are we?

You need to have software to create and manipulate images. Let’s talk about some of the free tools that are available.

This page’s goals

By the end of this page, you should:

• Know the types of tools you should add to your toolkit.

• Have downloaded and installed a tool of each type.

• Be able to complete some basic image tasks.

Image editors

Image editors let you mess with the pixels in images. You can resize, crop, and perform other operations on photos and images.

GIMP is a well-known, powerful, and mature tool. I use it for most of my image work. GIMP is not the easiest to learn. But when you do learn it, you can do anything you want.

GIMP is not a very good drawing tool. Even creating simple rectangles and circles is clumsy with GIMP. But when it comes to cropping, resizing, recoloring, fixing artifacts in photos, and other photo-oriented tasks, GIMP shines.

Paint.NET is another popular tool. Easier to use than GIMP, although less powerful. It can handle common Web image tasks, though some things like dodge and burn are not as easy as they might be.

There are many other free and low-cost image editors out there. Please add your favorite to the links list.

Download and install either GIMP or Paint.NET.

Let’s look at some tasks you might do with these tools.

Cropping a photo

Often you want to focus on just part of something in a photo. Take this one, for example:

Figure 1. Awww

Maybe we just want the puppy’s head. (In the photo, I mean. You are sick!) So I’ll crop just that part of it.

Suppose I’m using Paint.NET. I’ll open the file, and use the select tool to select the part of the photo I want.

Figure 2. Selecting

Now I choose the crop command.

Figure 3. Cropping

I end up with a cropped image.

Figure 4. Cropped image

I can save it in a new file, and use it on a Web page.

Resizing a photo

Maybe I want to use the puppy head photo as a small icon. I select Image | Resize from the menu in Paint.NET. I get this:

Figure 5. Resizing

The image is 128 pixels wide, and 130 pixels high. I have to be careful to maintain the ratio between width and height. Let’s say I make the new width 90, and the height 40. Here’s what I’ll get:

Figure 6. Squished image

Not so good. Fortunately, Paint.NET will maintain the right ratio for me. I just leave “Maintain aspect ratio” checked. This feature is in GIMP, and every capable photo editing program.

I’ll make the image 50 pixels high, and leave the width alone. The software will compute that for me. I end up with:

Figure 7. Puppy icon

Add text to a photo

Another common task is to add text to a photo. Check I Has A Hotdog! for examples.

Here’s the image I started with:

Figure 8. Renata and ball

The first thing I did was add a layer. A layer is like a clear plastic sheet on top of an image. You can draw on the layer without messing up the pixels underneath. Layers are important. Every useful tool supports them.

I add the text into the new layer.

Figure 9. Adding text

I got:

Figure 10. Meat taste

To make the text look a little better, I added a slight raised effect. I copied the text layer, changed its color, moved it a little, and blurred it a little. This was the result:

Figure 11. Meat taste, raised text

The difference is subtle, but it’s there.

Image viewers and managers

When you have hundreds of images on your computer, you need some way to quickly look at and manage them. For example, it helps if you can see thumbnails of all images in a directory.

I use IrfanView. Like other viewers, it can perform basic operations on files, like resizing. The thumbnail feature is OK, but buggy.

What’s your favorite? Got any tips? Consider writing an article.

Drawing tools

Drawing tools let you create drawings like this, from the Ajax lesson.

Figure 12. Ajax drawing

It combines a photo, screen shots, an icon, text, geometric shapes (the circles around the numbers), and lines with arrows.

Let’s look at a sample task. It will show you some of the features you should look for in a drawing tool. We’ll look at OpenOffice Draw, the program I use with CoreDogs.

I made this image.

Figure 13. Dog happiness

How?

First, I started with the dog drawing. I got it from WP Clipart, a collection of public domain clip art.

Here’s the original drawing:

Figure 14. Original drawing

There are some artifacts around the dog. Artifacts are errors, extra pixels or changes in pixel colors. They usually result from problems in image scanning or format conversion.

I used GIMP to crop the image and erase extra pixels around the head.

Figure 15. Removing artifacts

Notice that I had zoomed in to 400% so I could work more easily. The broken circle near the top of the image in GIMP’s erase tool.

Once the artifacts were gone, I saved the dog head as a PNG. Then I told Draw to insert it. That’s one feature you’ll need in a drawing program: the ability to insert bitmap files. Recall that a bitmap is an image made of pixels. JPEGs, GIFs, and PNGs are all bitmaps.

Next, I added some text:

Figure 16. Adding text

I set the type face to Trebucet MS, the size to 10 pixels, and the color to dark gray.

Drawing programs work differently from photo editors. In editors like GIMP and Paint.NET, everything (most things, anyway) is a pixel, or a bunch of pixels. That makes sense for photos are other images that are pure bitmaps.

In a drawing program, drawings are made up of objects. Objects are things like text, lines, shapes, and bitmap fragments that can be moved, sized, and formatted independently.

When you use a drawing program, you insert and format the objects that make up the image. When everything is right, you create a bitmap version in a JPEG, GIF, or PNG. This is sometimes called exporting the image, or it might be saving in a different format. I actually used screen capture for this step, as we’ll see later.

So far, I have a bitmap object, and a text object. Then I added a connector:

Figure 17. Adding a connector

A connector is a line that connects other objects. Notice the anchor points, the blur crosses around the text, and the small gray rectangles around the edges of the bitmap’s selection rectangle. I anchored the connector to a point on the text, and a point on the bitmap.

You should look for a drawing tool that supports anchor points. Why? Because you can move objects, and the drawing tool will redraw connectors for you.

Here’s what happens if I move the text.

Figure 18. Moving the bitmap

Now I’ll move the text again, and change the anchor point.

Figure 19. Moving the bitmap again

The drawing program redrew the curve for me. That’s important! Choose a draw tool with connectors and anchors. It will make your life easier.

Also notice that the connector is a curved line. Curved connectors often look better on drawings with just a few objects. To me, anyway.

Here’s the target image again.

Figure 13 (again). Dog happiness

Next I added the heart. I didn’t have to draw all of the lines separately. Draw includes a bunch o’ geometric objects: ovals, rectangles, talk balloons, triangles, smiley faces, jewels, jigsaw pieces, ... Each one can be sized, shaped, and colored independently.

Look for a tool that includes geometric objects.

Finally, I added a gradient to the heart:

Figure 20. Adding a gradient

You can see from the tabs at the top of Figure 20 that I could have filled the heart with a bitmap, hatching, and other things. Look for features like this in a drawing tool.

Now that I finished the draw, I wanted to put it in a file in one of the Big Three formats. I generally use two of the: JPEG for photos, and PNG for drawings. I created a PNG for this one.

The version of Draw I’m using at the time of writing has trouble with anti-aliasing when it exports drawings. Recall that anti-aliasing reduces jaggies. What to do?

I use screen capture instead. Draw does anti-aliasing fine on the display.

Screen capture

There are many screen capture programs. Two good ones are PicPick and Gadwin PrintScreen. You can capture full screens, the current window, or an area you select with a mouse. Then you can save what you capture into a file.

Summary

On this page, you learned about image editors, image viewers, drawing programs, and screen capture programs.

What now?

Now that you have some images, let’s see how we show them on a Web page.