corner gif
border gif
corner gif
border gif
Lorraine's Lakes
border gif
corner gif
border gif
corner gif

 

Lake Applet Overlays

The lake applet overlay is where a second image is overlayed over the first and parts of the second image have been 'erased' so that the moving water shows through. Overlays are sometimes called 3D applets. This tutorial uses a top part of the image that is placed in a table and the remainder of the image is used for the applet. Because the horizon parameter is used, the applet height can get too large for the visible area of the web browser so this technique is used.

Required knowledge:

  • Creating lake applets. Tutorial is here
  • Using the horizon parameter. Tutorial is here
  • Using a graphic editor. Paint Shop Pro was used for this tutorial and the instructions that follow are for this program.
  • Developing patience.

The files needed to create this overlay applet are:

  • Three image files (two JPGs and one GIF)
  • The latest David Griffiths lake applet
  • A web page with table code to display your efforts.

The lake class file:

Check that you have the latest David Griffiths lake.class applet. It has a file size of 9.98 kb. If your current lake.class is not this size then you will need to download the latest one from David's website. Click on the link to get to his site. Save it to your computer, then unzip it to a folder that will be used to make this overlay applet. Call the folder "Overlay Applet" or such. If you already have this file then copy it to the overlay folder.

1. Image preparation

Find an image to use or right click this one and save it to the overlay Applet folder on your hard drive. Open it in Paint Shop Pro, make a Copy and Paste the copy as a new image (Image 1). Close your original image in case things go wrong and you need to start again.

Examine your picture and decide if it needs to be cropped, resized or have other changes made to it. With this image we will select and copy the top portion and put it in a table, to cut down on the applet size. The rest of the applet will go underneath.

Use the selection tool and drag down and across from the top left-hand corner to the bottom-right. My selection's base was approximately level with the base of the roof on the mill. While this part is still selected, Copy and Paste it as a new image.

This will be the top part in the applet.Save it as creektop.jpg to the Overlay Applet folder. Click on Image (PSP7) or View (PSP6), select Image Information and record the width and height in pixels of the creek top file. You can then close this file. You should still have the first copy (Image 1) open in Paint Shop Pro with the selection still in place.

 

Go to Selections on the menu bar and choose Invert Selection . Then click on Image and Crop Image to Selection . You will be left with the image on the right.

This is the part of the image that will be reflected in the applet. Make a Copy of this and Paste as a New Image as well. Find the image width and height and record this, too. Click on Image 1 and save it to the Overlay Applet folder as creek.jpg Close this file too.

The remaining copy will be the overlay.

Continue to the Next Page to make the overlay