Here is the part that seems to give people the most trouble... lining up the overlay image so it falls into place with the top image when the applet loads. Through many trials and a zillion errors (and a few too many adult beverages), I found a method that works almost every time for me. Remember from step 1 where I said the cropped top image must have a larger height than the bottom? In this step we have to move the bottom part just above the center to make everything line up. Take a good luck at the example below and I'll explain how it is done....

The height of the image box is 306, so we have to move the bottom portion up until it is about 1-2 pixels above the center, or 152 from the top. To do this we use the selection tool and the rectangle again, very similiar to the method we used in cropping off the top. Before we begin, make sure the background color on the color palette is the same as the color in the image cutout. See step 2 for refresher. Now, use your rectangle selection tool and draw a box around the entire bottom portion. While the box is still hi-lighted, take your mouse and slide it towards the center of the box. Do NOT click any mouse buttons. Notice the 2 numbers at the bottom left of your screen changing. Those are the width and the height points of the mouse cursor within the image. Move the cursor around until you see the second number (the height) reach 152. Don't worry about the width but it's a good idea to keep it around the middle. Stop right there and leave the cursor sitting there. Again, don't click any mouse buttons. The cursor is now at the "just above center point" where we want to move the bottom portion. With the rectangle box hi-lighted and the cursor at height point 152, hold down the SHIFT key and use the UP arrow to move the bottom portion up. When the top of the bottom portion reaches the 152 mark, stop and right click the mouse to deselect the box. Use your mouse cursor to "measure" to see if you reached the right point. If you need to move the image again either up or down, go to the EDIT menu, and do an UNDO. That should RE-select the box allowing to move the image again. Notice the small gap you left behind at the bottom. That is normal, but it has to be the same color as the other cutout portions.

That's our finished overlay image! Now, we have to convert it to a transparent gif. Go to the COLORS menu, and select DECREASE COLOR DEPTH to 256 COLORS. Use the settings in the example below to fill out the pop-up box.

Now we have to make the image transparent. Select the eyedropper and slide it across our "painted" area. Look at the color palette at the right of the sreen.

You should see 4 letters, R, G, B, I followed by numbers. Take note of the "I" number. You'll need that to set the transparency. If you see R, G, B, and O with a % after the O, that means the image is still at 16 millions colors and hasn't been decreased to 256 yet. To set the transparency, go to the COLORS menu, and select SET PALETTE TRANSPARENCY.

Check the bottom box and fill in the "I" number that you noted earlier. Click ok, and that's it. Save your image as a GIF and you are finished with Paintshop Pro for this overlay. From here on, it's all downhill - the hard part is all behind you!

Now comes the easy part.. adding the html code to your web page. If you're familiar with making a basic lake applet, this is a piece of cake, as there is only one additional line to add. If you need help with the basic code, check out my "101" course from the menu. I named the overlay image sample_overlay.gif so all we have to do is add the line <param name="overlay" value="sample_overlay.gif"> to the applet code. The entire code would look like this:

<table border="5"><tr><td> <applet code="lake.class" width="445" height="306">
<param name="image" value="sample_top.jpg">
<param name="overlay" value="sample_overlay.gif">
</applet> </td></tr></table>

That's it!! Remember what the completed applet looks like?



I hope this tutorial helps. Keep in mind that my method may not be the most efficient method (and then again, it might be! *grin*), but it's the only way I know how to make these little beauties. Feel free to EMAIL me (BJ) .

Want to review any of this? Here are the links: