Creating a Watermark

Continuing from my last post, here’s some elaboration on how to turn something into a watermark for your web page:

The most interesting way to make a watermark, besides getting creative with text and making it pseudo-transparent, is to cut out a picture in an interesting shape. If you’re just going to do this once, after importing your picture of choice, you can use any selection tool you prefer (magic wand, color range, magnetic lasso, pen).

After getting the selection shape you want, just make a new layer out of that selection by pressing ctrl+j (option on a Mac), then delete the old layer. Whatever you didn’t select previously should show up as the checkered backdrop, which indicates transparency.

Don’t forget: if you want your watermark to be more than just a cut-out, make modifications to your picture before you make the selection for the cut-out. You can make the usual adjustments to perk up the picture, or you can give your watermark a more 3-D effect by using effects like emboss (under filter->stylize). Keep in mind that emboss generally works better on a black and white picture, because it picks up and exaggerates the natural contrast, so you might want to change your picture to black and white before using the emboss effect.

When you go to save your watermark, be sure to save it as a .gif (CompuServe GIF). Jpeg is nice, but it won’t save that transparency data; instead, it’ll just flatten your image for you and fill in the empty space with white. If you save as a gif and make sure, in the dialog box following the save location one, that the transparency box is checked, you’ll be able to maintain than background transparency, which will let you throw your watermark any where without it looking odd or out of place.

When it comes to putting your watermark on your website, there are a few style issues you’ll have to take care of. First, you’ll have to set your image’s position to relative (position:relative;) so that it can sneak around your web page without derailing the rest of your organization. A watermark is supposed to be in the background, after all.

This also means you’ll have to specify where it should move in relation to where ever it normally would have been by using (top:[x]em;left:[y]em;). These numbers can be anything, including negative numbers (which I found myself using often). Determining exactly how far you’ll have to displace the image isn’t immediately obvious, and I mostly just experimented around with the numbers until I got what I wanted.

CSS also enables opacity (opacity:[z];). Z can be anything from 0 to 1, with 1 being fully visible and 0 being invisible. I found that around 0.4 was good for a watermark as long as text wasn’t in front of it, in which case 0.1 didn’t interfere but was still visible, although almost as an afterthought.

Finally, if you want to ensure that your watermark doesn’t interfere with the rest of your page, you might want to add (z-index:[a]). A can also be positive or negative, and in this case you actually want it negative, so your watermark is properly submissive and allows other elements to overrule it. To really be certain, give your nearby, important elements a positive z-index.

You can stick these CSS style elements into your code however you like, but I found inline the easiest in this case.

So here’s a sample of what your watermark code might look like:

<img src=”images/mark.gif” alt=”” style=”position:relative;top:-9.3em;left:40em;opacity:0.3;z-index:-1;” />

-Jon Kimmel

~ by blackburnkimmel on February 3, 2010.

One Response to “Creating a Watermark”

  1. If you save as a gif and make sure, in the dialog box following the save location one, that the transparency box is checked, you’ll be able to maintain than background transparency, which will let you throw your watermark any where without it looking odd or out of place.

    The amount of commas in this sentence made it a little confusing. Also, I’m pretty sure that “than” in front of background transparency should be a “the.”

    Everything else was very clear. I definitely would be able to follow this how-to. A screenshot of the final watermark might have been nice.

Comments are closed.

 
%d bloggers like this: