1 / 24

網頁色彩學　　 　　　　網頁色彩設計的準備

網頁色彩學　　 　　　　網頁色彩設計的準備. 授課教師：吳有龍　教授 　主講人：資管碩二　 　　　　　馮建堯 9622021M ※ 　本投影片之資料僅為學術用途，請勿轉載，請尊重智財權　 ※. 講解大綱. 數位環境與色彩表現 數位色彩與解析度 數位色彩表現 數位色彩表現不同的因素 網頁 216 安全色的重要 何謂 網頁安全色 Dithering 模擬 各種調色盤 簡介. 色彩整體概論 顏色如何構成 光源色與物體色 原色 色彩三屬性 色相模型與色彩混和原理 RGB 模型與加法原理 CMYK 模型與減法原理 常用色域空間.

gail-wiley
Télécharger la présentation

網頁色彩學　　 　　　　網頁色彩設計的準備

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 網頁色彩學　　　　　　網頁色彩設計的準備 授課教師：吳有龍　教授　主講人：資管碩二　 　　　　　馮建堯 9622021M ※　本投影片之資料僅為學術用途，請勿轉載，請尊重智財權　※

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

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

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

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

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

  7. 色彩整體概論色彩三屬性 • 構成色彩的三種屬性為 • 色相　以散發出、反射出的光譜波長的主波長決定，　直接決定了顏色類型。 • 明度(亮度)　光源的明暗程度。 • 彩度(飽和度)　色彩的鮮豔度，越高越近純色。

  8. 色相模型與色彩混和原理RGB模型與加法原理 紅 Red RGB等量混合 能量極高 就會出現白色 藍 Blue 綠 Green 以RGB三種顏色混合而產生其他顏色 加法原理：將光源色光混合，重疊之處能量越高，顏色越亮白。

  9. 色相模型與色彩混和原理CMYK模型與減法原理 洋紅(Magenta) 紫紅 將許多色料混合後，重疊之處將趨近於黑色(但非純黑) 青(Cyan) 黃(Yellow) 以CMY三色進行混合，調和物體色 出版成印刷品時需加入純黑色墨水(K)輔助 減法原理：將物體色混合，重疊之處會使光線吸收量增加，明度降低。

  10. 色相模型與色彩混和原理 常用色域空間 幾乎所有的數位影像輸出入都支援sRGB規格。 1998年10月，由 IEC(國際電氣標準會議)所策定之標準色域空間定義，sRGB規格(standard RGB)。

  11. 數位環境與色彩表現數位色彩與解析度 • 數位色彩：將色彩以電子訊號記錄，然後利用　　周邊裝置使色彩重現，光源色、物體色特　　徵能共存。 • 數位影像：將影像座標化(以像素為單位)，在　　座標上還原數位色彩。 • 解析度： • DPI：Dots Per Inch，一英吋長度內有多少像素。 • LPI：Line Per Inch，一英吋寬度內有多少像素。

  12. 數位環境與色彩表現數位色彩表現

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

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

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

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

  17. 網頁216安全色的重要各種調色盤簡介 2/6

  18. 網頁216安全色的重要各種調色盤簡介 3/6

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

  20. 網頁216安全色的重要各種調色盤簡介 5/6

  21. 網頁216安全色的重要各種調色盤簡介 6/6

  22. 補充資料 • 『國際色彩聯盟 - 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

  23. 參考書籍、文件與網頁網址 • “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. The End Thanks for your attendance

More Related