Our senses don t deceive us; our judgment does. Johann Wolfgang von Goethe

Transcription

1 Our senses don t deceive us; our judgment does. Johann Wolfgang von Goethe

2 ULTRAVIOLET GAMMA RAYS X-RAYS VISIBLE SPECTRUM INFRARED MICROWAVES RADIO WAVES VIOLET BLUE CYAN GREEN YELLOW RED MAGENTA The visible spectrum The part of the electro-magnetic spectrum that we can see contains millions of colors of varying wavelength. Light from the sun contains all of these colors. A prism splits these colors into the familiar rainbow.

3 n Sir Isaac Newton ( ) was the first to understand the spectrum. n He refracted white light with a prism, resolving it into its component colors, then used another prism to reverse the process. 3

4 Additive color n The receptors in the eye are sensitive to the primary colors red, green and blue. n These are called the additive primaries, or projected color primaries. 6

5 Additive primaries (red, green and blue) are used to reproduce color on a TV screen, in color film and on a computer screen.

6 Red, green and blue (RGB) are called additive primaries because as each color is added to a black screen, they blend to form lighter colors.

7 Where RGB overlap, complementary colors form. When we stared at the red square, we developed an after-image. When we switched to the white square, we saw that after-image as cyan, the complementary of red.

8 Projected color With additive color, the three primaries of red, green and blue are projected one on top of the other to form a composite image. Where all three colors are present, such as the background, the result is white.

9 Subtractive color n The complementary colors to red, green and blue form the subtractive primaries of cyan, magenta and yellow. n These subtractive primaries, along with black, are used in printing in what is known as the four-color process. The shorthand for this is CMYK, with K standing for black.

10 n With subtractive color, as we subtract color, we get closer to the white of the page. n Where no ink is present, we see white, or as close to white as the paper gets. 12

11 n Because the paper is never pure white, and because the inks are never pure cyan, magenta and yellow, the colors can look dull without black to add shadow and detail. n Subtractive color sometimes is called reflected color because it is used in printing, where the ink on the page absorbs colors of some wavelengths and reflects others.

12 n Remember that in additive color, as we add more and more of the primaries of red, green and blue, we approach white. n With subtractive color, it s the other way. Less and less ink takes us closer to white. 14

13 Before a color picture can be printed, it is separated into it CMYK. Digital pictures are stored in separate channels for each primary. With this separation, the white is produced by an absence of ink in any of the four colors.

14 16 n Black ink is necessary in subtractive color because no ink is pure in color and no papaer is a pure white. n The black ink provides contrast and saves money because less colored ink is needed to make the black and gray tones. n The picture to the left has no black undercolor.

15 CYAN RED GREEN BLUE MAGENTA YELLOW BLACK WHITE YELLOW MAGENTA BLUE GREEN RED CYAN SUBTRACTIVE ADDITIVE

16 The two color models produce radically different results. When laying out a color document on the computer, you must realize that what you see isn t what you get.

17 Color Space A helpful device for picturing how color works is the color space, a 3D representation in which the primary colors mix in all their combinations, and mix with white and black to form shades (darker colors) and tints (lighter colors). Gamut Gamut simply means the range of colors a device can reproduce. The chart below shows that no artificial device can accurately reproduce all the colors of the visible spectrum. Know your gamut before attempting subtle colors!

18 The colors, additive or subtractive, are not mixed but presented individually. The eye does the mixing in a technique similar to that used by French artist George Seurat. In his painting Sunday Afternoon on the Island of the Grande Jatte he portrayed the play of light using tiny brushstrokes of contrasting colors. The style became known as pointillism. Using this technique, he created huge compositions with tiny, detached strokes of pure color too small to be distinguished when looking at the entire work but making his paintings shimmer with brilliance. 14

19 Here is another Seurat painting, The Side Show. The detail to the right shows how pointillism worked. Seurat used precise formulas for how much of each pure color to use to produce the desired overall color. 15

20 Other artists have used similar techniques, believing that the colors seen by the eye appear more pure and vibrant than those created by mixing ink. Paul Klee used a mosaic technique (above), while Chuck Close uses small squares, each a tiny abstract painting, to produce an overall image. 16

21 The color halftone n Color pictures are printed using a concept similar to Seurat s. The picture is broken up into dots that vary in size according to the density of each color. n The black dots in the detail vary in size, approaching complete coverage (100%) or dwindling to no coverage (0%). n The amount of each CMYK color is expressed in percent of coverage. 19

22 20 n Each CMYK color is printed separately, so the paper goes through four press units. n Each color of the halftone is printed at a different angle so that the dots do not overlap. n Where the colors come together, rosettes form in a characteristic circular pattern.

23 Registration n When the paper goes through four press units, one for each color, it must be aligned exactly or the picture quality will suffer. n The picture to the left is said to be out of register. n The press operator can adjust the position of each plate in with precision adjustment gears while the press is running at low speed. Pages are printed with color targets and density patches to aid in the process. 22

24 a b c d DAISY.TIF 200lpi 12/19/2008 4:39:20 PM PROCESS CYAN MAGENTA YELLOW BLACK PRINTER S MARKS a. star target b. registration mark c. page information d. trim marks e. color bar f. tint bar e f 23

25 The computer screen and text A computer screen has lower resolution, 72 ppi or 96 ppi, so some fonts may not look good on screen at small sizes. LED computer screen, 12-point type at 60x (left) and 200x.

26 0 0 Pixel depth Early monitors used 1-bit per pixel, and were called monochrome monitors. These monitors used "dithering" to simulate shades of gray.

27 Pixel depth Grayscale pictures have 8 bits of pixel depth, producing 256 shades of gray.

28 Pixel depth Files using "indexed color," such as GIF files, can display 256 colors from the palette of 16,777,216 colors. The 8-bit numbers are assigned by the computer to each of the 256 colors, which can be different from picture to picture.

29 Pixel depth Most computer screens now use 24- bit color, producing 16,777,216 colors. This "true color" palette represents far more colors than printing presses can obtain. The binary code at left can be stated as the hex code CC9933.

30 Flat color n For illustrations, color is applied in uniform percentages over large areas, giving the color a uniform or flat appearance. n The dot patterns are evenly spaced. n In a digital photo, colors are never uniform. 21

31 Flat color vs. photo color Photographs might have areas that look like flat, solid color, but usually in digitizing, small variations are picked up among the pixels (see left). Flat color is truly one solid color. Images that have flat colors can be saved most efficiently as GIF files using a palette of 256 colors. Photos with varied textures in the colors should be saved as JPG files with 16,777,216 colors.

32 Color look-up charts For a specific flat color using CMYK, designers turn to color lookup charts, one of which is reproduced here. A chart is made up of small color squares with varying percentages of cyan, magenta and yellow. Sometimes black is added. This chart starts with 30 percent yellow in the upper-left corner. Progressively darker percents of cyan and magenta are added to each square. The next chart would start with a different percent of yellow, say 40 percent, and the process would be repeated. Color lookup charts are printed on coated or uncoated paper, often on the press used for that publication. 24

33 Pantone, DIC color n Several companies offer color guides similar to the color chips found in paint stores. These include Pantone Color Matching and DIC, a Japanese company. n The designer uses color guides to specify a spot or process color by number. n Pantone is widely accepted by printers in the United States. Pantone color guides DIC color guides Pantone 021 CVU (uncoated paper) DIC 2527p Pantone 021 converted to process: 61% magenta 80% yellow

34 Browser safe colors The first color monitors to appear on personal computers were capable of displaying millions of colors, but computers didn t have the power to use more than 256 at a time. Windows and Macintosh each developed a system palette of 256 colors, but only 216 of those colors overlapped. We call this the browsersafe palette, and it's still useful for defining a palette for your Web site. Note that the colors progress in steps of 00, 33, 66, 99, CC and FF for each of the red, green and blue hex codes.

35 The eye has receptors sensitive to the primary colors red, green and blue. Stare at the dot in the middle of the red square for 30 seconds, then shift quickly and stare at the dot in the white square. What color do you see? Red stays on the retina as an after-image of its complementary color, cyan blue.

36 Now stare at the dot in the middle of the white star for 30 seconds, then shift to the dot in the white square. What do you see? This after-image is due to the rods and cones in the eye becoming sensitized. The after-image is responsible for many phenomena we take for granted, such as motion pictures and the color reproduced on a computer screen or printed page.

37 2 A color has many faces. One color can be made to look like two different colors.

38 Albers says of this example, It is almost unbelievable that the upper small and lower small squares are part of the same paper strip and therefore are the same color. This is a phenomenon known as color subtraction. Don t confuse it with subtractive color. What color subtraction means is that surrounding colors cancel out some of the colors of the smaller square. 3

39 Here, one color (the gray in the bars) appears as two. It takes on a violet tint on top of the yellow and a yellow tint on top of the violet. Mario Garcia of the Poynter Institute calls gray the chameleon of colors. It takes on characteristics according to the colors surrounding it. 4

40 7 Color contrast: Light and dark Light and dark contrast of monochromatic or achromatic colors (more on that below) can add dimension to a composition. The gradation progresses from 100 percent black at the top to white at the bottom.

41 8 Color contrast: Light and dark The window frame is one shade, a gray of 50 percent black. The vertical bars of the frame appear lighter at the top and darker at the bottom. The top horizontal bar looks lightest, the middle darker and the bottom darkest.

42 Color contrast: Light and dark Painters achieve contrast using a limited choice of hues by adding black or white to the hue, creating tints and shades. Shades are colors with black added. Tints are colors with white added. 9 Self portrait Rembrandt Rembrandt Harmenszoon van Rijn ( ) sketched his own image when he lacked other models.

43 10 Color contrast: Saturation Color interval, the difference in the amount of color in two samples, can be judged by looking at the border between colors. At left, the red and blue squares become lighter in a counterclockwise direction. The hardest border is between the top to squares with the greatest interval. The bottom two squares with the smallest interval have a soft border. The blue and red intervals are similar, as seen by the superimposed squares.

44 Color contrast: Simultaneous contrast and transparency When two colors overlap with a third color mixed from various amounts of the other two, striking transparent effects are created. Each example is made up of three shapes: The brown and red rectangles have a third cutout shape that shows overlap. On the left, this cutout contains brown and red, but more of the brown, making the brown rectangle appear to be on top. In the example on the right, the cutout has more red than brown. The red is dominant and appears to be on top. 12

45 Real art (1972) Audrey Flack Color contrast: Simultaneous contrast and transparency The photorealist artists use simultaneous contrast to create paintings that trick the eye. 14

46 Color contrast by saturation By varying saturation, a painter adds depth to a two-dimensional work. Caillebotte used this to portray aerial perspective, in which objects far away appear lighter with a shift in color toward blue, and to give the street a wet look. 11 Paris: A Rainy Day (1877) Gustave Caillebotte

47 Color contrast: Proportion The eye is attracted to small amounts of saturated color on a duller background. The eye is attracted to these small spots of color like iron to a magnet. 15

48 Color contrast: Proportion Color is related to hierarchy. Color can be used to make some things stand out. The trick is to stretch the color throughout the composition, creating a path for the eye to follow. On the Terrace (1881) Pierre-Auguste Renoir 16

49 The Bezold Effect is named after a German who noticed that certain strong colors, when evenly distributed, radically changed the effect of his rug designs. Look at how different the red in the top wall looks compared with the red in the bottom wall. The red with the white looks much lighter than the red with the black. 18

50 The color palette Designers never work with an unlimited number of colors. Instead they build a palette of the colors that they hope will come to be identified with the publication or product. In advertising, the color palette is extremely important because it becomes tied so closely with product identification. The colors of a designer s palette are chosen for their personality and for how well they work together. 21

51 Color palette and identity n Choose your color palettes carefully, then use those colors consistently. n Color is so closely tied to identity that a company such as IBM can come to be known as Big Blue. n The yellow square around the National Geographic cover has become a trademark all by itself. n The best color palettes have meaning beyond consistency. These palettes are chosen for mood, to convey meaning. Choose your color palette carefully!

52 Definitions for using the color wheel: Hue a pure color, any color except white or black. Tint a hue mixed with white. Red (4) is a hue, pink (8) is a tint. Shade a hue mixed with black. Red (4) is a hue, maroon (1) is a shade. Saturation the intensity of the hue. Red has a higher saturation than either red or pink. Brightness describes the lightness of a hue. Pink has a higher value than red; yellow (36) has a higher value than blue (76). 19

53 A designer finds discipline in color use by adopting a systematic way of choosing color. The color wheel is composed of six basic hues: three primaries, three secondaries and six tertiaries Primary colors Red (4), blue (68) and yellow (36) cannot be made by mixing other colors Secondary colors orange (20), green (52) and purple (84) are made by mixing two primary colors. 20

54 Tertiary colors redorange (12), yellow-orange (28), yellow-green (44), blue-green (60), blue-violet (76) and red-violet (92) are made by mixing a primary color with a secondary color. Complementary colors Two colors opposite each other are complementary.when mixed, two complementary colors will form a neutral

55 Pure high-chroma hues appear in the wider center ring: 4, 12, 20, 28, 36, 44, 52, 60, 68, 76, 84 and 92. Colors on the inner four rings are tints made by adding white to the pure hue. Colors on the four outer rings are shades, made by adding black to the pure hues

56 Color contrast: Hue When two colors are placed next to each other, one often will move to the front, creating depth or dimension. This effect is extreme on a computer screen, where colors are more vivid than on the printed page. Here is an example using the the primary hues of red and blue. BACKWARD FORWARD 5

57 Color contrast: Warm and cool The example from the previous page is so striking because it uses the hot and cold extremes of pure red and pure blue. Cold or cool colors based on blue tend to move to the background. Hot or warm colors based on red tend to move to the foreground. 6 The Golden Fish Paul Klee (1925) Paul Klee was an introverted Swiss painter who spent most of his adult life in Germany until he was expelled by the Nazis in He was one of the greatest colorists of painting.

58 Cold colors Think of ice, with its blue, blue-green and green. These colors have the effect slowing the metabolism, making people feel cooler. Cold colors can be austere or refreshing. 23

59 Hot colors Fully saturated red is the essence of fire. Red has been proved to stimulate the body. Red also is associated with passion. It s the color that is retained on the retina the longest, and it instantly attracts the eye. Learn how to use red and the rest of the colors are easy. Painters such as Renoir knew that using small spots of red created movement in otherwise static pictures. 24

60 Light colors With only the faintest hint of a hue, these colors on the innermost ring of the color wheel reflect light and make a room, photograph or painting seem to glow. Light colors open up space. 25

61 26 Dark colors These strong, somber colors constrict space rather than expand it. Dark colors often are used in interior design for contrast. They can convey moods ranging from dignified and traditional to melancholy.

62 27 Warm colors These colors are based on red but with yellow added to soften the fire. These colors are inviting, much like the comfort of a fireplace. Warm colors show up in interior design.

63 28 Cool colors Just as warm colors are based on red, cool colors are based on blue but blended with red or yellow, producing a range of colors from light bluegreen to violet. Cool colors are considered peaceful and meditative, calming.

64 29 Pale colors Pale colors are tints hues softened with a substantial amount of white. These pastels evoke softness, youth and innocence. These colors on the inner ring of the color wheel are considered feminine and often are used in cosmetic packaging.

65 30 Bright colors Distinctive highly saturated colors with little or no white or black are so intense they can seem to vibrate. Bright colors were a trademark of Pop Art in the 60s and are favored today in many advertisements.