Thanks for using UD Image Sign & Watermark . It lets you add branded image and text watermarks to photos directly in your browser.
The app runs entirely client-side—no uploads or servers—so your images and watermarks stay private.
You can apply presets, drag positions manually, adjust size, opacity, rotation, and save results individually or in bulk.
This is something that I put together for my own use, and since I primarily use a PC, it tends to be PC centric. But except for not being able to drag watermarks, it should work just fine on your mobile devices.
I think these instructions say it all, but let me know if something doesn't make sense, or doesn't work, or looks like crap.
Thanks, Uncle Dave
Contact me at the place formerly known as Twitter: @deebeeeff if you have any questions or find any bugs. (Spoiler alert: There are some!)
So You Won't Go "Huh?"
A lot of things have changed since I wrote the instructions below and I haven't changed them all.
So here is everything I can think of.
The Floating Settings control has had Floating Image Settings added. You can switch back and forth between them. You can hide the floating controls with the "Hide Me" button.
To show the floating controls again, use the "Show Floating Settings" button next to the "Upload Images" and "Paste Image" buttons located at the bottom of the fixed controls section. (This will only appear when the floating controls are hidden.)
When you show the floating controls again, they will return to the location and control section they were in when you hid them.
Hey! With so much function in the floating controls now, you can pretty hide both of the fixed settings and just use the floater.
The Floating Text Controls mirror all of the fixed controls except the text file and text collection management controls.
The Floating Image Controls mirror all of the fixed controls except the image file and and image collection management controls.
Floating Controls now each have checkboxes to toggle Text Watermark Settings and/or Image Watermark Settings on and off. These match the checkboxes in the fixed controls.
Remember that when you start the app, if you haven't used it before, your textbox will be empty and the only image watermark you will have is the white box.
I have also added the Presets Position Dropdowns to the floating controls. These will only appear when there is an image loaded.
Hold down -/+ controls will increase or decrease without having to keep clicking it.
Tiled Watermark: We have added a feature called Tiled Watermark for text watermarks only.
This allows you to tile an entire image with a watermark.
The default is 25% opacity and 315° angle, with Script font, normal font weight and style.
All text controls work for Tiled Watermark except anything having to do with shadow direction, background or margins.
Also, the spacing between tiles is based on the font size and not independently adjustable.
When you check the Tiled Watermarks check box, all of your current text settings will be saved, to be restored when you uncheck it.
We now have user-defined presets.
When you upload an image, you will see the preset selection dropdown appear in the image area and at the bottom of the modals.
This dropdown includes both predefined presets, and user defined presets.
User defined presets stay even between sessions until you clear the cache. Also, you can import and export preset collections (of the user defined presets only) into a .pudw file.
There are three types of presets: text only, image only, or both.
You can add and remove the currently selected preset (except for the predefined ones) . This does not add them to or remove them from the collections.
Text Presets Save:
Size
Rotation
Margins
Opacity
The corner selected
The state of the color controls, with either auto or the current color setting
Badge shape (round or rectangle)
Drop-shadow direction
Textless information if textless is selected
Image Presets Save:
Size
Rotation
Margins
Opacity
The corner selected
Both: Saves all of the above information.
Things that it does not save: the actual text in the text box, and any font or text styling (these can be saved separately); the actual image badges; any tiled watermark settings.
Text Watermark Settings
Click image for full-size view
When you start UD Image Sign & Watermark for the first time, you will see Text Watermark Settings checked. Unchecking this will disable and grey out all of the controls relating to text watermarks.
On the top line you will see a HIDE button, which will collapse the text watermark controls; when collapsed, a SHOW button will appear. HIDE/SHOW do not turn that secton OFF/ON. All settings are preserved during collapsed state.
Creating, Styling, and Saving Text
The best way to start to understand how this works is to go down to the box next to the word Text and enter in some text.
We will use "Uncle Dave" for our example.
Feel free to choose a font, Bold, or Italics. (DS is for toggling drop shadows, which we will discuss later.)
If you select "Add Current Text" it will add the text in the text box to the dropdown.
Text you add to the dropdown will stay there until you delete it with the Delete Current Text button or reset your browser cache.
Dropdown displays the text, font real name, weight, and style.
So when I entered Uncle Dave, Script, Bold, and Italics it shows "Uncle Dave (Brush Script MT normal/normal)".
Remove All Text Entries removes all text entries in the dropdown, but does not affect saved collections.
Click image for full-size view
Export Text Collection:
Selecting this will export all of the text entries in the dropdown into a file with the extension .tudw, which you can save.
Only the text, font, weight, and style are saved. Other text information is not saved.
Import Text Collection:
Allows you to import any saved .tudw file.
If you have multiple .tudw files that you want to import, that is fine, but if you have exact duplicate entries, such as "Uncle Dave (Brush Script MT normal/normal)" in different .tudw files, it will only include it once in the dropdown.
Text Color & Opacity, Background (BG) Color & Opacity, Drop Shadow (Shdw) Color, Drop Shadow Direction, and Drop Shadow Toggle
These settings are global and affect all watermarks in all images being previewed.
Auto and Manual Modes
In the main Text Watermark Settings, you will see three checkboxes labeled Auto Text, Auto BG, and Auto Shdw. Next to each label you will see a box which will display a checkerboard when in auto mode (checked) or a color when in manual mode (unchecked).
With larger screen sizes, primarily on a desktop or laptop device, you will also see a "floating" draggable popup that includes these controls. This can be moved anywhere on the screen, even when it is disabled and transparent.
Auto Mode Behavior
Auto Text: The text will be either black or white, depending on a sampling of the colors of the image area underneath it. So if the text is hovering over an area of the image that is primarily yellow, the text will be black.
Auto BG: The background color will change depending on a sampling of the colors of the image area underneath it. So if the text is hovering over an area of the image that is primarily yellow, the background will be yellow.
Auto Shdw: The shadow color will either be white for black text or black for white text.
Important: When a text watermark is layered over an image watermark, the image watermark is treated as part of the image for the purpose of color sampling.
Manual Mode
You can toggle auto mode on or off (manual) by checking and unchecking the checkbox. You can also enter manual mode by clicking on the checkerboard.
In manual mode, you can select the colors for Text, BG, Shdw, or any combination, by either using the color chart in the dropdown, or by using the eyedropper color picker.
Note that the Auto mode behaviors mentioned above remain in effect for any color not in manual mode. So, for example, if you manually selected a white background and left text and shadow on Auto, and then moved it over a darker area, you would have a white background with white text and a black shadow.
Manual colors selected remain "hidden" behind the checkerboard even when in auto mode.
Drop Shadow Direction & Drop Shadow Toggle
Next to the Text Shdw color box is a dropdown menu with eight direction options:
↖ TL - Top/Left
↑ T - Top
↗ TR - Top/Right
→ R - Right
↘ BR - Bottom/Right
↓ B - Bottom
↙ BL - Bottom/Left
← L - Left
Next to the Drop Shadow Direction dropdown is a button labeled DS. This turns the drop shadow on and off.
Drop Shadow color and direction controls still work when drop shadows are toggled off, you just won't see it.
With larger screen sizes, primarily on a desktop or laptop device, you will also see a "floating" draggable popup that includes these controls. This can be moved anywhere on the screen, even when it is disabled and transparent.
Text Opacity (Text Opa.), Background Opacity (BG Opa.), and Background Shape (BG Shape)
Text Opacity (Text Opa.)
Controls the opacity of the text.
This also controls the opacity of the text shadow.
You can use the slider, the +/- buttons, or enter a number directly.
Background Opacity (BG Opa.)
Controls the opacity of the text background.
You can use the slider, the +/- buttons, or enter a number directly.
Background Shape (BG Shape)
Toggles the shape of the text background from Rectangular to Round.
Due to some system limitations, the circle background will not honor the upper and lower edges of the image.
With larger screen sizes, primarily on a desktop or laptop device, you will also see a "floating" draggable popup that includes these controls. This can be moved anywhere on the screen, even when it is disabled and transparent.
Working with Auto and Manual Modes
Experiment: Play around with these settings to see how they work. If you are on a display where you can drag the text around, do it and you will see the colors change. Even if you are on a mobile device, changing to different presets should allow you to see how the changes happen.
Adjusting opacity of text (Text Opa.) and background (BG Opa.) have no impact on actual auto colors as they are based on the underlying image colors.
If things aren't looking right, make sure you have the opacity settings where you want them, and make sure the drop shadow is toggled on or off, however you want it.
Drop shadow opacity changes with the text opacity.
Drop shadow width is based on text size, and scales slightly up with larger text sizes.
There are times when using all three auto settings that you might think the drop shadow isn't working because it blends into the background. Make sure DS is on, and then manually select a brighter color just to reassure yourself that it is working.
The floating Text Color Settings can be hidden with the Hide button and reactivated with the Show Floating Text Color Settings button (appears to the right of the BG Shape controls only when color picker is hidden).
If you want different watermarks for multiple images, just make it for the first one, save and close the image, then change it for the next, and so on.
Text Positioning, Size, Rotation Using Dropdown and Sliders
This section reviews how to position, size, and rotate your text using the dropdown menu and the sliders. All of the settings here are global and will affect all images being previewed.
Positioning Using The Dropdown
Use the dropdown next to the text checkbox. (Image dropdown shown.) You will have five options:
Bottom Right
Bottom Left
Top Right
Top Left
Center
With the exception of Center, these all respect the Margin X and Margin Y settings.
Margin settings are always from the nearest corner.
This setting is also included in the Floating Text Settings control.
Click image for full-size view
Positioning Using Margin Controls
If you have chosen one of the corner positions from the dropdown, you can fine tune the position with the Margin X and Margin Y controls.
You can use the slider, the +/- buttons, or enter a number directly.
These are measured in pixels (px) from 0 to 100.
Size
Text size is calculated as a percentage of the width of each image.
Examples if set at 40%:
A 1024px wide image will create an approximately 135px font size.
A 1344px wide image will give a 177px font size.
A 768px wide image will give about 101px font size.
Notice that although the text size is set at 40%, which applies to all current images, the actual text watermark footprints and font sizes vary depending on the width of the image.
You can use the slider, the +/- buttons, or enter a number directly.
Rotation
Rotation is in degrees (°), straightforward.
You can use the slider, the +/- buttons, or enter a number directly.
Textless Badge
At the bottom of the Text Watermark Settings box, you will see a checkbox to turn on and off the Textless Badge settings.
Textless Badge settings will be disabled when there is text in the text box. When there is no text in the text box, you will see them become enabled.
Checking the Textless Badge box will enable the Textless Badge Size controls. Size can be changed with +/-, slider, or direct input.
The Textless Badge uses the text background color (Auto BG) as its color. Which means in Auto BG mode, it will adjust its color based on the underlying pixels, and when you have manually selected a BG color, it will use that.
All of the text controls--with the exception of Text Size, Text & Shadow Colors, and Text Opa.--will work on the Textless Box.
🚨⚠️If your Textless Badge isn't changing size, make sure you are using its slider and not the Text Size slider...like I do about 75% of the time.
🚨⚠️If you are not seeing the Textless Badge:
1) Make sure it isn't too small. A 4 px badge is tiny.
2) Remember that a Textless Badge takes on the color of the background if it is in Auto mode. So a Textless Badge on an all white background will be all white. Manually change the Auto BG color to see it.
Note: Because there is no text, you will see no location or dimension information below the images as you would with a regular text badge.
Notes
With larger screen sizes, primarily on a desktop or laptop device, you will also see a "floating" draggable popup that includes the Size, Rotation, and Margin X/Margin Y controls. This can be moved anywhere on the screen, even when it is disabled and transparent.
One quirk: if you have previously set the dropdown to Top Right, for example, and then dragged the text instead, going back and selecting Top Right will do nothing. You need to either select a different dropdown setting and then return to Top Right, or click the Reset Position button underneath the image and then select Top Right.
Rotated text does some weird things because of the bounding box for the text, causing it to go off the screen. Use the margin controls (or dragging, discussed later) to correct the placement.
Image Watermark Settings
First image is with loaded image watermarks. Second image shows the default single watermark. Click images for full-size view
When you start UD Image Sign & Watermark for the first time, you will see Image Watermark Settings checked. Unchecking this will disable and grey out all of the controls relating to image watermarks.
🚨If the box is unchecked and grayed out (disabled), select any image watermark and it will turn on.
On the top line you will see a HIDE button, which will collapse the image watermark controls; when collapsed, a SHOW button will appear. HIDE/SHOW do not turn that secton OFF/ON. All settings are preserved during collapsed state.
Choose an Image Watermark – The Image Watermark Grid
When you start UD Image Sign & Watermark for the first time, you will see a single white box in this grid.
If you start it with
https://fergusonrecipes.com/udwm/udwm.html?guest=1, in addition to the white box, which is always there, you will see some preset colored backgrounds.
If you don't wish to see them, leave off the ?guest-1.
If you are curious, you can also begin with ?owner=1, which will show you my current set of preset image watermarks.
The white box and any preset watermarks cannot be saved or altered.
Adding your own image watermarks.
Click the "Upload Watermark" button.
Including the white default image watermark and any presets, the total number of image watermarks is 100.
Just about any image file type will work, but for transparency, PNG or WEBP are best.
File sizes over 500KB will be rejected and a warning will appear.
Images will be scaled; most of the ones I use are about 840px x 840px.
Uploaded image watermarks have a red border in the grid, and when you hover over them they will show a red X in addition to the preview.
Clicking on the red X will delete it from your grid.
If the image watermark is part of a collection, clicking on the red X will NOT remove it from the collection.
Uploaded image watermarks remain until you delete them individually or all at once by clicking the Remove All Custom Watermarks button. Or until you clear your browser cache.
Removing image watermarks from your grid will NOT remove them from any collections they belong to.
Exporting Custom Image Watermark Collections
Clicking the Export Custom Collection button will allow you to save ALL currently loaded custom watermarks into a .iudw file.
Any preset watermarks, which you probably won't have, cannot be added to a collection.
If you want to create several different custom collections:
Upload only the image watermarks you want in that collection.
Save it.
Delete them.
Upload a new set of image watermarks.
Save it with a different name.
Importing Custom Image Watermark Collections
Clicking on the Import Custom Collection button will allow you to load any .iudw file.
Unlike text collections, the app doesn't check for duplicate image watermarks. You could load the same .iudw file 5 times and you will have five of each of all of the image watermarks in that collection.
Importing a collection and then deleting any of the image watermarks in it that you don't want, and then saving it with a new or different filename is a good way to work with collections.
🚨If the Image Watermark Settings checkbox is not checked and there is no image watermark displayed next to it, clicking on any image watermark will check the box and activate Image Watermark Settings.
Image Watermark Settings – Position Dropdown, Size, Opacity, Margin X, Margin Y, Rotation
This section reviews how to position, size, rotate, and change the opacity of your image watermarks using the dropdown menu and the sliders. All of the settings here are global and will affect all images being previewed.
Hovering over image watermarks (or long press in mobile) will show you a preview of the watermark.
Positioning Using The Dropdown
Use the dropdown next to the Image Watermark Settings checkbox. You will have five options:
Bottom Right
Bottom Left
Top Right
Top Left
Center
With the exception of Center, these all respect the Margin X and Margin Y settings.
Margin settings are always from the nearest corner.
This setting is also included in the Floating Image Settings control.
Positioning Using Margin Controls
If you have chosen one of the corner positions from the dropdown, you can fine tune the position with the Margin X and Margin Y controls.
You can use the slider, the +/- buttons, or enter a number directly.
These are measured in pixels (px) from 0 to 100.
Size
Image watermark size is calculated as a percentage of the width of each image.
You can use the slider, the +/- buttons, or enter a number directly.
Rotation
Rotation is in degrees (°), straightforward.
You can use the slider, the +/- buttons, or enter a number directly.
Opacity
This is also straightforward.
You can use the slider, the +/- buttons, or enter a number directly.
Notes
One quirk: if you have previously set the dropdown to Top Right, for example, and then dragged the image watermark instead, going back and selecting Top Right will do nothing. You need to either select a different dropdown setting and then return to Top Right, or click the Reset Position button underneath the image and then select Top Right.
Rotated image watermarks do some weird things sometimes, causing part of it to go off the screen. Use the margin controls (or dragging, discussed later) to correct the placement.
When you select the Deselect & Reset Watermarks button, discussed later, you can only restart the Image Watermark Settings by selecting an image watermark.
Working With Images
First image shows three images. Second image closeup of an image. Click images for full-size view
Of course, you can't do anything with UD Image Sign & Watermark if you don't have images, so let's load some. Images will appear at the bottom of the screen.
Most of the image-specific controls and information will only appear after you have loaded at least one image.
Loading Images
Depending upon the device you are using, you can load images in a number of ways.
Click on Upload Images and…guess what! You can upload images. I do not know if there is an actual limit, but there is a practical one as the images get smaller the more you load.
You can use the Paste Image button if you have an image on your clipboard.
This is especially useful for mobile devices.
You can drag and drop images.
And on PCs, you can use CTRL/CMD-V to paste image(s).
What Happens When You Load Images
When you load your first image, some other things will appear on the screen for the first time.
Preset dropdown, which we will discuss later.
CTOP button
CTOP will only be active if both the Image Watermark Settings and Text Watermark Settings boxes are checked.
CTOP stands for Center on TOP - it puts the currently loaded text watermark on top of the currently loaded image watermark.
There are occasions, where the image watermark is too close to a margin, that the text will not center on it if doing so would push the text off the underlying image.
Magnifier button
Along with the letter 'm', this toggles the drag magnifier, which, you guessed it, we will discuss later.
Deselect and Reset Watermarks button
This resets all of the watermark settings, but doesn't get rid of anything. So all of your custom stuff is still there.
This does uncheck both Image Watermark Settings and Text Watermark Settings.
To "restart" the Image Watermark Settings, you have to select an image watermark.
Then you can turn it on or off with the checkbox.
And, of course, you will see the image(s).
Finding Your Way Around The Images
Buttons Below Each Image
Reset Position
This button resets both watermarks to the positions indicated by their respective position dropdowns.
This helps when you have been dragging watermarks around the image.
Preview
Opens up a preview of the image with the watermarks.
This can also be done by clicking on an image (non-touchscreen only).
On some mobile devices, previewing an image is the only way to save an image to your photo library.
When in the Preview mode, clicking away from the image, or clicking the X, will close it.
Save
This saves the selected image.
On some mobile devices, this saves it to files instead of the photo library.
Save & Close
This saves and closes the image.
🚨A dialog will pop up asking if you want to do this and reminding you that if you proceed and then cancel the save, your watermarked image will have been unloaded.
This is especially important on mobile devices that want to save your files to files instead of the photo library.
Close
This closes the image without saving.
A dialog will warn you that you are closing without saving.
Information Below Each Image
The filename and in () next to it the image dimensions.
The x/y image position, in pixels, from the nearest corner.
If image watermarks are off, you will see a "-"
If the watermark has been centered using the Center option in the dropdown, you will see "Center" here.
The x/y text position, in pixels, from the nearest corner.
If text watermarks are off, you will see a "-"
If the watermark has been centered using the Center option in the dropdown, you will see "Center" here.
Example: Text position: 0x,0y | Text size: 127 × 69px (27%, ≈91px font size)
The text size, in pixels, with a font size equivalent.
If text watermarks are off, you will see a "-"
Example: Text position: 0x,0y | Text size: 127 × 69px (27%, ≈91px font size)
Buttons Below All Images
Save All Images
This saves all selected images.
On some mobile devices, this saves them to files instead of the photo library.
Save & Close All Images
This saves and closes all images.
🚨A dialog will pop up asking if you want to do this and reminding you that if you proceed and then cancel the save, ALL of your watermarked images will have been unloaded.
This is especially important on mobile devices that want to save your images to files instead of the photo library.
Close All Images
This closes all images without saving.
A dialog will warn you that you are closing without saving.
What A Drag – Dragging Watermarks Around
Text watermark during drag. Image watermark during drag. Textless watermark. Click images for full-size view
This is one of the only things that is unique to each image.
Dragging A Text Watermark
While hovering over a text watermark, hold down ALT/OPTION and click the left mouse button.
Use one finger to drag text watermarks on touch screen.
You can drag your watermark over the visible area of your image.
For fine tuning, you will see a magnified image with crosshairs where you can place your watermark with precision.
To turn off the magnifier, use "m" or the Magnifier is On/Off button.
Dragging An Image Watermark
While hovering over an image watermark, hold down CTRL/CMD and click the left mouse button.
Use two fingers to drag image watermarks on touch screen.
You can drag your watermark over the visible area of your image.
For fine tuning, you will see a magnified image with crosshairs where you can place your watermark with precision.
To turn off the magnifier, use "m" or the Magnifier is On/Off button.
Dragging On Touch Devices
Dragging on touch devices can be tricky. Here are some things to remember:
Touching an image anywhere with one finger is going to move the text watermark to that location. So if you need to scroll the screen, touch outside of an image.
Do not press and hold on an image. Holding too long will turn on the device's own magnifier and select controls. Just annoying.
Just tap and drag. Or, if you know where you want the watermark to go, just tap in that spot with one finger or two and it will jump there.
For fine tuning, you will see a magnified image with crosshairs where you can place your watermark with precision.
You cannot turn of the magnifier on touch devices.
Resetting Dragged Positions
As stated above, the Reset Position button will move dragged watermarks to the positions shown in the respective Position dropdowns.
Dragging Tricks
Selecting drag for an option that is turned off will bring up the magnifier only.
For example, if the image watermark is unchecked, and you wish to use the magnifier to see the text watermark better, just press the CTRL/CMD and drag using the left mouse button.
You do not need to hold down the CTRL/CMD or ALT/OPTION buttons once the drag has started.
The Preset Dropdown
Hardcoded into the system are a few presets. They work for the type of images I use, and may or may not be useful to you.
.
First thing you will notice is that the "Overlay Gemini Diamond" is greyed out. This is because the Image Watermark Settings were turned off when I captured this image. The same would be true for the text watermarks if Text Watermark Settings were turned off.
The two settings that say "Overlay Gemini Diamond in theory are set to cover the Gemini logo on a square image. You might have to drag it a bit to make it cover the diamond on other image aspect ratios.
The rest are pretty self-explanatory.
May eventually set this up so you can create user preset settings, but that is not as easy as it sounded.
This is how I use UD Image Sign & Watermark most of the time. Both of the fixed sections collapsed with the Image Watermark Settings turned off. I drag the floating controls with the Text Watermark Settings to wherever I need it.
Click image for full-size view
Developed primarily as a PC web app. Works fine on my iPhone. Let me know if it looks like crap on your device.
.