Watermarking Images With Workflow

Although Workflow doesn’t currently have a built-in action specifically for watermarking, there are a couple of ways to accomplish this with just a little preparation.

Using the Edit Image action

Workflow has a capable image editor built-in already, powered by Aviary, which is invoked using the Edit Image action. There’s a text tool within Aviary that provides control over the placement and style of text in an image. The only drawback is that the text cannot be automatically specified–it has to be entered each time.

A workaround is to include a Text action with the text to use, then have Workflow copy it to the clipboard before the rest of the workflow Is run, as shown in this example workflow. All you then need to do is paste it into the editor’s text input field.

This method works great if you just need to occasionally watermark an image. If you want to fully automate the process and/or work with multiple images, there is a better solution.

Using the Overlay Image action

It’s possible to create a workflow that can automate the entire process of adding a watermark to images using the Overlay Image action, a more recent addition to Workflow’s collection1. This particular action is very customizable, providing options for the dimensions, location and angle of the overlaid image2.

Although Workflow cannot generate an image file from text, we can just create one in advance and use it within the workflow. I created a watermark in Pixelmator and saved it as a transparent PNG (delete the background layer before exporting). I recommend making the canvas size (and text) suitably large, around 2000-3000px wide, so that it can be used in images of all different sizes (Workflow will resize the image down accordingly).

With a watermark already created, it’s simply a matter of overlaying the watermark onto the target image. At this point, we could use the Overlay Image action’s option of Show Image Editor and manually drag and resize the watermark, but we can do better than this. Instead, Workflow can get the height of the target image, then set the size of the watermark to a proportional height.

In this example workflow, I’ve specified that the watermark be placed on the lower-left, at a height of 10% of the target image. The width is automatically scaled, and the opacity is set to 90%. The watermark is stored in the /Workflow directory on iCloud Drive, as workflow.png.

The entire process is fully autonomous and works with multiple images. You could take this workflow even further and include options for selecting whether a black or white text overlay should be used, as well as varying the angle and location of the text (if you prefer a full-size diagonally-placed watermark, for example).

  1. This action was added to Workflow 1.4.4.Β 

  2. It basically made my Screenshot Builder workflow obsolete.Β 

Some Workflows for Working Copy

Back in March, I wrote about how I manage updates to this website with Git and iOS, thanks to the app Working Copy. I only touched upon the URL scheme that the app provides, as I began writing blog posts directly within the app.

Since then, I’ve created a few workflows based upon the apps’s URL scheme to better serve my needs (I now use Ulysses to write blog posts), and demonstrate how powerful an app Working Copy is.

Basic workflows

  • Initialize a new repository: Initializes a new repository containing an empty README
  • Pull all repositories: Performs a pull command to fetch and merge changes (from origin) on all repositories within Working Copy
  • Pull repository: Performs a pull command to fetch and merge changes (from origin remote) for a specific repository within Working Copy

Ulysses blogging workflow

If you’re wanting to replicate some of my process of writing in Ulysses and then sending that content into Working Copy, you can download a copy of my current workflow. The workflow is an Action Extension that is run from within Ulysses (making sure that the exported text is being viewed in Markdown format). A few things to consider:

  • This has been specifically tailored to my blogging setup, so you’ll very likely need to make some fundamental changes, and much of this workflow may not be necessary. However, this workflow can still serve as a good starting point for a Ulysses & Working Copy combination.
  • The title of the blog post should be in a Markdown H1 tag, as this is sets the name of the blog post when exported but is stripped from the text as its processed by the workflow1.
  • Speicfy whether the blog post is a linked post or a normal one. If it’s a linked post, all the links are displayed in a list. The one selected is used as the post’s link.
  • Images used within a blog post aren’t currently supported. I haven’t got around to this just yet as my existing image workflow that operates outside of Ulysses is still something I use, and I rarely use images within blog posts. This is something I’ll be working on, eventually.

With that, you can still test this workflow and see exactly what it does by creating an empty repository within Working Copy and updating the repository name within the workflow.

  1. This is only necessary if the title of your blog post is handled by your blogging platform in a specific way. If you want to retain the title, or you don’t use one within the body of your post, you can remove this entire section. Credit for the Regular Expression syntax goes to Federico Viticci.Β