Digital Foundations

Symmetry and Gestalt





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.

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, you can exercise these design principles as lessons in weight distribution.



Results of some arrangements made in Chapter 3 Exercises


In the following exercises (2 - 7) the compositions will each be created within individual squares (a few of which are 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


1. Create a new document in Inkscape using File > New, then choose File > Document Properties to select the US Letter page size of 8.5 x 11 inches.

2. Choose the Rectangle tool. While pressing the Control key, click and drag your mouse across the Canvas to create a square. Ours is 1.5 x 1.5 inches (you can set the exact dimensions of the W(idth) and H(eight) in the Tool Controls bar above the Canvas).


3. Select the square by clicking on it with the Selector tool. Choose Object > Fill and Stroke to set the fill color to white, the stroke color to black, and the stroke style width to a value you choose - ours is 2px.

4. Select the square by clicking on it with the Selector tool if it is not still selected. Create a 4x4 tile of these squares by choosing Edit > Clone > Create Tiled Clones, then using the Symmetry tab to set the value for both Rows and Columns to 4. Click the Create button. There will be an extra duplicate tile in the top left corner. Select it with the Selector tool then delete it by pressing the Delete or Backspace key.


5. Select all 16 squares by marqueeing around them with the Selector tool. Create spacing between the squares by choosing Object > Rows and Columns and setting "Rows and Columns" to 4 x 4 and spacing to some value of your choosing - we used 30x30 px.


6. Group the 16 squares by selecting them all again, then choosing Object > Group. Grouped objects can be moved, transformed, and edited as one unit while their individual properties are maintained. Move the grid of squares to the center of the document.

7. Choose Layer Menu > Layers to view the Layers dialog. The default name for the layer you are working on is Layer 1, but you can double-click on the layer name to rename it to something more descriptive, like Grid.

8. Use the Layer Menu > Add Layer to add a new layer above the one you are working on. Assign it a descriptive title like Dots.

9. In the Layers dialog, click on the lock icon next to the eyeball at the left of the Grid layer. The lock icon will change from an open lock to a closed one, 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.


10. Make sure that the Dots layer is selected before proceeding as you want to edit on the new layer, not the underlying grid of squares.

11. Create a black circle in the middle of the top left square with the Ellipse tool. Choose this tool then click and drag within the top left square. Press the Control key once you begin dragging the mouse so that the ellipse is constrained to a perfect circle. Choose Object > Fill and Stroke and set black as the fill color of the circle you just created.


Exercise 3: Symmetry with less passive negative space



1. Copy the black circle using the Selector tool to select it, then Edit > Copy followed by Edit > Paste to create a copy. Using the Selector tool, drag the new copy into place one square to the right of the original circle.


2. The new circle should still be selected, and transformation arrows surround the edges of the selected area. Use the Selector tool to reduce the scale of the circle by clicking and dragging on one of the four transformation arrows at the corner of the circle while pressing the Control key.


3. Create another copy of this circle using the Selector tool and Edit > Copy followed by Edit > Paste. Nudge the circle into position by using the left, right, up, and down Arrow keys. The Arrow keys will move the selected object by just one unit. Pressing the Shift key while pressing the arrow keys 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.


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

3. Scale the circle down with the Selector tool while pressing the Control key.

Exercise 5: Asymmetry with imbalanced visual weight




3. Select all four circles using the Selector tool by clicking and dragging around them, or by selecting the first circle and then pressing the Shift key 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 pressing the Shift key while clicking on an object in order to add it to a selection.

4. With the four circles selected, view the Align and Distribute dialog by choosing Object > Align and Distribute. This dialog will be used to distribute the four small circles evenly. Click on the Center on horizontal axis button (2nd row from the top, 3rd from left) and then the Distribute centers equidistantly horizontal button (3rd row from the top, 2nd from left) to line the circles up vertically and create even spacing between them.


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, 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 on the Object Menu > 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 un-grouped by choosing Object > Ungroup.

Hot key: Command+G is the hot key for grouping objects. Command+Shift+G is the hot key for ungrouping objects.

2. Copy and paste the row of circles four times into the next composition, so that there are 16 small circles within the composition. Use the Align and Distribute dialog to fix the rows if they aren't organized (try selecting all four rows and using the button "Align left sides").

3. Select all four rows and click the Distribute centers equidistantly vertical button.



Exercise 7: A focal point is defined within symmetric patterning


1. Select all of the circles in Exercise 6 and copy-paste them to the next composition square.

2. Once the group of black circles is composed in the last composition space, change the fill color of one of the individual circles to create a focal point. All of the black circles are part of a group, so you will have to select the group of the individual circle you wish to modify and click (Object > Ungroup) first. You may have to ungroup twice to get to the level of individual circles.

3. Once you have selected just the individual circle whose color you want to change, choose the Fill and Stroke dialog (Object > Fill and Stroke) to alter the fill color. Notice that as the value lightens, the contrast increases.


Exercise 8: Free play

Use the remainder of the composition squares to make arrangements of your choosing.