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. WooHoo!!
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:
<applet
code="lake.class" width="445" height="306"> <param
name="image" value="sample_top.jpg"> <param name="overlay"
value="sample_overlay.gif"> </applet>
That's it!! {:-) To see the applet, return to the menu. I hope
this tutorial helps you out. Keep in mind that my method may not be
the most proven 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 with
any comments. If you really really liked this tutorial, and would
like to link to me, feel free to use one of the buttons below. Good
Luck and have FUN!!
| |