Please make any donations to
Children's Home Society
Software
Message Board
Startup Apps
Backgrounds
Other




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?