344-282 Graphics design and artsstaff.cs.psu.ac.th/ladda/subjects/344-282GD/pdf/Chapter4_0.pdf · คุุณสมบ ััตของสิ::ีHue ((สสีแทีแท

344344--282 Graphics Design and Applied Arts282 Graphics Design and Applied Arts

บทที่ 4 ความรูเรื่องสี

ทฤษฎีสีทฤษฎีสี (Color Theory)(Color Theory)

เปนทฤษฎีที่เซอรไอแซก นิวตัน (Sir Isaac Newton) คิดคนจากการสองแสงขาวผานแทงปริซึม โดยแทงปริซึมจะทําการแยกแสงขาวออกเปนสีตางๆ ในลักษณะและสัดสวนที่เทาๆ กัน 7 สี เหมือนกับสีรุงคือ มวง คราม น้ําเงิน เขียว เหลือง แสด และแดง

2

วงสีวงสี หรือวงลอสีหรือวงลอสี (Color Wheel)(Color Wheel)

ประกอบดวย สีตางๆ เรียงกนัเปนวงกลม 12 สี โดยแบงประเภทของสีออกเปน 3 ขั้นคือ1. สีปฐมภูม ิ(Primary Colors)2. สีทุติยภูม ิ(Seconday Colors)3. สีตติยภูม ิ(Tertiary Colors)

3

สีปฐมภมูิสีปฐมภมูิ ( (Primary Colors)Primary Colors)

เปนสีบริสุทธิ์จํานวน 3 สี และไมสามารถใชสีอื่นผสมเพื่อสรางแมสีปฐมภูมิได ไดแก สีเหลือง สีแดง สีน้ําเงิน

4

สีทุตยิภูมิ (Seconday Colors)

เปนสีผสมจํานวน 3 สี โดยนําสีปฐมภูมิมาผสมกัน ไดแกเหลือง + แดง = สมแดง + น้ําเงิน = มวงน้ําเงิน + เหลือง = เขียว

5

สีตตยิภูมิ (Tertiary Colors)

เปนสีผสมจํานวน 6 สี ซึ่งเกิดจากสีปฐมภูมิและสีทุติยภูมิมาผสมกัน ไดแกเหลือง + สม = สมเหลืองแดง + สม = สมแดงแดง + มวง = มวงแดงน้ําเงิน + มวง = มวงน้ําเงินน้ําเงิน + เขียว = เขียวน้ําเงินเหลือง + เขียว = เขียวเหลือง

6

สีตตยิภูมิสีตตยิภูมิ (Tertiary Colors)(Tertiary Colors)

7

Blend colorBlend colorการผสมสีทุกสีของสีปฐมภูมิ หรือทุกสีของสีทุติยภูมิหรือทุกสีของสีตติยภูมิจะทําใหไดสีน้ําตาลเขม (Brownish-black Color)

8

สีกลางสีกลาง (True Neutral Colors)(True Neutral Colors)

BlackWhiteGray เกิดจาการผสมสีดํากับขาวหรือ เกิดจากการผสมสีกันของสีตรงกันขาม (Complementary Color) ในวงสี

9

ไมสามารถเกิดจากการผสมสีจากสีอื่นๆ ได

ตารางแสดงวงสีพื้นฐานตารางแสดงวงสีพื้นฐาน

10

คณุสมบตัขิองสีคณุสมบตัขิองสี (Color Attributes)(Color Attributes)

HueValueSaturationTemperature

11

คณุสมบตัขิองสีคณุสมบตัขิองสี:: Hue Hue ((สีแทสีแท))

Chromaสีตางๆ ทั่วไปที่ยังไมมีการผสมสีขาว หรือดําลงไปปจจุบนัมีชื่อเรียกสีกวา 150 สีสีตางๆ ที่ไมใชสีขาว ดําและเทา เรียกวา Chromatic Colorสวนสีขาว ดํา และเทา เรียกวา Achromatic Color

12

คณุสมบตัขิองสีคณุสมบตัขิองสี:: Value Value ((คาสีคาสี))

เปนน้ําหนักความออน แกของสี แบงออกเปน 2 ระดับคือ◦ Tint เปนคาสีที่ทําใหออนโดยการผสมสีขาวลงไป◦ Shade เปนคาสีที่ทําใหเขมโดยการผสมสีดําลงไป

13

Tint Shade

คุณสมบัตขิองสีคุณสมบัตขิองสี:: Saturation Saturation ((ความอิ่มของสีความอิ่มของสี))

ความสดแท หรือบริสุทธิ์ (Purify) โดยไมผานการเจือปนของสีขาวหรือสีใดๆ ที่ทําใหความเขม (Intensity) ของสีลดลง

14

Highly-saturated Hues Desaturated Hues

คุณสมบัตขิองสีคุณสมบัตขิองสี:: Saturation Saturation ((ความอิ่มของสีความอิ่มของสี))

วิธีการในลดความอิ่มของสีอีกวิธีหนึ่งคือ การผสมสีกับสีเทา หรือ การผสมสีกับสีตรงกันขาม ซึ่งเรียกวา Tone

15

Red tone created by mixing with gray

Red tone created by mixing with red’s complementary

color (green)

คณุสมบตัขิองสีคณุสมบตัขิองสี:: TemperatureTemperature((อุณหภูมิสีอุณหภูมิสี))

ความรอนของสีที่ใหความรูสึกกับผูดู

แบงออกเปน 2 ประเภท◦ สีอุน(Warm) ใหความรูสึกรอน ซึ่งเกิดจาก สีเหลือง สีสม สีแดง◦ สีเย็น (Cool) ใหความรูสึกเย็น ซึ่งเกิดจาก สีมวง สีน้ําเงิน สีเขียว

16

ตารางแสดงสรุปคณุสมบตัขิองสีตารางแสดงสรุปคณุสมบตัขิองสี

17

การผสมสีการผสมสี

แบงออกเปน 2 รูปแบบ◦ Subtractive Color Mode (การผสมสีแบบลบ)◦ Additive Color Mode (การผสมสีแบบบวก)

18

Subtractive Color Mode (การผสมสีแบบลบ)

Reflected Lightเปนการผสมของสีที่ตกกระทบวัตถุ โดยมีแมสีพื้นฐานคือ สีฟาแกมเขียว (Cyan) มวงแดง (Magenta) เหลือง (Yellow)CMYK mode คือ ทั้ง 3 สีผสมกันจะเปนสีดําใชสําหรับการออกแบบงานสิ่งพิมพตางๆ

19

Additive Color Mode (การผสมสแีบบบวก)

Projected Lightเปนการผสมสีของแสง โดยมีแมสีพื้นฐานคือ แดง เขียว และน้ําเงิน (Red Green and Blue)RGB mode คือ ทั้ง 3 สีผสมกันไดแสงสีขาว ใชกับงานออกแบบที่มองเห็นสีจากการผสมของแสง ตัวอยาง จอคอมพิวเตอร จอโทรทัศน จึงใชสําหรับการออกแบบประเภทเว็บไซต รายการโทรทัศน ฯลฯ

ตารางเปรียบเทียบความแตกตางระหวางตารางเปรียบเทียบความแตกตางระหวาง SubtractiveSubtractive กับกับ Additive Color ModeAdditive Color Mode

21

RGB Color CodesRGB Color Codesรหัสสี RGB แทนดวยเลขฐาน 16 จํานวน 6 หลักตัวอยาง

22

WebWeb--safe Palette (or safety palette)safe Palette (or safety palette)

Palette : Collection of available colorsA palette of 216 colors that is at least somewhat predictable across the various hardware and software platforms.Be recognized universally by all browsers and systems

23

WebWeb--safe Palette (or safety palette)safe Palette (or safety palette)

RGB codes for web-safe colors are made up of the digit zero plus the other hex digits that are multiples of three: 3, 6, 9, C(12), and F(15) and digits are used in equal pairs. ตัวอยาง

#3366FF is a web-safe color#2255AA is not a web-safe color#3693CF is not a web-safe color because it is not paired identically.

24

Sample WebSample Web--safe Colors and Codessafe Colors and Codes

25

Many colors possess names as well as hex codes.

What happens if you choose to use What happens if you choose to use a color that is not weba color that is not web--safe?safe?

If a visitor has a system powerful enough to see that particular color, the color displays properly. If not, the browser does one of two things: ◦ It uses its best judgment to shift the color to

the nearest color that it does recognize, or ◦ It dithers the color.

26

Dithering:Dithering: การจาํลองสีการจาํลองสี

Alternate pixels of two different colors with the intent of fooling our eyes into perceiving a third, intermediary color—that is, essentially, by faking it.

27

Color Rendering on Different Color Rendering on Different SystemsSystems

Effect on the color output:◦ The combination of a particular system’s

operating system (Mac or Windows), ◦ Browser, ◦ Monitor, and video card

Like viewing a row of different models of TVs in an appliance store; each one renders color a bit differently.

28

MonitorsMonitorsLCD (flat Liquid Crystal Display) screens typically have a much brighter and more saturated palette than CRT monitors. The viewing angle of an LCD screen alters the way the colors appear. The system’s gamma(the measure of the lightness or darkness of a system’s display) ◦ The lower the gamma measurement, the lighter and

brighter the colors look.◦ Macintosh computers have a default gamma of 1.8,

while Windows systems have gammas around 2.2

29

A Gradient Viewed at Varying A Gradient Viewed at Varying Color DepthsColor Depths

30

Defining Colors for the WebDefining Colors for the Web

Choosing from predefined color palettes

31

Adobe’s Color Cubes Palette

Adobe’s Color Continuous Tone Palette

Defining Colors for the WebDefining Colors for the Web

32

Adobe’s System Color Picker

GIMP’s Color Web Palette

Defining Colors for the WebDefining Colors for the Web

33

GIMP’s Color Visibone2 Palette

GIMP’s Color Visibone Palette

Hexagon PaletteHexagon Palette

34

Mixing Colors ManuallyMixing Colors Manually

Three mixing techniques:◦ Manipulating the RGB color code

mathematically.◦ Using a color gradient.◦ Using a semi-transparent color overlay.

35

Mixing Colors Manually: Mixing Colors Manually: Manipulating color codesManipulating color codes

#FFFFFF = white#00000 = blackMake color lighter: add whiteMake color darker: add black

36

Mixing NeutralsMixing NeutralsTrue neutrals: white, black, and variation of grayThe higher the numbers in the code, the lighter the grayExample: a color code of #CACACA is a much lighter gray than #4F4F4F.

37

Mixing gray mathematically

Mixing Grays with a Gradient

Mixing TintsMixing Tints1.Pick a base hue like #00FFFF (maximum

saturation and alter the code mathematically.

38

Mixing Tints Mathematically

Mixing Tints (contMixing Tints (cont’’d)d)2. Use a graphic package to create a shape and fill it.

3. Layer a semi-transparent white shape over the original base color.

39

Mixing Tints with a Gradient

Mixing ShadesMixing ShadesTo generate shades of a color by altering the hex code mathematically, progressively reduce the hex pair(s) for the base hue until the color approaches black.

40

Mixing Shades (contMixing Shades (cont’’d)d)Mixing shades with a gradient is identical to mixing tints with a gradient, but uses black at the opposite end of the spectrum instead of white

41

Mixing TonesMixing Tones

A bit more complicated than mixing tints or shades◦ Mixing Tones Mathematically◦ Mixing Tones by Starting with Gray◦ Mixing Tones with a Gradient

42

Mixing Tones (contMixing Tones (cont’’d)d)

43

Mixing tones by starting with Gray

Mixing tones Mathematically

Mixing Tones (contMixing Tones (cont’’d)d)

44

Mixing tones with a gradient

Summarization of Color MixingSummarization of Color Mixing

45

Color Color PropotionsPropotions

Repeat colors throughout the website, you shouldn’t use equal amounts of each color.Example: use a three-color scheme◦ 60% of one color for the page background◦ 30% of one color for the elements like

headers or graphics that need a certain amount of emphasis◦ 10% of one color for most emphasis

46

Color SchemesColor Schemes

Based on the traditional color wheel.Most common:◦ Monochromatic◦ Complementary◦ Triad◦ Analogous◦ Warm◦ Cool

47

Monochromatic Color SchemeMonochromatic Color Scheme

Employ tints and shades of a single hue

48

Monochromatic Scheme on the Color Wheel

Complementary Color SchemeComplementary Color Scheme

Use two colors opposing each other on the traditional color wheel.

49

Complementary Color Scheme Complementary Color Scheme (cont(cont’’d)d)

50

Triad Color SchemeTriad Color Scheme

Use three spaced color around the traditional color wheel.

51

Triad Color Scheme (contTriad Color Scheme (cont’’d)d)

52

Analogous Color SchemeAnalogous Color Scheme

53

Rely upon several colors adjacent to each other on the color wheel

Analogous Color Scheme (contAnalogous Color Scheme (cont’’d)d)

54

Warm Color SchemeWarm Color Scheme

An analogous variant, based on yellows, oranges and reds

55

Cool Color SchemeCool Color Scheme

An analogous variant, based on purples, blues, and greens.Usually perceive as slick, sophisticated, and professional.

56

Cool Color Scheme (contCool Color Scheme (cont’’d)d)

57

Summarization of Color SchemeSummarization of Color Scheme

58

เอกสารอางอิงเอกสารอางอิง

SIPA. สรางงานกราฟกและตกแตงภาพอยางไรขีดจํากัดดวย GIMP. บริษัท ซัคเซสมีเดีย จํากัด 2549

McIntire, P. Visual Design for the Modern Web. New Riders. 2008.

59