何謂數位影像處理 2007/10 色彩基本認識 世新大學 hfwang
大 綱 色彩基本認識 數位影像 & 色彩深度 色彩的感覺與配色 色 彩 計 畫
色彩基本認識
大腦功能(大腦皮質10大區域) 眼球構造
先玩一下
光與色彩 1666年,牛頓以三稜鏡分解太陽光,發現看似無色的光線,經過三稜鏡時,會依其波長和折射關係, 依序分為紅、橙、黃、綠、藍、靛、紫七色光
光與色彩 色光三原色 RGB 0 ~ 255 (256 階) 加色法 紅 Red 綠 Green 藍 Blue 0 最暗,255 最強(亮) 越加越亮﹙白﹚ 三種色光都加到最強時,白色
光與色彩 色料三原色 ( 印刷工業色 CMYK ) 0% ~ 100% 減色法 天青 Cyan 洋紅 Magenta 黃 Yellow 黑 Black 0% ~ 100% 100% 最濃 減色法 越加越暗﹙黑﹚ 三種色料都加到最濃時,黑色
光與色彩 RGB CMYK 注意到沒? 互為補色!
光與色彩 光 的物理性質: 波長: 產生色相的區別 波長短的偏藍,波長長的偏紅 振幅: 產生明暗的區別 振幅大的偏亮,振幅小的偏暗
【練習】光與色彩 【問】哪一個波的光較偏藍?哪一個較亮? A B
光與色彩 人類的視覺機能: 眼睛的 桿狀細胞: 對光線的 明暗 有感應 眼睛的 錐狀細胞: 含有感受 紅、綠、藍 光三原色的細胞 ﹙色盲?﹚
光與色彩 http://www.vischeck.com 一般人眼中的草莓 紅綠色盲者眼中的草莓 你能拍出一部從色盲者眼中看世界的電影嗎?
色彩三屬性 色相 Hue 明度 Value 、Brightness 彩度 Chroma、Saturation 色彩的相貌,不同的相貌各有其名稱 明度 Value 、Brightness 即色彩的明暗程度,光線反射率多時明度較高 彩度 Chroma、Saturation 色彩的飽和程度或純粹度 (有時英文用字不太一樣)
色彩三屬性 色相、明度、彩度三種不同的稱呼 HVC:Hue、Value 、 Chroma HSV:Hue、Saturation 、Value HSL:Hue、Saturation 、 Lightness
何謂 “數位影像處理”? 處理結果:改變像素的色彩值 色彩三要素 : H色相、S彩度、 B明度
B 明度 (Brightness):很暗 ←→ 很亮 改變像素的色彩值:明度 色彩三要素: H色相、S彩度、 B明度 原圖 B 明度 (Brightness):很暗 ←→ 很亮
改變像素的色彩值:彩度 色彩三要素: H色相、S彩度、 B明度 原圖 S 飽和度:灰階←→鮮豔
改變像素的色彩值:色相 色彩三要素: H色相、S彩度、 B明度 原圖 H 色相﹙Hue﹚ 好奇妙的色相變化喔!
色彩三屬性 -- 明度 在無彩度中,明度最高是白色,最低是黑色,其間為各種深淺的灰色 低明度 高明度
色彩三屬性 -- 彩度 純色彩度最高,混色(不論白、灰、黑或有彩色)越多越降低其彩度 低彩度 高彩度
練習:色彩三屬性 【問】 以下哪一色的 明度 較高? 哪一色的 彩度 較高? A. 40% 純紅+ 60% 白 B. 60% 純紅+ 40% 黑
練習:色彩三屬性 【問】灰階的圖含有色彩資訊嗎?
色彩三屬性 -- 色相 色相環之一例
色彩模型 之一例 -- 色立體 將色彩的三屬性,予以系統的排列,組成一個三度空間的立體形狀色彩分類結構圖: 以明度為垂直軸,愈上方明度越高 以彩度為水平軸,愈接近明度軸彩度越低 色相環
色彩種類 無彩色 黑、灰、白 有彩色 即色相上所列之色彩, 如紅、黃、藍等 獨立色 即印刷上所謂的「特別色」 如金、銀、螢光色等
就好像一白遮三醜,明暗對比適當了,影像品質也就差不多了! 色彩三屬性 調來調去,都是在調這三屬性… 尤其是明暗對比 (色階)! 就好像一白遮三醜,明暗對比適當了,影像品質也就差不多了!
日常照片的常見處理:調整明暗對比 雖然拍得不好 但萬一還是要用, 也可以處理看看喔!
練習:色彩三屬性 Photoshop → 影像→ 調整→ 色相/飽和度
數位影像的色彩深度 也就是說, 有展現多少色的能耐! 我有 36 色的 雄獅蠟筆! 嗚~~ 我只有 12 色的… 我有水彩 隨便我要調什麼顏色!
色彩深度 (位元) 1 位元 黑 白 黑白 2 色變化 8 位元 灰 階 256 色灰階變化 16 位元 高 彩 65,536 種色彩變化 同樣長寬時, 在不壓縮情況下 檔案大小的比較, 就看位元的倍數… 1 位元 黑 白 黑白 2 色變化 8 位元 灰 階 256 色灰階變化 16 位元 高 彩 65,536 種色彩變化 24 位元 全 彩 16,777,216 種色彩變化 ----------------------------------------------------------- 8 位元 索引色 最多 256 種變化
雖然只有 2 色,竟然沒有想像中單調 也能有典雅的感覺… 色彩深度 -- 1 位元 (bit) 21=2 黑白 2 色變化 雖然只有 2 色,竟然沒有想像中單調 也能有典雅的感覺…
色彩深度 -- 2 位元 (bits) 22=4 黑灰白 4 階變化 色階還很明顯地不連續
色彩深度 -- 8 位元 (bits) 28=256 如為灰階, 有256 階變化 連續色調 當您的眼睛 已分辨不出一階階時 ﹙和觀看距離之遠近有關﹚
Photoshop CS 版 -- 16 位元 (bits) 28=256 216=65,536
【問】灰階與黑白ㄧ樣嗎?
色彩深度 -- 24 位元 (bits) 28 x 28 x 28 =16,777,216 (1千6百多萬) R G B 色光三原色 各用 256 階 表示其強度 大自然色彩遠超過這個, 不過在螢幕上,諒你的眼睛也沒厲害到都分辨的出來…
216 x 216 x 216 = … (快算不出了…) 【問】色彩深度 -- 16位元(bits)色版 28=256 216=65,536 R G B 216 x 216 x 216 = … = (224 x 224 ) = 16,777,216 x 16,777,216 (快算不出了…) 如果每個色版不只256階,而是更細緻的65,536 階呢?
【問】不壓縮的點陣圖有多大? 長 x 寬 x 色彩深度 請另參考【檔案大小的計算】 例: 1024 x 768 x 3 Bytes = 2.25 MB 那~ 一張 300 dpi 的研討會或電影海報呢? 請另參考【檔案大小的計算】 還真大…
看了古時候這些色名,你能想像那到底是什麼色嗎? 【問】這麼多色彩,該如何精確表達? 色名/色彩的表達 茶花紅 海棠紅 枸杞紅 滿江紅 潤紅 緋紅 雞血石紅 猩猩紅 曙色 芙蓉紅 落霞紅 朱紅 看了古時候這些色名,你能想像那到底是什麼色嗎?
【問】這麼多色彩,該如何精確表達? 幾種主要的色彩值標示方式 10 進位式: 0~255 百分比式 16 進位式:00~FF H: 360度式 10 進位式: 0~255 百分比式 16 進位式:00~FF
中場練習 顏色的設定 Photoshop
色彩深度 -- 索引色 index color 最多 256 色 從 2 色到最多 256 色 網頁上常用的 GIF 檔 就是屬於這種。 因為顏色少,所以 檔案可以壓縮到很小。
色彩深度 -- 索引色 8 色 (14 K) 4 色 (10 K) 顏色雖然少,但也許會有特別的風格喔… 可以從1千6百多萬色中,任意挑選出所要顏色 8 色 (14 K) 4 色 (10 K) 顏色雖然少,但也許會有特別的風格喔…
色彩深度 -- 索引色 我的 4 色 你的 4 色 但,同樣挑四個顏色,我挑的和你挑的未必相同… (Windows 和 Mac 的色盤也未必相同) 我的 4 色 你的 4 色
網頁安全色彩(216色) 全彩 網頁安全色彩 既然每個人挑的顏色都不見得相同 顏色少多了,而且色階明顯地不連續… 大家都一樣從這216種顏色裡挑吧… 網頁安全色彩 既然每個人挑的顏色都不見得相同 顏色少多了,而且色階明顯地不連續…
網頁安全色彩(216色) 網頁的色彩標示採 “RRGGBB” 16進位制,每色由 “00” (最暗)至 “FF” (最亮) 網頁的安全色彩為 R、G、B 值各為以下6 種值之一: “00”、 “33”、 “66”、 “99”、 “CC”、 “FF” 共 6 × 6 × 6 =216 《參考》color.htm
【練習】以16進位標示以下色彩 000000 FF0000 666666 00FF00 cccccc FFFFFF 0000FF 網頁的色彩標示採 “RRGGBB” 16進位制表示法 (0~F) 000000 FF0000 666666 00FF00 cccccc FFFFFF 0000FF
色域 (gamut) 不同種類的設備,有不同的 “色域” ! 你掃描後的圖片, 螢幕上的色彩,和原來的圖片ㄧ樣嗎? 你掃描後的圖片, 螢幕上的色彩,和原來的圖片ㄧ樣嗎? 你螢幕上的檔案, 列印出來後,色彩和螢幕上的ㄧ樣嗎? 同樣這個圖檔,你從這台CRT螢幕上看, 和拿到另ㄧ台液晶螢幕上看,色彩ㄧ樣嗎? …. ,色彩ㄧ樣嗎? 為什麼不ㄧ樣? 不同種類的設備,有不同的 “色域” !
色域 (gamut) 不同種類的設備, 有不同的 [色域] ! RGB CMY Lab 重要觀念 色光類的設備,為 RGB 色域
色域 (gamut) 螢幕 掃描器 數位相機 印表機 印刷機 … 不同種類的設備,有不同的 “色域” ! 各種裝置和文件的色域範圍 A. Lab 色域 (整個可見光譜) B. 文件 (使用中色域) C. 裝置
別奢望你那便宜的印表機印出來的顏色,會和螢幕上看的一樣了 色彩管理 別奢望你那便宜的印表機印出來的顏色,會和螢幕上看的一樣了 色彩管理的緣起 儘量維持從輸入到輸出色彩之一致性 色彩不一致的原因 色域/色彩空間不一 設備呈色性質不一 設備元件良窳不一 見 Photoshop 說明檔: 製作一致的顏色
注意:影像模式影響重大 影像模式 色彩調整 RGB 、CMYK 、Lab 、… 灰階、 雙色調、點陣 色相、 明度、彩度 、色階、 …. 牽涉到你有多少色可使用,以及能用哪些色彩…
注意:逝者難追 捨棄的資訊、細節再也回不來 例:彩色 → 灰階or黑白 → 彩色 RGB → 索引色 → RGB RGB → CMYK → RGB
檔案格式大車拼 存成什麼 格式好呢 … 我! 我! 我啦! 選我!
三大網頁圖檔格式的火拼 JPG GIF PNG 既然不壓縮的檔很大,那就壓縮吧 …
你的圖檔性質是… 照片 美工(卡通)圖案 通常是 JPG 檔 通常是 GIF 檔 全彩 (色調連續, 膚色自然) 最多256 色 (色塊明顯)
三大網頁圖檔格式 GIF 圖形交替格式(Graphics Interchange Format) 是全球資訊網和其他線上服務上,在超文字標記語言 (HTML) 文件中顯示索引色圖像和影像常用的檔案格式。 GIF 是一種 LZW 壓縮的格式,可以最小化檔案大小和電子傳輸的時間。 GIF 格式可以保留索引色影像中的透明,但卻不能支援 Alpha 色版。 本段直接摘自 Photoshop 7 說明
三大網頁圖檔格式 JPEG 靜態影像壓縮標準 (Joint Photographic Experts Group) 是全球資訊網和其他線上服務上,在超文字標記語言 (HTML) 文件中顯示照片和其他連續色調影像常用的格式。BMP 格式支援「CMYK」、「RGB」和「灰階」色彩模式,且不支援 Alpha 色版。 與 GIF 格式不同的是,JPEG 會保留 RGB 影像中所有的顏色資訊,但會選擇性地放棄資料以壓縮檔案大小。 JPEG 影像會在開啟時自動地解除壓縮。較高的壓縮層級會導致影像的品質較低,而較低的壓縮層級會導致影像品質較佳。 在多數的情況下,「最大」的品質選項製造的結果,與原始影像幾乎沒有差別。 本段直接摘自 Photoshop 7 說明
三大網頁圖檔格式 PNG 可攜式網路圖案 (Portable Network Graphics) 是研發出來的另一種無專利的格式 (除 GIF 外的另一種格式),可以用來進行無減色壓縮和在全球資訊網上顯示影像。 與 GIF 不同的是:PNG 支援 24 位元影像,並且可以製造沒有鋸齒邊緣的背景透明。 但是,有些網頁瀏覽器不支援 PNG 影像。 PNG 格式支援沒有 Alpha 色版的「RGB」、「索引色」、「灰階」和「點陣圖」模式影像。PNG 可以保留灰階和 RGB 影像中的透明。 本段直接摘自 Photoshop 7 說明
色彩的感覺與配色
民俗的色彩 中國 宮廟:紅牆綠瓦 民間:白牆黑瓦 埃及 阿拉伯 ….
畫家的色盤 左拉 馬諦思 畢卡索 印象派、點描派 透過加法混色來達成視覺混合的效果 野獸派 強烈的色彩【例】紅色的臉,綠色的暗部 藍色時期、粉紅色時期、 …
http://webexhibits.org/ colorart/picasso.html 滑過去看看,不同色彩各是什麼感覺? 畫家的色盤 -- 畢卡索 http://webexhibits.org/ colorart/picasso.html
色彩調和 對比色系 補色系
色彩調和 單一色相 同色系 類似色系
色彩調和 多色相 三色調和 四色調和
色彩調和 -- 對比 vs 類似 圖片來源:照相館的故事
色彩調和-- 對比 vs 類似 By 游閔州
色彩感覺 暖/寒 興奮/沉靜 前進/後退 輕/重 強/弱 Dior
【練習】色彩搭配 -- 填色遊戲 練習:color_task
色彩計畫
何謂色彩計畫? 將對色彩的知識與配色技巧,應用到實際的設計工作上 目的:美化生活、產品行銷 色彩密碼 --專業設計的色彩美學 Color Combination 作者:I.R.I http://www.iridesign.co.kr 碁峰
偏好色調查 【問】一般人什麼用品喜歡買什麼顏色? 手錶? 手機? 汽車? 彩妝品? 馬桶? …
產品的色系
產品的色系
產品的色系
? 練習:產品的色彩名稱 【練習】 以下哪個敘述,最吸引你? 你可以根據這些名稱,想像出它的顏色嗎? 巧克力蛋白杏仁色 咖啡蜂蜜色 霜白咖啡色 龍舌蘭日出色 東方色 泡泡糖色 西瓜色 天使粉紅色 黃金寶貝色 ? 資料來源:化妝品型錄
練習:為產品的色彩命名 【練習】找到目前市面上同一款產品系列, 重新想出ㄧ組誘人的色彩名稱
練習:產品的色系 【練習】請為一組 T 恤產品配色…
【進階參考】 http://webexhibits.org http://www.vischeck.com The Color Mac Miller & Zaucha ﹝Hayden Books,1995 ~﹞ 設計的色彩心理 賴瓊琦 ﹝視傳文化,2001﹞ 數位影像色彩管理 徐法坤 著﹝龍溪圖書,1999年7月﹞ 色彩 王荔 譯﹝三民,89年2月﹞