• screenshot

    Display a single watermark in any corner or center. Mark is proportionally scaled at all images sizes.

  • screenshot

    Watermarks may also be repeated across the entire image. Scale, opacity, padding, everything is editable.

Image Watermarks applies custom watermarks to images on your Koken site to help secure and protect your work. You may upload your own watermark image and customize a variety of options including scale, position, opacity, tiling, as well as image size targeting to control which images receive watermark treatment.

Why use a plugin?

You could apply a watermark to your images before uploading them to Koken, but this plugin has a few notable advantages.

1) Completely non-destructive

Watermarks are applied only to images generated by Koken, not your uploaded originals. That separation allows you to quickly replace, edit or remove watermarks from site images anytime you want.

2) Image targeting

Apply watermarks only to images at or above a particular size. This means your smaller, less sensitive images can remain watermark free while your larger, more sensitive images receive watermarks.

3) Set it and forget it

No need to apply a watermark each and every time an image is uploaded. With this plugin enabled all new images are watermarked automatically.

4) Unlisted, watermark-free images for clients

Watermark protection may be turned off for all unlisted images so clients and important contacts may see images without watermarks. Then if you later decide to publish an image publicly a watermark is assigned automatically.

Next: Setup

Follow the steps below to begin using the Image Watermarks plugin.

Enabling the plugin

After the plugin has successfully downloaded and installed you will be redirected to Settings > Plugins inside Koken. Click the plugin's Enable button to activate the plugin.

Setup

Click the plugin's Setup button. The following screen includes these options.

Apply to

(Default: No images) Controls which images receive watermarks. This is set to "No images" by default so no images are affected when the plugin is first enabled. Change this "All images" to apply watermarks to all images or select a minimum size. The rest of the plugin's settings appear when any value other than the default is selected.

Watermark

Image that will be used for the watermark. The plugin includes a default copyright watermark you may use or replace with your own by uploading an image. (Note: click on "Usage" in the left column of this article for image creation instructions).

Size

(Default: Proportional) How watermarks are scaled when applied. This is "Proportional" by default so watermarks are sized relative to the dimensions of each image they're applied to. You may set this to "Fixed" if you want watermarks to always be the same size in every image.

Scale

(Default: 25%) Displayed when Size is set to "Proportional". Controls how much area the watermark will fill.

Opacity

(Default: 20%) Transparency of the watermark image when applied. This is semi-transparent by default.

Padding

(Default: 5%) The amount of space around the watermark image. This is used with both single and tiled watermarks (see below).

Tile

(Default: Off) Steps and repeats the watermark across the entire area of the image. Unchecked by default so the watermark is only applied once.

Position

(Default: Bottom right) Where in the image the watermark is placed. This is bottom-right by default, but you may change this to the other corners, sides or center of the image.

Visibility

(Default: On) Controls whether watermarks are applied to unlisted and private images. This is setup by default so watermarks are applied only to public images visibile to the general public and search engines.

Save

Click Save to save the plugin's settings. Watermarks be applied to all selected images (as set by Apply to). If you are editing an existing watermark, new site images will be generated to reflect your changes.

Creating a watermark image

Need tips for creating your first watermark image? Click the link below to learn how.

Next: Usage

Usage

We'll now walk you through the recommended steps to create your first watermark image. For this walkthrough we'll be using Adobe Photoshop, though you may use Photoshop Elements, Illustrator, or pretty much any bitmap/vector editing software that supports transparency and PNG file export.

1) Create watermark image

Fire up Photoshop and select File > New to create a new image. Because the watermark will be proportionally scaled for different image sizes we'll need a watermark that's sized for the largest possible image dimension. That way the watermark file will always be downscaled for optimum image quality.

To assign a width and height we recommend taking the largest image preset size in Koken (2048px) then multiplying that by the value of Scale in the plugin's settings.

For example, if Scale is 15%, then 2048 * .15 = 307.2. We'll round that up to 308. Our watermark will be horizontal, so we set Width to 308, a smaller value for height (can always trim it later), then "Transparent" for Background Contents.

New image

Create a new layer in the Layers panel (Window > Layers), then insert text, shapes, or whatever you like. For color, white typically works best.

Artwork

That's looking pretty good, but let's enhance it with a touch of drop shadow. That'll help make the watermark stand out a bit more when made semi-transparent. To assign a drop shadow, select each artwork layer in the Layers palette, click the layer styles button at the bottom, then select Drop Shadow.

Drop shadow settings

This is purely a matter of personal taste, so style the shadow however you want. We only want a hint of shadow, so we assigned these values:

Drop shadow settings

2) Export PNG

When ready, turn off any visible background layers in the Layers pallete and export the artwork as a transparent 24-bit PNG. In Photoshop you'd do this by selecting File > Save for Web, selecting PNG-24 as the file type, then checking the Transparency option. Save the file somewhere on your desktop.

Save watermark

3) Upload PNG

Inside Koken click on Settings in the main navigation, Plugins in the left column, then the Setup button next to Image Watermarks. If you don't see a Setup button, click the Enable button first.

Edit the Apply to setting at the top of the plugin setup screen to anything other than "No images". We're selecting "800px or larger" so only large images are affected. After selecting a size the rest of the plugin's settings will appear. The Watermark setting includes a default copyright image. Replace the image by clicking the Upload image button underneath. Select/upload your exported PNG.

Upload watermark

4) Edit settings

The plugin includes a range of other settings including position, opacity, size, and more. Click the "Setup" link in the left column of this article for an overview of each.

5) Save

Click the Save button to save your edits.

6) View assigned images

Click on View site at the top of Koken and navigate to any images that are at least the size assigned to Apply to in the plugin's settings. You should see your watermark! Feel free to go back into the plugin's settings to fine-tune the watermark's appearance.

Watermark example

Next: Disabling

Removing watermarks

Need to remove all watermarks? Go to Settings > Plugins inside the console and disable the Image Watermarks plugin. New, watermark-free images will be created and cached the next time they're requested.

Version 1.1.2 Released 1 year ago

  • Added option to only watermark selected images.

Version 1.1.1 Released 2 years ago

  • Resource limits are now inherited from Koken's image processing settings.

Version 1.1.0 Released 2 years ago

  • Updates for Koken 0.16.

Version 1.0.3 Released 2 years ago

  • Make sure watermarks are retained when plugin is updated.

Version 1.0.2 Released 2 years ago

  • Better detection of when to apply watermarks for retina screens.

Version 1.0.1 Released 2 years ago

  • Improved quality for watermarks when using the GD image processing library and opacity is less than 100.
  • Improved positioning for watermarks when using the GD image processing library and opacity is set to 100.