Basic HTML: Banners: Images, Pixels and Software

PaintShop Pro
New Image
What’s A Pixel?
How We
Do It
Saving Images

 PaintShop Pro (PSP)

At this point, you should have PaintShop Pro (PSP) installed on your computer (or have the program you intend to use installed). If you are using PSP, you should have a screen that looks something like this:

That’s going to be the last time I will show the full PSP screen in this series. The remainder of the screen shots will be using only the portion of the screen you need to be concerned about. Hopefully, that will cut back a bit on the bytes required.

Creating A New Image

First off, we need to learn how to create a new image. Think of this more as a palette. What we will do is create one image that is the correct size of our banner and then, using PSP, we will add items to that palette.

     The banner we are creating in this series of primers is the generally accepted size for an advertising banner. It is the size of banner that sits on top of each HTML Goodies page. How this series of numbers was arrived at, I don’t know, but the banner size we want is 468 pixels wide by 60 pixels high.

What’s A Pixel?

Pixel is a shortened version of two words: “picture” and “element”. In case you’re wondering, the correct pronunciation has the emphasis on the second syllable: pix-EL, but no one ever says it that way. A pixel is a little colored dot. You see, computer images are not like photographs, where the color is consistant and smooth. Computer images are a lot more like the images you’d find in a newspaper. It’s a lot of little dots up close, but when you move away and your eyes get the opportunity to blur the little dots all together, it makes a pretty nice picture. Your television works the same way. Tonight, go right up to your
TV, lick your thumb, and drag the spit across a small section of the TV screen. The liquid will offer enough of a “lens” that you can see the individual dots.

     When I say the image is 468 by 60, that means there are 468 little colored dots across, and 60 little colored dots up the side. What we are going to do right now is create an image made up of all white dots. It’ll look like just a big white rectangle.

How We Do It…

In the upper left-hand corner of PSP, there is a menu called FILE. Click on it and choose the NEW… option as shown to the right.

Once that is done, you should get a dialogue window that looks like this:

I doubt that the numbers in the width and height sections read 468 and 60 as the above image does, so do that now. The fastest way is to click on the number. It will highlight in blue. Then hit your backspace key. The number will disappear and you can write in the number of pixels you want.

     Notice the background color section. There are multiple colors to choose from, but we want to stay with white as this banner will be mostly white. Don’t worry about the image type section. PSP will take care of that aspect for us so we need not worry about it.

     Choose OK. Ta da! There’s the new image. It should look like this:

Now let’s save it right away.

Saving The Image

We want to save this image in .gif format. The reason for choosing .gif is that we will want to animate this, and a few other images, later. The animator requires that the images be in GIF to animate them. Click on the FILE menu again and choose SAVE AS. You will get a familiar dialogue box that looks like this:

First off, you’ll need to choose where you want this image saved. Follow the same format you would to save any text file. Notice in the image above that the section marked “Save as type” is open. You open it by clicking on the little arrow at the end of the line. Now you have a scrolling section where you can see all the different types of image formats you can use. We want to save in “GIF – Compuserve” format. Scroll up or down to that format and when it is highlighted, click. You will now be set to save in .gif format.

     Now, look just above the “Save as type” box at the “File name” box. Here’s where you give the image its name. To stay consistent with this tutorial, call this image “banner.gif”. Please make a point of adding the .gif at the end. Don’t assume the computer will do it for you.

That’s it! Success! You created and saved your first image. That wasn’t so hard, was it?

Done For The Day!

Well, you’re creating and saving images like a pro. If you feel up to it, head to the next banner primer. Or take the night off and start again tomorrow. You do look a little tired.