網頁色彩學 網頁色彩設計的準備
Post on 01-Jan-2016
76 Views
Preview:
DESCRIPTION
TRANSCRIPT
網頁色彩學 網頁色彩設計的準備
授課教師:吳有龍 教授
主講人:資管碩二 馮建堯 9622021M
※ 本投影片之資料僅為學術用途,請勿轉載,請尊重智財權 ※
2/24
講解大綱 色彩整體概論
顏色如何構成 光源色與物體色 原色 色彩三屬性
色相模型與色彩混和原理 RGB 模型與加法原理 CMYK 模型與減法原理 常用色域空間
數位環境與色彩表現 數位色彩與解析度 數位色彩表現 數位色彩表現不同的因素
網頁 216 安全色的重要 何謂網頁安全色 Dithering 模擬 各種調色盤簡介
3/24
色彩整體概論 顏色如何構成 1/2
構成顏色的三要素:光源、物體、人如
4/24
色彩整體概論 顏色如何構成 2/2
人類肉眼可分辨出有色光的頻率如下圖
太陽光( 無色光 )
三稜鏡
牛頓在 1666 年以三稜鏡發現光線折射現象
5/24
色彩整體概論 光源色與物體色
光源色:
自身可發出光線的光源,所產出的顏色即為光源色。
物體色:
自身不產生光源,但可反射某色波長,使肉眼所接收到的顏色。
6/24
色彩整體概論 原色
原色:不能從其他基本顏色混和而得之色 光源三原色為:紅 、藍 、綠 物體三原色為:紅 ( 洋紅 ) 、藍 ( 青 ) 、黃
7/24
色彩整體概論 色彩三屬性
構成色彩的三種屬性為 色相
以散發出、反射出的光譜波長的主波長決定, 直接決定了顏色類型。
明度 ( 亮度 ) 光源的明暗程度。
彩度 ( 飽和度 ) 色彩的鮮豔度,越高越近純色。
8/24
色相模型與色彩混和原理 RGB 模型與加法原理
以 RGB 三種顏色混合而產生其他顏色
加法原理:將光源色光混合,重疊之處能量越高,顏色越亮白。
RGB 等量混合能量極高就會出現白色
紅 Red
藍 Blue 綠 Green
9/24
色相模型與色彩混和原理 CMYK 模型與減法原理
以 CMY 三色進行混合,調和物體色 出版成印刷品時需加入純黑色墨水 (K) 輔助 減法原理:將物體色混合,重疊之處會使光線
吸收量增加,明度降低。 洋紅(Magenta)紫紅
青(Cyan)
黃(Yellow)
將許多色料混合後,重疊之處將趨近於黑色( 但非純黑 )
10/24
色相模型與色彩混和原理 常用色域空間
1998 年 10 月,由 IEC( 國際電氣標準會議 )所策定之標準色域空間定義, sRGB 規格(standard RGB) 。
幾乎所有的數位影像輸出入都支援 sRGB 規格。
11/24
數位環境與色彩表現 數位色彩與解析度
數位色彩:將色彩以電子訊號記錄,然後利用 周邊裝置使色彩重現,光源色、物體色特 徵能共存。
數位影像:將影像座標化 ( 以像素為單位 ) ,在 座標上還原數位色彩。
解析度:DPI : Dots Per Inch ,一英吋長度內有多少像素。LPI : Line Per Inch ,一英吋寬度內有多少像素。
12/24
數位環境與色彩表現 數位色彩表現
色彩深度 使用位元數 色彩表現
黑白 1 位元 黑白兩色
16 索引色 4 位元 最高 16 種變化 (24)
256 索引色 8 位元 最高 256 種變化
灰階 8 位元 256 種灰階頻色變化
高彩 16 位元 65,536 色
全彩 24 位元 16,777,216 色 (28X28X28)
(RGB 各用 8 個位元表示顏色 )
13/24
數位環境與色彩表現 數位色彩表現不同的因素
網頁上相同的顏色,可能隨著 顯示器 作業系統 電腦的等級 瀏覽器種類
而有所顏色區別 ( 如右圖 ) 。
解決方法:使用網頁安全色。
14/24
網頁 216 安全色的重要 何謂網頁安全色
網頁 216 安全色:在任何環境下所顯示的色彩 必相同。
安全色的構成:由紅、藍、綠的數位訊號所構 成,共有 210 種有彩色與 6 種無彩。
HEXA Code (16 位碼 )00 33 66 99 CC FF
DAC Count (RGB 訊碼 )0 51 102 153 204 255
R X G X B= 6 X 6 X 6 = 216
15/24
網頁 216 安全色的重要 DITHERING 模擬
如果電腦無法產生所要求的顏色,電腦程式將自動混合不同的顏色,利用重複密集排列的方式,以產生相似的顏色。
使用網頁安全色的例子 以 dithering 方式模擬色彩的例子
16/24
網頁 216 安全色的重要 各種調色盤簡介 1/6
為了幫助設計者容易選取適合的顏色,因此出現了不同樣式的調色盤
Lynda Weinmandr Browser-Safe Palette
17/24
網頁 216 安全色的重要 各種調色盤簡介 2/6
18/24
網頁 216 安全色的重要 各種調色盤簡介 3/6
19/24
網頁 216 安全色的重要 各種調色盤簡介 4/6
20/24
網頁 216 安全色的重要 各種調色盤簡介 5/6
21/24
網頁 216 安全色的重要 各種調色盤簡介 6/6
22/24
補充資料
『國際色彩聯盟 - International Color Consortium 』 ( 簡稱 ICC) ,西元 1993 年創立的組織。其針對目前所使用的所有數位影像格式進行整合。以下為聯盟成員:Adobe Systems IncorporationAgfa-Gevaert N.V.Apple ComputerEastman Kodak CompanyMicrosoft CorporationSilicon Graphics Inc.Sun Microsystems, Inc.
ICC 的網址 http://www.color.org/index.xalter
23/24
參考書籍、文件與網頁網址
“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 圖片搜尋,以及以上資料部分擷取。
24/24
The EndThanks for your attendance
top related