色彩基本認識 2010 年 9 月 Hsiu-fen Wang

Presentation on theme: "色彩基本認識 2010 年 9 月 Hsiu-fen Wang"— Presentation transcript:

1 色彩基本認識 2010 年 9 月 Hsiu-fen Wang
2008/09 色彩基本認識 2010 年 9 月 Hsiu-fen Wang 世新大學　hfwang

2 大 綱 色彩基本認識 數位影像 & 色彩深度 色彩的感覺與配色 色 彩 計 畫

3 色彩基本認識

4 先玩一下

5 練習檔 (1) 1_cmy.psd 1_RGB.psd 圖層面板 > 打開眼睛 色彩增值 multiply
濾色 screen

6 色彩基本認識 2008/09 練習檔 (2) 0_cmy.psd 移動工具、選取圖層 0_rgb.psd 世新大學　hfwang

7 光與色彩 1666年，牛頓以三稜鏡分解太陽光，發現看似無色的光線，經過三稜鏡時，會依其波長和折射關係， 依序分為紅、橙、黃、綠、藍、靛、紫七色光

8 光與色彩 色光三原色 RGB 0 ~ 255 (256 階) 加色法 紅 Red 綠 Green 藍 Blue 0 最暗，255 最強(亮)
越加越亮﹙白﹚ 量化 三種色光都加到最強時，白色

9 光與色彩 色料三原色 ( 印刷工業色 CMYK ) 0% ~ 100% 減色法 天青 Cyan 洋紅 Magenta 黃 Yellow
黑　 Black 0% ~ 100% 100% 最濃 減色法 越加越暗﹙黑﹚ 四色印刷 黑？？ 量化 三種色料都加到最濃時，黑色

10 光與色彩 RGB CMYK 注意到沒？ 互為補色！

11 色版 (Channel) 色版是儲存不同類型資訊的灰階影像：
當您開啟新的影像時，會自動建立色彩資訊色版 。影像的色彩模式 (Mode)決定了建立的彩色色版數目。 例如， RGB 影像有四個預設色版：其中三個分別用於紅色、綠色和藍色，再加上一個編輯影像的複合色版。 您可以建立 Alpha 色版，將選取範圍儲存為灰階影像。您可以使用 Alpha 色版建立和儲存遮色片，遮色片可以讓您處理、隔離和保護影像的特定部份。除了支援 Photoshop 中的 Alpha 色版外，您還可以在 ImageReady 中，以 Alpha 色版形式儲存、載入及刪除選取範圍。 您可以建立特別色色版，用來指定以特別色油墨列印時的其他印版。 看三次就看得懂的 真是天才… Photoshop CS 說 明

12 色彩模式 (Mode) 色版是儲存不同類型資訊的灰階影像：
第一段 再看一次 色版是儲存不同類型資訊的灰階影像： 當您開啟新的影像時，會自動建立色彩資訊色版 。影像的色彩模式決定了建立的彩色色版數目。 例如， RGB 影像有四個預設色版：其中三個分別用於紅色、綠色和藍色，再加上一個編輯影像的複合色版。 灰階 = 程度！

13 視窗 > 色版 (Channel) CMYK 模式時：4 色版 RGB 模式時：3 色版 給我 3 MB 空間 那給我 4 MB…

14 光與色彩 光 的物理性質： 波長： 產生色相的區別 波長短的偏藍，波長長的偏紅 振幅： 產生明暗的區別 振幅大的偏亮，振幅小的偏暗

15 【練習】光與色彩 【問】哪一個波的光較偏藍？哪一個較亮？ A B

16 光與色彩 人類的視覺機能： 眼睛的 桿狀細胞： 對光線的 明暗 有感應 眼睛的 錐狀細胞： 含有感受 紅、綠、藍 光三原色的細胞 ﹙色盲？﹚

17 光與色彩 一般人眼中的草莓 紅綠色盲者眼中的草莓 你能拍出一部從色盲者眼中看世界的電影嗎？

18 色彩三屬性 色相 Hue 明度 Value 、Brightness 彩度 Chroma、Saturation
色彩的相貌，不同的相貌各有其名稱 明度 Value 、Brightness 即色彩的明暗程度，光線反射率多時明度較高 彩度 Chroma、Saturation 色彩的飽和程度或純粹度 (有時英文用字不太一樣)

19 色彩三屬性 色相、明度、彩度三種不同的稱呼 HVC：Hue、Value 、 Chroma HSV：Hue、Saturation 、Value
HSL：Hue、Saturation 、 Lightness (有時英文用字不太一樣)

20 何謂 “數位影像處理”？ 處理結果：改變像素的色彩值 色彩三要素 ： H色相、S彩度、 B明度

21 B 明度 (Brightness)：很暗 ←→ 很亮
改變像素的色彩值：明度 色彩三要素： H色相、S彩度、 B明度 原圖 B 明度 (Brightness)：很暗 ←→ 很亮

22 改變像素的色彩值：彩度 色彩三要素： H色相、S彩度、 B明度 原圖 S 飽和度：灰階←→鮮豔

23 改變像素的色彩值：色相 色彩三要素： H色相、S彩度、 B明度 原圖 H 色相﹙Hue﹚ 好奇妙的色相變化喔！

24 色彩三屬性 -- 明度 在無彩度中，明度最高是白色，最低是黑色，其間為各種深淺的灰色 低明度 高明度

25 色彩三屬性 -- 彩度 純色彩度最高，混色（不論白、灰、黑或有彩色）越多越降低其彩度 低彩度 高彩度

26 練習：色彩三屬性 【問】 以下哪一色的 明度 較高？ 哪一色的 彩度 較高？ A. 40% 純紅＋ 60% 白
　　　B. 60% 純紅＋ 40% 黑

27 練習：色彩三屬性 【問】灰階的圖含有色彩資訊嗎？ CS3

28 色彩三屬性 -- 色相 色相環之一例

29 色彩模型 之一例 -- 色立體 將色彩的三屬性，予以系統的排列，組成一個三度空間的立體形狀色彩分類結構圖： 以明度為垂直軸，愈上方明度越高
以彩度為水平軸，愈接近明度軸彩度越低 色相環

30 色彩種類 無彩色 黑、灰、白 有彩色 即色相上所列之色彩， 如紅、黃、藍等 獨立色 即印刷上所謂的「特別色」 如金、銀、螢光色等

31 就好像一白遮三醜，明暗對比適當了，影像品質也就差不多了！
色彩三屬性 調來調去，都是在調這三屬性… 尤其是明暗對比 (色階)！ 就好像一白遮三醜，明暗對比適當了，影像品質也就差不多了！

32 日常照片的常見處理：調整明暗對比 雖然拍得不好 但萬一還是要用， 也可以處理看看喔！ 明暗階調 真的很重要…

33 練習：色彩三屬性 Photoshop → 影像→ 調整→ 色相／飽和度

34 數位影像的色彩深度 也就是說, 有展現多少色的能耐！ 我有 36 色的 雄獅蠟筆！ 嗚~~ 我只有 12 色的…
我有水彩 隨便我要調什麼顏色！

35 一種色彩，各自表述？ 數位影像中，如何量化色彩值？(共識、通用語言)
《雲門舞集舞作》數位典藏計畫

36 色彩深度 (位元) 1 位元 黑 白 黑白 2 色變化 8 位元 灰 階 256 色灰階變化 16 位元 高 彩 65,536 種色彩變化
同樣長寬時, 在不壓縮情況下 檔案大小的比較, 就看位元的倍數… 1 位元 黑　白 黑白 2 色變化 8 位元 灰　階 256 色灰階變化 16 位元 高　彩 65,536 種色彩變化 24 位元 全　彩 16,777,216 種色彩變化 8 位元 索引色 最多 256 種變化

37 雖然只有 2 色，竟然沒有想像中單調 也能有典雅的感覺…
色彩深度 -- 1 位元 (bit) 21=2 黑白 2 色變化 雖然只有 2 色，竟然沒有想像中單調 也能有典雅的感覺…

38 色彩深度 -- 2 位元 (bits) 22=4 黑灰白 4 階變化 色階還很明顯地不連續

39 色彩深度 -- 8 位元 (bits) 28=256 如為灰階, 有256 階變化 連續色調 當您的眼睛 已分辨不出一階階時
﹙和觀看距離之遠近有關﹚

40 28=256 請複誦 三次！

41 Photoshop CS 版 16 位元 (Bits/Channel)
28=256 216=65,536 CS3 232=65,536 x 65,536 =?

42 【問】灰階與黑白ㄧ樣嗎？

43 色彩深度 -- 24 位元 (bits) 28 x 28 x 28 =16,777,216 (1千6百多萬) R G B
色光三原色 各用 256 階 表示其強度 大自然色彩遠超過這個， 不過在螢幕上，諒你的眼睛也沒厲害到都分辨的出來…

44 216 x 216 x 216 = … (快算不出了…) 【問】色彩深度 -- 16位元(bits)色版 = (224 x 224 )
28=256 216=65,536 232=???? R　　G　　B 216 x 216 x 216 = … = (224 x 224 ) = 16,777,216 x 16,777,216 (快算不出了…) 如果每個色版不只256 階，而是更細緻的65,536 階呢？

45 【問】不壓縮的點陣圖有多大？ 長 x 寬 x 色彩深度 請另參考【檔案大小的計算】
例： 1024 x 768 x 3 Bytes = 2.25 MB 那~ 　一張 300 dpi 全開的研討會或電影海報呢？ 請另參考【檔案大小的計算】 還真大…

46 看了古時候這些色名，你能想像那到底是什麼色嗎?
【問】這麼多色彩，該如何精確表達？ 色名／色彩的表達 茶花紅 海棠紅 枸杞紅 滿江紅 潤紅 緋紅 雞血石紅 猩猩紅 曙色 芙蓉紅 落霞紅 朱紅 看了古時候這些色名，你能想像那到底是什麼色嗎?

47 【問】這麼多色彩，該如何精確表達？ 幾種主要的色彩值標示方式 10 進位式： 0~255 百分比式 16 進位式：00~FF
H: 360度式 10 進位式： 0~255 百分比式 16 進位式：00~FF

48 中場練習 顏色的設定 Photoshop

49 色彩深度 -- 索引色 index color 最多 256 色 從 2 色到最多 256 色 網頁上常用的 GIF 檔 就是屬於這種。
因為顏色少，所以 檔案可以壓縮到很小。

50 色彩深度 -- 索引色 8 色 (14 K) 4 色 (10 K) 顏色雖然少，但也許會有特別的風格喔…
可以從1千6百多萬色中，任意挑選出所要顏色 8 色 (14 K) 4 色 (10 K) 顏色雖然少，但也許會有特別的風格喔…

51 色彩深度 -- 索引色 我的 4 色 你的 4 色 但，同樣挑四個顏色，我挑的和你挑的未必相同…
(Windows 和 Mac 的色盤也未必相同) 我的 4 色 你的 4 色

52 網頁安全色彩（216色） 全彩 網頁安全色彩 既然每個人挑的顏色都不見得相同 顏色少多了，而且色階明顯地不連續…
大家都一樣從這216種顏色裡挑吧… 網頁安全色彩 既然每個人挑的顏色都不見得相同 顏色少多了，而且色階明顯地不連續…

53 網頁安全色彩（216色） 網頁的色彩標示採 “RRGGBB” 16進位制，每色由 “00” （最暗）至 “FF” （最亮）
網頁的安全色彩為 R、G、B 值各為以下6 種值之一： “00”、 “33”、 “66”、 “99”、 “CC”、 “FF” 共 6 × 6 × 6 ＝216 《參考》color.htm

54 【練習】以16進位標示以下色彩 000000 FF0000 666666 00FF00 cccccc FFFFFF 0000FF
網頁的色彩標示採 “RRGGBB” 16進位制表示法 (0~F) 000000 FF0000 666666 00FF00 cccccc FFFFFF 0000FF

55 色域 (gamut) 不同種類的設備，有不同的 “色域” ！ 你掃描後的圖片， 螢幕上的色彩，和原來的圖片ㄧ樣嗎？
你掃描後的圖片， 螢幕上的色彩，和原來的圖片ㄧ樣嗎？ 你螢幕上的檔案， 列印出來後，色彩和螢幕上的ㄧ樣嗎？ 同樣這個圖檔，你從這台CRT螢幕上看， 和拿到另ㄧ台液晶螢幕上看，色彩ㄧ樣嗎？ …. ，色彩ㄧ樣嗎？ 為什麼不ㄧ樣？ 不同種類的設備，有不同的 “色域” ！

56 色域 (gamut) 不同種類的設備， 有不同的 [色域] ！ RGB CMY Lab 重要觀念 色光類的設備，為 RGB 色域

57 色域 (gamut) 螢幕 掃描器 數位相機 印表機 印刷機 … 不同種類的設備，有不同的 “色域” ！ 各種裝置和文件的色域範圍
A. Lab 色域 (整個可見光譜) B. 文件 (使用中色域) C. 裝置

58 別奢望你那便宜的印表機印出來的顏色，會和螢幕上看的一樣了
色彩管理 別奢望你那便宜的印表機印出來的顏色，會和螢幕上看的一樣了 色彩管理的緣起 儘量維持從輸入到輸出色彩之一致性 色彩不一致的原因 色域／色彩空間不一 設備呈色性質不一 設備元件良窳不一 見 Photoshop 說明檔： 製作一致的顏色

59 注意：影像模式影響重大 影像模式 色彩調整 RGB 、CMYK 、Lab 、… 灰階、 雙色調、點陣 色相、 明度、彩度 、色階、 ….
牽涉到你有多少色可使用，以及能用哪些色彩…

60 注意：逝者難追 捨棄的資訊、細節再也回不來 例：彩色 → 灰階 or 黑白 → 彩色？ RGB → CMYK → RGB？
　大張 → 小張 → 大張？ 網頁上的圖檔， 通常已捨棄 大量資訊！ 嗄~那不就好不了

61 比較 CMYK 與 RGB 中的校正 即使可以在 RGB 模式中執行所有色彩和色調校正工作，以及在 CMYK 中執行幾乎所有校正工作，您仍應小心地選擇模式。請在可能的情況下，盡量避免在模式間進行多重的轉換，因為每次轉換時，顏色數值都會四捨五入而造成損失。如果要在螢幕上使用某 RGB 影像，就不需要將其轉換成 CMYK 模式。反過來說，如果要對某 CMYK 掃描圖像進行分色和列印，則不需要在 RGB 模式下執行校正。 如果必須將影像從一個模式轉換到另一個模式，則最好在 RGB 模式中執行大部分的色調和色彩校正，而使用 CMYK 模式進行微調。在 RGB 模式中工作的好處包含下列各項： 可以節省記憶體並增進效能，因為使用的色版較少。 RGB 色域的範圍比 CMYK 色域大得多，所以調整之後可能會保留較多的顏色。 Photoshop CS 說 明

62 檔案格式大車拼 存成什麼 格式好呢 … 我! 我! 我啦! 選我!

63 三大網頁圖檔格式的火拼 JPG GIF PNG 既然不壓縮的檔很大，那就壓縮吧 …

64 你的圖檔性質是… 照片 美工(卡通)圖案 通常是 JPG 檔 通常是 GIF 檔 全彩 (色調連續, 膚色自然)
最多256 色 (色塊明顯)

65 三大網頁圖檔格式 GIF 圖形交替格式(Graphics Interchange Format)
少講一個很重要的：最多 256 色！ GIF 圖形交替格式(Graphics Interchange Format) 是全球資訊網和其他線上服務上，在超文字標記語言 (HTML) 文件中顯示索引色圖像和影像常用的檔案格式。 GIF 是一種 LZW 壓縮的格式，可以最小化檔案大小和電子傳輸的時間。 GIF 格式可以保留索引色影像中的透明，但卻不能支援 Alpha 色版。 本段直接摘自 Photoshop 7 說明

66 三大網頁圖檔格式 JPEG 靜態影像壓縮標準 (Joint Photographic Experts Group)
是全球資訊網和其他線上服務上，在超文字標記語言 (HTML) 文件中顯示照片和其他連續色調影像常用的格式。BMP 格式支援「CMYK」、「RGB」和「灰階」色彩模式，且不支援 Alpha 色版。 與 GIF 格式不同的是，JPEG 會保留 RGB 影像中所有的顏色資訊，但會選擇性地放棄資料以壓縮檔案大小。 JPEG 影像會在開啟時自動地解除壓縮。較高的壓縮層級會導致影像的品質較低，而較低的壓縮層級會導致影像品質較佳。 在多數的情況下，「最大」的品質選項製造的結果，與原始影像幾乎沒有差別。 本段直接摘自 Photoshop 7 說明

67 三大網頁圖檔格式 PNG 可攜式網路圖案 (Portable Network Graphics)
有兩種： PNG 8 和 PNG 24 PNG 可攜式網路圖案 (Portable Network Graphics) 是研發出來的另一種無專利的格式 (除 GIF 外的另一種格式)，可以用來進行無減色壓縮和在全球資訊網上顯示影像。 與 GIF 不同的是：PNG 支援 24 位元影像，並且可以製造沒有鋸齒邊緣的背景透明。 但是，有些網頁瀏覽器不支援 PNG 影像。 PNG 格式支援沒有 Alpha 色版的「RGB」、「索引色」、「灰階」和「點陣圖」模式影像。PNG 可以保留灰階和 RGB 影像中的透明。 本段直接摘自 Photoshop 7 說明

68 印刷用圖檔格式 PSD TIF EPS 檔案不小喔 …

69 色彩的感覺與配色

70 民俗的色彩 中國 宮廟：紅牆綠瓦 民間：白牆黑瓦 埃及 阿拉伯 ….

71 畫家的色盤 左拉 馬諦思 畢卡索 印象派、點描派 透過加法混色來達成視覺混合的效果 野獸派 強烈的色彩【例】紅色的臉，綠色的暗部
藍色時期、粉紅色時期、 …

72 http://webexhibits.org/ colorart/picasso.html
滑過去看看，不同色彩各是什麼感覺？ 畫家的色盤 -- 畢卡索 colorart/picasso.html

73 色彩調和 對比色系　　　　　　補色系

74 色彩調和 單一色相　　同色系　　 類似色系                        

75 色彩調和 多色相 　　　三色調和　　　　　　四色調和

76 色彩調和 -- 對比 vs 類似 圖片來源：照相館的故事

77 色彩調和-- 對比 vs 類似 By 游閔州

78 色彩感覺 暖／寒 興奮／沉靜 前進／後退 輕／重 強／弱 Dior

79 【練習】色彩搭配 -- 填色遊戲 練習：color_task

80 色彩計畫

81 何謂色彩計畫？ 將對色彩的知識與配色技巧，應用到實際的設計工作上 目的：美化生活、產品行銷
色彩密碼 --專業設計的色彩美學 Color Combination 作者：I.R.I 碁峰

82 偏好色調查 【問】一般人什麼用品喜歡買什麼顏色？ 手錶? 手機? 汽車? 彩妝品? 馬桶? …

83 產品的色系

84 產品的色系                 

85 產品的色系

86 ？ 練習：產品的色彩名稱 【練習】 以下哪個敘述，最吸引你？ 你可以根據這些名稱，想像出它的顏色嗎？ 巧克力蛋白杏仁色 咖啡蜂蜜色
霜白咖啡色 龍舌蘭日出色 東方色 泡泡糖色 西瓜色 天使粉紅色 黃金寶貝色 ？ 資料來源：化妝品型錄

87 練習：為產品的色彩命名 【練習】找到目前市面上同一款產品系列， 　　　重新想出ㄧ組誘人的色彩名稱

88 練習：產品的色系 【練習】請為一組 T 恤產品配色…

89 參考 更換款式、布料、圖案、髮型等

90 End http://webexhibits.org http://www.vischeck.com The Color Mac
【進階參考】 The Color Mac Miller & Zaucha ﹝Hayden Books，1995 ~﹞ 設計的色彩心理 賴瓊琦 ﹝視傳文化，2001﹞ 數位影像色彩管理 徐法坤 著﹝龍溪圖書，1999年7月﹞ 色彩 王荔 譯﹝三民，89年2月﹞