Do you still remember what we have learn in COLOR...

58
Do you still remember what we have learn in COLOR STUDIES?

Transcript of Do you still remember what we have learn in COLOR...

Page 1: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

Do you still remember what we have learn in

COLOR STUDIES?

Page 2: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

Part I: Color Foundations

The Basic Principles

of COLOUR theory

Page 3: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

What is COLOR?

Color is the aspect of things that is

Caused by different qualities of light.

The basic Principles of COLOUR theory

Page 4: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

The basic Principles of COLOUR theory

Newton color circle = now a day the 12 color wheel

Page 5: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

The Future of Color

20th century, color been use in very positive ways.

• Business• Branding• Products• Fashions• Designs• Hospitals• Prisons

Colour has a great deal to offer us and can be found all around us in nature.

The basic Principles of COLOUR theory

Page 6: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

The basic Principles of COLOUR theory

WHY COLOUR IS SO IMPORTANT?

• One of the communication element• Emotional response• Connect feeling in a unique &

memorable way.

Page 7: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

2 Colour Systems

• subtractive colour

• additive colour

The basic Principles of COLOUR theory

Page 8: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

Subtractive Colour.

• CMYK color• For printing • Start with white and ends with black• one adds colour, the result gets darker and tends to black.

The basic Principles of COLOUR theory

The CMYK colour system is thecolour system used for printing.

A subtractive color model explains the mixing of paints, dyes, inks, and natural colorants to create a full range of colors

Page 9: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

Additive Colour.

• RGB color• For screen view• created with light using the additive colour method. • Start with black and ends with white• more colour is added, the result is lighter and tends to white.

The basic Principles of COLOUR theory

The RGB colours are light primaries and colours are created with light.

Percentages of red, green, & blue light are usedto generate colour on a computer screen.

Additive color describes the situation where color is created by mixing the visible light emitted from differently colored light sources. This is in contrast to subtractive colors where light is removed from various part of thevisible spectrum to create colors.

Page 10: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

Color on the 12 Colour Wheel

• Primary color• Secondary color• Tertiary color

The basic Principles of COLOUR theory

Page 11: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

Primary Colours

The basic Principles of COLOUR theory

-Red-Blue-Yellow

Page 12: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

Those colours achieved by a mixture of two primaries.

Secondary Colours

• Orange(mix red + yellow)

• Green(mix yellow + blue)

• Violet(mix blue + red)

The basic Principles of COLOUR theory

Page 13: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

Those colors achieved by a mixture of primary and secondary hues.

yellow-orange, red-orange, red-violet, blue violet, blue-green, and yellow-green.

Tertiary Colours

The basic Principles of COLOUR theory

Page 14: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

Hues, Tints, Tones and Shades: What’s the Difference?

• Hue is just a color. • Tints, tones, and shades are variations of the hues found on

the basic color wheel when white, black or both are mixed in (grey).

The basic Principles of COLOUR application

Page 15: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

The basic Principles of COLOUR application

Page 16: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

Warm Colors: These are the colors of fire. They radiate warmth. Warm colors are more often

associated with passion, energy, impulsiveness, happiness, coziness, and comfort. They draw

attention and have the advantage of being inviting and harmonious.

The basic Principles of COLOUR application

Page 17: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

Cool Colors: These are the colors of water. Cool colors are more often associated with calm, trust, and professionalism. The are also associated with sadness and melancholy. The have the advantage

of being professional and harmonious, but can also turn people off by the coolness they radiate.

The basic Principles of COLOUR application

Page 18: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

The “6” Colours Combinations

The basic Principles of COLOUR application

Page 19: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

• Only ONE color• Best for single subjects• atmospheric

The basic Principles of COLOUR application

Page 20: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

The basic Principles of COLOUR application

Page 21: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

The basic Principles of COLOUR application

• Color adjacent on wheel• Easy on eyes• Peaceful, comfortable

mood• Seen in nature

Page 22: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

The basic Principles of COLOUR application

Page 23: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

The basic Principles of COLOUR application

• Opposing color on wheel• Very popular• Naturally pleasing to eye• Use one color

predominantly

Page 24: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

The basic Principles of COLOUR application

Page 25: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

The basic Principles of COLOUR application

• Similar to complimentary • One end extended• More creative freedom• Feels lively, joyous

Split Complementary

Page 26: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

The basic Principles of COLOUR application

Page 27: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

The basic Principles of COLOUR application

• Equally distant on wheel• Hard to pull off• Strong visual contrast• Best for cartoon/surreal

scenes

Page 28: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

The basic Principles of COLOUR application

Page 29: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

The basic Principles of COLOUR application

• Two pairs of opposing color

• Best use for foreground / background

• Never use 25% for each• Hard, but pleasing

Tetradic /

Double Complementary

Page 30: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

Colours Combinations

The basic Principles of COLOUR application

Monochromatic Relationship Complementary Relationship

Page 31: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

Colours Combinations

The basic Principles of COLOUR application

Split-Complementary Relationship

One hue plus two others equally spaced

from its complement.

Double-Complementary Relationship

Two complementary colour sets; the distance between selected

complementary pairs will effect the overall contrast of the final composition

Page 32: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

Colours Combinations

The basic Principles of COLOUR application

Analogous RelationshipTriad Relationship

Three hues equally positionedon a colour wheel.

Page 33: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

Summary

The basic Principles of COLOUR application

Use color harmonies for pleasing combination

1. Monochromatic : one color2. Analogous: adjacent color3. Triadic: Equally distant color4. Complimentary: opposing colors5. Slipt-Complimentary: one complimentary end extended6. Double –complimentary: two pairs of opposing color

Page 34: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

HueValuesaturation

“6 type of Color Contrast”

Page 35: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

Contrast of HUE

The basic Principles of COLOUR application

• Warm vs Cold• Complementary = higher contrast• Analogous = lowest contrast

Page 36: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen
Page 37: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

Contrast of saturation

The basic Principles of COLOUR application

• Saturation = (+) Gray• High Saturation = High Contrast• Low Saturation = Low Contrast

Page 38: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen
Page 39: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

Contrast of light & dark

The basic Principles of COLOUR application

• Black vs White• Strongest and most popular

contrast• Difference between light values

and dark values

Page 40: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen
Page 41: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

Contrast of extension

The basic Principles of COLOUR application

• Spacing x Size• Much x Little• Big x Small

Page 42: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen
Page 43: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

Contrast of complements

The basic Principles of COLOUR application

The contrast is formed by the juxtaposition of colour wheel or perceptual opposites.

Page 44: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen
Page 45: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

Contrast of warm & cool

The basic Principles of COLOUR application

Uses color in opposition of warm and cold value to create contrast.

Page 46: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen
Page 47: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

• Each color will create a different impression

• By understanding the various things about the color, it will be easier for you to get a proper view of the full color itself

• The most basic colors are red, blue, and yellow. the three colors can be converted into thousands of colors by mixing in certain comparisons in accordance with the desired colors.

MASS COMM

Understanding the QUALITIES AND CHARACTERISTICS of COLOUR

A GUIDE TO GRAPHIC DESIGN BY MS TINA

Understanding the meaning of the colors

Page 48: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

Color symbolism is the use of color as a representation or meaning of something that is usually specific to a particular culture or society.

Context, culture and time are certainly important factors to consider when thinking about color symbolism.

MASS COMM

COLOUR SYMBOLISM THEORIES

A GUIDE TO GRAPHIC DESIGN BY MS TINA

Page 49: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

Color conveys meanings in two primary ways:

MASS COMM

COLOUR SYMBOLISM THEORIES

A GUIDE TO GRAPHIC DESIGN BY MS TINA

• Natural Associations• Psychological Symbolism

Page 50: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

MASS COMM

COLOUR SYMBOLISM THEORIES

A GUIDE TO GRAPHIC DESIGN BY MS TINA

Natural Associations

Occurrences of colors in nature are universal and timeless.

Page 51: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

MASS COMM

COLOUR SYMBOLISM THEORIES

A GUIDE TO GRAPHIC DESIGN BY MS TINA

Psychological or Cultural Associations

• Cultural associations• Political and historical associations• Religious and mythical associations• Linguistic associations, etc.

Page 52: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

Branding is a word commonly referred to by advertisers and

marketing people

Marketing experts define "brand" as the "name, term, sign,

symbol or design, or a combination of them intended to identify a company's products or services.”

A brand communicates the "idea" of company or product. This

is what forms the connection with consumers.

COLOUR and Branding

A GUIDE TO GRAPHIC DESIGN BY MS TINA

Page 53: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

COLOUR and Branding

A GUIDE TO GRAPHIC DESIGN BY MS TINA

3 type of color branding

• Natural and Universal Color

Symbolism for Brands Picture

• Creative and Imaginative Color

Symbolism

• Good and Bad Color Branding

Page 54: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

MASS COMM

Understanding the QUALITIES AND CHARACTERISTICS of COLOUR

A GUIDE TO GRAPHIC DESIGN BY MS TINA

• Lots brand use similar color strategy

• either one color identity or none at all (black & white)

• The 3 primary color is still the most used color

The conclusion

Page 55: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

A Guide to Choosing color for a Brand

• A GUIDE TO GRAPHIC DESIGN BY MS TINA

• Color Selection is one of the key element of building a strong brand

• Every Color has a different feel and various associations

• Color represent brand identity effectively

Page 56: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

How to select the color? This is important

• A GUIDE TO GRAPHIC DESIGN BY MS TINA

3 What:

• What color represent your brand’s personality?

• What color suits the characteristics of your products and services?

• What color does your competitors use?

Page 57: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

Pick a color opposite to that of your main competitor.

• A GUIDE TO GRAPHIC DESIGN BY MS TINA

The color of your main competitor is probably the most important point to consider. Choose the color that represents your product and its personality. A brand’s strength lies in its ability to stand out.

Page 58: Do you still remember what we have learn in COLOR STUDIES?mstina-color-studies.weebly.com/uploads/3/9/7/3/39737182/... · 2018-10-17 · Additive Colour. • RGB color • For screen

QUESTION?

• A GUIDE TO GRAPHIC DESIGN BY MS TINA