Your image toolkit

See more about:

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:

Awww

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.

Selecting

Figure 2. Selecting

Now use the crop command.

Cropping

Figure 3. Cropping

You end up with a cropped image. W00f!

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:

Resizing

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:

Squished image

Figure 6. Squished image

Not so good. Fortunately, Paint.NET will maintain the right ratio for me. I just leave “Maintain aspect ratio” checked.

Maintain aspect ratio

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:

Puppy icon

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:

Renata and ball

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.

Adding text

Figure 10. Adding text

I got:

Meat taste

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:

Shadow 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:

Meat taste, raised text

Figure 13. Meat taste, raised text

The difference is subtle, but it’s there.

Exercise: Add a caption to a dog photo

Add a funny caption to one of your dog photos. Crop and resize the photo if you need to first.

If you need a dog photo, try morgueFile.com.

Paste a link to your image below. How? That’s coming up soon.

(Log in to enter your solution to this exercise.)

Drawing tools

So far, we’ve worked on photos and other pixel-based images. With these tools, you usually work with individual pixels:

Drawing tools are different. They make it easy to create drawings like this:

Ajax drawing

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.

Each element is a separate object. You can change each one separately. For example, I can grab one of the objects in Figure 14:

Selected a line

Figure 15. Selected a line

Then I can mess with that object, leaving everything else alone:

Changed object

Figure 16. Changed object

Moving all the pixels around to make the new line would be a pain. But I don’t have to. The drawing program makes it easy for me to reshape a line.

Drawing programs store images in many different formats. Web browsers can’t show most of them. So, when you have the drawing right, you make a bitmap copy, in a JPEG, GIF, or PNG. This is sometimes called “exporting” the image. I often use a screen capture program for this step, as we’ll see later.

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:

Dog happiness

Figure 17. Dog happiness

It’s a combination of a pixel object (the dog) and drawing objects (everything else). That’s common in Web work. You use pixel tools for photos and such, and drawing tools for lines and things.

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

Here’s the original drawing:

Original drawing

Figure 18. Original drawing

It’s a pixel object – a bunch o’ colored dots.

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

Artifacts

Figure 19. 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. The eraser tool can remove extra pixels around the head.

Removing artifacts

Figure 20. 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:

Adding text

Figure 21. Adding text

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

Then I added a connector:

Adding a connector

Figure 22. 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 23. Moving the text

Choose a drawing 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.

Dog happiness

Figure 17 (again). Dog happiness

Next I added the heart. I didn’t have to draw all of the lines separately. Draw includes a bunch of 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:

Adding a gradient

Figure 24. Adding a gradient

You can see from the tabs at the top of Figure 24 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.

Remember, 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. A screen shot is a bitmap image, with the pixels that were on your screen.

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.


How to...

Lessons

User login

Log in problems? Try here


Dogs