1.2 美工掌握基本知識

1.2.1 分辨率、像素和尺寸

1. 分辨率

分辨率有兩種：屏幕分辨率和圖像分辨率。

屏幕分辨率：指顯示器所能顯示的像素有多少。顯示的像素越多，畫面就越精細，信息也越多。例如，將計算機顯示器的分辨率設置成1280像素×1024像素，說明計算機屏幕在水平方向上有1280個像素點，在垂直方向上有1024個像素點，如圖1-3所示。

圖像分辨率：指圖像中存儲的信息量，是每英寸圖像內有多少個像素點。分辨率的單位為PPI（Pixels Per Inch），即叫作像素每英寸。

在設計的過程中，圖像分辨率一般設置為72PPI就可以了，色彩模式為RGB。如果做的海報需要輸出印刷，那么分辨率就要設置為300PPI，色彩模式為CMYK。

2. 像素

圖像由一個個點組成，這個點稱為像素。像素是圖像中最小的單位。每個像素是一個小點，不同顏色的點（像素）聚集起來就變成一幅動人的畫面。

在Photoshop軟件中打開一張圖片，將圖片放大300倍，就可以發現，它是由很多小方格色塊排列組成的，這就是一個像素，如圖1-4所示。

兩張圖片尺寸相等的情況下，像素越高，說明其精細度越高，反之則越低。

3. 尺寸

圖像尺寸的長度和寬度經常以毫米或厘米為單位，也可以像素為單位。

在做印刷設計的時候，在Photoshop軟件中新建文件時，可以選擇以毫米或厘米為尺寸單位。在美工設計中，長度和寬度尺寸經常以像素為單位，如圖1-5所示。

在美工設計中，寶貝主圖尺寸大小是800像素×800像素，詳情頁寬度是750像素，全屏海報寬度是1920像素不等。

1.2.2 位圖和矢量圖

1. 位圖圖像

位圖又稱點陣圖或像素圖，是由屏幕上的發光點（即像素）構成的，點或像素是最小單位，這些多個像素的色彩組合就形成了一張圖像，稱為位圖。位圖圖像和分辨率像素有關，在圖像放大時，可以很清楚地看到每個像素的組成內容，如圖1-6所示。

位圖圖像的主要優點是表現力強、細膩、層次多、細節多，可以很容易模擬出像照片一樣的真實效果。它的缺點是在傳播的過程中會造成失真、圖像模糊等。

2. 矢量圖

矢量圖是使用直線和曲線工具描述的圖形，這些圖形的元素是一些點、線、矩形、多邊形、圓和弧線等。矢量圖的特點是放大后圖像不會失真，與分辨率無關，適用于圖形設計、文字設計和一些標志設計、版式設計等，如圖1-7所示。

可用Illustrator、CorelDRAW等常用軟件繪制矢量圖。

位圖由像素組成，而矢量圖由矢量線組成。位圖可以表現的色彩比較多，而矢量圖可以表現的色彩則相對較少。矢量圖可以無限放大，而不會失真。

1.2.3 常用圖片文件格式

圖片格式是計算機存儲圖片的格式，常見的存儲格式有JPG、PNG、GIF、PSD、AI等。

每一款工具軟件都會支持輸出不同的圖片格式選項，以滿足用戶的工作需求。在Photoshop軟件中，執行“文件>存儲為”菜單命令，彈出選項面板，能保存為二十多種圖片格式，如圖1-8所示。

經常在網上使用QQ軟件聊天，也會發現，使用截圖功能，選擇保存，保存類型選項也提供了3種圖片格式供用戶選擇。那么，為什么會有這么多圖片格式呢？它們之間有什么區別？在做美工設計的時候，選擇哪一種合適的圖片格式才是正確的呢？

1. JPEG格式

JPEG/JPG格式是最常見的一種圖像格式，它是由聯合照片專家組（Joint Photographic Experts Group）命名的，其文件擴展名為“.jpg”或“.jpeg”，它是一種有損壓縮格式。

但是JPEG壓縮技術十分先進，它用有損壓縮方式去除冗余的圖像數據，在獲得極高的壓縮率的同時能展現十分豐富生動的圖像。換句話說，就是可以用最少的存儲空間得到最好的圖像品質，如圖1-9所示。

JPEG格式是目前網絡上最流行的圖像格式，互聯網上80%的圖片都是用的此格式，它的特點是文件尺寸較小，下載速度快。在Photoshop軟件中以JPEG格式存儲時，提供13級壓縮級別，用0~12級表示。0級別表示壓縮最高，如圖1-10所示。

整體來說，JPEG格式的優點是可以將圖像或素材進行高倍數壓縮，利用可變的壓縮比自由控制文件大小，滿足在網絡上的傳播。缺點自然和優點是對立的，有壓縮就會對圖像進行取舍，會使原始圖片質量下降。

2. PNG-8/PNG-24格式

PNG（Portable Network Graphics，便攜式網絡圖形）是網上接受的最新圖像文件格式。其設計目的是試圖替代GIF和TIFF文件格式，同時增加一些GIF文件格式所不具備的特性。PNG格式也汲取了GIF和JPG格式二者的優點，而且PNG是一種無損壓縮的圖像格式，在保證圖像質量的情況下，文件體積也是可以接受的。存儲灰度圖像時，灰度圖像的深度可多達16位；存儲彩色圖像時，彩色圖像的深度可多達48位，并且還可存儲Alpha通道，在存儲選項中，可以對壓縮和交錯進行更換模式，如圖1-11所示。

PNG格式的圖像在瀏覽器上采用流式瀏覽，圖像會在完全下載之前提供給瀏覽者一個基本的圖像內容，然后再逐漸清晰起來。

PNG格式不但可以獲得較高的壓縮比，而且不損失數據。更重要的是，PNG格式還支持透明格式。在設計中，經常會存儲一些圖形來豐富自己的素材庫，很多小的圖標和標示都會直接存儲為PNG的透明格式，以備今后重復使用，可以極大地提高工作效率，非常方便。

3. GIF格式

GIF（Graphics Interchange Format）是圖形交換格式，GIF文件的數據是一種基于LZW算法的連續色調的無損壓縮格式，其壓縮率一般在50%左右，幾乎所有相關軟件都支持它，公共領域有大量的軟件在使用GIF圖像文件。它的最大特點是在一個GIF文件中可以存儲多幅彩色圖像，多幅圖像數據逐幅讀出并顯示到屏幕上，就可構成一種最簡單的動畫。網絡上的“動圖”“閃圖”“GIF動畫圖”都是指的此格式。

GIF格式還支持透明背景圖像，透明背景圖像也是網絡上常見的圖片格式，體積小，在做寶貝詳情描述頁時，所輸出的圖片大多數會選擇GIF格式。在Photoshop軟件中，執行“文件>存儲為Web所用格式”菜單命令，選項面板會提供相應的優化參考和效果預覽等，如圖1-12所示。

4. PSD格式

PSD格式是Photoshop軟件的專用文件格式，是一種非壓縮的原始文件保存格式，也是經常所說的設計“源文件”格式。

PSD格式存儲了設計操作過程中所有的信息內容，如圖層、文字、形狀、通道、蒙板及濾鏡特效信息等，如圖1-13所示。PSD文件有時容量會很大，圖層過多，動輒數百兆字節。由于PSD格式可以保留所有原始信息，在設計過程中，對于尚未制作完成的圖像，應選用 PSD格式進行保存。

值得注意的是，Photoshop軟件在存儲PSD源文件格式時，不論用Photoshop哪個版本的軟件程序都可以打開進行編輯，高版本和低版本兼容性效果好。

5. AI格式

AI是Adobe公司Illustrator軟件存儲的源文件格式，它是專用的矢量圖形文件格式。它的優點是占用空間小、打開速度快、方便格式轉換等。

AI格式與PSD格式相同，AI也是一種分層文件，每個對象都是獨立的，它們具有各自的屬性，如大小、形狀、輪廓、顏色、位置等，存儲了設計過程中所有的對象內容。

在設計的過程中，如產品的包裝、產品Logo標示等信息，大多數都是用Illustrator軟件制作的。美工設計用到的Illustrator的功能沒有平面設計用到的多，但是，最好還是要掌握Illustrator基本的操作，對日后工作也是很有幫助。

在Photoshop軟件中，可以直接打開AI格式的文件，將其作為一個圖層導入進來。

1.2.4 色彩的基本知識

大千世界，五彩繽紛，春夏秋冬的更替，每個人都能感受到春的花花綠綠，夏的絢麗多姿，秋的琳瑯滿目，冬的異彩紛呈。當想到天空時，腦海里呈現出的是深邃的藍色和漂浮的白云；當想到大海時，腦海里呈現出的是水天相接的一望無際蔚藍色的大海；當想到沙漠時，腦海里呈現出的是浩瀚無垠的黃色。大自然賦予我們的一切，都是通過色彩進行傳播的。

對于一個設計人員來說，要設計出好的作品，必須掌握這些色彩的知識，同時也要學會借鑒大自然的色彩，如圖1-14所示。

1. 三原色

從小老師就會告訴我們，世界那么大，人眼所能看到的顏色都是由3種顏色混合組成的，它們是三原色，分別是紅、綠、藍。那么具體什么是三原色呢？它們又為何如此神奇呢？

色彩中不能再分解的基本色稱為原色，原色可以合成其他的顏色，而其他顏色卻不能還原出本來的色彩。通常說的三原色，即紅（R）、綠（G）、藍（B）。原色的純度高，最干凈，最明快，三原色可以混合出其他所有的顏色，如圖1-15所示。

2. 色彩的分類

豐富多樣的顏色可以分為有彩色系和無彩色系兩大類，如圖1-16所示。

有彩色：指紅、橙、黃、綠、青、藍、紫等顏色。不同明度和純度的紅、橙、黃、綠、青、藍、紫色調都屬于有彩色系。有彩色系的顏色具有3個基本特性：色相、純度（也稱彩度、飽和度）、明度。在色彩學上也稱為色彩的三大要素或色彩的三屬性。

無彩色系：指白色、黑色和由白色、黑色調和形成的各種深淺不同的灰色。

3. 色彩三要素

（1）色相

色相即各類色彩的相貌稱謂，如大紅、普藍、檸檬黃等。色相是色彩的首要特征，是區別于各種不同色彩的最準確的標準。最初的基本色相為紅、橙、黃、綠、藍、紫。在各色中間加插一兩個中間色，其頭尾色相，按光譜順序為紅、紅橙、橙、黃橙、黃、黃綠、綠、藍綠、藍、藍紫、紫、紅紫，可制出十二色相環，如圖1-17所示。

（2）飽和度（純度、彩度）

飽和度是指色彩的鮮艷程度，也稱色彩的純度。飽和度取決于該色中含色成分和消色成分（灰色）的比例。含色成分越大，飽和度越高；消色成分越大，飽和度越低，如圖1-18所示。純的顏色都是高度飽和的，如鮮紅、鮮綠等。混雜上白色、灰色或其他色調的顏色時，就是不飽和的顏色，如絳紫、粉紅、黃褐等。完全不飽和的顏色根本沒有色調，如黑白之間的各種灰色。

（3）明度

明度是眼睛對光源和物體表面的明暗程度的感覺，主要是由光線強弱決定的一種視覺體驗。顏色有深淺、明暗的變化。明度不僅取決于物體照明程度，而且取決于物體表面的反射系數。如果我們看到的光線來源于光源，那么明度取決于光源的強度，如圖1-19所示。如果我們看到的是來源于物體表面反射的光線，那么明度取決于照明的光源的強度和物體表面的反射系數。

深黃、中黃、淡黃、檸檬黃等黃色在明度上就不一樣，紫紅、深紅、玫瑰紅、大紅、朱紅、橘紅等紅色在亮度上也不盡相同。這些顏色在明暗、深淺上的不同變化，就是色彩的又一重要特征——明度變化。

4. 色彩模式

色彩模式是數字世界中表示顏色的一種算法。在數字世界中，為了表示各種顏色，通常將顏色劃分為若干分量。由于成色原理的不同，決定了計算機顯示器、手機屏幕、投影機等是由色光直接合成顏色的。打印機、印刷機等使用顏料的印刷設備生成顏色，所以，色彩模式之間是有區別的。圖1-20所示為Photoshop中提供的多種色彩模式。

（1）RGB模式

RGB模式適用于顯示器、投影機、掃描儀、數碼相機等，也被稱為加色模式。RGB色彩就是常說的三原色，R代表Red（紅色），G代表Green（綠色），B代表Blue（藍色）。

（2）CMYK模式

CMYK模式是當陽光照射到一個物體上時，這個物體將吸收一部分光線，并將剩下的光線進行反射，反射的光線就是我們所看見的物體顏色。這是一種減色色彩模式，適用于打印機、印刷機等。

CMYK代表印刷上用的4種顏色，C代表青色（Cyan），M代表洋紅色（Magenta），Y代表黃色（Yellow），K代表黑色（Black）。因為在實際應用中，青色、洋紅色和黃色很難疊加形成真正的黑色，最多不過是褐色，因此，才引入了K——黑色。黑色的作用是強化暗調，加深暗部色彩。

值得注意的是，在用Photoshop軟件設計一個名片或者海報時，做圖的時候色彩模式選擇的是RGB，提交給印刷廠時，可以在軟件中將圖像模式轉換為CMYK模式，如圖1-21所示。

（3）Lab模式

Lab模式由3個通道組成，但不是RGB通道。它的一個通道是明度，即L。另外兩個是色彩通道，用a和b來表示，如圖1-22所示。Lab模式彌補了RGB和CMYK這兩種色彩模式的不足。

RGB是一種屏幕加色模式，CMYK是一種顏色反光的印刷減色模式。而Lab模式既不依賴光線，也不依賴顏料，它是CIE組織確定的一個理論上包括了人眼可以看見的所有色彩的色彩模式。

可以放心大膽地在圖像編輯中使用Lab模式，因為它所定義的色彩最多，并且和光線、設備無關，處理速度快。Lab模式在轉換成CMYK模式時，色彩不會丟失或被替換。

5. 色彩的性格

為什么大多數購物類網站的頁面用的都是黃色、紅色？工業類網站的頁面則常用藍色？在生活當中，往往也能根據店鋪的裝修風格，判斷出是從事什么行業的。這都是為什么呢？

顏色與人的大腦有著某種聯系，不同顏色對人的身體情緒、思想和行為有著深刻影響。由于人們的生活經驗、傳統習慣、年齡和性格等不同，對色彩可產生的心理反應也自然不同。其實“色彩是感情的語言”，根據不同色彩可以誘發不同情感。

紅色的熱情振奮，藍色的健康活潑，白色的純潔坦率，黃色的高貴莊重，紫色的高貴脫俗，黑色的神秘恐怖等。所以，在進行創作的時候，選擇合適產品的顏色屬性是很有必要的。

紅——活力、健康、熱情、希望、太陽、火、血。

橙——興奮、喜悅、活潑、華美、溫和、歡喜、燈火、秋色。

黃——溫和、光明、快活、希望、金光。

綠——青春、和平、朝氣。

青——希望、堅強、莊重。

藍——秀白、清新、寧靜、平靜、永恒、理智、深遠、海洋、天空、水。

紫——高貴、典型、華麗、優雅、神秘、丁香、玫瑰。

褐——嚴肅、渾厚、溫暖。

白——純潔、神圣、清爽、潔凈、衛生、光明、雪、云。

灰——平靜、穩重、樸素。

黑——神秘、靜寂、悲哀、嚴肅、剛健、恐怖、穩重、夜。

金——光榮、華貴、輝煌。