1px is not enough
The image below tells an interesting story. It is only a small interface fragment, but with careful inspection, so much can be known about it.
That’s a section of Safari’s titlebar from macOS El Capitan, but that’s not important — I’m not trying to single out a product or person. I just spotted a few anomalies and decided to investigate further.
If we add some contrast, the window titlebar becomes grainy, and the button becomes split into distinct blocks. Why?
Let’s take a look at the button first.
Toolbar button #
The sharp gradient steps indicate that there’s no dithering. Dithering attempts to increase the apparent colour depth, by error diffusion or adding patterned noise. Up close, and with contrast added, dithering typically looks like noise. When used well it can drastically increase the quality of gradients.
Core Graphics dithers gradients, so that makes it unlikely the button was drawn with code or created using a tool based on Core Graphics. It also rules out PDF assets and other Core Graphics rendered paths.
The button almost certainly had to be created in Photoshop, which can optionally disable dithering, or Illustrator, which has no gradient dithering.
We can also see that the gradient steps are evenly spaced — the gradient uses linear interpolation. The default for gradients in Photoshop is for spline interpolation, rather than linear interpolation (the smoothness setting in Photoshop controls interpolation).
There’s also another issue. Some values are missing. The gradient is entirely greyscale, and it jumps from #fcfcfc (252) to #fafafa (250). What happened to #fbfbfb (251)? To me, that looks like a rounding error. The kind of error that appears when a colour profile conversion is done, or due to some other compositing rounding error. Again, if I had to guess, I’d say Illustrator or Photoshop color management wasn’t set up correctly for screen design, because by default they’re not.
Which tool created the El Capitan toolbar button assets? If I had to guess, I’d say Illustrator, with Photoshop as my second guess.
Toolbar #
The toolbar is different. At first glance, it doesn’t appear to be dithered. But, the horizontal lines suggest that gradient dithering has been used with a 1 pixel wide repeating section. For dithering to have enough space to work, more pixels are needed.
For comparison, I’ve drawn some versions of the same gradient, dithered, with contrast increased. The 1px wide repeating version looks a lot like the shipping toolbar in El Capitan.
The pattern repetition is obvious until somewhere around 10px. Sure, we’re zoomed in and contrast has been increased, but why lower the quality of your work when you don’t need to? If you’re using 3 part images for dynamic widths or heights, the repeating sections will need to be 10px or larger. 1px is not enough, unless no gradients are involved.
Given the toolbar gradient is dithered, it couldn’t have been created in Illustrator.
Window toolbars and titlebars macOS can be different heights. Here’s screenshots of all the possible Finder toolbar heights, with contrast added.
If it was an image being stretched, I’d expect the dithering pattern to be consistent across all heights. But it’s not. The pattern is completely different at each size. If I had to guess, I’d say the gradient is being drawn with code, but for some reason a 1px wide section is being repeated.
macOS Mavericks’ toolbar gradients are different, and higher quality. The noise/dither pattern repeats every 128 points — more than enough to make the repetition hard to see, and more than enough to keep the gradient nice and smooth.
Dithering as a signature #
In some cases, it might be possible to know which design tool created an image, just by inspecting the dithering. The dithering used by Photoshop and Core Graphics look very different.
Shape antialiasing can also be distinct enough to identify the source renderer.
If you’re drawing gradients in code or with a design tool, dithering can really help improve their quality. And, if you’re dithering, please make sure repeating sections are wide enough to let the dithering work.
Published 8 July 2015.