|
1
Take
the same image you used in the 5 = "Colorful Halo"
tutorial. Open that image in PSP and add a "New layer"
over the previous one. You did save a copy of that ready image
in the Paint Shop Pro native format (".psp"), didn't
you? If not, what a pity! You will have to redo all your work
if you do not want to lose the image resolution quality... But
if you saved that image, in that way, follow the next steps.
2
Open the original
image (the cat, in our example) that generated the tutorial
5, "Copy" and "Paste as new selection" (being
in the layer recently created) exactly over the cat (central
figure, without the halo) taking care to exactly overlay the
two images - to obtain a perfect result, uses the tool "Zoom"
and amplify one of the image upside several times, facilitating
like this to fix an image exactly over the other one, pixel
by pixel. Look the image:
3
Return your work
to a normal viewing. In the Layers palette, disable the viewing
of the layer containing the cat with the colorful halo. Add
a new layer and drag it under the layer with the cat without
halo (that you have recently paste), and fill it with the same
color, or texture, you used as a background for the cat with
Halo.
4
You will have now, visible, a cat without halo over
the same background than the previous one. And will have also,
invisible, the layer of the cat with the colorful halo.
5
Leave it exactly
as it is, and click in "File/Export/JPEG Optimizer".
Save your work, with a distinct name from the previous one,
both files in the same folder.
6
Summarizing:
you have two images stored in the same folder - one with a colorful
shadow and the other one, identical, but without any shadow.
In
Dreamweaver
1
Insert
the image without halo in the desired place, on your HTML document.
Select the image and, at Properties, define a name for it. Example:
cat.
2
In Behaviors,
click the button " +" to open the Behaviors menu,
and click on "Swap Images".
3
In the window
that opens, already with the image name you previously defined,
click "Browse" in the "Set source to" field,
just to find the shadowed cat image, that will be used in the
"swap images" action.
4
Select "Preload
Images" and "Restore image on mouse Out". OK.
Set to your page the same background color from your images
(or the same background texture), if you want to obtain a similar
effect from what it is presented in our exercise. See below
an example with less shadow definition:
"put the mouse over the
image"
Visualize
your web page in your browser (press F12) to test the effect.
Hands in work and...
Have fun!
|
