Celebrity Caricature Assemblage Principles of Visual Design LCC 2720 Instructor: Brian Schrank.
Principles of Visual Design LCC 2720 Lecture 3 Color
description
Transcript of Principles of Visual Design LCC 2720 Lecture 3 Color
Principles of Visual Design 2720
Principles of Visual Design LCC 2720
Lecture 3
Color
Principles of Visual Design 2720
Color Wheel
Principles of Visual Design 2720
Primary Colors
Principles of Visual Design 2720
Secondary Colors
Principles of Visual Design 2720
Tertiary Colors
Principles of Visual Design 2720
Primary, Secondary and Tertiary Colors
Principles of Visual Design 2720
Primary, Secondary and Tertiary Colors
Principles of Visual Design 2720
Standard 12-Color Wheel
Principles of Visual Design 2720
Three Characteristics of Color
Hue
Saturation
Value
Principles of Visual Design 2720
Hue, Saturation and Brightness (Value)in the Photoshop/Illustrator Color Picker
Principles of Visual Design 2720
Hue, Saturation and Brightness (Value)in the Photoshop/Illustrator Color Picker
Principles of Visual Design 2720
The First Color Wheel
Sir Isaac Newton created the first color wheel resulting from his experiments with refracting light.
Principles of Visual Design 2720
Modern Color Theory
Principles of Visual Design 2720
Color Theory Overview
According to color theory, harmonious color combinations use:
Any two colors opposite each other on the color wheel.
Any group of colors next to each other on the color wheel.
Any three colors equally spaced around the color wheel forming a triangle.
Color schemes remain harmonious regardless of the rotation angle.
Principles of Visual Design 2720
Color Theory Overview
Any four colors forming a rectangle.
The split of one color’s compliment.
Monochromatic combinations.
Color schemes remain harmonious regardless of the rotation angle.
Principles of Visual Design 2720
Monochromatic
Monochromatic color schemes are guaranteed to be harmonious as they are a single color with variations of value and saturation. They have the highest degree of harmony, but the lowest degree of contrast. Since they grab your attention less than any other color combination they’re usually used for more reserved, corporate, expensive, or nostalgic types of designs.
Principles of Visual Design 2720
Monochromatic Design
However, as all rules are there to be broken, the laid back color scheme of this design makes it extremely appealing to the eye. The uniformity and subtlety of color is balanced with a huge upside-down alphabet and strange collage of iconography. If the colors contrasted each other with hue we wouldn’t notice the strange imagery as much.
Principles of Visual Design 2720
Monochromatic Design
Because of the emphasize on the iconography in monochromatic designs this is actually a very common technique among designers today.
Principles of Visual Design 2720
Complementary Colors
Any two colors 180 degrees opposite on the color wheel.
Principles of Visual Design 2720
Complementary Colors
Complementary Colors have the highest contrast (in terms of hue, not value). Because of this they are as bold of a combination as possible. Color compositions based on them usually work, however can become tiring to look at due to the high hue contrast.
Principles of Visual Design 2720
Expansion of Color Theory
Standard color theory doesn’t take color value into account. So, according to color theory, these two compositions are technically the same as the complimentary colors of magenta and green. Therefore you can adjust the value of the hue and lower the punch-factor of these colors.
Principles of Visual Design 2720
Complimentary Colors
Using Compliments as a basis for a color scheme, but slightly branching out to include variances of value, will widen the breadth and make compositions that are pleasing for longer periods of time.
+ =
Principles of Visual Design 2720
Artists Mix Complimentaries to Achieve Rich Vibrant Grays, Browns, and Neutral Colors…
Principles of Visual Design 2720
Analogous Colors
These are any number of colors that are adjacent on the color wheel.
Principles of Visual Design 2720
Analogous Colors
Principles of Visual Design 2720
Analogous Colors
These combinations have an extremely high degree of harmony but low degree of contrast.
Principles of Visual Design 2720
These can seem very drab. A complimentary color could be added here for an accent that add dynamism to the design
Analogous Colors
Principles of Visual Design 2720
These can seem very drab. A complimentary color could be added here for an accent that add dynamism to the design
Analogous Colors
Principles of Visual Design 2720
Triadic Colors
Triadic colors are any colors 120 degrees (one third of a 360 degree circle) apart on the color wheel.
Principles of Visual Design 2720
The Triad of the Three Primary Colors are the most energetic and balanced color combination possible. Together, they draw intense visceral interest.
Principles of Visual Design 2720
The Triad of the Three Primary Colors are the most energetic and balanced color combination possible. Together, they draw intense visceral interest, as such, they are appealing to children. Due to the commercial forces of marketing, we’ve learned to associate this Triad with children.
Principles of Visual Design 2720
Split Complimentary
This is a combination of two colors next to the opposite of the first color.
Principles of Visual Design 2720
Split Complimentary Colors
This is structure is dynamic enough to hold interest, but not with an excess of intensity of hue contrast from which the eye tires so easily.
Principles of Visual Design 2720
Split Complimentary
This combination balances the interests of harmony and contrast, neither dominating the composition
Principles of Visual Design 2720
Split Complimentary
This combination balances the interests of harmony and contrast, neither dominating the composition
Principles of Visual Design 2720
Split Complimentary
This combination balances the interests of harmony and contrast, neither dominating the composition
Principles of Visual Design 2720
Analogous with a Single Complimentary
This usually is pretty striking combination as the analogous colors are of the strongest harmony, but the compliment of the center color punches the composition with a dramatic accent.
Principles of Visual Design 2720
Double Complimentary
Double complimentary combinations are almost on the verge of breaking down into simply a panoply of color without any structure. However, since we can still intuitively grasp the structure of this combination it will retain a (weakened) harmony.
Principles of Visual Design 2720
Double Complimentary
Principles of Visual Design 2720
Double Complimentary may be referred to as ‘Tetrads’
Principles of Visual Design 2720
Invent New Color Combination Structures
Of course, you can always invent new combinatory structures. You could call this one a “Missing Tetradic”.
?
Principles of Visual Design 2720
Invent New Color Wheels
Many Crafts such as Floral Arrangement and Furniture Craft have their own Color Wheels. Individual artists often devise their own color wheels to limit their color palettes with a concrete reference in an intuitive way.
Principles of Visual Design 2720
LIMIT YOUR COLOR PALETTE
The All Important Fact You Should Remember from Color Theory is to define your color palette and stick with it. If you find a color you feel just has to go into your composition, you should rethink your palette altogether and possibly start over.
Principles of Visual Design 2720
A Tip for Nice Color Combinations
1) Get a photo with some colors you like.
2) Open it in Photoshop and tweak/exaggerate the colors
Using “Curves”.
3) Use the eyedropper, get some colors off it
and paint some swatches.
Principles of Visual Design 2720
Color Balancing
Different colors have different levels of influence on drawing the eye. For example…
Principles of Visual Design 2720
Color Balancing
Different colors have different levels of influence on drawing the eye. For example…
Principles of Visual Design 2720
Color Balancing
The yellow is screaming for attention while the blue patiently waits for your eye.
Principles of Visual Design 2720
Color Balancing
So this is an unbalanced color composition.
Principles of Visual Design 2720
Color Balancing
So how can we balance this composition out?
Principles of Visual Design 2720
We could try this.
Color Balancing
Principles of Visual Design 2720
Or this.
Color Balancing
Principles of Visual Design 2720
Or this.
Color Balancing
Principles of Visual Design 2720
Accent Colors
Accent colors define a composition by drawing attention due to their anomaly in the design. Most effective designs have carefully calculated combination of accent and dominant colors.
Principles of Visual Design 2720
Accent Colors
Principles of Visual Design 2720
Accent Colors
Principles of Visual Design 2720
Warm and Cool Colors
Cool colors tend to spread out and soothe, where warm colors tend to contract and excite. When creating color palettes for your designs use this knowledge to your advantage. Choose the colors that help communicate your message by reinforcing its underlying logic.
Principles of Visual Design 2720
How do these colors tell you how to feel about your “McDonald’s Experience”?
Principles of Visual Design 2720
However, also due to the attention-gettingpower of yellow it is also used to mean caution…
Principles of Visual Design 2720
Cultural, physiological and personal forces each contribute to our perceptions of color
Principles of Visual Design 2720
Hue Intensity
Lowering the overall hue intensity of a design usually gives it an aged look. This is reminiscent of black and white/sepia film and photographs.
Principles of Visual Design 2720
Juxtaposition changes how color is perceived…
Is this a rich butterscotch mocha…
Principles of Visual Design 2720
Juxtaposition changes how color is perceived…
Or a Dirty Yellow…
Principles of Visual Design 2720
Sequence changes how color is perceived…
Is this a pure grey…
Principles of Visual Design 2720
Sequence changes how color is perceived…
Principles of Visual Design 2720
Sequence changes how color is perceived…
Or a cool grey…
Principles of Visual Design 2720
We have two types of Photoreceptor
cells inside our eye:
Rods: Which responds to dim light.
Cones: Which responds daylight and color.
Principles of Visual Design 2720
They’re names were given for a very clear reason…
Principles of Visual Design 2720
Animals such as dogs have more Rods than we do but less Cones. What does this mean?
Principles of Visual Design 2720
1) They have better night vision.
2) In darkness they have greater sensitivity to differences in color Value, but not Hue.
This is why they have trouble seeing a red ball in green grass. They aren’t color blind, but are color impaired compared to humans.
Red ball in thegrass to you…
and to your dog.
Principles of Visual Design 2720
1) They have better night vision.
2) In darkness they have greater sensitivity to differences in color Value, but not Hue.
This is why they have trouble seeing a red ball in green grass. They aren’t color blind, but are color impaired compared to humans.
Red ball in thegrass at night to you…
and to your dog.
Principles of Visual Design 2720
RBG
Red Green and Blue
Principles of Visual Design 2720
RBG(additive color process)
On RBB monitors small phosphoric dots combine to form color.
Principles of Visual Design 2720
RBG(additive color process)
Red, Blue and Green light combines to form White.
Principles of Visual Design 2720
RBG(additive color process)
Principles of Visual Design 2720
RBG(additive color process)
Principles of Visual Design 2720
RGB in the Photoshop/Illustrator Color Picker
Principles of Visual Design 2720
CMYK
Used for printed materials:
Cyan, Magenta, Yellow and Black
Principles of Visual Design 2720
CMYK(subtractive color process)
Principles of Visual Design 2720
CMYK in the Photoshop/Illustrator Color Picker
Principles of Visual Design 2720
The Web Uses a “Hexidecimal” Numerical System for Colors
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
0 1 2 3 4 5 6 7 8 9 A B C D E F
Decimal
Hex
Principles of Visual Design 2720
Some Hex Colors
Principles of Visual Design 2720
Color Gamut
Is the full range of colors that can be recorded or output by a particular medium. In other words, its “Color Space”.
Principles of Visual Design 2720
Color Gamut
The yellow line = the color gamut for an average RGB monitor.
The cyan line = the color gamut for average CMYK printing.
Principles of Visual Design 2720
Human Color (Visible Light) Gamut
Principles of Visual Design 2720
Human Color Gamut
Principles of Visual Design 2720
The Gestalt of Color
When our cones are flooded with color for a period of time they become overloaded in a sense. This is best understood through an experiment.
Principles of Visual Design 2720
Stare at the dot for 30 seconds…
Principles of Visual Design 2720
Stare at the dot for 30 seconds…
Principles of Visual Design 2720
Synesthesia
This is the faculty to receive stimuli through one sense, sight, for example, and perceive it through another, hearing, for example.
Principles of Visual Design 2720
Synesthesia
Wassily Kandinsky heard blaring trumpets when he saw bright yellow.
Principles of Visual Design 2720
Some Synesthese Experience Have Words, Numbers, Space, Color cross wired in very interesting ways.
Radical = Radical
or
452-6220 = 452-6220
Principles of Visual Design 2720
Some Synesthese Experience Have Words, Numbers, Space, Color cross wired in very interesting ways.
“bzzzzzzzzzzzzzz” =
Principles of Visual Design 2720
Which is Kiki and which is Booba?
We all are synesthese, it’s just more subtle for most of us…
Principles of Visual Design 2720
??
?