What is an overlay? It's easier to show than explain. Remember the example on the first page? If we were to use that image to create a one image lake applet, we would most likely crop the top half of the image and scrap the bottom half with the "still" water. Click HERE to see what that lake applet would look like. Hey, not bad, right? But we want to use the entire image to show the stream flowing. Sooo, we keep the top portion handy but fetch up the bottom part that we scrapped. We bring that image into our graphics program and "cut out" the still water. Click HERE to see what that would look like. Now, all we do is take that image and "overlay" it on top of the lake applet we just looked at. The gray you see on the overlay image is made transparent so that the "lake" will show through.

Got the basic idea? This tutorial will show you exactly how to do all this. Let's start by picking our transparent color and cropping off the top. Look at the screenshot below....

Before we do any cropping, we must choose a color that we want to be transparent when the overlay is complete. The color must be different from any portion of the remaining overlay image after completion. Going back to the overlay image we just looked at, you'll see we chose gray. White would have been a lousy choice because of all the white in the image. Click HERE to see an example of what happens when you choose a color close to what is on the image. Notice the blotches and some areas where the applet is showing through.

To choose your color, look at the screenshot above. See the two boxes that I am pointing to with the note "select a color.."? The box in front would be the foreground color and one behind the background. More on those later but for now, left click on one to bring up the color palette and click on the color that you decided on. Do the same with the other box. NOTE: If you are using a gif image, you'll have to increase the colors from 256 to 16 million. You'll know right away that you aren't using 16 million because your palette will show a limited amount of colors. Go to the menu bar, click on "colors," then "increase color depth" by "16 million colors." No image should be edited in PSP unless the color depth is 16 million.

Ok, let's crop off the "top" for our applet. Use the screen shot as a reference. From the tool bar in PSP, click on the "selection box." I have it circled. You should also see the "control palette." If you don't you'll need to "toggle" it on. The "toggle control palette" is the 5th icon on the right from the lower level of tools. Also, using the TAB key toggles the palette off and on. From the control palette, choose "rectangle" under selection type and "0" under feather. Leave the antialias box unchecked. Now, slide your mouse cursor across the image without clicking. Look at the bottom left of your screen and you'll see two numbers changing as you slide the mouse. The number on the left is width and the right is height. Slide your mouse to the top left of your image until you see a 0,0 starting point. Click and hold your left mouse button from that point and start moving the cursor down and to the right. You'll want to cover the entire width of the image, but stop lowering when you get just above the point where the "still" water starts. Release the mouse button. Notice the dimensions I placed on the "screenshot." The portion that I am cropping is 160 pixels in height which is larger than the bottom portion I am leaving behind which is 146. ALL my overlays are done this way and I have lots of trouble if the lower portion has a larger height than the upper. Keep that in mind when choosing your images. To "crop" our selection, either hold down the "control" key on your keyboard and click on "X" or go to "Edit" on the menu bar and choose "Cut." See the "gray" you left behind in the original image? That is dictated by the "background" color we chose earlier from the color palette. Now, to paste in our new "top" image, either use "Control" + "V" from the keyboard, or "Edit" and "Paste as new image" from the menu bar. You should see something like the screenshot below. Save your cropped "top" image as a jpg. I saved the example as "sample_top.jpg." Minimize it because we are done with it for now.