Transcript 網頁色彩設計的準備
網頁色彩學 網頁色彩設計的準備 授課教師：吳有龍 教授 報 告 人：李世華 10022024G 1 講解大綱 色彩整體概論 顏色如何構成 光源色與物體色 原色 色彩三屬性 色相模型與色彩混和原理 RGB模型與加法原理 CMYK模型與減法原理 常用色域空間 數位環境與色彩表現 數位色彩與解析度 數位色彩表現 數位色彩表現不同的因素 網頁216安全色的重要 何謂網頁安全色 Dithering模擬 各種調色盤簡介 色彩小秘訣 國立西螺 農工進修 色彩整體概論-顏色如何構成1/2 構成顏色的三要素：光源、物體、人 如 國立西螺 農工進修 色彩整體概論-顏色如何構成2/2 人類肉眼可分辨出有色光的頻率如下圖 太陽光 (無色光) 三稜鏡 牛頓在1666年以三稜 鏡發現光線折射現象 國立西螺 農工進修 色彩整體概論-光源色與物體色 光源色： 自身可發出光線的光源，所產出的顏色即為光源色。 物體色： 自身不產生光源，但可反射某色波長，使肉眼所接收到的 顏色。 國立西螺 農工進修 色彩整體概論-原色 原色：不能從其他基本顏色混和而得之色 光源三原色為：紅 、藍 、綠 物體三原色為：紅(洋紅)、藍(青)、黃 國立西螺 農工進修 色彩整體概論-色彩三屬性 色相：色彩的名稱 如紅色、黃色、藍色 明度：色彩的明暗程度 明度越高色彩越明亮， 越低則色彩越黯淡 彩度：色彩的鮮豔程度 彩度越高色彩越鮮豔飽和 國立西螺 越低則越稀薄 農工進修 色相模型與色彩混和原理 RGB模型與加法原理: 紅、綠、藍三色是色光三原色，色光三原色混合會變成白 色，投影機、電視、電影都是根據色光三原色所製成。 加法原理：混合不同顏色的光波以形成白光。 紅 Red RGB等量混合 能量極高 就會出現白色 藍 Blue 國立西螺 農工進修 綠 Green 色相模型與色彩混和原理 CMYK模型與減法原理: 紅黃藍是色料三原色，色料三原色混合會變黑色，繪畫時 用三原色就可調出大部分色彩。 出版成印刷品時需加入純黑色墨水(K)輔助 減法原理：使用顏料來減少光波。 洋紅(Magenta) 紫紅 將許多色料混合後，重疊 之處將趨近於黑色 (但非純黑) 青(Cyan) 國立西螺 農工進修 黃(Yellow) 數位環境與色彩表現 數位色彩與解析度: 數位色彩：將色彩以電子訊號記錄，然後利用周邊裝置 使色彩重現，光源色、物體色特徵能共存。 數位影像：將影像座標化(以像素為單位)，在座標上還原 數位色彩。 解析度： DPI：Dots Per Inch，一英吋長度內有多少像素。 LPI：Line Per Inch，一英吋寬度內有多少像素。 像素是組成數碼影像的最少單位，每一個像素都記錄了一 種色彩，把這些像素組合起來，便成為一張相片的影像。 換句話說，一張相片的像素愈多，其圖像便會愈細緻和清 晰。 國立西螺 農工進修 數位環境與色彩表現 數位色彩表現不同的因素: 網頁上相同的顏色，可能隨著 顯示器 作業系統 電腦的等級 瀏覽器種類 而有所顏色區別(如右圖)。 解決方法：使用網頁安全色。 國立西螺 農工進修 網頁216安全色的重要 何謂網頁安全色: 網頁216安全色：在任何環境下所顯示的色彩必相同。 安全色的構成：由紅、藍、綠的數位訊號所構成， 共有210種有彩色與6種無彩。 HEXA Code (16位碼) 00 33 66 99 CC FF DAC Count (RGB訊碼) 0 51 102 153 204 255 RＸGＸB ＝6 Ｘ 6 Ｘ 6 ＝216 國立西螺 農工進修 網頁216安全色的重要 Dithering模擬: 如果電腦無法產生所要求的顏色，電腦程式將自動混合不 同的顏色，利用重複密集排列的方式，以產生相似的顏色。 使用網頁安全色的例子 以dithering方式模擬色彩的例子 國立西螺 農工進修 網頁216安全色的重要 各種調色盤簡介 (1/6): 為了幫助設計者容易選取適合的顏色，因此出現了不同樣 式的調色盤 Lynda Weinmandr Browser-Safe Palette 國立西螺 農工進修 網頁216安全色的重要 各種調色盤簡介 (2/6): 國立西螺 農工進修 網頁216安全色的重要 各種調色盤簡介 (3/6): 國立西螺 農工進修 網頁216安全色的重要 各種調色盤簡介 (4/6) 國立西螺 農工進修 網頁216安全色的重要 各種調色盤簡介 (5/6): 國立西螺 農工進修 網頁216安全色的重要 各種調色盤簡介 (6/6) 國立西螺 農工進修 色彩小秘訣 色彩小密訣 國立西螺 農工進修 補充資料 『國際色彩聯盟 - 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的網址 http://www.color.org/index.xalter 國立西螺 農工進修 參考書籍、文件與網頁網址 “WEB好色—網頁色彩學”，Image Research Institure Inc，博碩。 “色彩理論與數位影像”，鄭柏左，新文京開發。 “新銳網頁色彩與版式搭配案例指南”，張楠溪，文魁資訊。 “顏色手冊及術語”，由X-Rite編製的PDF文件。 “色彩原理”，編者不明，PPT文件。 “影像的基本原理”，蔡政宗，PPT文件。 網頁資料： http://www.ebaomonthly.com/window/photo/lesson/color_01.htm http://www.ctk.com.tw/JackWeb/graphic/Knowledge/element_color.htm http://www.wretch.cc/blog/ayu6628/22281715 圖片來源：Google圖片搜尋，以及以上資料部分擷取。 國立西螺 農工進修 25 國立西螺 農工進修