In the short time we have today, we can only touch on a few tips and tricks for working with images.  We will be using a shareware program called PaintShop Pro to manipulate our graphics.  If you are really interested in graphic design, you might want to take a look at Adobe PhotoShop, the premier software package for graphics (it ain't cheap!).

For today, we will be content to look at just a few of the most basic things you will need to know about working with images:

Image formats

The three-letter extension that occurs at the end of a filename identifies the type of file it is.  For example, you already know that a MSWord filename ends with the extension .doc.  In the same way, image filenames have unique extensions that identify them as the type of image they are.  The three basic types of images you can use on a web page are:

  • .bmp (Bitmap).  This is a computer-generated image.  Many counters that you see on the web are bitmaps.  There are two main reasons NOT to use bitmaps on a web page:  (1) they generate HUGE files and it will take forever for your page to load and (2) only Internet Explorer can read bitmaps -- other browsers cannot.
  • .gif (Graphics Interchange Format).  A .gif is a format invented by Compuserve.  It consists of a series of pixels (dots) that line up to make an image.  It is used most successfully for line drawings with few colors.  Many of the animated images you see on the web are gifs.
  • .jpg (PC) or .jpeg (Mac) (Joint Photographic Equipment Group).  A jpg is a compressed image format.  It is used most successfully for images that have a great number of colors.  Most photographs and pictures of paintings will be in .jpg format.
Converting image formats

Okay, you found this great picture, but it's in a TIF format and you can't use it on your web page.  Or can you?  Well, you can't use it as a TIF, but you can convert it to a gif or jpg.  Open PaintShop Pro, then click on "File" then "Open" (or click on the icon of a file folder).  Select your image file and when you click OK, it will open up in its own window on the PaintShop Pro desktop.  To convert the file, simply click on "File" then "Save As."  Select the folder where you want to save it, give it a name, then select the file type you want to convert it to.  Click OK, and voilà - you now have two separate image files, one of which is a TIF (the original) and the other which is a jpg.  You can now place the jpg on your web page.

Cropping images

Alright, now you've found this great picture, but it's too big and you really don't need the whole thing, just part of it.  You can crop the picture down to what you want quite easily.  Before you begin, a suggestion:  whenever I want to change an image, I always make a copy of it first.  That way, when I botch the job, I haven't lost my original image -- it's still intact so that I can go back and start over.  To copy an image:  First, open the image in PaintShop Pro (see above).  Then, click on "Edit" then "copy."  Next, click on "edit" again and then "paste" then "paste as new image".  Bingo - you now have a copy of the original.  Best insurance against graphic disaster there is.

Now, to crop the picture, click on the selection tool (the rectangle outlined with a dotted line).  Your cursor will change to a crosshatch.  Position the crosshatch in the upper left-hand corner of the area you want to cut out.  Click the left mouse button, hold it down and drag it horizontally across the top, then vertically down the side.  You draw two sides and PSP will draw the other two automatically for you.  When you release the mouse button, you will see the selected area inside of a blinking rectangle.  (If the selection is not exactly right, click on "Selection" on the toolbar at the top, then choose "Select None."  Your selection will be wiped out and you can start over.)  To create a new image of JUST the selected area, click on "edit" then "copy."  Click on "edit" again then "paste" and "paste as new image."  Bingo - you have a new, smaller, selected image.

Adding Text to Images

You can create some very interesting visual effects by adding text on top of an existing image.  For example, all the buttons used at this website were created by taking a blank button and adding the text label.  To add text, again I strongly urge you to begin by making a copy of your original image.  Then, to add text, click on the text icon on the toolbar (a rectangle with the letter A).  Next, click once on your image and a dialogue box will pop up.  Select the font you want to use, the style (bold, italics, etc.), and the size.  Next, type in the text you want to appear, then click "OK."  The text will appear in a floating box on your image.  You can position the text by clicking and dragging.  If you want to see what the image will REALLY look like without all the winking and blinking, click on the icon of the movie screen.  Your image will be displayed on a blank page as it will actually appear.  To get out of this view, hit the escape key and return to PSP.  Don't forget to save your new image under a different name from the original. 

PaintShop Pro Tutorials on the Web

We've barely scratched the surface of everything you can do with images in PaintShop Pro.  Using this program, you can create transparent gifs and screen captures, you can "touch up" the colors, you can adjust brightness and contrast of an image--the list is endless.  When you have more time, you might want to peruse the following web tutorials for PaintShop Pro:


This page was created by Pat Pecoy
Last updated November 13, 1998