John Harrington - Protect Web Images

The procedure for what is referred to as "layering" your images is a little tricky but here is how it is done.

1. Load one of the files you want to post on your site, or which is already on the site. Open the image and choose "show layers" from the "window" drop-down menu in Photoshop. Select "IMAGE" and "IMAGE SIZE..." and jot down the pixel height and width dimensions. Below is a sample image.

2. Create a new transparent layer above the jpg by clicking on "NEW LAYER" from the"LAYER --> NEW" drop-down menu. You may also do this from the "LAYERS" window, by clicking the ">" arrow in the upper-right-hand corner of the "layers" window.

3. Create the text for the gif ( for usage call John Harrington, etc). Make certain that anti-aliasing is either unchecked, or turned off. If you don't do this, you'll have a hard time selecting all the text graphic in step 7.

4. Go to the layer with the image on it, and from the "SELECT" drop-down menu, choose "ALL". Then, from, the "EDIT" drop-down menu, choose "ALL."

5.Render the text layer. To do this, first from the "LAYER" menu choose "TYPE --> RENDER LAYER". This will turn the text from editable text into a graphic.

6. You should have two layers now, one with text and another with a jpg.

7. Use the color picker to select the color of the text.

8. Use the color range option under the selection menu to select all the black pixels. (or whatever color the text is.)

9. click on the text layer then do a PASTE. If the text is still visible, it's because not all of the text was selected. A ghosting of the text, or a slight outline will appear. Go back to step 3 and turn off anti-aliasing, or re-work step 7 to get all of the text color.

10. After pasting, this is what the layer will look like. (Note -- the frame was added as well as the text.)

11. Hide all the layers except the one you just pasted before exporting the gif. By doing this, when you choose "export --> GIF 89A" (for Photoshop 4 & 5 users) or "save for web" (for PS 5.5 users) only the visible layer will be saved. Also note -- choose "adaptive" as the pallate, or the image may be slightly visible in the browser.

12. Now return to your html application, as you've now created the protective image to overlay ontop of your existing image.

For the java portion use the following script, which should be placed just below the <body> tag in your html (Note, this will need to be on each page that is protected):

<!--

function ImageClick(){

alert("Please contact John Harrington at (202) 544-4578 for more information regarding this photograph. All photographs and text which appear on the John Harrington Photography website are the exclusive property of John Harrington and are protected under United States and International Copyright laws.");

return false;

}

//-->

</script>

Now, below is sample html code for an image which has a filename "actualportrait.jpg" which is 399 pixels wide and 417 pixels high. Note that the filename "portrait-p.gif" is the protective version of the portrait and only has the text in it, although it is still the EXACT SAME dimensions. I've chosen the "-p" designation to indicate that "p=protective" so I know which file is which.

</a>

</tr></td>

</table>

Here is how it works. If someone tries to click on the image, the message "please contact..." comes up. If they click and drag the image to their desktop, the graphic comes up with the text only, and not the total photo. The html file "pageyouareviewing.htm" is in-fact, the page that they are looking at when they click. This way, the link is circular, and re-loads the same page. You could alternately send them to the US Copyright office, or any other page you choose. You can see it in action below:

The above example is ONE WAY. Depending upon the time you have available, and how much energy you'd like to expend, you can vary the application. Here is a variation:

</a>

</tr></td>

</table>

Here's the argument for the above example:

When someone loads a page, the graphic which is the protective "please call..." will most likely load first. In this case, the graphic will appear BEFORE the background image, which will give away what you are doing.

It will take longer to load the image which is safe in the background. The addition of the LOWSRC="SP.GIF" means that FIRST the SP.GIF file (sp.gif is just a blank file which you can use as as a space) will load, which will eliminate the "image" text and ALT text (if any) as well as the image icon which appears in IE browsers.

Second, the background graphics will load. These are your actual pictures, so you'll want to force the browser to load them next. Using the LOWSRC="SP.GIF" means that after the SP.GIF file loads, the background images will load next.

Third, once ALL other graphics are loaded, then begins the loading of the protective gif files. Each is unique as it is based upon the image it is infront of. Note -- the protective image must be a gif as it must maintain it's' transparency.

Another alternative is where the image(s) you are trying to protect all have a white border, black border, or other standardized border. In this instance, you can choose to make ONE protective image, and place it in the space which is going to always be black/white/etc. For example, the image below has a red border, and has been manipulated as if it was an original square, horizontal, and vertical. If all the images on the site had a red border identical to this one, ONE protective image would work for all. This may be a time saver for you.

HORIZONTAL IMAGE

VERTICAL IMAGE

IMAGE EXAMPLE - SQUARE

Below is the GIF which will protect all of the above images. (Note - the "border=1" was added so you could see the dimensions of the image in this browser. You would not want a border, so you would choose "border=0" instead.)

Below is the image protection GIF overlaid ontop of the square version. It fits the vertical and horizontal spaces as well because there is a common redspace in all the images.