Chapter 5 CC18 - Revision history

Michael: /* Exercise 4: Interaction of colors */ Text Edit

2018-09-07T22:12:25Z

Exercise 4: Interaction of colors: Text Edit

Michael: /* Exercise 3: Interaction of values */ Text Edits

2018-09-07T22:11:25Z

Exercise 3: Interaction of values: Text Edits

Michael: /* Exercise 2: Top or bottom? */ Text Edits

2018-09-07T22:08:59Z

Exercise 2: Top or bottom?: Text Edits

Michael: /* Exercise 1: Hue has value! */ Text edits

2018-09-07T22:04:29Z

Exercise 1: Hue has value!: Text edits

Michael: /* Exercise 4: Interaction of colors */ Resize screenshots

2018-07-10T19:18:06Z

Exercise 4: Interaction of colors: Resize screenshots

Michael: /* Exercise 4: Interaction of colors */

2018-07-10T19:17:20Z

Exercise 4: Interaction of colors

Michael: /* Exercise 3: Interaction of values */ Updated screenshots, bolded numbers, text edits.

2018-07-10T19:04:16Z

Exercise 3: Interaction of values: Updated screenshots, bolded numbers, text edits.

Michael: /* Exercise 1: Hue has value! */ Bolded numbers and increased spacing around screenshots

2018-07-10T18:59:57Z

Exercise 1: Hue has value!: Bolded numbers and increased spacing around screenshots

Michael: /* Exercise 2: Top or bottom? */ Updated screen shots, bolded numbers and text edits.

2018-07-10T18:58:15Z

Exercise 2: Top or bottom?: Updated screen shots, bolded numbers and text edits.

Michael: /* Exercise 1: Hue has value! */

2018-07-10T18:26:48Z

Exercise 1: Hue has value!

@@ Line 209: / Line 209: @@
 Notice how the middle gray squares inside the black and white areas appear to have different values. When values are placed near or on top of each other, we perceive their values as interacting and affecting one another.  It is important to keep this in mind when choosing hue and value combinations, as one value will always influence the appearance of another.
-=Exercise 4: Interaction of colors=
+=Exercise 4: Interaction of Colors=
 And now for the magic trick: in the next exercise three colors appear as four colors.
@@ Line 228: / Line 228: @@
 [[File:Fig5 Ex4 03b CC2018.png|400px]]
-'''c.''' Select the larger square on the right (in our example, the black square) and assign it an analogous hue  to the hue of the smaller square (ours is green) with a middle gray value. We used the Color Picker this time to choose an analogous hue, see the screen shot for clarification.
+'''c.''' Select the larger square on the right (in our example, the black square) and assign it an analogous hue  to the hue of the smaller square (ours is green) with a middle gray value. We used the Color Picker this time to choose an analogous hue, see the screenshot for clarification.

@@ Line 173: / Line 173: @@
 [[File:Fig5 Ex2 16 CC2018.png|600px]]
-=Exercise 3: Interaction of values=
+=Exercise 3: Interaction of Values=
 '''1.''' Create a new document in landscape orientation.
@@ Line 185: / Line 185: @@
-'''3.''' Open the Layer Palette (Windows > Layers). The gray shape should be located on Layer 1. Lock Layer 1 so that the gray shape does not move while completing the following steps.
+'''3.''' Open the Layer Palette (Windows > Layers). The gray shape should be located on Layer 1. Lock Layer 1 so that the gray shape does not move while completing the following steps. There should appear a small lock icon between the eye and the Layer name, indicating the layer is locked.
 [[File:Fig5 Ex3 03a CC2018.png]]

@@ Line 98: / Line 98: @@
 [[File:Fig5 Ex1 07 CC2018.png|600px]]
-=Exercise 2: Top or bottom?=
+=Exercise 2: Top or Bottom?=
 '''1.''' Create a new file in Illustrator using basic CYMK color mode in landscape orientation.
@@ Line 134: / Line 134: @@
 [[File:Fig5 Ex2 05 CC2018.png|500px]]
-'''6.''' Option-Drag your square to the left to create a copy (holding down shift after you start dragging will retain it to a movement along the x-axis). Align the bottom of the new square to the horizontal guide, and the left side of the square to the vertical on the left side of the page.
+'''6.''' Option-Drag your square to the left to create a copy (holding down shift after you start dragging will retain it to a movement along the x-axis). Align the bottom of the new square to the horizontal guide, and the left side of the square to the vertical guide on the left side of the page.
 '''7.''' Repeat this action to make a copy of the square to the right, once again aligning the bottom edge with the horizontal guide and the left edge with the vertical guide farthest to the right. This will give your squares even spacing

@@ Line 62: / Line 62: @@
 Caption: ''Porträt der Frau Manet auf blauem Sofa'', Edouard Manet, 1880, oil on canvas. Complementary colors are used in Manet's painting to create contrast between the blue couch and woman in the foreground and the orange wall in the background.
-=Exercise 1: Hue has value!=
+=Exercise 1: Hue has Value!=
 '''1.''' Create a new document in Illustrator using basic CYMK color mode in landscape orientation. Adjust the settings so the units are measured in inches and choose letter from the Print menu. We named our document hue-has-value.

@@ Line 231: / Line 231: @@
-[[File:Fig5 Ex4 03c CC2018.png|400px]]
+[[File:Fig5 Ex4 03c CC2018.png|600px]]
@@ Line 238: / Line 238: @@
 '''d.''' Notice that the two small squares look like they are different colors. They are, in fact, the same color, but the presence of the complementary and analogous colors influences our perception. The complementary color emphasizes the perception of the hues, and the analogous color subtracts the perception of the hues.
-[[File:Fig5 Ex4 03d CC2018.png|400px]]
+[[File:Fig5 Ex4 03d CC2018.png|600px]]

@@ Line 213: / Line 213: @@
 And now for the magic trick: in the next exercise three colors appear as four colors.
-. Re-save your Exercise 3 file with a new name using File > Save As.
+'''1.''' Re-save your Exercise 3 file with a new name using File > Save As.
-. Shift select the two smaller squares and use the Color Picker or the Color Sliders (Window > Color) to  assign the same hue to them.
+'''2.''' Shift select the two smaller squares and use the Color Picker or the Color Sliders (Window > Color) to  assign the same hue to them.
-[[File:fig03 Ex4 02_CS6.png|600px]]
+[[File:Fig5 Ex4 02 CC2018.png|600px]]
-. Select the larger square on the left (in this example, the white square is selected) and assign it a middle value and a complementary hue to the hue you just chose for the smaller square. You can use the Color Picker or the Color Palette, or you can "cheat" and follow these steps to find the complementary color:
+'''3.''' Select the larger square on the left (in this example, the white square is selected) and assign it a middle value and a complementary hue to the hue you just chose for the smaller square. You can use the Color Picker or the Color Palette, or you can "cheat" and follow these steps to find the complementary color:
-a. Select the large square to the left, then use the Eye Dropper Tool to click on the smaller square. This will fill the large square with the same exact color that you used in the inside smaller square and for a moment, there will be no distinction between these two shapes and the smaller square disappears. The large square remains selected, so do the next step before you accidentally deselect!
+'''b.''' While the large square is still selected, use the pull-down menu from the top right corner of the Color Palette to choose "Complement." This will assign the exact complementary color (in the color model that you have assigned to your document) to the larger square.
-b. While the large square is still selected, use the pull-down menu from the top right corner of the Color Palette to choose "Complement." This will assign the exact complementary color (in the color model that you have assigned to your document) to the larger square.
+[[File:Fig5 Ex4 03b CC2018.png|400px]]
-[[File:fig03 Ex4 03b_CS6.png|400px]]
+'''c.''' Select the larger square on the right (in our example, the black square) and assign it an analogous hue  to the hue of the smaller square (ours is green) with a middle gray value. We used the Color Picker this time to choose an analogous hue, see the screen shot for clarification.
+[[File:Fig5 Ex4 03c CC2018.png|400px]]
 First we used the Eye Dropper Tool to set the fill of the larger, black square to the same hue/value combination used in the small square (a repeat process from step a). Then in the Color Picker, we slid the hue cursor up slightly for the analogous hue and a little to the left for a value closer to middle gray.
-d. Notice that the two small squares look like they are different colors. They are, in fact, the same color, but the presence of the complementary and analogous colors influences our perception. The complementary color emphasizes the perception of the hues, and the analogous color subtracts the perception of the hues.
+'''d.''' Notice that the two small squares look like they are different colors. They are, in fact, the same color, but the presence of the complementary and analogous colors influences our perception. The complementary color emphasizes the perception of the hues, and the analogous color subtracts the perception of the hues.
-[[File:FIg03_Ex4_03d_CS6.png|400px]]
+[[File:Fig5 Ex4 03d CC2018.png|400px]]

@@ Line 175: / Line 175: @@
 =Exercise 3: Interaction of values=
-. Create a new document in landscape orientation.
+'''1.''' Create a new document in landscape orientation.
-[[File:fig03 Ex3 01_CS6.png|400px]]
+[[File:Fig5 Ex3 01 CC2018.png|600px]]
-[[File:fig03 Ex3 02_CS6.png]]
+'''2.''' Use the Rectangle Tool to create a 20% gray rectangle that covers the whole Artboard, by using the CMYK color sliders to set the K value to 20% and all other sliders to 0%. Display color sliders by clicking on the drop-down menu in the top right corner of the Color Panel and selecting "Show Options", or by clicking on the tiny icon to the left of the "Color" label on the panel tab that toggles the options for the panel.
-. Open the Layer Palette (Windows > Layers). The gray shape should be located on Layer 1. Lock Layer 1 so that the gray shape does not move while completing the following steps.
+[[File:Fig5 Ex3 02 CC2018.png]]
-[[File:Fig03_Ex3_03a_CS6.png]]
 Create a new layer using the button at the bottom of the Layer Palette.
-[[File:FIg03_Ex3_03b_CS6.png]]
+[[File:Fig5 Ex3 03b CC2018.png]]
-. With Layer 1 locked and Layer 2 selected (highlighted in the Layer Palette), the following steps will be accomplished on Layer 2.
+'''5.''' Create Two 3" x 3" squares on top of the gray background. Fill one with white, eliminate any stroke color, and fill the other with black. Place the squares side by side, so that the left edge of one touches the right edge of the other in the middle of the gray area.
-. Create Two 3" x 3" squares on top of the gray background. Fill one with white, eliminate any stroke color, and fill the other with black. Place the squares side by side, so that the left edge of one touches the right edge of the other in the middle of the gray area.
+[[File:Fig5 Ex3 05 CC2018.png|600px]]
-. Create one .75" x .75" square in the center of the white square. Fill the square with 50% black (middle gray).
+'''6.''' Create one .75" x .75" square in the center of the white square. Fill the square with 50% black (middle gray).
-. Option-drag a copy of this square to the middle of the black square with the Selection Tool.
+'''7.''' Option-drag a copy of this square to the middle of the black square with the Selection Tool.
-[[File:fig03 Ex3 07_CS6.png|600px]]
+[[File:Fig5 Ex3 07 CC2018.png|600px]]
 Notice how the middle gray squares inside the black and white areas appear to have different values. When values are placed near or on top of each other, we perceive their values as interacting and affecting one another.  It is important to keep this in mind when choosing hue and value combinations, as one value will always influence the appearance of another.

@@ Line 64: / Line 64: @@
 =Exercise 1: Hue has value!=
-. Create a new document in Illustrator using basic CYMK color mode in landscape orientation. Adjust the settings so the units are measured in inches and choose letter from the Print menu. We named our document hue-has-value.
+'''1.''' Create a new document in Illustrator using basic CYMK color mode in landscape orientation. Adjust the settings so the units are measured in inches and choose letter from the Print menu. We named our document hue-has-value.
 [[File:Fig5 Ex1 01 CC2018.png|600px]]
 . Using the Rectangle Shape Tool, draw five squares on the Artboard.  Hold down the shift key (SHFT) while dragging each square to keep the proportions equal. Evenly distribute the squares by clicking "Horizontal Distribute Left" under the Align Panel (Windows > Align) as we did in chapter 3.
 [[File:Fig5 Ex1 02 CC2018.png|600px]]
 . For each square, choose a fill color of a different hue with different values.  Do not use a stroke. Remember to select the shape before you select a new color from the Swatches or Color Panel.
 [[File:Fig5 Ex1 03 CC2018.png|600px]]
 . Select all of the shapes by marqueeing over all of them with the Selection Tool or hold SHFT and click each shape with the Selection Tool. Hold the option key (OPT) while dragging the squares to create a duplicate set. If you hold the shift key after you begin dragging the mouse, the duplicate copy will move only in straight or 45 degree movements.
 [[File:Fig5 Ex1 04 CC2018.png|600px]]
 . Select one of the duplicate squares with the Selection Tool then click on the Color Palette pull-down menu (located in the top right area of the Color Palette) and choose "Grayscale." This removes the Hue from the square and results in demonstrating the value of the associated hue. Repeat this step for each of the squares in the duplicate set.
 [[File:Fig5 Ex1 05 CC2018.png|600px]]
 . Observe how each hue has an associated value.
 [[File:Fig5 Ex1 06 CC2018.png|600px]]
 . Rearrange the color-grayscale pair according to the grayscale value, with the closest to white at the right, and black at the left. Select each pair (either by marqueeing with the selection tool, or SHFT-clicking on one square followed by the next) and drag it left or right in the grayscale order. Be sure to hold down shift once you have started to drag the mouse as this will keep your movement strictly vertical or horizontal.
 [[File:Fig5 Ex1 07 CC2018.png|600px]]

@@ Line 94: / Line 94: @@
 =Exercise 2: Top or bottom?=
-. Create a new file in Illustrator using basic CYMK color mode in landscape orientation.
+'''1.''' Create a new file in Illustrator using basic CYMK color mode in landscape orientation.
-[[File:fig03 Ex2 01_CS6.png|400px]]
+[[File:Fig5 Ex2 01 CC2018.png|600px]]
-. Use one horizontal guide and three vertical guides to divide the page. Create the guides by clicking on the ruler and dragging the cursor onto the artboard. Place the horizontal guide at 4.75 inches, which is half an inch below the center of the page. Place three vertical guides at .5, 4 and 7.5 inches. If you don't see your rulers, turn them on by clicking View > Rulers > Show Rulers (CMD+R).
+'''2.''' Use one horizontal guide and three vertical guides to divide the page. Create the guides by clicking on the ruler and dragging the cursor onto the artboard. Place the horizontal guide at 4.75 inches, which is half an inch below the center of the page. Place three vertical guides at .5, 4 and 7.5 inches. If you don't see your rulers, turn them on by clicking View > Rulers > Show Rulers (CMD+R).
-[[File:fig03 Ex2 02_CS6.png|600px]]
+[[File:Fig5 Ex2 02 CC2018.png|600px]]
-. Create a 2 x 2" square on the top half of the page. Align the bottom of the square to the horizontal dividing line and the left edge to the middle vertical guide. To make the square exactly 2 by 2", double-click on the art board with the Rectangle Tool to see the Rectangle Options Dialog Box. Type "2 in" into the horizontal and vertical measurement boxes.
+'''3.''' Create a 2 x 2" square on the top half of the page. Align the bottom of the square to the horizontal dividing line and the left edge to the middle vertical guide. To make the square exactly 2 by 2", double-click on the art board with the Rectangle Tool to see the Rectangle Options Dialog Box. Type "2 in" into the horizontal and vertical measurement boxes.
 <table class="infobox">
@@ Line 114: / Line 114: @@
-[[File:fig03 Ex2 03_CS6.png|600px]]
+[[File:Fig5 Ex2 03 CC2018.png|600px]]
 . Colors have three properties: Hue, Value and Saturation.  Hue is the name used to define the color. For instance red, yellow, blue, and so on, are hues. Value refers to how much white or black is mixed into the color. Baby blue has white in it, while navy blue has a greater black value. Saturation is the level of intensity of the color. The color of pale winter tomatoes are less saturated than the color of ripe summer tomatoes.
 Double-click on the fill color in the bottom of the Tool Palette. The Color Picker dialog box appears. The Color Picker is another location for choosing colors.  The Color Picker has controls for all three properties, hue, value and saturation. Choose a hue on the vertical slider to the right of the color selection area. Then choose a value by moving the color selection circle up or down vertically. The higher you move the circle, the higher the value and the lighter the color appears. The lower the circle is placed correlates to a lower value and the color becomes darker. Choose a saturation by moving the color selection circle left or right horizontally. The further to the left the circle is moved, the lower the saturation. The color becomes more gray. The more right you move the circle, the higher the saturation value, and the more intense the color becomes.
-. Make sure that the square is selected before choosing a color in this step. Use the Color Picker to choose a hue with a low value for the fill color of the square. Do not assign a stroke.
+'''5.''' Make sure that the square is selected before choosing a color in this step. Use the Color Picker to choose a hue with a low value for the fill color of the square. Do not assign a stroke.
-[[File:fig03 Ex2 05_CS6.png|400px]]
+'''6.''' Option-Drag your square to the left to create a copy (holding down shift after you start dragging will retain it to a movement along the x-axis). Align the bottom of the new square to the horizontal guide, and the left side of the square to the vertical on the left side of the page.
-. Option-Drag your square to the left to create a copy (holding down shift after you start dragging will retain it to a movement along the x-axis). Align the bottom of the new square to the horizontal guide, and the left side of the square to the vertical on the left side of the page.
+'''7.''' Repeat this action to make a copy of the square to the right, once again aligning the bottom edge with the horizontal guide and the left edge with the vertical guide farthest to the right. This will give your squares even spacing
-. Repeat this action to make a copy of the square to the right, once again aligning the bottom edge with the horizontal guide and the left edge with the vertical guide farthest to the right. This will give your squares even spacing
+[[File:Fig5 Ex2 07 CC2018.png|600px]]
-[[File:fig03 Ex2 07_CS6.png|600px]]
+'''8.''' Select all three of the squares and Option-drag them down to the right so that 1 inch of the upper left corner of the new squares overlap with 1 inch of the bottom right corner of the original squares. Hold down the shift key to drag the squares at a 45 degree angle.
-. Select all three of the squares and Option-drag them down to the right so that 1 inch of the upper left corner of the new squares overlap with 1 inch of the bottom right corner of the original squares. Hold down the shift key to drag the squares at a 45 degree angle.
+[[File:Fig5 Ex2 08 CC2018.png|600px]]
-[[File:fig03 Ex2 08_CS6.png|600px]]
+'''9.''' Give all three of the new squares a different hue with a higher value from the top three:  With all three squares selected, double click on the fill square to bring up the color picker.  Choose a different hue, and choose a higher value so the color has less black in it.
-. Give all three of the new squares a different hue with a higher value from the top three:  With all three squares selected, double click on the fill square to bring up the color picker.  Choose a different hue, and choose a higher value so the color has less black in it.
+[[File:Fig5 Ex2 09 CC2018.png|600px]]
-[[File:fig03 Ex2 09_CS6.png|600px]]
+'''10.''' Select the left set of two squares (drag with the Selection Tool, or shift-click with the Selection Tool).
-. Select the left set of two squares (drag with the Selection Tool, or shift-click with the Selection Tool).
+'''11.''' With the two shapes selected, open the Pathfinder Palette (Window > Pathfinder).  Click on  the "Divide" button, the first button under the Pathfinder heading.  Dividing two objects creates a new shape at the intersection of the paths. The overlapping space is the one inch square. It will become its own whole shape, and the three shapes will remain grouped.
-. With the two shapes selected, open the Pathfinder Palette (Window > Pathfinder).  Click on  the "Divide" button, the first button under the Pathfinder heading.  Dividing two objects creates a new shape at the intersection of the paths. The overlapping space is the one inch square. It will become its own whole shape, and the three shapes will remain grouped.
+[[File:Fig5 Ex2 11 CC2018.png|600px]]
-[[File:fig03 Ex2 11_CS6.png|400px]]
+'''12.''' Select all three shapes and ungroup them by clicking Object > Ungroup (CMD+SHFT+G).  Now they can be selected and treated individually.
-. Select all three shapes and ungroup them by clicking Object > Ungroup (CMD+SHFT+G).  Now they can be selected and treated individually.
+[[File:Fig5 Ex2 12 CC2018.png|400px]]
-[[File:fig03 Ex2 12_CS6.png|400px]]
+'''13.''' Repeat steps 10-12 with the middle and right set of squares.
 '''Creating foreground and background depth using hue and value'''
@@ Line 156: / Line 159: @@
 Now we will modify the color of the middle squares, starting with the left square. The purpose of this exercise is to see how hue and value can be used to create space or depth within a color field. You will set the middle colors to see how that middle square can be pulled forward or pushed back in space, in relationship to the other two squares.
-. For the left set of squares, modify the center square such that it is part of the top square, and both it and the top square are floating above the bottom square.  Achieve this by choosing a hue and value that creates strong contrast with the bottom square (you will especially see this at the boundary between the two shapes), and little or no contrast in value with the top square.
+'''14.''' For the left set of squares, modify the center square such that it is part of the top square, and both it and the top square are floating above the bottom square.  Achieve this by choosing a hue and value that creates strong contrast with the bottom square (you will especially see this at the boundary between the two shapes), and little or no contrast in value with the top square.
-. For the center set of squares, modify the smaller middle square such that it is floating over both of the larger squares.  This is achieved by choosing a hue and value that creates strong contrast with both of the other squares.
+'''15.''' For the center set of squares, modify the smaller middle square such that it is floating over both of the larger squares.  This is achieved by choosing a hue and value that creates strong contrast with both of the other squares.
-. For the right set squares, modify the smaller middle square such that it is part of the bottom square, and both it and the bottom square are floating over the top square.  This effect is achieved by choosing a hue and value that creates strong contrast with the top square, and little or no contrast with the bottom square.
+'''16.''' For the right set squares, modify the smaller middle square such that it is part of the bottom square, and both it and the bottom square are floating over the top square.  This effect is achieved by choosing a hue and value that creates strong contrast with the top square, and little or no contrast with the bottom square.
-[[File:fig03 Ex2 16_CS6.png|600px]]
+[[File:Fig5 Ex2 16 CC2018.png|600px]]
 =Exercise 3: Interaction of values=