Chapter 3

Space

Three Kinds of Space

• Space as format: size, scale, and presentation.

• Space as the relationships among objects and the areas surrounding them: positive and negative space.

• Space as a perceived third dimension: illusionary space

Space as Format• Format = size• Be aware of the typical monitor

resolutions (not the same as monitor size) for computer-based projects.

Space as Format

Using the Format Space• There are no absolute rules.• An image that takes up a tiny

amount of space draws attention to itself.

• An image that takes up the whole space allows the viewer’s eye to wander around the image.

Using the Format Space

Positive and Negative Space

• Positive space: Parts of the image are perceived to be solid, such as an object.

• Negative space: everything else.

Positive and Negative Space

Working with Negative Space

• Negative space is not the leftover! • Play with negative space to

enhance important parts of your message.

Working with Negative Space

Illusionary Space

• Create the illusion of a third dimension by varying size.

Illusionary Space

Illusionary Space

• Create the illusion of a third dimension by varying placement: lower = closer.

Illusionary Space

Illusionary Space

• Create the illusion of a third dimension by using lighter or purer colors for foreground objects.

• Background objects seem less sharp or distinct than foreground objects.

Illusionary Space

Chapter 4

Line

Line as Contour• There are no lines in nature.• Our eyes interpret edges as lines.• When does the artist include lines?

•when surface is separated from background

•when direction changes

Line as Contour

Using Line to Convey Volume• Areas defined by heavier lines

appear to have more volume (and to be closer).

Using Line to Convey Volume

Line as Expression

• Different kinds of lines can suggest different emotions or expressions.

Line as Expression

Line for Direction• Lines direct the viewer’s eye.

•Actual lines•Implied lines: not drawn, but

made up of elements, such as edges, of several objects

•Imaginary lines: something (finger, arrow) points in a particular direction

Line for Direction

Pixelation in Line• Curved lines can appear pixelated

on low-resolution monitors.

Pixelation in Line

Conquering Pixelation in Line• Modify shapes that might be prone

to pixelation.• Use anti-aliasing filters, which

modify the colors of some outer-edge pixels.

Chapter 5

Shape

Shape and Volume• Shape is space enclosed by a line.• Add the 3rd dimension to shape,

and you get volume, or illusory space.

Shape and Volume

Shape Identification• Humans easily identify a wide

variety of shapes.• Designers can exploit this human

trait in many ways.

Shape Identification

Subtle Use of Shape• Shapes that are not the main

image can be used to enhance design:– to make the main image stand

out – to balance the image– to move the viewer’s eye– to reinforce an emotional feeling

Subtle Use of Shape

Shape Association

• The human tendency to group similar shapes can be exploited to create unity in a composition.

Shape Association

Chapter 6

Value

The Nature of Value• Value: the variation of light and

dark areas.• The concept of value applies

whether the image is monochromatic or many-colored.

The Strength of Value• Greater variation of values (up to

the human eye’s limit of about 40 gradations) conveys greater information and detail.

The Strength of Value

Defining Areas of Value• Understanding and being able to

apply value are the keys to good design.

Defining Areas of Value

Light and Value• Light defines value.• Reflected light defines the shape

and volume of objects.

Light and Value

Contrast and Mood• High contrast: a few values

widely separated (e.g., black and white)

• Low contrast: many values in a narrow range

• Lighter values convey lighter moods.

Contrast and Mood

Chapter 7

Texture

The Magic of Texture• Visual information can be used to

convey texture though the viewer can’t actually feel the object.

The Magic of Texture

Uses for Texture• As detail• As space, to provide background

interest

Uses for Texture

Texture Filters

• Imaging software texture filters automatically apply textures that would take hours to create by hand.

Texture Filters

Drawbacks of Texture Filters

• Too many textures can be distracting.• Applying the same filters everyone else

is using makes your work look like everyone else’s.– Adjust the properties of the filters you

use.– Apply more than one filter to the

same image.

Drawbacks of Texture Filters

Texture Design Problems• Oversized background texture can

detract from the main image.• Too many textures, or text over

texture, can make it difficult for the viewer to perceive the most important information.

Texture Design Problems

Chapter 8

Color

What Is Color?• Different colors in the spectrum are

created by different wavelengths of light.

• White is the presence of all the colors in the spectrum. Black is the absence of the colors.

What Is Color?

Additive Color• Combine two colors or wavelengths to

get a third color or wavelength.• Primary colors: red, green, and blue

(RGB).• Secondary colors, produced by adding

two primaries: cyan, magenta, and yellow.

Additive Color

Subtractive Color• An object of a specific color absorbs

(subtracts) all the other colors.• Primary colors: red, blue, yellow

(close to secondary colors of additive method).

• Secondary colors: purple, green, orange.

Subtractive Color

RGB and CMYK• RGB (red, green, blue), or the additive

method, is used for computers and TV• CMYK (cyan, magenta, yellow, black) is

used for print.• A new color wheel includes both

systems.

RGB and CMYK

Color Properties• Hue: The primary or secondary color that

makes up a given color. The hue of pink is red.

• Value: variation of light and dark.• Tint: White has been added to a color.• Shade: Black has been added to a

color.• Intensity (saturation): level of pure color

that is present.

Colors on the Web• Computer monitors can produce a vast

number of colors BUT: Only 216 colors are “Web-safe”—they appear the same on any system.

• Dithering: the process a browser uses to produce a color outside the Web gamut.