ps基础知识色彩与.ppt

色彩基本认识,2,位图与矢量图,矢量图 可自由的放大、缩小或改变其中某个区段的颜色而不会失真 线条简单的图案 Adobe Illustrator、CorelDraw、Freehand、Flash 位图 记录没一点的颜色与一些格式的辨识资料 连续色调的图形，如人物、风景等照片 Photoshop,比較,位图与矢量图,4,分辨率,分辨率是图像的一个重要概念，用来衡量图像的细节表现力和技术参数，一般有：图像分辨率，显示器分辨率、扫描仪分辨率，打印机分辨率。 图像分辨率是指每英寸图像所含的点或者像素。图像文件的大小和分辨率成正比。 像素是构成图像的最基本单位，是一个虚拟的单位，只存在与电脑中。不管是位图还是矢量图，在屏幕上都会显示为像素，一个像素只有一种颜色。,5,色彩基本认识,6,光与色彩,1666年，牛顿用三棱镜分解太阳光，发现看似无色的光线，经过三棱镜时，会依其波长和折射关系， 依序分为紅、橙、黃、绿、蓝、靛、紫七色光,7,光与色彩,色光三原色 RGB 紅 Red 綠 Green 藍 Blue 0 255 (256 階) 0 最暗，255 最強(亮) 加色法 越加越亮白,三种色光都加到最強時，白色,量化,8,光与色彩,色料三原色 ( 印刷工业色 CMYK ) 天青 Cyan 洋紅 Magenta 黃 Yellow 黑 Black 0% 100% 100% 最浓 减色法 越加越暗黑,三種色料都加到最浓時，黑色,四色印刷,黑？,量化,9,练习图 (1),1_cmy.psd 图层面板 打开眼睛,1_RGB.psd 图层面板 打开眼睛,10,练习图 (2),0_cmy.psd 移动工具、选取图层,0_rgb.psd,11,光与色彩,RGB,CMYK,注意到沒？ 互为补色！,12,光与色彩,光 的物理特性： 波长： 产生色相的区別 波长短的偏藍，波长长的偏紅 振幅： 产生明暗的区別 振幅大的偏亮，振幅小的偏暗,13,【练习】光与色彩,【问】哪一個波的光較偏藍？哪一個較亮？,14,光与色彩,人类的视觉机能： 眼睛的 杆状細胞： 对光线的 明暗 有感应 眼睛的 錐狀細胞： 含有感受 紅、綠、藍 光三原色的細胞 色盲？,15,光与色彩,一般人眼中的草莓,紅綠色盲者眼中的草莓,你能拍出一部從色盲者眼中看世界的電影嗎？,16,色彩三属性,色相 Hue 色彩的相貌，不同的相貌各有其名称，如：红色，黄色等，黑白无色相，要着色必须先变成灰度值 明度 Value 、Brightness 即色彩的明暗程度，光线反射率多时明度较高 彩度 Chroma、Saturation 色彩的飽和程度或純度,(有時英文用字不太一樣),17,色彩三属性,色相、明度、彩度三種不同的称呼 HVC：Hue、Value 、 Chroma HSV：Hue、Saturation 、Value HSB：Hue、Saturation 、 Brightness HSB是基于人眼的一种颜色模式，每一种颜色都对应一种媒介。 打开PS中的拾色器就是以HSB的方式在提取颜色,(有時英文用字不太一樣),18,色彩三屬性 - 明度,在無彩度中，明度最高是白色，最低是黑色，其間為各種深淺的灰色,低明度,高明度,19,色彩三屬性 - 彩度,純色彩度最高，混色（不論白、灰、黑或有彩色）越多越降低其彩度,低彩度,高彩度,20,練習：色彩三屬性,【问】 以下哪一色的 明度 較高？ 哪一色的彩度 較高？ A. 40% 純紅 60% 白 B. 60% 純紅 40% 黑,21,色彩三要素,处理結果：改变像素的色彩值 色彩三要素 ： H色相、S彩度、 B明度,22,改变像素的色彩值：明度,色彩三要素： H色相、S彩度、 B明度,原图,B 明度 (Brightness)：很暗 很亮,23,改變像素的色彩值：彩度,色彩三要素： H色相、S彩度、 B明度,原图,S 飽和度：灰度鲜艳,24,改變像素的色彩值：色相,色彩三要素： H色相、S彩度、 B明度,原图,H 色相Hue,好奇妙的色相變化喔！,25,練習：色彩三屬性,【問】灰度的图含有色彩資訊嗎？,CS3,26,色彩三属性 - 色相,色相環之一例,27,色彩模型 之一例 - 色立体,將色彩的三属性，予以系統的排列，組成一個三度空間的立体形狀色彩分类结构图： 以明度為垂直軸，愈上方明度越高 以彩度為水平軸，愈接近明度軸彩度越低 色相环,28,色彩種類,无彩色 黑、灰、白 有彩色 即色相上所列之色彩， 如紅、黃、藍等 独立色 即印刷上所謂的特別色 如金、銀、螢光色等,29,色彩三屬性,調來調去，都是在調這三屬性,尤其是明暗對比 (色階)！,就好像一白遮三醜，明暗對比適當了，影像品質也就差不多了！,30,日常照片的常見處理：調整明暗對比,雖然拍得不好 但萬一還是要用， 也可以處理看看喔！,明暗階調 真的很重要,31,練習：色彩三屬性,Photoshop 影像 調整 色相飽和度,32,通道 (Channel)和色彩模式 (Mode),通道是儲存不同类型资讯的灰阶图像： 当你打开新的图像时，会自动建立色彩资讯通道 。图像的色彩模式 (Mode)決定了建立的彩色通道数目。 例如， RGB 图像有四個預設通道：其中三個分別用于紅色、綠色和藍色，再加上一個编辑图像的复合通道。,灰階 = 程度！,第一段 再看一次,33,视图 通道 (Channel),RGB 模式時：3 色版,CMYK 模式時：4 色版,給我 3 MB 空間,那給我 4 MB,34,图像的色彩深度,也就是說, 有展現多少色的能耐！,嗚 我只有 12 色的,我有 36 色的 雄獅蠟筆！,我有水彩 隨便我要調什麼顏色！,35,色彩深度 (位元),1 位元 黑 白 黑白 2 色變化 8 位元 灰 階 256 色灰階變化 16 位元 高 彩 65,536 種色彩變化 24 位元 全 彩 16,777,216 種色彩變化 - 8 位元 索引色 最多 256 種變化,同樣長寬時, 在不壓縮情況下 檔案大小的比較, 就看位元的倍數,36,色彩深度 - 1 位元 (bit),21=2 黑白 2 色變化,雖然只有 2 色，竟然沒有想像中單調 也能有典雅的感覺,37,色彩深度 - 2 位元 (bits),22=4 黑灰白 4 阶变化,色阶还很明显的不连续,38,色彩深度 - 8 位元 (bits),28=256 如为灰度, 有256阶变化,當您的眼睛 已分辨不出一阶阶時 連續色調 和觀看距離之遠近有關,39,28=256,請複誦 三次！,40,Photoshop CS 版 16 位元 (Bits/Channel),28=256 216=65,536,232=65,536 x 65,536 =?,CS3,41,【問】灰階與黑白樣嗎？,42,色彩深度 - 24 位元 (bits),28 x 28 x 28 =16,777,216 (1千6百多萬),R G B,大自然色彩遠超過這個， 不過在螢幕上，諒你的眼睛也沒厲害到都分辨的出來,色光三原色 各用 256 階 表示其強度,43,【問】色彩深度 - 16位元(bits)通道,28=256 216=65,536,216 x 216 x 216 = = (224 x 224 ) = 16,777,216 x 16,777,216 (快算不出了),R G B,如果每個通道不只256階，而是更細緻的65,536 階呢？,44,【问】不压缩的位图有多大？,长 x 宽 x 色彩深度 例： 1024 x 768 x 3 Bytes = 2.25 MB 那 一張 300 dpi 全开的研讨会或电影海报呢？,還真大,45,【问】这么多色彩，該如何精确表达？,色名色彩的表达 茶花紅 海棠紅 枸杞紅 滿江紅 潤紅 緋紅,雞血石紅 猩猩紅 曙色 芙蓉紅 落霞紅 朱紅,看了古時候這些色名，你能想像那到底是什麼色嗎?,46,【問】这么多色彩，該如何精确表达？,几种主要的色彩值表示方式,10 進位式： 0255,H: 360度式,百分比式,16 进位式：00FF,47,中场练习,顏色的設定 Photoshop,48,色彩深度 - 索引色 index color,最多 256 色,网页上常用的 GIF 图就是属于这种。 因为顏色少，所以 图像可以压缩到很小。,从 2 色到最多 256 色,49,色彩深度 - 索引色,4 色 (10 K),8 色 (14 K),顏色虽然少，但也許會有特別的風格喔,可以從1千6百多萬色中，任意挑選出所要顏色,50,色彩深度 - 索引色,你的 4 色,我的 4 色,(Windows 和 Mac 的色盤也未必相同) 但，同樣挑四個顏色，我挑的和你挑的未必相同,51,既然每個人挑的顏色都不見得相同,网页安全色彩（216色）,全彩,网页安全色彩,顏色少多了，而且色阶明显地不连续,大家都一樣從這216種顏色裡挑吧,52,网页安全色彩（216色）,网页的色彩表示用 “RRGGBB” 16进制，每色由 “00” （最暗）至 “FF” （最亮） 网页的安全色彩為 R、G、B 值各为以下6 种值之一： “00”、 “33”、 “66”、 “99”、 “CC”、 “FF” 共 6 6 6 216,53,【联系】以16进制表示以下色彩,网页的色彩表示 “RRGGBB” 16进制表示法 (0F),000000,666666,cccccc,FFFFFF,0000FF,00FF00,FF0000,54,色域 (gamut),你扫描后的图片， 萤幕上的色彩，和原來的图片樣嗎？ 你萤幕上的档案， 印出來後，色彩和螢幕上的樣嗎？ 同樣這个图片，你从这台CRT螢幕上看， 和拿到另台液晶螢幕上看，色彩樣嗎？ . ，色彩樣嗎？,樣嗎？,不同种类的设备，有不同的 “色域” ！,為什麼不樣？,55,色域 (gamut),重要概念,色光类的设备，为 RGB 色域 色料类 (要印出來的) 的设备，为 CMY 色域 Lab 被視為一种与装置无关的色彩模型，包含所有的可见色彩,不同种类的设备， 有不同的 色域 ！,56,色域 (gamut),不同种类的设备，有不同的 “色域” ！ 螢幕 掃描器 數位相机 印表机 印刷机 ,各种装置和文件的色域范围 A. Lab 色域 (整個可见光谱) B. 文件 (使用中色域) C. 裝置,57,色彩管理,色彩管理的缘起 尽量维持从輸入到輸出色彩之一致性 色彩不一致的原因 色域色彩空間不一 设备呈色性質不一 设备元件良窳不一,別奢望你那便宜的印表机印出來的顏色，會和螢幕上看的一樣了,58,注意：逝者难追,舍弃的资讯、細节再也回不來 例：彩色 灰階 or 黑白 彩色？ RGB CMYK RGB？ 大張 小張 大張？,网页上的图像， 通常已舍弃 大量資訊！,嗄那不就好不了,59,图像格式大比拼,存成什麼 格式好呢 ,我! 我!,選我!,我啦!,60,三大网页图像格式的火拼,GIF,JPG,PNG,既然不壓縮的檔很大，那就壓縮吧 ,61,你的图像性质是,照片 通常是 JPG 全彩 (色调连续，肤色自然),美工(卡通)图案 通常是 GIF 檔 最多256 色 (色块明显),62,三大网页图像格式,GIF 圖形交替格式(Graphics Interchange Format) 是全球資訊網和其他線上服務上，在超文字標記語言 (HTML) 文件中顯示索引色圖像和影像常用的檔案格式。 GIF 是一種 LZW 壓縮的格式，可以最小化檔案大小和電子傳輸的時間。 GIF 格式可以保留索引色影像中的透明，但卻不能支援 Alpha 色版。,本段直接摘自 Photoshop 7 說明,少講一個很重要的：最多 256 色！,63,三大網頁圖檔格式,JPEG 靜態影像壓縮標準 (Joint Photographic Experts Group) 是全球資訊網和其他線上服務上，在超文字標記語言 (HTML) 文件中顯示照片和其他連續色調影像常用的格式。BMP 格式支援CMYK、RGB和灰階色彩模式，且不支援 Alpha 色版。 與 GIF 格式不同的是，JPEG 會保留 RGB 影像中所有的顏色資訊，但會選擇性地放棄資料以壓縮檔案大小。 JPEG 影像會在開啟時自動地解除壓縮。較高的壓縮層級會導致影像的品質較低，而較低的壓縮層級會導致影像品質較佳。 在多數的情況下，最大的品質選項製造的結果，與原始影像幾乎沒有差別。,本段直接摘自 Photoshop 7 說明,64,三大网页图像格式,PNG 可携式网络图像 (Portable Network Graphics) 是研發出來的另一種無專利的格式 (除 GIF 外的另一種格式)，可以用來進行無減色壓縮和在全球資訊網上顯示影像。 與 GIF 不同的是：PNG 支援 24 位元影像，並且可以製造沒有锯齿边缘的背景透明。 但是，有些網頁瀏覽器不支援 PNG 影像。 PNG 格式支援沒有 Alpha 色版的RGB、索引色、灰階和點陣圖模式影像。PNG 可以保留