Overlaying Images and Watermarks
Let's add a few images to our video. You see above a beautiful view
from Fort Clinch in Jacksonville Florida. Appropriately, with the
Florida State flag watermarked in the lower right corner. The American
flag is in the top right corner. That dog in the lower left doesn't
quite look as if he belongs. That's because he is also an overlayed
image. Transparency has been implemented to make him look as if he
blends into the image. Let's go through the steps for making this
image.
•
Let's start by adding the Florida State Flag to
the lower right corner.
|
Click the Insert Watermark button. A small
ocean wave looking icon will appear beside your mouse cursor
to indicate the program is ready to insert the watermark.
|
|
Click the area where you would like the watermark to
appear. Bottom right in this case. Size and position the
window correctly by left clicking and draging the borders
to resize. Click and drag the center of the image to move it.
A red border appears
around the image area when a valid image is not available.
This border only shows up in the editor and not in the final
published image. If not for this red border, the image area
would be invisible when a valid image was not available.
|

The image properties dialog will appear if it is not already displayed.
Click the tab marked Image if not already selected.

Drop down the combo box and select Florida.bmp. This is the flag image.
If you have changed the directory
from the default folder (<install folder>\Watermark Images) then you
will see the files in your newly selected folder instead. You will have to
navigate back to the default directory to get to the Flag images. Do this
by clicking on the button marked with the three ellipses (...)
to the right of the Filename edit box.
•
We basically repeat this for the American Flag
in the upper right corner.
|
Click the Insert Watermark button.
|
|
Click the area where you would like the watermark to
appear. Upper right this time. Size and position the
watermark correctly. Go ahead and select USA.bmp from the
combo box on the image properties page.
|

So far so good right? You should be looking at two flags.
•
Now for the dog.
|
Click the Insert Image button.
|
|
Click the area where you would like the image
to appear. Lower left this time. Size and position the
image correctly.
|

Select TransDog.bmp from the combo box. This image has
all pixels that are not part of the dog colored blue. See the image below.

That is not just any color of blue. In a computer, colors are usually
described by three values representing the intensity of red, green and
blue. The numbers are from 0 to 255. 0 meaning that color is off,
and 255 meaning that color is on full. With these three components we
can build up to 256x256x256 or 16,777,216
different colors. When the colors
are specified, they are usually in the order of red, green, then blue. Or
RGB. The color of blue you see in this image has the value
of 0, 0, 255. Or as blue as you can get. You may be familiar
with the notation web pages use for color. Web pages represent color values
starting with the pound symbol # followed by three hexadecimal
numbers. Hexadecimal numbers are based on sixteen character symbols
0-9 and A-F instead of the ten symbols
0-9 of the more human-oriented decimal system. The web
page representation of this color blue would be #0000FF.
Web pages order the colors in the traditional RGB.
We will specify this color to be transparent. This means the computer will
not draw this color. Click on the Transparency tab in
the image dialog box.

Check the box marked Transparency to enable transparency.
Click the button marked Transparent Color to display the
color selection dialog box.

This is the color dialog box as it appears in Windows XP. At the
bottom right corner you see the color component values we were just
talking about. Red, Green, and Blue. To make the values dissapear,
you need to type in the exact values of
Red:0, Green:0, and
Blue:255.
When you close the dialog box you will see that the blue color around
the dog is now gone.
The two sliders marked Negative and Positive
are for situations when the color may not be exactly the same. You
may have seen how in the movies the shoot characters in front of a blue
or green screen. They then use computers to remove the color and replace
it with a background. JPEG's also distort colors when they compress them.
For images like these, the color isn't exactly #0000FF.
It may vary from #0000FF to #1114E4 or
whatever. You need to adjust the Negative slider to
allow colors of a slightly darker shade to also be left out of the final
image. The Positive slider does the same thing for colors
of a lighter shade. You can experiment with this now. If I increase
the Negative and Positive values, the dog
will start to disintegrate.


Interesting effect?
|