Difference between revisions of "Chapter 3 CS4"

From Digital Foundations
Line 1: Line 1:
=Chapter 3: Color Theory & Basic Shapes=
+
=Chapter 3: Symmetry=
German Bauhaus school educators Josef Albers and Johannes Itten helped define and expand upon color theory during the years 1919 - 1923. Albers created a course in color theory that inspired the tutorial in this chapter. Students who attend art and design universities typically complete these color studies using pigment and brushes or with Color-Aid paper, however formal color studies are demonstrated in the digital environment with the following four exercises where hue, value, and contrast are exploited to achieve various color relationships.
+
Symmetry is achieved when the weight of a composition is evenly balanced. Symmetrical forms are perceived as being stable. In order to achieve symmetry in any composition, the designer must create balance with the compositional objects in both their positive and negative spaces in relationship to the grid. The positive space often contains the active design elements while the negative space in a symmetrical composition is usually passive.
  
The traditional (analog) color wheel utilizes the RYB (red-yellow-blue) color model. In this subtractive color model, red, yellow, and blue are the primary hues (what we think of as colors), which can be mixed together to create any other color within the color wheel. Opposite colors on the wheel are called complementary, while analogous colors sit side-by-side on the wheel. When the primaries are mixed together in the subtractive system, the resulting product is black. In the digital spectrum, the RGB (red-green-blue) additive color system is used on television screens and computer monitors. Colored light is mixed to create hue and value with red, green and blue as the primary colors. When the primary colors in the RGB model are mixed together, the result is white.  
+
The opposite of symmetry is asymmetry. Asymmetric compositions can be balanced or imbalanced, but the overall weight distribution between the positive and negative space will be uneven. The negative space in an asymmetric composition may be more active than the positive space.
  
[[File:fig03 01.jpg]]
+
The designer chooses to create symmetry or asymmetry within the composition in order to reach the visual or psychological expectations of her audience. These decisions connect the concept of the presented material to the presentation. For example, a logo for a bank should feel secure and restful, connoting safety and trustworthiness, while a horror movie poster should feel emotionally charged, suspenseful and frightful. Logos for banks tend to be symmetric compositions, and asymmetric designs are used to convey unstable ideas.
  
The CMYK (cyan, magenta, yellow, and black) color model is another digital spectrum that is specific to the print industry. Artists and designers often create high volumes of printed media using the CMYK color model to synchronize the digital file with the four corresponding printing plates. This system is also subtractive, even though it is utilized in a digital environment, so mixing equal parts of cyan, magenta, yellow and black produces black. The CMYK color mode enables digital producers to access Pantone® colors, a set of industry specific colors that are made to render a clear translation between the color that is presented on the screen and the color that will result from the printer's equipment.
+
[http://flickr.com/photos/digitalfoundations/2265836214/ http://flickr.com/photos/digitalfoundations/2265836214/]
  
[[File:fig03 02.jpg]]
+
Image Caption: ''The Bookman'', Advertisement for the New York literary journal, "The Bookman", April 1896.
  
IMAGE: [http://www.flickr.com/photos/digitalfoundations/2229001807/ http://www.flickr.com/photos/digitalfoundations/2229001807/] or [http://en.wikipedia.org/wiki/Image:Farbkreis_Itten_1961.png http://en.wikipedia.org/wiki/Image:Farbkreis_Itten_1961.png]
+
This advertisement is symmetric as the scale and lightness of the female figure in the foreground is counterbalanced by the scale and darkness of the male figure on the right side of the image. The symmetry is reflected over the y-axis in the center of the composition. The typography is centered at both the top and bottom portions of the advertisement.  
  
Caption: ''Farbkreis'', Johannes Itten, 1921
+
[http://flickr.com/photos/digitalfoundations/2261880622/ http://flickr.com/photos/digitalfoundations/2261880622/]
  
IMAGE: [http://commons.wikimedia.org/wiki/Image:Additive_RGB_Circles-48bpp.png http://commons.wikimedia.org/wiki/Image:Additive_RGB_Circles-48bpp.png]
+
Image Caption: ''Vitruvian Man'', Leonardo da Vinci, Drawing on paper, 1492. Photograph by Luc Viatore, 2007.  
  
Caption: ''RGB Color Wheel''
+
Leonardo da Vinci's classic drawing of the human form demonstrates the principle of symmetry in the human body.
  
=Vocabulary=
+
[http://flickr.com/photos/digitalfoundations/2261881892/ http://flickr.com/photos/digitalfoundations/2261881892/]
*''Hue'' is color (e.g. red, blue, green, yellow)
 
* ''Intensity'', ''Saturation'', ''Chroma'' and ''Brilliance'' all refer to how much pigment is in a color, which translates to how vivid a color appears.
 
* ''Value'' is measured by how much white or black is mixed with a hue, or, it can be registered as the grayscale equivalent of a color.
 
* ''Shades'' are a hue mixed with black.
 
* ''Tints'' are a hue mixed with white.
 
* ''Analogous'' colors are adjacent on the color wheel.  
 
  
IMAGE: [http://www.flickr.com/photos/digitalfoundations/2229001663/ http://www.flickr.com/photos/digitalfoundations/2229001663/]
+
Image Caption: ''Codex Aureus of St. Emmeram, Scene: Portrait of Abbot Ramwoldus'', Book painting on parchment by Adalpertus, 1000.
  
Caption: ''Homage to the Square'', Joseph Albers, 1950 - 1975. Analogous colors are demonstrated on this stamp, featuring one of Albers' homages. Albers began working on this series in 1950 and made thousands of works addressing the square over the course of twenty-five years.
+
Symmetry is achieved in Adalpertus' book painting across both the x and y axes.
  
*''Complementary'' colors directly oppose each other on the color wheel.
+
=Exercise 1: Creating symmetry and asymmetry with your body=
  
IMAGE: [http://commons.wikimedia.org/wiki/Image:100_Jahre_Deutscher_Werkbund_-_Postwertzeichen.jpg http://commons.wikimedia.org/wiki/Image:100_Jahre_Deutscher_Werkbund_-_Postwertzeichen.jpg]
+
Before touching the pencil or mouse, one can exercise these design principles as lessons in weight distribution.  
  
Caption: ''Jahre Deutscher Werkbund'', stamp, Germany. Complementary colors are utilized in this stamp celebrating Jahre Deutscher Werkbund.  
+
The grid is created by the x-axis along the hips and the y-axis from the toes to the head.
  
'''Alternatively, we could use two paintings as follows...I haven't figured out who jahre is...'''
+
*Standing straight, with perfect posture, and your body weight equally balanced on two feet (with legs hip-width apart and a slight bend in the knee, if we might be so specific), puts a body in a stable, symmetric position.  
 +
*Now that you have achieved symmetry, lift one foot off of the floor. Bend the lifted leg at the knee as much as possible without falling over. You will feel less stable and off-balance. Your body has achieved asymmetry.
  
IMAGE: [http://commons.wikimedia.org/wiki/Image:Vincent_Van_Gogh_0010.jpg http://commons.wikimedia.org/wiki/Image:Vincent_Van_Gogh_0010.jpg]
+
==Preview of the remaining exercises==
  
Caption: ''Sunflowers'', Vincent Van Gogh, 1888, oil on canvas. Analagous colors are used to in Van Gogh's sunflowers to create color harmony.  
+
[[File:fig05 Ex7 final.png|400px]]
  
IMAGE: [http://www.flickr.com/photos/digitalfoundations/2229000351/ http://www.flickr.com/photos/digitalfoundations/2229000351/]
+
In the following exercises (2 – 7) the compositions will each be created within one of six individual squares (illustrated here). All of the exercises are created in one single document, established in Exercise 2. For these compositions the grid is simple: the horizontal and vertical intersection at the middle of each square is the grid. See and "feel" the visual weight that is constructed between the four quadrants (upper left, right, lower left and right) in each composition.
  
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 2: Symmetry with passive negative space=
  
=Exercise 1: Hue has value!=
+
In this exercise, the black circle in the center of the composition is the positive space and the white surrounding area is the negative space. The negative space is not active, it is dictated by the active positive form. The circle is evenly distributed within the composition. It is perfectly symmetric in relation to both the x and y axes, from the left to the right and the top to the bottom.
  
Finished Exercise File is here [[File:Hue has value 2.ai]]
+
1. Create a new document in Illustrator (File > New) using the default settings pull-down menu to create a letter size page in RGB color space.
  
1. Create a new document in Illustrator using basic CYMK color mode in portrait orientation.
+
2. Click on the rectangular shape tool to create one square that has a white fill and a black stroke. Set the fill and stroke colors before drawing the rectangle. The fill and stroke icons are stacked on top of each other at the bottom of the Tool Palette (see chapters 1 and 3 for working with the fill and stroke). Double-click the icon that is on top and select the color you want to use from the Color Picker. Once you set the color for the top icon (fill or stroke), click once on the bottom icon (if you took care of fill first, now you will set the color for the stroke) and define this color by using the Color Palette (Window > Color Palette).
  
[[File:Fig03_Ex1_01.jpg|400px]]
 
  
2. 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.
+
[[File:Fig05_Ex2_02.jpg|400px]]
  
[[File:Fig03_Ex1_02.jpg|400px]]
 
  
3. 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 Palette.
+
3. With the fill and stroke colors defined, hold the shift key while dragging the Rectangle Tool on the Artboard. The result is a square instead of a rectangle. Click with the mouse and begin dragging before holding the shift key (SHFT) and release the mouse before letting go of SHFT. The square we made was about 2 X 2 inches.
  
[[File:Fig03_Ex1_03a.jpg|400px]][[File:Fig03_Ex1_03.jpg]]
+
4. While copy and paste are accessible through the Edit menu, we will use the Selection Tool to duplicate and position five copies of the square.
  
 +
 +
<table class="infobox">
 +
 +
<tr>
 +
 +
<td>Hot Key: While you are working, CMD is the hot key for the Select Tool.</td>
 +
</tr>
 +
 +
</table>
 +
 +
Hold the option key (OPT) and click on the original square with the Selection Tool, then drag the mouse to the right. While you are dragging (and still holding OPT and clicking with the mouse) add SHFT. Adding the shift key keeps the movement restricted to a 0, 45, 90, or 180 degree motion (in other words, you'll position the new square along the same baseline or x-axis to the right of the original square).
 +
 +
 +
[[File:Fig05_Ex2_04.jpg|400px]]
 +
 +
 +
<table class="infobox">
 +
 +
<tr>
 +
 +
<td>Hot Key: The relationship between SHFT and the Select Tool is two-fold: 1. Shift will constrain the proportions of objects as you drag to resize a shape or image, and 2. Shift keeps the movement of objects aligned vertically or horizontally on the Artboard.</td>
 +
</tr>
 +
 +
</table>
 +
 +
 +
5. Now that you have two squares that are exactly the same, side by side, select both squares at one time by marqueeing over them (click and drag over both of them beginning on the artboard) or by selecting the first circle and then holding shift while clicking with the mouse to add the second square to the selection. Group the two squares using Object > Group.
 +
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 +
<table class="infobox">
 +
 +
<tr>
 +
 +
<td>In the lab, we call this “shift-clicking”. Since we will probably refer to “shift-clicking” in future chapters, this always means holding the shift key while clicking on an object in order to add it to a selection.</td>
 +
</tr>
 +
 +
</table>
 +
 +
6. Grouped objects can be moved, transformed, and have their colors edited as one unit while their individual properties are maintained. In this case, the squares will be copied and positioned together.
 +
 +
7. Copy the two squares two more times, moving down the page.
 +
 +
8. Use the Select Tool to position the squares into place. Be attentive to the space between the margins of the page and the space between the outlines of the squares.
 +
 +
9. Use the Layer Palette (Window > Layers) to lock the squares on Layer 1. Next to the eyeball at the left of Layer 1, click on the square illustrated below. A lock icon will appear, indicating that the layer is locked. Locked layers cannot be modified until they are unlocked. This is a protective measure that a designer often takes when part of a project is complete and she doesn’t want to accidentally select or move objects that are already established.
  
  
4. 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:Fig05_Ex2_09.jpg]]
  
[[File:Fig03_Ex1_04.jpg|400px]]
+
10. Once the layer is locked, create a new layer to work on by clicking the “Create New Layer” icon at the bottom of the Layer Palette. Layer 2 will appear above Layer 1. This is the layer that will contain the rest of the vector art objects in this chapter. Be sure that it is active (it will be highlighted) before proceeding.
  
5. 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.
+
11. Create a black circle in the middle of the top left square with the Ellipse Tool. The Ellipse Tool might be buried beneath the Rectangle Tool in the Tool Palette, access it by holding a mouse click for a couple of seconds on the Rectangle Tool. All of the Shape Tools will be visible. Move the mouse over the Ellipse Tool to select it. With this tool, click and drag within the top left square. Hold the shift key once you begin dragging the mouse so that the ellipse becomes a perfect circle.
  
[[File:Fig03_Ex1_05.jpg|400px]]
+
[[File:Fig05_Ex2_11.jpg|400px]]
  
6. Observe how each hue has an associated value.
+
=Exercise 3: Symmetry with less passive negative space=
  
[[File:Fig03_Ex1_06.jpg|400px]]
+
In this exercise, the two new circles create a balanced, symmetric composition. The visual weight is the same in the four quadrants created by the intersection of the x and y axes; and the circles are reflective over a diagonal line. However, notice the tension between the two circles at the middle of the page. This tension is created when the two active forms are so near to each other that the eye cannot help but notice the negative space between them. The negative space fights for the viewer’s attention. Therefore, the negative space is slightly less active than it was in the first exercise.
  
7. 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.
+
1. Copy the black circle and move it into the second square by using the Select Tool to click and drag on the original circle while holding OPT. Drag the new copy into place and release the mouse before releasing the key.  
  
[[File:Fig03_Ex1_07.jpg|400px]]
 
  
=Exercise 2: Top or bottom?=
+
<table class="infobox">
  
Finished Exercise File is here [[File:Top_or_bottom_final_2.ai]]
+
<tr>
  
1. Create a new file in Illustrator using basic CYMK color mode in landscape orientation.
+
<td>Watch Out For This: If you are new to using the mouse and the keyboard together, practice using your non-mouse hand to activate hot-keys while keeping your mouse-hand on the mouse. It is ineffective to lift up the mouse hand!</td>
 +
</tr>
  
[[File:fig03 Ex2 01.jpg|400px]]
+
</table>
  
2. Use a guide to separate the page into two halves (top and bottom), by pulling the guide from the top ruler to the halfway point on the vertical ruler. If you don't see your rulers, turn them on by clicking View > Show Rulers (CMD+R). Repeat this process to create a second guide that cuts the page in half vertically (left and right).  
+
2. The new circle should still be selected, and anchor points surround the edges of the selected area. Use the Selection Tool to reduce the scale of the circle by clicking and dragging on one of the four anchor points at the edges of the circle towards its center. Practice holding SHFT while reducing the scale of the circle.  
  
[[File:fig03 Ex2 02.jpg|400px]]
 
  
3. Create a 2 x 2" horizontally centered square on the top half of the page by aligning the bottom of the square to the horizontal dividing line. 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.  
+
[[File:Fig05_Ex3_01.jpg|400px]]
  
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 
<table class="infobox">
 
<table class="infobox">
  
 
<tr>
 
<tr>
  
<td>If the dialog box is set to a different unit of measurement when it first opens, for instance points or pixels, typing "2 in" tells the program to use inches instead of the units of measurement that initially appeared in the dialog box.</td>
+
<td>FYI: The units of increment that an object moves when using the arrow keys are defined in the General Preferences (Illustrator > Preferences > General). They are referred to as “Keyboard Increments” and the default setting is 0.0139 inches. All preferences are user-defined.</td>
 
</tr>
 
</tr>
  
Line 104: Line 152:
  
  
[[File:fig03 Ex2 03.jpg|400px]]
+
3. Create another copy of this circle using the selection tool and OPT to make the second black circle. Nudge the circle into position by using the left, right, up, and down arrow keys (ARW). The arrow keys will move the selected object by just one unit, while SHFT + ARW moves the object in increments of 10.
  
''Using the Color Picker''
+
=Exercise 4: Balanced asymmetry=
  
4. 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.  
+
In this exercise the two circles create an asymmetric composition. The weight distribution between the four quadrants of the composition is not even, as most of the visual weight is felt in the upper left quadrant. The composition does remain balanced, as the negative space between the two circles activates the viewer’s attention and becomes part of the visual weight on the page. The white area is still the negative space; however, the white area between the two circles is within the path of the viewer’s eye movement from the top (larger) circle to the bottom (smaller) circle.
  
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.
+
1. Copy the second circle from the previous exercise and drag it into position in the third square.  
  
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.jpg|400px]]
+
<table class="infobox">
  
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).
+
<tr>
 +
 
 +
<td>Watch Out: Did your circle turn into an ellipse? Without holding the shift key, the circles transforms into ellipses. Be sure to release the mouse before releasing the shift key when drawing forms that are modified by SHFT.</td>
 +
</tr>
  
7. Repeat this action to make a copy of the square to the right.
+
</table>
  
[[File:fig03 Ex2 07.jpg|400px]]
+
2. Make another copy of this circle and drag it to the lower right of the composition.
  
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.  
+
[[File:Fig05_Ex4_01.jpg|400px]]
  
[[File:fig03 Ex2 08.jpg|400px]]
+
3. Scale the circle down using SHFT with the Selection Tool.  
  
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.
 
  
[[File:fig03 Ex2 09.jpg|400px]]
+
=Exercise 5: Asymmetry with imbalanced visual weight=
 +
In this exercise, the negative space is the white area surrounding the four black circles. The four black circles are asymmetric in regards to the overall composition. The negative space creates more mass than the positive space, and the four black circles pull the viewer’s eye to the bottom of the composition. What is also noteworthy about this exercise is that the four black circles are read as a line by the gestalt law of similarity, where like elements (four circles) are read as a whole line before being perceived individually.  
  
10. Select the left set of two squares (drag with the Selection Tool, or shift-click with the Selection Tool).  
+
1. Copy the smaller circle in the fourth rectangle and move it to the empty composition to the right.
  
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.
+
2. Create three copies of the small circle within the composition.  
  
[[File:fig03 Ex2 11.jpg]]
+
[[File:Fig05_Ex5_02.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.  
+
3. Select all four circles using the Selection Tool by marqueeing over them (click and drag over all four, beginning on the Artboard) or by selecting the first circle and then holding SHFT while clicking on each one time with the mouse to add the remaining circles to the selection.  
 +
 
 +
 
 +
<table class="infobox">
  
[[File:fig03 Ex2 12.jpg]]
+
<tr>
  
13. Repeat steps 10-12 with the middle and right set of squares.
+
<td>In the lab, we call this “shift-clicking”. Since we will probably refer to “shift-clicking” in future chapters, this always means holding SHFT while clicking on an object in order to add to a selection.</td>
 +
</tr>
  
''Creating foreground and background depth using hue and value''
+
</table>
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.
 
  
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.  
+
4. With the four circles selected, view the Align Palette (Window > Align). This palette will be used to distribute the four small circles evenly. Click the fifth button from the left under the "Distribute Objects" part of the Align Palette. Hold the mouse over this icon to see a pop up dialog box that displays, "Horizontal Distribute Center".  
  
[[File:fig03 Ex2 14.jpg]]
+
[[File:Fig05_Ex5_04.jpg|400px]]
  
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.
 
  
[[File:fig03 Ex2 15.jpg]]
+
If the circles were not duplicated with the SHFT key activated (to keep their position in order on one line), the Align Palette can also be used to align the objects with the button, "Vertical Align Top".
  
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.jpg]]
+
<table class="infobox">
  
=Exercise 3: Interaction of values=
+
<tr>
  
Finished Exercise File is here [[File:Interaction_of_value.ai]]
+
<td>Watch Out: One time I was demonstrating this and my circles were misbehaving. It turned out I had “Align to Artboard” activated within my Align palette. If your distribution seems far off, be sure that this option is not active in the bottom section of the Align palette.</td>
 +
</tr>
  
1. Create a new document in landscape orientation.
+
</table>
  
[[File:fig03 Ex3 01.jpg|400px]]
 
  
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%.
+
=Exercise 6: Symmetry with patterning=
  
[[File:fig03 Ex3 02.jpg|400px]]
+
Gestalt psychology is important to visual creators because it provides a theory for the way humans perceive groups of shapes in a composition. While there are four distinct properties and six laws (termed, Pra(can we get two dots over the a?)gnanz), one of the main themes is the understanding that viewers see a group of like objects as a whole unit before seeing the individual parts. Termed the law of similarity, the individual circles will be read only after the viewer sees the entire pattern presented here as a square. It’s nearly magic: a group of circles becomes a square.
  
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.  
+
1. Select all four of the circles in the row in Exercise 5. Click Object > Group. Grouping objects is convenient as the separate objects maintain their autonomy while acting as part of a set that moves, transforms, and receives color information together. Grouped objects can always be ungrouped (Object: Ungroup).  
  
[[File:Fig03_Ex3_03a.jpg]]
 
  
Create a new layer using the button at the bottom of the Layer Palette.
+
<table class="infobox">
  
[[File:FIg03_Ex3_03b.jpg]]
+
<tr>
  
 +
<td>Hotkey: CMD+G is the hot key for grouping objects. CMD+SHFT+G is the hot key for ungrouping objects.</td>
 +
</tr>
  
4. With Layer 1 locked and Layer 2 selected (highlighted in the Layer Palette), the following steps will be accomplished on Layer 2.
+
</table>
  
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.
+
2. Hold option as you click on the grouped row of small circles and drag it to the next composition. Duplicate the row three more times while adding SHFT so all four rows of circles have their left and right edges on the same margin lines. Use the Align Palette to fix the rows if they aren't organized (try selecting all four rows and using the button, "Horizontal Align Left."
  
[[File:fig03 Ex3 05.jpg|400px]]
+
3. Select all four rows and click the second button in the Distribute Object section of the Align Palette ("Vertical Distribute Center").
  
6. Create one .75" x .75" square in the center of the white square. Fill the square with 50% black (middle gray).
 
  
7. Option-drag a copy of this square to the middle of the black square with the Selection Tool.
+
[[File:Fig05_Ex6_03.jpg|400px]]
  
[[File:fig03 Ex3 07.jpg|400px]]
+
=Exercise 7: A focal point is defined within symmetric patterning=
  
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.
+
In the last exercise, the repetition of the sixteen circles created a pattern. In this exercise, the repetition is broken by changing the value and hue of one circle (one part of the whole) in the lower right quadrant of the composition. A focal point is created by the contrast of value and hue. When the contrast between like and unlike forms is as extreme as it is in this exercise, the designer can direct the viewer’s eye to a particular part of the composition. Utilizing contrast to create a focal point is an essential design skill.
  
=Exercise 4: Interaction of colors=
+
1. Select all of the circles in Exercise 6, OPT-drag them to the final composition. Hold SHFT as you drag to move the set of circles along a straight path.
  
Finished Exercise File is here [[File:Interaction_of_hue_2.ai]]
+
2. Once the group of black circles is composed within the last composition, change the fill color of one of the individual circles to set a focal point. All of the black circles are part of a group. If the group is selected and the fill color is modified, all of the circles are modified. While this is useful, it is our current goal. Instead, use the Direct Selection Tool to select just one circle. The Direct Selection Tool can be used to modify a path, an anchor point, or to alter one part of a group of objects. Click inside one of the circles and be sure to click inside the circle and not on the path around the edge of the circle. We do not want to modify the path, we want to modify the color of the whole circle.  
And now for the magic trick: in the next exercise three colors appear as four colors.
 
  
1. Re-save your Exercise 3 file with a new name using File > Save As.  
+
[[File:Fig05_Ex7_02.jpg|400px]]
  
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.jpg|400px]]
+
3. Set the fill color to a color of your choice by using the Swatches Palette, the Color Palette, or the Color Picker (see chapter 3 for more on using color). Notice that as the value lightens, the contrast increases.  
  
  
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:
+
<table class="infobox">
  
 +
<tr>
  
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!
+
<td>Further Reading: ''Primer of Visual Literacy'' by Donis A. Dondis and ''Principles of Form and Design'' by Wucius Wong</td>
 +
</tr>
  
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.
+
</table>
 +
=Notes:=
  
[[File:fig03 Ex4 03b.jpg|400px]]
+
From the TOC
  
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.
+
''Alignment''
  
 +
Formal Principles: Symmetry, Asymmetry, Balance, Positive/Negative Space, Gestalt, Focal Point
  
[[File:Fig03_Ex4_03c.jpg|400px]]
+
Historic References: El Lissitzky, Mary Martin, Bridget Riley, Alexander Rodchenko
  
 +
New TOC:
  
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.
+
''Symmetry''
  
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.
+
Formal Principles: Symmetry, Asymmetry, Focal Point
  
[[File:FIg03_Ex4_03d.jpg|400px]]
+
Historic References: El Lissitzky, Mary Martin, Bridget Riley, Alexander Rodchenko

Revision as of 11:40, 10 January 2013

Chapter 3: Symmetry

Symmetry is achieved when the weight of a composition is evenly balanced. Symmetrical forms are perceived as being stable. In order to achieve symmetry in any composition, the designer must create balance with the compositional objects in both their positive and negative spaces in relationship to the grid. The positive space often contains the active design elements while the negative space in a symmetrical composition is usually passive.

The opposite of symmetry is asymmetry. Asymmetric compositions can be balanced or imbalanced, but the overall weight distribution between the positive and negative space will be uneven. The negative space in an asymmetric composition may be more active than the positive space.

The designer chooses to create symmetry or asymmetry within the composition in order to reach the visual or psychological expectations of her audience. These decisions connect the concept of the presented material to the presentation. For example, a logo for a bank should feel secure and restful, connoting safety and trustworthiness, while a horror movie poster should feel emotionally charged, suspenseful and frightful. Logos for banks tend to be symmetric compositions, and asymmetric designs are used to convey unstable ideas.

http://flickr.com/photos/digitalfoundations/2265836214/

Image Caption: The Bookman, Advertisement for the New York literary journal, "The Bookman", April 1896.

This advertisement is symmetric as the scale and lightness of the female figure in the foreground is counterbalanced by the scale and darkness of the male figure on the right side of the image. The symmetry is reflected over the y-axis in the center of the composition. The typography is centered at both the top and bottom portions of the advertisement.

http://flickr.com/photos/digitalfoundations/2261880622/

Image Caption: Vitruvian Man, Leonardo da Vinci, Drawing on paper, 1492. Photograph by Luc Viatore, 2007.

Leonardo da Vinci's classic drawing of the human form demonstrates the principle of symmetry in the human body.

http://flickr.com/photos/digitalfoundations/2261881892/

Image Caption: Codex Aureus of St. Emmeram, Scene: Portrait of Abbot Ramwoldus, Book painting on parchment by Adalpertus, 1000.

Symmetry is achieved in Adalpertus' book painting across both the x and y axes.

Exercise 1: Creating symmetry and asymmetry with your body

Before touching the pencil or mouse, one can exercise these design principles as lessons in weight distribution.

The grid is created by the x-axis along the hips and the y-axis from the toes to the head.

  • Standing straight, with perfect posture, and your body weight equally balanced on two feet (with legs hip-width apart and a slight bend in the knee, if we might be so specific), puts a body in a stable, symmetric position.
  • Now that you have achieved symmetry, lift one foot off of the floor. Bend the lifted leg at the knee as much as possible without falling over. You will feel less stable and off-balance. Your body has achieved asymmetry.

Preview of the remaining exercises

Fig05 Ex7 final.png

In the following exercises (2 – 7) the compositions will each be created within one of six individual squares (illustrated here). All of the exercises are created in one single document, established in Exercise 2. For these compositions the grid is simple: the horizontal and vertical intersection at the middle of each square is the grid. See and "feel" the visual weight that is constructed between the four quadrants (upper left, right, lower left and right) in each composition.

Exercise 2: Symmetry with passive negative space

In this exercise, the black circle in the center of the composition is the positive space and the white surrounding area is the negative space. The negative space is not active, it is dictated by the active positive form. The circle is evenly distributed within the composition. It is perfectly symmetric in relation to both the x and y axes, from the left to the right and the top to the bottom.

1. Create a new document in Illustrator (File > New) using the default settings pull-down menu to create a letter size page in RGB color space.

2. Click on the rectangular shape tool to create one square that has a white fill and a black stroke. Set the fill and stroke colors before drawing the rectangle. The fill and stroke icons are stacked on top of each other at the bottom of the Tool Palette (see chapters 1 and 3 for working with the fill and stroke). Double-click the icon that is on top and select the color you want to use from the Color Picker. Once you set the color for the top icon (fill or stroke), click once on the bottom icon (if you took care of fill first, now you will set the color for the stroke) and define this color by using the Color Palette (Window > Color Palette).


Fig05 Ex2 02.jpg


3. With the fill and stroke colors defined, hold the shift key while dragging the Rectangle Tool on the Artboard. The result is a square instead of a rectangle. Click with the mouse and begin dragging before holding the shift key (SHFT) and release the mouse before letting go of SHFT. The square we made was about 2 X 2 inches.

4. While copy and paste are accessible through the Edit menu, we will use the Selection Tool to duplicate and position five copies of the square.


Hot Key: While you are working, CMD is the hot key for the Select Tool.

Hold the option key (OPT) and click on the original square with the Selection Tool, then drag the mouse to the right. While you are dragging (and still holding OPT and clicking with the mouse) add SHFT. Adding the shift key keeps the movement restricted to a 0, 45, 90, or 180 degree motion (in other words, you'll position the new square along the same baseline or x-axis to the right of the original square).


Fig05 Ex2 04.jpg


Hot Key: The relationship between SHFT and the Select Tool is two-fold: 1. Shift will constrain the proportions of objects as you drag to resize a shape or image, and 2. Shift keeps the movement of objects aligned vertically or horizontally on the Artboard.


5. Now that you have two squares that are exactly the same, side by side, select both squares at one time by marqueeing over them (click and drag over both of them beginning on the artboard) or by selecting the first circle and then holding shift while clicking with the mouse to add the second square to the selection. Group the two squares using Object > Group.








In the lab, we call this “shift-clicking”. Since we will probably refer to “shift-clicking” in future chapters, this always means holding the shift key while clicking on an object in order to add it to a selection.

6. Grouped objects can be moved, transformed, and have their colors edited as one unit while their individual properties are maintained. In this case, the squares will be copied and positioned together.

7. Copy the two squares two more times, moving down the page.

8. Use the Select Tool to position the squares into place. Be attentive to the space between the margins of the page and the space between the outlines of the squares.

9. Use the Layer Palette (Window > Layers) to lock the squares on Layer 1. Next to the eyeball at the left of Layer 1, click on the square illustrated below. A lock icon will appear, indicating that the layer is locked. Locked layers cannot be modified until they are unlocked. This is a protective measure that a designer often takes when part of a project is complete and she doesn’t want to accidentally select or move objects that are already established.


Fig05 Ex2 09.jpg

10. Once the layer is locked, create a new layer to work on by clicking the “Create New Layer” icon at the bottom of the Layer Palette. Layer 2 will appear above Layer 1. This is the layer that will contain the rest of the vector art objects in this chapter. Be sure that it is active (it will be highlighted) before proceeding.

11. Create a black circle in the middle of the top left square with the Ellipse Tool. The Ellipse Tool might be buried beneath the Rectangle Tool in the Tool Palette, access it by holding a mouse click for a couple of seconds on the Rectangle Tool. All of the Shape Tools will be visible. Move the mouse over the Ellipse Tool to select it. With this tool, click and drag within the top left square. Hold the shift key once you begin dragging the mouse so that the ellipse becomes a perfect circle.

Fig05 Ex2 11.jpg

Exercise 3: Symmetry with less passive negative space

In this exercise, the two new circles create a balanced, symmetric composition. The visual weight is the same in the four quadrants created by the intersection of the x and y axes; and the circles are reflective over a diagonal line. However, notice the tension between the two circles at the middle of the page. This tension is created when the two active forms are so near to each other that the eye cannot help but notice the negative space between them. The negative space fights for the viewer’s attention. Therefore, the negative space is slightly less active than it was in the first exercise.

1. Copy the black circle and move it into the second square by using the Select Tool to click and drag on the original circle while holding OPT. Drag the new copy into place and release the mouse before releasing the key.


Watch Out For This: If you are new to using the mouse and the keyboard together, practice using your non-mouse hand to activate hot-keys while keeping your mouse-hand on the mouse. It is ineffective to lift up the mouse hand!

2. The new circle should still be selected, and anchor points surround the edges of the selected area. Use the Selection Tool to reduce the scale of the circle by clicking and dragging on one of the four anchor points at the edges of the circle towards its center. Practice holding SHFT while reducing the scale of the circle.


Fig05 Ex3 01.jpg






FYI: The units of increment that an object moves when using the arrow keys are defined in the General Preferences (Illustrator > Preferences > General). They are referred to as “Keyboard Increments” and the default setting is 0.0139 inches. All preferences are user-defined.


3. Create another copy of this circle using the selection tool and OPT to make the second black circle. Nudge the circle into position by using the left, right, up, and down arrow keys (ARW). The arrow keys will move the selected object by just one unit, while SHFT + ARW moves the object in increments of 10.

Exercise 4: Balanced asymmetry

In this exercise the two circles create an asymmetric composition. The weight distribution between the four quadrants of the composition is not even, as most of the visual weight is felt in the upper left quadrant. The composition does remain balanced, as the negative space between the two circles activates the viewer’s attention and becomes part of the visual weight on the page. The white area is still the negative space; however, the white area between the two circles is within the path of the viewer’s eye movement from the top (larger) circle to the bottom (smaller) circle.

1. Copy the second circle from the previous exercise and drag it into position in the third square.


Watch Out: Did your circle turn into an ellipse? Without holding the shift key, the circles transforms into ellipses. Be sure to release the mouse before releasing the shift key when drawing forms that are modified by SHFT.

2. Make another copy of this circle and drag it to the lower right of the composition.

Fig05 Ex4 01.jpg

3. Scale the circle down using SHFT with the Selection Tool.


Exercise 5: Asymmetry with imbalanced visual weight

In this exercise, the negative space is the white area surrounding the four black circles. The four black circles are asymmetric in regards to the overall composition. The negative space creates more mass than the positive space, and the four black circles pull the viewer’s eye to the bottom of the composition. What is also noteworthy about this exercise is that the four black circles are read as a line by the gestalt law of similarity, where like elements (four circles) are read as a whole line before being perceived individually.

1. Copy the smaller circle in the fourth rectangle and move it to the empty composition to the right.

2. Create three copies of the small circle within the composition.

Fig05 Ex5 02.png

3. Select all four circles using the Selection Tool by marqueeing over them (click and drag over all four, beginning on the Artboard) or by selecting the first circle and then holding SHFT while clicking on each one time with the mouse to add the remaining circles to the selection.


In the lab, we call this “shift-clicking”. Since we will probably refer to “shift-clicking” in future chapters, this always means holding SHFT while clicking on an object in order to add to a selection.

4. With the four circles selected, view the Align Palette (Window > Align). This palette will be used to distribute the four small circles evenly. Click the fifth button from the left under the "Distribute Objects" part of the Align Palette. Hold the mouse over this icon to see a pop up dialog box that displays, "Horizontal Distribute Center".

400px


If the circles were not duplicated with the SHFT key activated (to keep their position in order on one line), the Align Palette can also be used to align the objects with the button, "Vertical Align Top".


Watch Out: One time I was demonstrating this and my circles were misbehaving. It turned out I had “Align to Artboard” activated within my Align palette. If your distribution seems far off, be sure that this option is not active in the bottom section of the Align palette.


Exercise 6: Symmetry with patterning

Gestalt psychology is important to visual creators because it provides a theory for the way humans perceive groups of shapes in a composition. While there are four distinct properties and six laws (termed, Pra(can we get two dots over the a?)gnanz), one of the main themes is the understanding that viewers see a group of like objects as a whole unit before seeing the individual parts. Termed the law of similarity, the individual circles will be read only after the viewer sees the entire pattern presented here as a square. It’s nearly magic: a group of circles becomes a square.

1. Select all four of the circles in the row in Exercise 5. Click Object > Group. Grouping objects is convenient as the separate objects maintain their autonomy while acting as part of a set that moves, transforms, and receives color information together. Grouped objects can always be ungrouped (Object: Ungroup).


Hotkey: CMD+G is the hot key for grouping objects. CMD+SHFT+G is the hot key for ungrouping objects.

2. Hold option as you click on the grouped row of small circles and drag it to the next composition. Duplicate the row three more times while adding SHFT so all four rows of circles have their left and right edges on the same margin lines. Use the Align Palette to fix the rows if they aren't organized (try selecting all four rows and using the button, "Horizontal Align Left."

3. Select all four rows and click the second button in the Distribute Object section of the Align Palette ("Vertical Distribute Center").


Fig05 Ex6 03.jpg

Exercise 7: A focal point is defined within symmetric patterning

In the last exercise, the repetition of the sixteen circles created a pattern. In this exercise, the repetition is broken by changing the value and hue of one circle (one part of the whole) in the lower right quadrant of the composition. A focal point is created by the contrast of value and hue. When the contrast between like and unlike forms is as extreme as it is in this exercise, the designer can direct the viewer’s eye to a particular part of the composition. Utilizing contrast to create a focal point is an essential design skill.

1. Select all of the circles in Exercise 6, OPT-drag them to the final composition. Hold SHFT as you drag to move the set of circles along a straight path.

2. Once the group of black circles is composed within the last composition, change the fill color of one of the individual circles to set a focal point. All of the black circles are part of a group. If the group is selected and the fill color is modified, all of the circles are modified. While this is useful, it is our current goal. Instead, use the Direct Selection Tool to select just one circle. The Direct Selection Tool can be used to modify a path, an anchor point, or to alter one part of a group of objects. Click inside one of the circles and be sure to click inside the circle and not on the path around the edge of the circle. We do not want to modify the path, we want to modify the color of the whole circle.

Fig05 Ex7 02.jpg


3. Set the fill color to a color of your choice by using the Swatches Palette, the Color Palette, or the Color Picker (see chapter 3 for more on using color). Notice that as the value lightens, the contrast increases.


Further Reading: Primer of Visual Literacy by Donis A. Dondis and Principles of Form and Design by Wucius Wong

Notes:

From the TOC

Alignment

Formal Principles: Symmetry, Asymmetry, Balance, Positive/Negative Space, Gestalt, Focal Point

Historic References: El Lissitzky, Mary Martin, Bridget Riley, Alexander Rodchenko

New TOC:

Symmetry

Formal Principles: Symmetry, Asymmetry, Focal Point

Historic References: El Lissitzky, Mary Martin, Bridget Riley, Alexander Rodchenko