Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
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