Two Values, Then Three

The idea: value

Value is the lightness or darkness of a color or surface. It runs on a scale from white through the grays to black, and it is what lets the eye read form, light and distance.

In a notan: A notan is value pared down to its fewest steps: the word joins the Japanese nō, dark, and tan, light. In cut paper the sheet gives one value, the ground seen through every hole and around the sheet gives the other, and each flipped piece shows the paper’s back. On a new design in the studio the front and back are both black and the ground is white, so the design has two values. Give the back a gray of its own and every piece becomes a third value: the three-value notan Arthur Wesley Dow taught. Either way, each area must be assigned to the dark or the light, as a painter decides by squinting.

Every image can be sorted by value: how light or dark each part is, whatever its color. Painters check it by squinting: half-close your eyes and the details go, the colors dull, and a handful of large shapes of dark and light remain. Those shapes carry most of a picture’s structure. If they are clear, the picture reads from across a room; if they are muddled, no amount of detail will rescue it.

A notan makes the squint permanent. With two values, every part of the design is either paper or ground, so every edge is a decision. Arthur Wesley Dow, who made notan part of American art teaching, started his students with two values and only then added a third: a gray halfway between the black and the white. He saw that one gray alters how the other two relate and opens a new range of choices. Here you make both versions of one design and judge what the third value gives and takes away.

Art history

Notan takes its name from ink painting, where one black ink, thinned with water, yields every value from the deepest black to the palest wash. The works below move from many values toward few: ink in every tone, a drawing made of soft tone alone, Dow’s exercises in two and three values, and a photograph planned value by value.

• Hasegawa Tōhaku Pine Trees, late 1500s Tokyo National Museum

  A pair of six-panel folding screens painted in ink alone. The nearest pines are almost black, the farther ones thin into mist, and the bare paper is the lightest value of all. Squint and the screens become a few dark masses floating in light: value doing the work of distance.

• Georges Seurat Aman-Jean (Portrait of Edmond François Aman-Jean), 1882–83 The Metropolitan Museum of Art, New York

  Seurat drew his friend in conté crayon on a textured, ridged paper, building the darks by pressing harder and the lights by barely touching. There are almost no outlines: edges exist only where one value meets another.

• Arthur Wesley Dow Composition, 1899

  Dow’s textbook treats notan, dark-and-light, as one of the three structural elements of design, beside line and color. Its exercises come in a strict order: first two values, then three, then more than three. This activity follows the same order.

• Ansel Adams Moonrise, Hernandez, New Mexico, 1941

  Adams planned photographs by value: his Zone System divides the scale from black to white into numbered steps, so each part of a scene can be placed on one. Unable to find his light meter as the light faded, he exposed from his knowledge of the moon’s brightness, placing it on Zone VII. The sky falls to near black, and the lit church and crosses read as a few pale shapes.

Design today

Designers check value constantly, because value is what survives when color does not. A common habit is to view a layout in grayscale, or to squint or blur it, and ask whether the headline, the button and the picture still separate. If two parts collapse into the same gray, the eye will not find the intended order. Logos get the same test: most brand guides include a one-color version, because a mark that depends on color falls apart when printed in black or stamped in foil.

On screens, value contrast is measured. The Web Content Accessibility Guidelines (WCAG) compare the relative luminance of text and its background as a ratio, from 1:1 for no difference to 21:1 for black on white. Level AA asks for at least 4.5:1 for normal text, and 3:1 for large text and for the parts of an interface people must see, such as icons and button edges. The gray #767676 on white measures about 4.54:1, just over the line; #777777, one step lighter, falls just short at about 4.48:1. A classic notan sits at the far end: black paper on a white ground is the full 21:1.

Warm-up

Squint sketch, ten minutes. Squint at your photograph at arm’s length until the details disappear. On a small card, fill every area that looks dark with the marker and leave every area that looks light as bare paper. Work in masses, not outlines. Then compare cards around the room. Where did people disagree? Those borderline areas, the middle grays, are exactly what a notan will force you to decide.

In the studio

Make it in Studio Notan, where every cut can be moved, refolded and undone.

1. Open the studio. A new design starts with a black front, a black back and a white ground: two values. Choose Trace a photo… from the File menu, or drop your photograph onto the canvas, and it arrives fitted inside the sheet. Leave it on Fit: Fill would run the photo past the sheet’s edges, and the parts beyond them would be traced too.
2. Leave Separate by on Brightness, which turns the photo into grays weighted roughly as the eye weighs red, green and blue. Set Preview to Adjusted and Opacity to 100%. You are now looking at the photo as values only, the same view your squint gave you.
3. Read the histogram. It counts how many pixels sit at each of 256 levels, black at the left and white at the right. A photo with strong light often shows two hills, darks and lights. The line standing across it is the Threshold: every pixel at or below it will be traced. With Auto on, the line is placed where it splits the tones into the two most different groups.
4. First predict which parts of the photo fall on the dark side of the line, then switch Preview to Two-tone and check. Drag the line left and right and watch areas change sides: the middle grays switch first. Lower Detail to drop specks and fill pinholes, as a squint does, and settle on the split that still reads as your subject.
5. Press Trace, and when the direction chooser opens, press the right arrow. Your darks were cut out of the sheet, so inside it they now show as light holes, a negative, while beyond the right edge they land in the back color, dark again and mirrored. One notan holds both readings. To make the sheet read the right way round instead, press Undo once, show the photo again with the eye beside the Trace heading, tick Invert so the light areas are traced, and press Trace again.
6. When the two-value version reads well, export it from the File menu as Artwork, PNG. Then make it three values: on the Color tab, click into the Back card’s hex code, type #777777 and press Enter. That gray sits almost exactly halfway between black and white to the eye. Every flipped piece turns gray, and the pieces now separate from the sheet as a layer of their own. Export this version too.
7. Try two more grays, a light one such as #BBBBBB and a dark one such as #444444. A light back groups the pieces with the ground; a dark one groups them with the sheet. Choose the gray that makes the design clearest, and say why.

With paper and paint: Paint the Scale, Then Cut

On screen a gray is a number: type #777777 and it sits halfway between black and white every time, and the studio’s paint never changes as it dries. Real paint does. Gouache often shifts a little as it dries, light mixtures toward darker and dark ones toward lighter, so you learn to judge a value only on a dry swatch, and to find the middle by eye rather than by code. That is the old way: notan takes its name from ink painting, where one black, thinned step by step, gives every value. Cutting teaches the rest. The studio’s Undo takes back any cut; paper does not. Each shape has to be planned before the scissors move, and every area assigned to dark or light for good.

1. Cover the table. Along the paper strip, mark seven boxes about 1.5 inches wide. Paint the first box white and the last black. Mix a gray that looks halfway between them and paint the middle box, then mix and paint the steps in between. Add black to white a little at a time, not white to black: black is so strong that a touch of it darkens a lot of white.
2. With the wide brush, paint three of the squares solid black in one smooth, even coat. Leave them and the scale to dry until the paper no longer feels cool against the back of your hand: usually 15 to 30 minutes for a thin coat, longer for thick paint or damp weather.
3. Judge the scale dry, not wet. Squint at it: the steps should look evenly spaced, with no two neighbors alike and no jump bigger than the rest. Repaint any box that breaks the rhythm. Then punch a hole in each box, close to the strip’s edge, hold the scale at arm’s length against your photograph or a window, and look through the holes. The box whose paint matches what you see through its hole gives that area’s value.
4. Choose one step from the middle of the scale for the paper’s back. Mix that gray again and test it on a scrap first, letting the test dry: it must match the dry box, not the wet one. Then paint the fourth square with it and let it dry.
5. Two values. Glue two black squares back to back, covering the whole unpainted side with glue stick so the layers cannot split when you cut. Draw three or four simple shapes on scrap paper and cut them out as templates. Trace each against an edge of the black sheet with the white pencil and cut it out. Lay the sheet on a white card, flip each piece over its edge and lay it in its mirrored place. Everything is black or white.
6. Three values. Glue the gray square to the last black one, unpainted sides together, so that one face is black and the other gray, and cut the same shapes with the same templates. Flip each piece onto the second white card: now every piece shows gray, as it did in the studio when you typed a gray into the Back card.
7. Squint and decide. Stand the two versions side by side, walk across the room and squint. Which reads faster? Which is richer? Check that each piece sits exactly in its mirrored place, then glue the sheet down first and each piece after it, with its edge lined up against the edge of its hole. Last, hold your scale beside the studio’s #777777 on screen: which painted box comes closest?

Take care: Cut on a self-healing mat with the blade drawn away from your body and your other hand behind the metal ruler; an adult should supervise knife work and do it for younger learners. Use non-toxic paints with the ACMI AP seal, cover the table, let paint dry fully before you cut or glue, and rinse brushes before the paint dries in them.

Take it further

Try a hard photograph, such as fog or a face in soft light, where most tones crowd into the middle of the histogram, and use the Levels handles to spread them before you set the Threshold. Then take Dow’s next step, more than three values, in paper: back the cut sheet with a sheet-sized card painted a second gray from your scale, so the holes show one gray while the margins stay white, and decide whether the fourth value helps or clutters.

Reflect

• Which areas of your photo were hardest to assign to dark or light, and how did you decide?
• Inside the sheet your darks became light holes; outside they became dark pieces. Which reading of the image is clearer to you, and why?
• What did the gray back add to your design, on screen and in paper, and did it take anything away?
• Where else have you seen a picture work with only two or three values: in signs, prints, logos or shadows?

What to look for

• The warm-up card shows masses of dark and light, with no outlines.
• The traced notan is still recognizable when squinted at from across the room.
• The learner can point to where the photo’s darks appear as holes and where they appear as pieces.
• The painted value scale steps evenly from white to black when squinted at, with no two neighboring boxes alike.
• The three-value versions, on screen and in paper, use a gray clearly distinct from both the black and the white, and the comparison names a specific difference it made.