Making a perceptually uniform step wedge using GIMP

Introduction

Web pages that display images often put a step wedge somewhere on the page to give viewers an idea of whether their monitor shows an adequate tonal range. Ideally such a step wedge shows perceptually uniform steps. This tutorial shows how to turn a black-to-white gradient into a perceptually uniform "step wedge" using high bit depth GIMP 2.9/2.10. The same procedure can be done in GIMP 2.8, though working at 8-bit integer precision might introduce some rounding errors. The general procedure can be followed using most image editors.

The above image shows five step wedges made in five different RGB working spaces. Each step wedge was made by posterizing a gradient drawn from black to white. Only the steps in Row 2 are actually perceptually uniform.

When attempting to make a perceptually uniform step wedge from a gradient, a step wedge made in the AdobeRGB1998 color space (Row 1) will be too light in the midtones and highlights and too dark in the shadows, and similarly for making step wedges in the sRGB and ProPhotoRGB color spaces (Rows 3 and 4). And a step wedge made in a linear gamma color space will be far too light everywhere, except of course for the first and last steps.

When putting a step wedge on your website, ideally what you want is a step wedge with exactly perceptually uniform steps. If you want to use the "posterize a gradient" method of making the step wedge, then the step wedge needs to be made in an RGB working space that has the LAB companding curve TRC. The next section of this tutorial has a link to a set of ICC profiles that provide "profile variants" with the LAB companding curve TRC.

Of course you'll want to convert your perceptually uniform step wedge to the regular sRGB color space before uploading it to your website.

How to make a perceptually uniform step wedge from a gradient

Here's the step wedge that I display at the bottom of my Gallery pages:

Here's how to make your own perceptually uniform step wedge:

1. Decide how many steps you want in your step wedge. I used 21 steps to make the step wedge shown above. Why 21 steps? I chose an odd number of steps because I want the step in the middle to eye-dropper as Lab Lightness=50.0, half-way between 0.0 and 100.0. And 21 steps allows to increase from LAB Lightness = 0.0 to LAB Lightness = 100.0 by increments of 5.0 (0.0, 5.0, 10.0, . . . 95.0, 100.0). Very many more than 21 steps gets a bit visually complicated, and too few steps doesn't provide enough differentiation in the shadows. Of course applications other than a step wedge for displaying on a galleries page might call for some other number of steps.
2. Decide how many pixels wide you want each step to be. For display on the web, consider the width of your page. A 35-pixel-wide step, times 21 steps, is 735 pixels, which is a convenient width for my own website. Then decide how tall you want your step wedge to be. For my website, 85 pixels is a convenient height.
3. Make a new image of your chosen width and height. If you are using high bit depth GIMP 2.9/2.10, make the image a 32-bit floating point image and make sure you pick "Perceptual gamma (sRGB)" in the "Image/Precision" menu. For GIMP 2.8 you'll have to settle for 8-bit integer precision, which means there will be rounding errors in your step wedge. But for a step wedge posted to the web, the rounding errors won't matter one tiny little bit.
4. By default GIMP will automatically assign the built-in sRGB profile to the image. But the regular sRGB profile is the wrong color space for making a step wedge with perceptually uniform steps because the sRGB TRC is only approximately perceptually uniform. For drawing a step wedge with perceptually uniform steps you need is a version of the sRGB profile that has a perceptually uniform TRC. So:
   1. Download elles_icc_profiles_master.zip from my github repository. To download the zip file, click on the "Clone or download" button and choose "zip". Then extract the contents of the downloaded zip file. The ICC profiles are in the "profiles" folder.
   2. Using GIMP, assign the profile "sRGB-elle-V4-labl.icc" to your image. To assign the new profile to your image use "Image/Color Management/Assign Color Profile" and then use the "Assign" drop-down box to navigate to where you put the "profiles" folder and select "sRGB-elle-V4-labl.icc".
5. Set your image up with two vertical guidelines and one horizontal guideline as follows:
   1. Take your chosen step width in pixels and divide by two, rounding down if necessary. So for the current example, dividing the step width of 35 pixels divided by two is 17.5, and rounding down is 17 pixels.
   2. Place a vertical guideline one-half of the step width in from the left edge. In the current example, the vertical guideline should be positioned 17 pixels in from the left edge of the image.
   3. Place a second vertical guideline one-half of the step width in from the right edge. In the current example, the image is 735 pixels wide, so subtracting 17 from 735 produces 718, so the second guideline should be positioned 718 pixels from the left edge, which is 17 pixels from the right edge.
   4. Add a horizontal guideline more or less in the middle of the image.
   The guidelines are to make it easier to draw a gradient that starts and stops exactly where you want it to. So under View, make sure "Snap to guidelines" is selected, and make sure the "snapping distance" you selected in "Edit/Preferences/Image Windows/Snapping" is high enough to allow precisely placing the start and end points when drawing a gradient. My snapping distance is set to 8 pixels, which I think is the default value.
6. The next step is to draw a gradient from black to white.

   First set the Foreground color to black and the Background color to white. Also set the Blend tool options as follows:

   1. Blend Mode to Normal
   2. Opacity to 100%
   3. Select the FG to BG (RGB) Gradient
   4. Shape to Linear
   5. Repeat to None (extend)
   6. Offset to 0.0
   7. Uncheck Dithering
   8. Uncheck Adaptive Supersampling.

   Once the options are all set correctly, use the Blend tool to draw a gradient from the left vertical guideline to the right vertical guideline. Use the horizontal guideline to make sure you draw the gradient at a zero-degree angle.

7. Using the Rectangle Select Tool, first uncheck all of the following options: "Antialiasing" (if you can), "Feather edges", "Rounded corners", "Expand from center", and the box that allows to fix Aspect ratios and such. Then select all of the image that's between the two vertical guidelines:
8. Now select the Posterize tool ("Colors/Posterize") and posterize the selected area of the image into a series of steps from dark to light. Set "Posterize levels" to your desired number of steps, and then click "OK". For the current example, I want 21 steps, and so "Posterize levels" should be set to 21:

   Note that GIMP's "Posterize Colors" tool makes the leftmost and rightmost steps half the width of the remaining steps. Drawing the black-to-white gradient (Step 6 above) from the leftmost to the rightmost vertical guidelines (instead of from the left to the right edges of the image) ensures that the final image will have full-width first and last steps.

And you are done!

Well, you aren't quite done. For displaying your step wedge on the internet, you'll want to convert the image from the current profile ("sRGB-elle-V4-labl.icc") to the regular sRGB profile. So go to "Image/Color Management/Convert to Color Profile", use the "Convert to" box to select the profile "sRGB-elle-V2-srgbtrc.icc", and hit "Convert". Then save your XCF file and also export the step wedge as a jpeg or png. If you export it as a png, you might want to reduce the precision of the XCF file to 8-bit integer, export the png, and then "Undo" the precision conversion.

And now your step wedge is completely ready to be displayed on the web. You can use css styling to put a border around your step wedge, or add one using GIMP. To add a border using GIMP, first make the step wedge. Then make the canvas size a little larger and put a new layer of the desired border color under the step wedge layer. I recommend using a neutral border color. On my own website I use css styling to add the border, and the color is #FAFAFA — almost but not quite solid white so the solid white step at the right edge can be seen.

Verifying that the step wedge really is perceptually uniform

If you have access to an image editor that reads out LAB Lightness values, and you eye-dropper each step in your step wedge, you'll find that the steps increase exactly in increments of 5, that is, eye-droppering from left to right will show 0, 5, 10, 15, . . . 85, 90, 95, 100.