Single-pixel Width Outlines with Anti-Aliasing

Good old XOR drawing can be anti-aliased in order to better meet today’s aesthetic standards. In GIMP terms:

Duplicate the layer, invert it and simply perform the outline drawing on the layer mask.

Examples:


(created with a slightly more elaborate scheme, see below)


What’s wrong with the current 3-line outline style?

Ideally, outlines should be much thinner than the desired resolution of the adjustment. Note how the tick marks of a ruler are much thinner in dimension than the resolution of the ruler. Roughly 1/10 of a millimeter thin marks for a ruler with 1mm resolution.

Now one could rely on the trend towards higher screen DPIs which will gracefully let the 3-line outline appear accurate enough in near future. Fair enough — but then a new problem will show up: when the three lines can no longer be visually distinguished, they will appear as an overlay of a single gray line. Which in turn does not provide enough contrast in all situations.

You may simulate the effect of high DPIs by stepping back while looking at the following test image. One of the vertical outlines will blend into the background:

(click to enlarge thumbnail)


Which color should the single-pixel outline have?

The ideal outline contrasts both the surrounding pixels and the underlying pixels in any situation. But which color gives the best contrast? The W3C recommendations for contrast between text and its background [1] seem close enough here — what is good for reading performance can only be good for outline recognition.

It turns out that pure black and white pixels yield the highest contrast ratios. Brightness contrast beats color contrast. Which nicely matches the GUI attitude to let the colorful pixels to the user, not to the application.

In summary, this gives the following steps:

  1. Calculate luminance of underlying pixels
  2. Threshold to black and white
  3. Invert
  4. Mask by desired outline

(Regrettably, contrast to surrounding pixels is not taken into account here)

What’s wrong with these black’n’white outlines?

The harsh contrast edges can be distracting. This problem apppears most prominently when moving an outline, in particular over smooth image regions which are just about as bright as the threshold. You may try this Flash demo:

or try moving the layer mask of the upper layer of the following XCF:

Still way to go, but it’s a start…

[1] http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html,
see also
http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/G18
http://snook.ca/technical/colour_contrast/colour.html

Advertisements

One Response to “Single-pixel Width Outlines with Anti-Aliasing”

  1. Nigel Mansell Says:

    I don’t even know what “xor” is but I don’t like this new thick selection line. I don’t recall how GIMP used to do it before, how it managed contrasting with the selected background, but regardless, it felt more precise and a single pixel was enough.

    Krita also uses a single pixel selection and follows some colour-changing pattern in order to improve contrast.

    I think that even a whole “mask” with the outside of the selection tinted somewhat would be preferable than this thick line. It would retain some of the contrast issues, it would be way “thicker”, but at least there would be a clear cut single pixel boundary, you know precisely where you’re selecting, “not roughly around there”.

    An intermediate solution that would perhaps work with the issue of progressively denser resolutions would be to have a thicker line (perhaps of a user-defined thickness, and/or varying automatically with display resolution and zoom) of a “single” colour (not really, ideally it would still change according to the background in order to keep contrast, the point is that it’s not a line with countour line of another colour), the selected part being the pixel exactly inside, not the middle pixel, which I think is the case currently, albeit I haven’t checked.

    Those grids in deformation tools also became tremendously annoying, you can’t barely see what you’re dealing with behind.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: