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 lesson’s goals

By the end of this lesson, 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.

Paint.NET is a popular image editor for Windows. It’s free, and easy to use. It can handle common Web image tasks, cropping, resizing, recoloring, fixing artifacts in photos.

For the Mac, iPhoto can do some basic tasks. You can see a list of low-cost Mac image editors.

GIMP is another popular tool. It’s free, and runs on all the major operating systems. It’s more powerful than Paint.NET, but harder to use and harder to learn. I use GIMP for much of my image work.

We’ll use Paint.NET in CoreDogs. If you run Windows, you should download and install it.

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

Cropping a photo

Often you want to use just part of 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.

Open the file in Paint.NET. Use the select tool. Choose part of the photo.

Figure 2. Selecting

Now use the crop command.

Figure 3. Cropping

You end up with a cropped image. W00f!

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.

Figure 7. Maintain aspect ratio

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 8. 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 9. 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.

I add the text into the new layer.

Figure 10. Adding text

I got:

Figure 11. Meat taste

Since the text is in a separate layer, I still have the original image underneath. If I change my mind about what the text should say, I just change the text layer. I can delete the text layer, add a layer with other images, and so on.

Layers are important. Choose an image editor that has them.

To make the text look a little better, I added a slight raised effect. To do it, I added another layer underneath the text layer:

Figure 12. Shadow layer

I copied the text layer, changed its color, moved it a little, and blurred it a little. Paint.NET stacks the layers on top of each other. This was the result:

Figure 13. 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.

Drawing tools

So far, we’ve worked on photos and other pixel-based images. Drawing tools are different. They make it easy to create drawings like this:

Figure 14. Drawing

This drawing combines a photo, screen shots, an icon, text, geometric shapes (the circles around the numbers), and curved 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 15. 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 16. Original drawing

There are some artifacts around the dog. Artifacts are errors, like extra pixels or changes in pixel colors.

Figure 17. Artifacts

They usually result from problems when scanning an image from a book into a computer, or converting from one image format to another.

This is pixel work, so I used Paint.NET for this part of the task. Recall that a bitmap image is an image made of lots of pixels. JPEGs, GIFs, and PNGs are all bitmaps.

The eraser tool can remove extra pixels around the head.

Figure 18. Removing artifacts

I zoomed in so I could work more easily. I set the radius of the erase to 5 pixels.

Once the artifacts were gone, I told Paint.NET to save the dog head as a PNG.

Then I started Draw, with a blank page. I told Draw to insert the dog head.

Next, I added some text:

Figure 19. 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 image editors. Image editors like Paint.NET work with pixels. In a drawing program, drawings are made up of objects, not pixels. 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.

I inserted the dog head as a bitmap object. A bitmap object contains – you guessed it – a bitmap.

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

Figure 20. Adding a connector

A connector is a line that connects two other objects. Notice the anchor points: the 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 use 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 21. Moving the text

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 15 (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.

When you choose a drawing tool, look for a tool that includes geometric objects.

Finally, I added a gradient to the heart:

Figure 22. Adding a gradient

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

Now I’ve finished the drawing. W00f! Time to get it on a Web site.

There’s a problem. Browsers show images in JPEG, GIF, and PNG formats (and maybe others, but these are the Big Three that work in all modern browsers). But my drawing file is not in one of those formats. It has the extension .odg, used by OpenOffice Draw. Browsers don’t know how to show .odg files.

How do I get my drawing in one of the Big Three formats? There are various ways. I chose to do something simple…

Screen capture

This means saving a piece of your computer screen into a file. Often called a screen shot. CoreDogs has about a bazillion of them.

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.

I use SnagIt for CoreDogs. It costs money, but is worth it if you do lots of screen captures.

Summary

On this page, you learned about image editors, image viewers, drawing programs, and screen capture programs. You learned how to do some basic tasks, like crop and resize images.

What now?

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