Lake Applet Tutorial
Page 2
Now you are back to the graphic with the moving lines around the bottom of the picture. You will now be copying the bottom portion of the picture. Click on Edit, Copy, Edit, Paste as a new image. Click on Edit & Paste as a new image once again to make a backup in case you make a BIG BOO BOO in painting!!!! (which I do a lot!) hehe. Minimize the backup.
You can also exit out the full version picture that is showing on your desktop at this time. It is not necessary to save the changes.
NOW YOU ARE READY TO PAINT.
Click on the Freehand Tool (looks like a lasso) and draw around, but on the water area of picture in a generalized way. You don't have to get exactly at the water's edge. Make a complete loop working around the perimeter of the water and keeping the mouse button down all the while you are drawing. Let up when you complete the loop. You now have the moving lines again.
There are 2 small rectangles on the right edge of the Paint Shop Pro window just below the colors. Click on the one in the foreground. It will bring up a color chart. You will now need to choose a color that is not in your picture. Click on one that you want & then OK. That color should now appear in the foreground box. Then click on the paint brush on the tool bar. There is a button just under "Selections" on the Menu Bar called "Toggle Control Palette". (It is white with blue writing on it) Click on it and a "Controls" box pops up.
***VERY IMPORTANT...
The Tool Control tab should say "none" for the paper texture.
Go to the Brush Tip tab and set as follows:
Opacity, Density, & Hardness all set on 100 (This is a MUST!!!)
Step on 1 (Not sure what this is about, but it works for me) hehe
Shape as a square.
Then set the size as around 30. (This sets the number of pixels that will be painted at one time)You will start to paint the water inside the moving lines. The lines will keep you from painting outside that area. COVER COMPLETELY.
Now click on Selections on Menu Bar again and click on "Select None" (The selection lines will now disappear). Then you will click on the Zoom tool on the tool bar and zoom in at least one click on your water area. Change your brush tip to a 1 or a 2 and then fill in the rest of the water area around the edges carefully and any objects in the water, ex. ducks, rocks, etc. BE VERY CAREFUL WHEN YOU PAINT. You might want to make a copy and paste as a new image a couple of times while painting so you have it in several stages because if you make a BIG slip with the brush and then click on the undo paint option in edit, it will take off ALL new painting done on that image. As you get the edges done with the brush size on 1 or 2, you could make your brush a little larger to cover more area, like maybe a 4 or so. Just be careful!!!! When you have the water totally covered with paint, you are ready for the next step.
Write down the size of the painted graphic. You will now make a new image by clicking on File, then New. A box pops up.
You put in the width of the bottom portion of your pic (also called the overlay.)
The height measurement will be one of two numbers:
IF THE GRAPHIC (OVERLAY) IS LESS THAN 1/2 THE HEIGHT SIZE OF THE ORIGINAL PIC, YOU WILL MULTIPLY THAT OVERLAY HEIGHT NUMBER BY 2 AND INSERT IT IN THE HEIGHT AREA.
OR
IF IT IS MORE THAN 1/2 THE SIZE OF THE ORIGINAL PIC, YOU WILL PUT IN THE HEIGHT OF THE ORIGINAL PIC, instead of doubling the overlay height. Resolution is set on 72,
Background color on Transparent
16.7 million colors (24 bit).
Then click OKClick back on the painted image and then make a backup copy of this by clicking on Edit, Copy, Edit, & Paste as a new image. Minimize one of these.
Click back on the overlay picture again and click on Edit, then Copy.
NOW click on the new transparent (checkered) graphic and click on Edit & PASTE AS A NEW SELECTION This transfers the image to the new area. Move the picture down to the bottom of the image with your cursor until it is aligned at the bottom and sides EXACTLY, with no checkered transparency showing anywhere except above the overlay image. Hold mouse very still, & click to set it into place. (You need this placement to be exact or you will get funny-looking edges on your finished picture)The moving lines are then around the bottom picture in that new graphic. It will look like the pic below but with the dotted lines around the overlay section and it will be checkered at the top where the transparency is.
Click on "Selection's" on Menu Bar and then on Invert. Moving lines will now move to the top transparent (checkered) area.
Click on the Flood Fill button on the toolbar ( tipped paint can just above the A button). Click inside the checkered area with the paint can and color will fill the entire area.
Now click on Selections & then on "Select None". Moving lines will disappear.
Now click on Colors on the Menu Bar, then "Decrease Color Depth," then 256 colors (8bit).
Click YES on the message box that pops up which asks you about merging layers.
Then on the "Decrease Color Depth - 256 colors" pop up box, which comes up next, make sure these items are bulleted:
Palette - Optimized Medium Cut
Reduction method - Nearest color Options
Check in "Include Windows Colors"
Then click on OKClick on dropper (eyedropper) on toolbar and put over the painted area you painted. On the right edge you will see 4 color numbers R, G, B, & I. Write down or remember the "I" number. Then click on Colors again & "Set Palette Transparency". Enter the "I" color number in the box for "Set the transparency value to palette entry."
Then click OK.
You can check the transparency by clicking on Colors, then "View Palette Transparency." You should see the checkered transparent areas in the top and also in the water that you painted.You are now ready to save this graphic.
Click on File, Save As, and name accordingly: yourpicname_overlay, I named mine: sample_overlay.gif. Scroll down and choose the .gif file extension and save in your homepage folder. (***PLEASE NOTE THAT THE TOP PORTION IS A .JPG FILE EXTENSION AND THE OVERLAY OR BOTTOM PORTION IS A .GIF FILE EXTENSION)
sample_overlay.gif
As the water and the top half are transparent, you will not see them in the above picture.
Now you are ready to put this graphic in your web publishing program.
This is the code for the lake applet:
<APPLET CODE="Lake" width="232" height="193" alt="*">
<param name="image" value="filename_top.jpg">
<param name="overlay" value="filename_overlay.gif">
<center><font size=5>Oh dear - no Java!!!!</font></center>
<center><img src="filename_top.jpg" width="232" height="193" alt="Mountain Overlay"></center>
</applet></td></tr></table></center>(I know that there are things in this code that are not necessary to it, but I don't have a clue as to what to remove as I don't know a thing about HTML coding. I just know this code works for me. :o) And if it is not broken, don't fix it.)
Notice that the "top" graphic is entered twice and the "overlay" once. The width and the height measurements are also listed twice and they are the original picture size measurements EXCEPT in one instance: If the doubled size of your bottom graphic was larger than the overall pic size, you should have not doubled it but make it the same size as the original picture height, as was instructed above. And if this is the case, then you have to also subtract 20 or any number that will work off of the height measurement for the code. (Otherwise you will get this blank gray area at the bottom of your pic where the rippling water moves in and out of)
I clicked on where I wanted my lake applet to be placed, then, in FrontPage Express I pasted the above code in "Insert" (on Menu Bar) , then "HTML Markup". I then edited the numbers and graphic names to fit my pic.
These are the following items that must be sent up to the net:
Lake.class file (if you don't have this, download it from this location: http://www.geocities.com/Heartland/Meadows/3529/lakeapplets.htm ( This is where I downloaded mine from. Copy her instructions and follow them exactly!!!)
sample_top.jpg
sample_overlay.gif
yourpagename.htmlIf you did everything right, you should now have a beautiful lake applet picture.
Congratulations!!!! :o)
Click HERE to see some other samples of this lake effect.
