In this tutorial we are going to make the river in this picture ripple and reflect. I have made all the pictures illustrating the steps half size, to keep the loading time down, but the picture we are working on is twice as big as this, and the dimensions in the examples are for the full size picture.
We shall be using David Griffiths' lake.class applet, which you can download from his website by clicking on this button. It is essential, of course, that you use a Java enabled browser to test your picture.
If you want to work with this picture yourself, download the full size version here. When you see the picture, right click and use Save Image As.
The working of the lake applet is really very simple. You choose a picture, which should be a jpg, which would look good reflected in water, and you crop the bottom to the point where you want the reflection to begin. You insert this coding in your HTML
|
I have cut the top off our picture, just below the cottages, and this is what the coding produces if I replace picname.jpg in the coding above with the name of this picture, and put the correct dimensions for it in width and height. Width is easy. You put in the exact width of the picture, in this case 287. Height must be twice the height of the picture minus something between 10 and 20. This portion of our original picture is 274 high. 274x2=548. I deducted 10 from that and entered a height figure of 538. Remember these dimensions are for the full size picture and not this little one here. The result is very pretty but we have lost all sense of there being a river here. It looks as though the houses are beside a lake. And we have lost the two deer, the gate and most of the snow. In fact, the whole atmosphere of the picture has been changed. But we have learned the vital principle of the lake applet, which is that the height dimension must be twice the height of the image it is applied to, less between 10 and 20.
|
|
We can put back the gate, the snow and the deer by using an overlay. This is a transparent gif of the whole of the original picture, with the river area made transparent. It then covers up the rippling everywhere except where the river should be.
But with this picture, we can't just put together the whole picture as the overlay and the top piece I used here as the image. I have cut the picture well below the halfway line, so the dimension we have to use for the height is much more than the height of the picture which will be our overlay. The dimensions will not match and they will not work together. Netscape will line them up from the top, and just below the cottages there will be a strip where the rippling goes right across the picture. Internet Explorer will line them up at the bottom, and the top strip of the picture will be repeated.
So on the face of it we have two choices. First we could cut the picture in the middle, which is a couple of pixels below the top of the chimney on the nearer cottage. That is what I have done in the copy of this in my gallery. If you take a look at that, it looks fine at first glance. But after a while you notice that the cottages are not reflected in the river and that looks odd.
Or, the obvious way of including the cottages in the reflection would be to crop the picture so that the line where we want to cut it for the image is in the middle, which gives a picture like this. But I don't think the proportions of that are nearly as nice as the whole picture, so I am going to show you a way of getting the effect we want - cutting at the line below the cottages but keeping the full picture.
Instead of simply cropping the top off the picture, so that it is lost, you cut it off, but save it as a separate image. I have called it extra.gif, and its dimensions are 287x114. Save it as a gif because the overlay will be a gif, and we want the two pieces to match at the end. What remains in my copy is 287x320 - the original picture being 434 deep.
Then take a copy of the top half of this 320 deep picture, for the image to which the rippling will be applied. It will be 287x160. Don't cut or crop this one - it must be a copy - because we need the whole of the picture for the overlay. Save it as a jpg. I called mine top.jpg.
Now we must make the overlay. Carefully paint the whole of the river area with a colour which does not appear in the picture, so that we can make it the transparent one. I used this vivid purple.
Be sure to paint very precisely between the bars of the gate, around the animals, especially the legs, and around the branches of the bush. I brought the purple up higher at the very bottom of the picture. The 10 pixel reduction needed by the lake applet reduced the river there to tiny rippling puddles and it looked rather odd. So I made it go almost right across the picture and blotted out a little of the snow in the process.
Save the picture as a transparent gif called overlay.gif, nominating the purple as the transparent colour.
We now have three images from this picture: extra.gif which is the top piece we cut off to get the horizon in the middle; top.jpg which is a strip from the middle of the original picture, but is the top half of our cutdown one; and overlay.gif which is the cut down picture with the river area transparent.
Now we are ready to write the HTML. We are going to use a table of two rows and one column, width the width of our picture, which is 287. In the top cell we shall put extra.gif, and in the bottom cell, the applet coding. When they are displayed on the web page the join will not be visible.
To use an overlay, we have to insert this line in the applet coding:
The value is the filename of the overlay.
This is the coding for the whole picture:
<tr><td><table border="0" cellspacing="0" cellpadding="0"><tr><td>
<APPLET CODE="lake" width="287" height="310">
<param name="overlay" value="overlay.gif">
<param name="image" value="top.jpg">
</applet></td></tr></table></td></tr></table></center>
And the result is we have the whole picture, with the cottages reflected in the water - much more realistic than my first attempt which is in my gallery.
When you save them or put them on a web page, the HTML, the images and the lake.class applet must all be together in the same folder. Do not put the images in a separate images folder.
This method of restoring the piece cut off to centre the horizon works if the horizon is below the centre of the picture so that the piece you cut off is at the top. If the line where you need to cut to start the rippling is above the centre of the picture, so that you need to crop the bottom, there can be problems.
If the water to be rippled does not come to the bottom of the picture, so that the cropped portion has no water image on whatsoever, it can be restored in the same way that a cut off top piece can, except that you put the applet code in the top cell of the table and the cropped portion in the cell below.
However, if the river, lake or whatever comes to the bottom of the picture so that part of it is cut off to centre the horizon, you cannot simply restore it by putting it in the bottom cell of a table below the applet code. The effect would be that the water stopped rippling at the join, and might also be a different colour. If you have had to trim a piece from the bottom which does not consist entirely of dry land in the image, you cannot put it back and must therefore live with the cropped picture.
Click this button to return to the graphics page