網頁色彩學 　　 網頁色彩設計的準備 授課教師：吳有龍　教授 報 告 人：李世華 10022024G.

Presentation on theme: "網頁色彩學 　　 網頁色彩設計的準備 授課教師：吳有龍　教授 報 告 人：李世華 10022024G."— Presentation transcript:

1 網頁色彩學 　　 網頁色彩設計的準備 授課教師：吳有龍　教授 報 告 人：李世華 G

2 講解大綱 色彩整體概論 數位環境與色彩表現 色相模型與色彩混和原理 網頁216安全色的重要 顏色如何構成 數位色彩與解析度 光源色與物體色
原色 色彩三屬性 色相模型與色彩混和原理 RGB模型與加法原理 CMYK模型與減法原理 常用色域空間 數位環境與色彩表現 數位色彩與解析度 數位色彩表現 數位色彩表現不同的因素 網頁216安全色的重要 何謂網頁安全色 Dithering模擬 各種調色盤簡介 色彩小秘訣

3 色彩整體概論-顏色如何構成1/2 構成顏色的三要素：光源、物體、人 如

4 色彩整體概論-顏色如何構成2/2 人類肉眼可分辨出有色光的頻率如下圖 太陽光 (無色光) 三稜鏡 牛頓在1666年以三稜 鏡發現光線折射現象

5 色彩整體概論-光源色與物體色 光源色： 自身可發出光線的光源，所產出的顏色即為光源色。
光源色： 自身可發出光線的光源，所產出的顏色即為光源色。 物體色： 自身不產生光源，但可反射某色波長，使肉眼所接收到的顏色。

6 色彩整體概論-原色 原色：不能從其他基本顏色混和而得之色 光源三原色為：紅 、藍 、綠 物體三原色為：紅(洋紅)、藍(青)、黃

7 色彩整體概論-色彩三屬性 色相：色彩的名稱 明度：色彩的明暗程度 彩度：色彩的鮮豔程度 如紅色、黃色、藍色
明度越高色彩越明亮，越低則色彩越黯淡 彩度：色彩的鮮豔程度 彩度越高色彩越鮮豔飽和，越低則越稀薄

8 色相模型與色彩混和原理 RGB模型與加法原理:
紅、綠、藍三色是色光三原色，色光三原色混合會變成白色，投影機、電視、電影都是根據色光三原色所製成。 加法原理：混合不同顏色的光波以形成白光。 RGB等量混合 能量極高 就會出現白色 紅 Red 藍 Blue 綠 Green

9 色相模型與色彩混和原理 CMYK模型與減法原理: 紅黃藍是色料三原色，色料三原色混合會變黑色，繪畫時用三原色就可調出大部分色彩。
減法原理：使用顏料來減少光波。 洋紅(Magenta) 紫紅 青(Cyan) 黃(Yellow) 將許多色料混合後，重疊之處將趨近於黑色 (但非純黑)

10 數位環境與色彩表現 數位色彩與解析度: 數位色彩：將色彩以電子訊號記錄，然後利用周邊裝置 使色彩重現，光源色、物體色特徵能共存。
數位環境與色彩表現　 數位色彩與解析度: 數位色彩：將色彩以電子訊號記錄，然後利用周邊裝置 　　 使色彩重現，光源色、物體色特徵能共存。　 數位影像：將影像座標化(以像素為單位)，在座標上還原 數位色彩。 解析度： DPI：Dots Per Inch，一英吋長度內有多少像素。 LPI：Line Per Inch，一英吋寬度內有多少像素。 像素是組成數碼影像的最少單位，每一個像素都記錄了一種色彩，把這些像素組合起來，便成為一張相片的影像。換句話說，一張相片的像素愈多，其圖像便會愈細緻和清晰。

11 數位環境與色彩表現 數位色彩表現不同的因素: 網頁上相同的顏色，可能隨著 而有所顏色區別(如右圖)。 解決方法：使用網頁安全色。 顯示器
數位環境與色彩表現 　　　 數位色彩表現不同的因素: 網頁上相同的顏色，可能隨著 顯示器 作業系統 電腦的等級 瀏覽器種類 　而有所顏色區別(如右圖)。 解決方法：使用網頁安全色。

12 網頁216安全色的重要 何謂網頁安全色: 網頁216安全色：在任何環境下所顯示的色彩必相同。
網頁216安全色的重要 　　　　　　 何謂網頁安全色: 網頁216安全色：在任何環境下所顯示的色彩必相同。 　　 安全色的構成：由紅、藍、綠的數位訊號所構成， 　　 共有210種有彩色與6種無彩。 HEXA Code (16位碼) CC FF DAC Count (RGB訊碼) 　R Ｘ G Ｘ B ＝6 Ｘ 6 Ｘ 6 ＝216

13 網頁216安全色的重要 Dithering模擬:
網頁216安全色的重要 　　　　　　 Dithering模擬: 如果電腦無法產生所要求的顏色，電腦程式將自動混合不同的顏色，利用重複密集排列的方式，以產生相似的顏色。 使用網頁安全色的例子 以dithering方式模擬色彩的例子

14 網頁216安全色的重要 各種調色盤簡介 (1/6): 為了幫助設計者容易選取適合的顏色，因此出現了不同樣式的調色盤
網頁216安全色的重要 　　　　 各種調色盤簡介 (1/6): 為了幫助設計者容易選取適合的顏色，因此出現了不同樣式的調色盤 Lynda Weinmandr Browser-Safe Palette

15 網頁216安全色的重要 　　　　 各種調色盤簡介 (2/6):

16 網頁216安全色的重要 　　　　 各種調色盤簡介 (3/6):

17 網頁216安全色的重要 　　　　 各種調色盤簡介 (4/6)

18 網頁216安全色的重要 　　　　 各種調色盤簡介 (5/6):

19 網頁216安全色的重要 　　　　 各種調色盤簡介 (6/6)

20 色彩小秘訣 　　　　 色彩小密訣

21 補充資料 『國際色彩聯盟 - International Color Consortium』(簡稱ICC)，西元1993年創立的組織。其針對目前所使用的所有數位影像格式進行整合。以下為聯盟成員： Adobe Systems Incorporation Agfa-Gevaert N.V. Apple Computer Eastman Kodak Company Microsoft Corporation Silicon Graphics Inc. Sun Microsystems, Inc. ICC的網址

22 參考書籍、文件與網頁網址 “WEB好色—網頁色彩學”，Image Research Institure Inc，博碩。
“色彩理論與數位影像”，鄭柏左，新文京開發。 “新銳網頁色彩與版式搭配案例指南”，張楠溪，文魁資訊。 “顏色手冊及術語”，由X-Rite編製的PDF文件。 “色彩原理”，編者不明，PPT文件。 “影像的基本原理”，蔡政宗，PPT文件。 網頁資料： 圖片來源：Google圖片搜尋，以及以上資料部分擷取。

23 Thank you for your attention