Beginning Digital DesignBeginning Digital Design

Design PrincipleBalance

AssignmentLetterform Abstraction

Design PrincipleBalance

AssignmentLetterform Abstraction

Instructor: Po-Chi Chu

BalanceBalanceDefinition: Balance refers to the equal distribution

of weight or force among visual units.

You can use either negative or positive shapes to

create an equilibrium among compositional units,

regardless of variations in their size, weight or

shape.

Definition: Balance refers to the equal distribution

of weight or force among visual units.

You can use either negative or positive shapes to

create an equilibrium among compositional units,

regardless of variations in their size, weight or

shape.

When physical objects are of equal weight, they are in balance. Visual balance works in much the same way. However, the visual weight can be affected not only by the size of objects, but also their values, texture, colors and shapes.

Visual Weight refers to:

the inclination of shapes to float or sink;

the relative importance of visual units within a design.

When physical objects are of equal weight, they are in balance. Visual balance works in much the same way. However, the visual weight can be affected not only by the size of objects, but also their values, texture, colors and shapes.

Visual Weight refers to:

the inclination of shapes to float or sink;

the relative importance of visual units within a design.

Types of BalanceTypes of Balance

1. Symmetrical Balance: occurs when shapes are mirrored on either side of an axis (i.e., vertically divided or horizontally divided).

1. Symmetrical Balance: occurs when shapes are mirrored on either side of an axis (i.e., vertically divided or horizontally divided).

2. Asymmetrical Balance: creates an equilibrium among visual elements that do not mirror each other on either side of the axis.

2. Asymmetrical Balance: creates an equilibrium among visual elements that do not mirror each other on either side of the axis.

Types of BalanceTypes of Balance

Symmetrical Balance in 2-DSymmetrical Balance in 2-D

Symmetrical balance communicates calmness Symmetrical balance communicates calmness and stability.and stability.

(Student work/FSU, 2011) (Student work/FSU, 2010)

Symmetrical Balance in 3-DSymmetrical Balance in 3-D

The Taj Mahal in India and Saint Peter’s Basilica in The Taj Mahal in India and Saint Peter’s Basilica in the Vatican are both built symmetrically.the Vatican are both built symmetrically.

(Taj Mahal, India) (Saint Peter’s Basilica, Vatican)

Variations on SymmetryVariations on SymmetryApproximate symmetry Approximate symmetry is created when similar imagery is created when similar imagery appears on either side of a central axis.appears on either side of a central axis.

(Student work/FSU, 2006)

Here are more examples of approximate symmetry. Here are more examples of approximate symmetry. (Example 2 also demonstrates (Example 2 also demonstrates invertedinverted symmetry.) symmetry.)

Example 1 Example 2

Variations on SymmetryVariations on Symmetry

When design elements are mirrored both vertically and When design elements are mirrored both vertically and horizontally, with the center of the composition acting horizontally, with the center of the composition acting as a focal point, it is called as a focal point, it is called radial symmetryradial symmetry..

Tibetan Mandala, early 13th century

Variations on SymmetryVariations on Symmetry

Asymmetrical BalanceAsymmetrical Balance

Asymmetrical balance can be quite stable, very dynamic or nearly chaotic; it depends on the degree of asymmetry. You can use the following simple strategies to create asymmetrical balance.

Asymmetrical balance can be quite stable, very dynamic or nearly chaotic; it depends on the degree of asymmetry. You can use the following simple strategies to create asymmetrical balance.

STABLE VERY DYNAMIC NEARLY CHAOTIC

Strategies for Asymmetrical BalanceStrategies for Asymmetrical Balance

1. Place a large shape in the center with a small shape farther away.

1. Place a large shape in the center with a small shape farther away.

Strategies for Asymmetrical BalanceStrategies for Asymmetrical Balance

2. Multiple small shapes placed together can balance a large shape.

2. Multiple small shapes placed together can balance a large shape.

Strategies for Asymmetrical BalanceStrategies for Asymmetrical Balance

3. A solid, small shape can balance a large, open shape.

3. A solid, small shape can balance a large, open shape.

Strategies for Asymmetrical BalanceStrategies for Asymmetrical Balance4. A textured shape placed near the fulcrum can

balance a distant open shape. 4. A textured shape placed near the fulcrum can

balance a distant open shape.

Add Boundary to Asymmetrical BalanceAdd Boundary to Asymmetrical Balance

Asymmetry becomes even Asymmetry becomes even more interesting when a more interesting when a boundary is added.boundary is added.

The negative shape will The negative shape will play an important role, and play an important role, and more complex composition more complex composition can be achieved. The can be achieved. The boundary makes the boundary makes the imagery seem imagery seem symmetrical.symmetrical.

Asymmetry becomes even Asymmetry becomes even more interesting when a more interesting when a boundary is added.boundary is added.

The negative shape will The negative shape will play an important role, and play an important role, and more complex composition more complex composition can be achieved. The can be achieved. The boundary makes the boundary makes the imagery seem imagery seem symmetrical.symmetrical.

Balance Is Constantly ChangingBalance Is Constantly ChangingBalance in a composition changes each time a visual element is added or removed.Balance in a composition changes each time a visual element is added or removed.

Any Questions?Any Questions?

Assignment: Letterform AbstractionAssignment: Letterform Abstraction

• Objective• Objective

Understand the design principles of unity and balance through the use of letterform.Understand the design principles of unity and balance through the use of letterform.

• Problem to Solve• Problem to SolveYou will create a design based on the abstraction of the initials of your first and last names. The placement and juxtaposition of the two letters and the specific choice of the type will help you to develop the ability to create unique shapes using the principles of unity and balance.

You will create a design based on the abstraction of the initials of your first and last names. The placement and juxtaposition of the two letters and the specific choice of the type will help you to develop the ability to create unique shapes using the principles of unity and balance.

• Steps (Adobe Illustrator)• Steps (Adobe Illustrator)1. Use two letters (your initials) for this exercise.

The end result will be a design you could apply to your own brand or logo in the future.

2. Create a new document with an artboard of 4 inches by 6 inches.

3. Choose a specific typeface. Both letters must use the same typeface in 72 pts.

4. After you type the letters, choose the Select tool to select the letters.

1. Use two letters (your initials) for this exercise. The end result will be a design you could apply to your own brand or logo in the future.

2. Create a new document with an artboard of 4 inches by 6 inches.

3. Choose a specific typeface. Both letters must use the same typeface in 72 pts.

4. After you type the letters, choose the Select tool to select the letters.

Step 2Step 2Step 2Step 2

Step 4Step 4Step 4Step 4

• Steps (Adobe Illustrator) Cont.• Steps (Adobe Illustrator) Cont.5. Go to Type and choose “Create the outline”.

This step will specify the letters you typed as the object/path (shape) for further manipulation.

6. While the letters are still highlighted, go to Object, then choose “Ungroup”. Now, you should have two individual shapes to manipulate with the Pen tool (P), the Direct Selection tool (A) or the Object Transform function.

5. Go to Type and choose “Create the outline”. This step will specify the letters you typed as the object/path (shape) for further manipulation.

6. While the letters are still highlighted, go to Object, then choose “Ungroup”. Now, you should have two individual shapes to manipulate with the Pen tool (P), the Direct Selection tool (A) or the Object Transform function.

Step 5Step 5Step 5Step 5

Step 6Step 6Step 6Step 6

• Steps (Adobe Illustrator) Cont.• Steps (Adobe Illustrator) Cont.7. Arrange and distort the letters to make them

interesting. After you have completed the design, scale the design larger than 4 inches by 6 inches on your artboard. Group the letters together.

8. Create a 4 inch by 6 inch rectangle with the white fill and 1pt black stroke. Move the rectangle on top of the letter design. Change the opacity of the rectangle to 80%. You should be able to see through the rectangle now.

7. Arrange and distort the letters to make them interesting. After you have completed the design, scale the design larger than 4 inches by 6 inches on your artboard. Group the letters together.

8. Create a 4 inch by 6 inch rectangle with the white fill and 1pt black stroke. Move the rectangle on top of the letter design. Change the opacity of the rectangle to 80%. You should be able to see through the rectangle now.

Step 8Step 8Step 8Step 8

• Steps (Adobe Illustrator) Cont.• Steps (Adobe Illustrator) Cont.9. Next, move and rotate the design you have

created. You will compose a partial design that is both balanced and visually interesting within the 4 inch by 6 inch rectangle.

10.Now select all the objects on the artboard. Check the Layer palette to ensure the rectangular shape is above the other designs.

9. Next, move and rotate the design you have created. You will compose a partial design that is both balanced and visually interesting within the 4 inch by 6 inch rectangle.

10.Now select all the objects on the artboard. Check the Layer palette to ensure the rectangular shape is above the other designs.

• Steps (Adobe Illustrator) Cont.• Steps (Adobe Illustrator) Cont.11.Go to Object and choose Clipping Mask, then

Make. The design sitting outside the rectangle will become invisible, and only the part that was inside the “mask” will remain.

12.Save the file as letterform**.ai for future use.

11.Go to Object and choose Clipping Mask, then Make. The design sitting outside the rectangle will become invisible, and only the part that was inside the “mask” will remain.

12.Save the file as letterform**.ai for future use.

Step 10 & 11Step 10 & 11Step 10 & 11Step 10 & 11

Step 11Step 11Step 11Step 11

ExamplesExamples

1.1. 2.2.

ExamplesExamples

3.3. 4.4.