Pictures

Text is great but pictures are better, and the Web allows you to send a picture in a file.

In order to get a picture into a file, you have to digitize the image (i.e., translate it into 0s and 1s). There are a few ways to do this, including:

  • Scanner: The scanner scans the picture and turns it into a file.
  • Photo CD: When you get your pictures developed, you can ask that they be put on CD. Each picture will be one file on the CD.
  • Digital Camera: You take the picture and download the file.
  • Graphics Program: You draw it yourself and save it in a file.

The first three are easy; the machine does most of the work. All you have to do is get your hands on the file that has the picture and link to it. (We talk about linking in a bit).

However, it's fun to draw your own pictures too, so let's see how we might be able to do that.

More About Files

You've learned that each web page has its own file. As it turns out, each picture has its own file, too. Here's a picture of a little door:

Here's what the file looks like on the inside:

Hmmm. Fascinating. Lot's of picture gunk, including some initial gunk that identifies the file as a GIF. Basically, a picture file tells the browser how much of each kind of color to squirt on the screen and where to squirt it. (We'll hear more about color in the next chapter.)

GIFs, PNGs and JPEGs

On the Web, we typically use either PNG files (pronounced ping), GIF files (pronounced jiff), or JPG files (pronounced jay-peg). JPEGs are best for photos; PNGs or GIFs for everything else. The PNG file format is based upon the newer Portable Network Graphics open standard, developed as a successor to GIF.

So let's see how to draw that little door.

Graphics (Paint) Program

To create a word processing document, you need a word processing program. To create a picture, you need a graphics program. There are many programs that you can use. On the Mac, you can use the Paint program in AppleWorks or ClarisWorks. In Windows, you can use a program called Paint that comes with Windows (click the Windows Start Button, select Programs, select Accessories, and then select Paint). But they all work in about the same way:

  • Create a new file
  • Use the toolbar to draw your picture
  • Save the file

In this example we'll use a graphics program called Graphic Converter, available from http://www.lemkesoft.de. (This is a shareware program, which means you can download it and try it out but if you want to keep it you must pay for it. But the price is right.) I've also used Paint Shop Pro, a Windows shareware program available from http://www.jasc.com.

If you are using another paint program on the Mac or on Windows, look at its Help file for details about its features. They should be very similar to what follows.

1
Create a File

Launch the graphics program by double-clicking on its icon.

Go to the File menu and select New. You get a dialog box that asks you how big you want your picture to be, among other things.

Let's make a picture that's 200 x 200 pixels (those little dots that make up the screen, typically 72 to the inch).

Also, select a depth of 8 bits (256 colors), and an "Internet" palette (typically 216 colors).

Here's the dialog box in the program I use. In other paint programs, the dialog box will look different but it will ask you the same thing.

Now the graphics program gives us a white box to draw on that looks like this:

In that blank canvas, let's draw a door that looks like this:

And how do we do that? We use the toolbar.

2
Toolbar

Check it out. This is the toolbar for Graphic Converter; toolbars in other paint programs on the Mac and Windows look pretty much the same.

This is what a toolbox might look like in a Windows graphics program. As you can see, there is much similarity between the tools.

You draw with the Pencil tool (!), erase with the Eraser tool, select colors with the Eyedropper, pour a big blob of color with the Bucket, and draw shapes with the Shape tools (Line, Circle, Rectangle, etc.).

Shapes also come in outline versions or filled versions:

(just the outline of the shape is drawn)
(inside of the shape is also filled with color)

You can pick how wide you want your lines to be and you can pick both the foreground (e.g., shape or outline) color and the background (e.g., fill) color. Some programs also let you type words on your pictures and let you make your pictures transparent (instead of a white background, the color of the web page background will show through).

If you want to use a tool, just click on it.

OK let's draw that door.

3
Drawing the Door

Color

First, we pick some colors.

Click on this near the bottom of the toolbar to get the color palette:

And pick a color by clicking on it, maybe a nice blue.

The bottom of your toolbar looks like this now, showing the color you picked:

Line Width

Click on the line width tool and drag down to 3 pixels. That will give you a fatter line.

Shape

Now click on this, the Rectangle Outline tool.

Your cursor should now look like this:

So we picked a color, a line width and a shape, so we're ready to draw.

Do It

Put the cursor on the white area, and click and drag to the bottom right. Bingo! A blue rectangle.

4
Coloring the Door

Another Color

Now go back to the palette and pick a nice green, something like this:

Bucket

Then click on the Bucket.

Paint Again

You're ready to blast the inside of your blue rectangle with some green paint. Place the cursor (that looks like a bucket) over your rectangle:

and click!

Now let's give your door a window.

5
Drawing a Window

Another Color

Go back to the palette and pick a red.

Another Shape

Then, go to the toolbar and select the filled rectangle.

Paint Again

Put your cursor at the upper left of the door, like this:

Then click and drag to make the window.

Your door now has a window! All it needs is a doorknob.

6
Drawing a Doorknob

Another Color

Go back to the palette and pick black.

Another Shape

Then, go to the toolbar and select the line.

Paint Again

Put your cursor where the doorknob would be, like this:

Then click and drag down a bit to draw the doorknob.

Great job! You just drew the door!You're well on your way to becoming a graphic artist.

Undo

And don't forget, if you mess up, you have the eraser tool, and even better than that, you have the power to Undo your last change:

Just press Command-Z (Ctrl-Z in Windows) and your last change should disappear. So if you can't get those windows and doorknobs right, just keep Undoing until you get it the way you want it.

7
Save the File

Now you have a great little door, so let's save it in a file so we can get it into our web page.

Here's what we look like now:

Lose the White Space

But wait, the picture has all that white space we don't need. Let's get rid of it.

Click on the selection tool . Put your cursor at the top left of the door:

Click and drag until you've selected the picture:

Then copy the picture by pressing Command-C (Ctrl-C in Windows).

Now you can create a new picture without all the white space.

Press Command-J to create a new file in Graphic Converter. In other programs, you may have to press Command-V to paste; in Windows press Ctrl-V.

Save the File

You should now have a picture that looks like this:

This is the picture we will save.

Select Save from the File menu and type in the name of the file.

Let's call this one door.gif.

And select GIF as the type of file. Be sure to remember in what folder you save it!

Congratulations! You drew and saved your first picture.

Adding Pictures to Web Pages

In the Links chapter, we'll see how to link an image file (GIFs and JPEGs) to a web page.

Making Pictures Move!

And see Animation to find out about making your GIFs boogie.

But first some information on Color.

Intro | Comm | Pub | Five Easy | Web Ed | Found | Squeezing | Standards | Animate | Epilogue

Files | Words | Pictures | Color | Links

 

All contents copyright (C) 1999-2007 Wanda Wigglebits. All rights reserved.