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

 

Overlay tutorial - page two.

2. Making areas transparent.

Go to the Color Palette and choose a color to use for making areas transparent. Wherever this color is in your image, the moving water will show through. Choose the colour carefully because if your choice is a colour already in the image this area will also become transparent. I usually choose a bright pink after checking there are no pink shades in the picture first. I make both the foreground and the background the same pink colour. This saves having to change when swapping tools

 

Select the eraser tool check that the antialias and feather are both set at 0. In Tool Options, select a square shape with hardness, density and opacity set to 100%. When erasing the parts that you want the water to show through, begin at about a size 13 brush and gradually downsize this to one pixel for the final touches. Start erasing in the center of the image, then after resizing the eraser, gradually work towards the edges.

If you make mistakes use the CTRL+ Z keys to undo. Click on the magnifying tool to make it easier to see fine detail. The more time you spend here with the one pixel size tool, the better the finished image. Check that there are no missed pixels in the large pink areas. There may be times when you will want to add pink paint. Use the brush for this.

Here is a screen capture of my finished overlay image. I have left a part of the ice at the side of the creek in place and odd dark bits in the creek.

 

When you feel you have finished, create a New canvas, the same width as the first image (354 pixels) and DOUBLE the height (426 pixels). Use the drop down box to select Background Color.

Go back to the overlay image (the one above). On the Menu, click Copy and then click on the new canvas to make it active.

Go to Edit and Paste as New Selection or use the shortcut keys CTRL+ E. Keep the newly-pasted overlay selected. Use the arrow or move tool to carefully slide your overlay right to the top of the new canvas. Take care that the sides are positioned carefully and are lined up. You can now deselect the overlay. The screen shot on the right shows what we have so far. I have reduced this for tutorial purposes only.

 

3. Saving the overlay.

Before saving the overlay, the color that you used for the background must be made transparent so that the applet can show through. Paint Shop Pro will insist that the file be optimized to 256 colours before this is done.

  • Go to the menu bar and choose Colors. On the drop-down menu select Palette Transparency.
  • In the window that pops up select the Optimized Octree and the Nearest Color radio buttons.
  • Click Ok.

In the next window, choose the middle radio button. Set the Transparency to the Current Background Color. Click OK.

Now you can save this image. Save it as a gif file to the same folder that the JPGs, the lake.class applet and your web page will be in. I saved this overlay as creekol.gif. The 'ol' is my shorthand for overlay. I follow the web publishing technique and use lower case for file names. Please note, overlays cannot be made using JPG files, so it must be saved as a gif file.

Some people prefer to choose Save As a Copy (from the File menu) and keep the original overlay as a .psp file for later editing. This saves having to start again if something goes wrong. If you want to erase more of the overlay image, open it again in Paint Shop Pro, click on Colors, Increase Color Depth and click on 16 million colors. When you save your changes go through the above process for setting the color transparency again.

Continue to page 3 for the web page code.