圖像處理與圖形界面（GUI）設(shè)計(jì)案例教程

“十三五”高等職業(yè)教育規(guī)劃教材

圖像處理與圖形界面（GUI）

設(shè)計(jì)案例教程

李?娜?張麗君?主?編

青?梅?孫?歡?副主編

圖像處理與圖形界面(GUI)設(shè)計(jì)案例教程-第一部分-1校.indd12019-6-2611:12:15

內(nèi)容簡(jiǎn)介

本書采用最新的教學(xué)法與傳統(tǒng)教學(xué)法相結(jié)合的方式，主要講授兩部分內(nèi)容，第一部分講

授圖像處理軟件PhotoshopCS6的應(yīng)用。第二部分主要講授GUI圖形界面設(shè)計(jì)應(yīng)用，包括書藉

封面裝幀設(shè)計(jì)、平面廣告設(shè)計(jì)和不同類型的海報(bào)設(shè)計(jì)及畫冊(cè)設(shè)計(jì)。

本書適合作為高職高專計(jì)算機(jī)課程的教材，也可作為廣大初、中級(jí)計(jì)算機(jī)愛好者的自學(xué)

用書。

圖書在版編目（CIP）數(shù)據(jù)

圖像處理與圖形界面（GUI）設(shè)計(jì)案例教程/李娜，

張麗君主編.—北京：中國(guó)鐵道出版社有限公司，

2019.5

“十三五”高等職業(yè)教育規(guī)劃教材

ISBN978-7-113-25826-9

Ⅰ.①圖…Ⅱ.①李…②張…Ⅲ.①軟件工具-

程序設(shè)計(jì)-高等職業(yè)教育-教材Ⅳ.①TP311.561

中國(guó)版本圖書館CIP數(shù)據(jù)核字（2019）第098818號(hào)

書名：圖像處理與圖形界面(GUI)設(shè)計(jì)案例教程

作者：李?娜?張麗君

策劃：王春霞?尹?鵬讀者熱線：（010）63550836

責(zé)任編輯：王春霞?馮彩茹

封面設(shè)計(jì)：劉?穎

責(zé)任校對(duì)：張玉華

責(zé)任印制：郭向偉

出版發(fā)行：中國(guó)鐵道出版社有限公司（100054，北京市西城區(qū)右安門西街8號(hào)）

網(wǎng)址：/51eds/

印刷：三河市宏盛印務(wù)有限公司

版次：2019年6月第1版2019年6月第1次印刷

開本：850mm×1168mm1/16?印張：14.5字?jǐn)?shù)：307千

印數(shù)：1～2?000冊(cè)

書號(hào)：ISBN978-7-113-25826-9

定價(jià)：39.00元

版權(quán)所有侵權(quán)必究

凡購(gòu)買鐵道版圖書，如有印制質(zhì)量問(wèn)題，請(qǐng)與本社教材圖書營(yíng)銷部聯(lián)系調(diào)換。電話：（010）63550836

打擊盜版舉報(bào)電話：（010）51873659

圖像處理與圖形界面(GUI)設(shè)計(jì)案例教程-第一部分-1校.indd22019-6-2711:13:23

編?委?會(huì)

編委會(huì)主任：賈?潤(rùn)

編委會(huì)成員：索麗霞?梁?偉?侯?濤?董博涵

圖像處理與圖形界面(GUI)設(shè)計(jì)案例教程-第一部分-1校.indd32019-6-2611:12:15

???

前言

隨著數(shù)字媒體技術(shù)的飛速發(fā)展和更新，UI設(shè)計(jì)課程已經(jīng)覆蓋至多個(gè)專業(yè)，是計(jì)

算機(jī)數(shù)字媒體技術(shù)專業(yè)的必修課程，同時(shí)也是電子商務(wù)專業(yè)、軟件技術(shù)和計(jì)算機(jī)應(yīng)用

技術(shù)專業(yè)等藝術(shù)類相關(guān)專業(yè)的一門基礎(chǔ)課程。UI設(shè)計(jì)是新媒體設(shè)計(jì)行業(yè)、計(jì)算機(jī)軟

件界面設(shè)計(jì)、網(wǎng)頁(yè)界面設(shè)計(jì)、移動(dòng)產(chǎn)品界面設(shè)計(jì)及平面設(shè)計(jì)技術(shù)的基礎(chǔ)，而本書的主

要目的在于培養(yǎng)學(xué)生對(duì)UI設(shè)計(jì)行業(yè)的認(rèn)識(shí)，并熟練掌握?qǐng)D形圖像處理的能力，培養(yǎng)

其良好的軟件應(yīng)用能力和職業(yè)習(xí)慣。本書通過(guò)案例驅(qū)動(dòng)和綜合訓(xùn)練，使學(xué)生掌握UI

設(shè)計(jì)的最新行業(yè)規(guī)范及Photoshop的基本功能及圖像處理技巧，并為后續(xù)平面設(shè)計(jì)

課程、MUI移動(dòng)設(shè)備界面課程設(shè)計(jì)打下扎實(shí)的基礎(chǔ)。GUI圖形界面設(shè)計(jì)的案例及所有

素材全部來(lái)自于長(zhǎng)期校企深度合作單位“達(dá)內(nèi)科技集團(tuán)”設(shè)計(jì)教學(xué)一線，教學(xué)中可以

讓學(xué)生能真正學(xué)到滿足就業(yè)要求的知識(shí)。通過(guò)對(duì)計(jì)算機(jī)信息學(xué)院與達(dá)內(nèi)科技集團(tuán)進(jìn)行

校企合作的研究，使我院校企深度合作模式更加走向成熟，真正地實(shí)現(xiàn)以企業(yè)定制為

基礎(chǔ)，以學(xué)生對(duì)口高質(zhì)量就業(yè)為導(dǎo)向來(lái)共同修訂人才培養(yǎng)方案，共同構(gòu)建課程體系并

制定課程標(biāo)準(zhǔn)，共建實(shí)習(xí)實(shí)訓(xùn)基地的目標(biāo)，共同打造“雙師型”的教學(xué)團(tuán)隊(duì)，共同進(jìn)

行實(shí)習(xí)實(shí)訓(xùn)基地的管理。

本書特點(diǎn)：

（1）以就業(yè)為目標(biāo)。從傳統(tǒng)圖像處理知識(shí)的傳授轉(zhuǎn)為培養(yǎng)學(xué)生以市場(chǎng)前沿為導(dǎo)

向的實(shí)際操作技能，滿足圖像處理及UI界面設(shè)計(jì)實(shí)際就業(yè)需要。

（2）精心設(shè)計(jì)教學(xué)內(nèi)容。計(jì)算機(jī)每種軟件的功能都很強(qiáng)大，如果將所有功能都

一一講解，無(wú)疑會(huì)浪費(fèi)時(shí)間。因此，本書在內(nèi)容安排上緊緊抓住Photoshop軟件的重點(diǎn)，

并且按照感性認(rèn)識(shí)→應(yīng)用提高→綜合實(shí)踐的體系結(jié)構(gòu)安排教學(xué)內(nèi)容。

（3）以軟件功能和實(shí)際應(yīng)用為主線。本書突出兩條主線：一個(gè)是軟件功能，一

個(gè)是應(yīng)用。以軟件功能為主線，可使學(xué)生系統(tǒng)地學(xué)習(xí)相關(guān)知識(shí)；以應(yīng)用為主線，可使

學(xué)生學(xué)以致用。

（4）采用“理論+案例操作”的教學(xué)方式，合理安排知識(shí)點(diǎn)和案例。先講解必

要的知識(shí)點(diǎn)，然后通過(guò)和知識(shí)點(diǎn)相配合的案例來(lái)理解、掌握并應(yīng)用相應(yīng)的知識(shí)點(diǎn)。

（5）案例豐富。UI設(shè)計(jì)是一門實(shí)踐性很強(qiáng)的學(xué)科，因此在教學(xué)中采用案例的方

II

圖像處理與圖形界面(GUI)設(shè)計(jì)案例教程-第一部分-1校.indd12019-6-2814:03:12

式進(jìn)行講解。書中的案例應(yīng)該達(dá)到兩個(gè)目的：一是幫助學(xué)生鞏固所學(xué)知識(shí)，加深對(duì)知

識(shí)的理解；二是緊密結(jié)合應(yīng)用，讓學(xué)生了解如何將這些案例應(yīng)用到日后的工作中。

（6）語(yǔ)言簡(jiǎn)練，講解簡(jiǎn)潔，圖示豐富。避開枯燥的講解，在介紹概念時(shí)盡量做

到語(yǔ)言簡(jiǎn)潔、易懂，并善用比喻和圖示。

（7）適應(yīng)教學(xué)要求。本書在安排各案例時(shí)嚴(yán)格控制篇幅和案例的難易程度，從

而符合教學(xué)需求。

（8）提供完整的素材。完整的素材可以幫助學(xué)生根據(jù)書中的內(nèi)容進(jìn)行預(yù)習(xí)和上

機(jī)練習(xí)。

本書編者均為長(zhǎng)期從事UI設(shè)計(jì)課程教學(xué)的一線教師，在制定教學(xué)大綱、編寫講義、

編寫相關(guān)案例指導(dǎo)書的基礎(chǔ)上積累了豐富的教學(xué)經(jīng)驗(yàn)。本書概念清晰、結(jié)構(gòu)合理、案

例內(nèi)容豐富、實(shí)用性強(qiáng)。為方便教學(xué)，本書配有豐富的教學(xué)資源，包括教學(xué)課件、授

課計(jì)劃、案例素材等，如需索取請(qǐng)發(fā)送電子郵件到lnhhvc@126.com，或到中國(guó)鐵道

出版社有限公司教學(xué)資源網(wǎng)/51下載。

本書由呼和浩特職業(yè)學(xué)院計(jì)算機(jī)信息學(xué)院李娜老師和張麗君老師任主編并負(fù)責(zé)策

劃、編寫和統(tǒng)稿，呼和浩特職業(yè)學(xué)院計(jì)算機(jī)信息學(xué)院青梅老師和孫歡老師任副主編并

參與編寫。其中第1部分的單元1由青梅老師編寫，單元2到單元13由張麗君老師

編寫；第2部分單元1到單元9由李娜老師編寫，單元10和單元11由孫歡老師編寫。

由于編者水平有限，書中的疏漏和錯(cuò)誤之處在所難免，懇請(qǐng)同行專家和讀者不吝

賜教，在將來(lái)修訂本書時(shí)作為重要的參考，也便于編者提高水平。歡迎您將對(duì)本書的

意見和建議發(fā)送給我們，電子信箱是lnhhvc@126.com。

編者

2019年3月

II

圖像處理與圖形界面(GUI)設(shè)計(jì)案例教程-第一部分-1校.indd22019-6-2611:12:17

目錄

2.2.2多邊形套索工具23

第1部分2.2.3磁性套索工具23

Photoshop?CS6的應(yīng)用2.2.4案例講解——制作圣誕

賀卡24

2.3魔棒工具24

單元1初識(shí)Photoshop2.3.1魔棒工具24

CS632.3.2快速選擇工具25

1.1應(yīng)用基礎(chǔ)32.3.3案例講解——制作汽車

1.1.1矢量圖與位圖3廣告25

1.1.2像素與分辨率42.4選區(qū)的編輯26

1.1.3圖像的色彩模式52.4.1描邊選區(qū)26

1.2.1調(diào)整圖像72.4.2填充選區(qū)26

1.2基本操作72.4.3漸變工具組填充的方式...27

1.2.2調(diào)整圖像窗口82.4.4案例講解——制作手機(jī)

1.2.3設(shè)置前景色和背景色9廣告28

1.2.4使用輔助工具11

1.2.5歷史記錄的功能12單元3移動(dòng)變換31

1.3案例講解——制作網(wǎng)站主頁(yè)153.1移動(dòng)變換31

3.1.1移動(dòng)工具31

單元2選區(qū)工具203.1.2變換操作31

2.1選框工具203.2案例講解32

2.1.1矩形選框工具203.2.1制作酒廣告32

2.1.2橢圓選框工具203.2.2制作瓷瓶效果圖33

2.1.3單行和單列選框工具21

2.1.4案例講解——制作相框...21單元4繪制糾錯(cuò)工具35

2.2套索工具224.1畫筆工具35

2.2.1套索工具簡(jiǎn)介224.1.1畫筆工具簡(jiǎn)介35

I

圖像處理與圖形界面(GUI)設(shè)計(jì)案例教程-第一部分-1校.indd12019-6-2611:12:17

4.1.2鉛筆工具36單元7圖層基本應(yīng)用58

4.1.3案例講解——制作桌面

7.1圖層基本操作58

壁紙36

7.1.1圖層的鎖定和解鎖59

4.2橡皮工具38

7.1.2新建和重命名圖層59

4.2.1橡皮擦工具38

7.1.3調(diào)整圖層的順序59

4.2.2背景橡皮擦工具38

7.1.4調(diào)整圖層的不透明度60

4.2.3魔術(shù)橡皮擦工具39

7.1.5復(fù)制和刪除圖層60

4.2.4案例講解——制作口紅

7.1.6鏈接圖層61

廣告39

7.1.7合并圖層61

4.3圖章工具40

7.1.8將圖層載入選區(qū)62

4.3.1仿制圖章工具40

7.1.9對(duì)齊圖層62

4.3.2圖案圖章工具40

7.1.10圖層組63

4.3.3案例講解——美化照片...41

7.2案例講解——制作時(shí)尚相框64

單元5修復(fù)調(diào)整工具43

單元8圖層蒙版67

5.1修復(fù)工具43

8.1圖層蒙版67

5.1.1污點(diǎn)修復(fù)畫筆工具43

8.2蒙版的基本操作67

5.1.2修復(fù)畫筆工具44

8.2.1快速蒙版67

5.1.3修補(bǔ)工具44

8.2.2剪貼蒙版69

5.1.4內(nèi)容感知移動(dòng)工具45

8.2.3圖層蒙版70

5.1.5紅眼工具48

8.3案例講解——換臉教程71

5.1.6案例講解——修復(fù)照片...48

5.2調(diào)整工具49

單元9圖層樣式73

5.2.1減淡工具組49

圖層樣式簡(jiǎn)介

5.2.2模糊工具組509.173

案例講解——制作古典黃金字

5.3案例講解——制作去皺霜廣告529.279

單元6文字工具53單元10圖層混合模式83

圖層混合模式簡(jiǎn)介

6.1文字工具簡(jiǎn)介5310.183

案例講解——制作禁止吸煙

6.1.1輸入文字的方法5310.2

標(biāo)志88

6.1.2編輯文字的方法55

6.2案例講解——制作飲料廣告57

II

圖像處理與圖形界面(GUI)設(shè)計(jì)案例教程-第一部分-1校.indd22019-6-2611:12:18

單元11?路徑9312.2.8閾值119

12.2.9色調(diào)分離119

11.1繪制路徑93

11.1.1認(rèn)識(shí)路徑93

12.3案例講解——制作足球賽

11.1.2使用“鋼筆工具”繪制

海報(bào)119

路徑94

11.2編輯路徑96

單元13?通道126

11.2.1選擇路徑和錨點(diǎn)96

13.1通道摳圖126

11.2.2添加和刪除錨點(diǎn)96

13.1.1通道的原理126

11.2.3重命名路徑96

13.1.2通道的用途126

11.2.4復(fù)制、刪除路徑96

13.1.3通道的基本操作127

11.2.5填充路徑96

13.2案例講解127

11.2.6描邊路徑97

13.2.1選取人物的頭發(fā)127

11.2.7路徑和選區(qū)的互換97

13.2.2飛馳的汽車130

11.3案例講解98

11.4文字路徑98

11.3.1繪制心形圖案98第2部分

11.3.2繪制常春藤98

GUI圖形界面設(shè)計(jì)

11.5案例講解——制作信封和

郵票99——基于印刷輸出的圖形界面設(shè)計(jì)與制作

單元12?色彩色調(diào)106

單元1書籍封面設(shè)計(jì)135

12.1色階、曲線命令106

1.1概述135

12.1.1色階106

1.1.1圖書的結(jié)構(gòu)137

12.1.2曲線106

1.1.2書籍的基本設(shè)計(jì)結(jié)構(gòu)138

12.1.3案例講解106

1.1.3開本的概念140

12.2其他命令112

1.1.4裝訂140

12.2.1色彩平衡112

1.2封面設(shè)計(jì)一——《亂世英雄》...142

12.2.2色相/飽和度114

1.3封面設(shè)計(jì)二——《來(lái)自山溝的

12.2.3替換顏色116

大智慧》145

12.2.4匹配顏色116

1.4封面設(shè)計(jì)三——《感動(dòng)中國(guó)的

12.2.5去色117

90個(gè)故事》148

12.2.6反相117

1.5封面設(shè)計(jì)四——《寬容》151

12.2.7色調(diào)均化118

III

圖像處理與圖形界面(GUI)設(shè)計(jì)案例教程-第一部分-1校.indd32019-6-2611:12:19

單元2雜志封面設(shè)計(jì)156單元7噴繪設(shè)計(jì)——

2.1《魅麗》雜志設(shè)計(jì)156創(chuàng)意海報(bào)193

2.2《悅讀》雜志設(shè)計(jì)1607.1“演唱會(huì)”娛樂海報(bào)制作193

7.2“母親節(jié)”海報(bào)制作196

單元3噴繪設(shè)計(jì)——7.3“首飾創(chuàng)意設(shè)計(jì)大賽”

商業(yè)海報(bào)165創(chuàng)意海報(bào)設(shè)計(jì)198

3.1X展架設(shè)計(jì)——“水之潤(rùn)

洗發(fā)露”165單元8燈箱公益海報(bào)

3.2易拉寶設(shè)計(jì)——“非誠(chéng)勿擾”...169設(shè)計(jì)201

3.3商業(yè)廣告設(shè)計(jì)——“北海灣

開盤地產(chǎn)宣傳”171單元9DM廣告設(shè)計(jì)——

折頁(yè)205

單元4噴繪設(shè)計(jì)——產(chǎn)品海9.1“海洋公園”折頁(yè)廣告第1頁(yè)205

報(bào)（打印機(jī)）1779.2“海洋公園”折頁(yè)廣告第2頁(yè)208

單元5噴繪設(shè)計(jì)——影視海單元10DM廣告設(shè)計(jì)——

報(bào)（決戰(zhàn)）181三折頁(yè)211

10.1北京派特森科技發(fā)展有限公司

單元6噴繪設(shè)計(jì)——外頁(yè)設(shè)計(jì)211

食品海報(bào)18610.2北京派特森科技發(fā)展有限公司

6.1“草莓的飲品”海報(bào)186內(nèi)頁(yè)設(shè)計(jì)215

6.2“味千營(yíng)養(yǎng)早餐”海報(bào)189

單元11綜合案例——

?畫冊(cè)設(shè)計(jì)219

IV

圖像處理與圖形界面(GUI)設(shè)計(jì)案例教程-第一部分-1校.indd42019-6-2611:12:21

第1部分

Photoshop?CS6的應(yīng)用

Photoshop軟件是Adobe公司的圖像處理軟件之一。作為平面設(shè)計(jì)中最常用的

工具之一，它的應(yīng)用領(lǐng)域很廣泛，在圖像、圖形、文字、視頻、出版各方面都有

涉及。多數(shù)人對(duì)于Photoshop的了解僅限于“一個(gè)很好的圖像編輯軟件”，并不知

道它的諸多應(yīng)用方面，實(shí)際上，Photoshop的應(yīng)用領(lǐng)域很廣泛，它不僅是一個(gè)好的

圖像編輯軟件，而且在不同行業(yè)都有所涉及。第一部分為十三個(gè)單元，內(nèi)容涵蓋

Photoshop的基礎(chǔ)知識(shí)與基本操作。通過(guò)第1部分的學(xué)習(xí)能具備以下三點(diǎn)：

1．能力目標(biāo)

（1）熟練運(yùn)用Photoshop制作效果圖，并在實(shí)際工作中得到應(yīng)用。

（2）培養(yǎng)學(xué)生上網(wǎng)搜集素材和利用素材的能力。

（3）通過(guò)每個(gè)單元的學(xué)習(xí)培養(yǎng)學(xué)生的自學(xué)能力。

2．情感目標(biāo)

（1）善于觀察，善于分析。

（2）培養(yǎng)學(xué)生的團(tuán)隊(duì)合作精神。

（3）培養(yǎng)學(xué)生的學(xué)習(xí)和工作的主動(dòng)性。

（4）培養(yǎng)學(xué)生的創(chuàng)新設(shè)計(jì)精神。

（5）通過(guò)學(xué)習(xí)提高學(xué)生的藝術(shù)修養(yǎng)。

1

圖像處理與圖形界面(GUI)設(shè)計(jì)案例教程-第一部分-1校.indd12019-6-2611:12:25

圖像處理與圖形界面（GUI）設(shè)計(jì)案例教程

3．職業(yè)能力目標(biāo)

本課程是以高職職業(yè)教育理念為指導(dǎo)，通過(guò)學(xué)習(xí)不同階段的內(nèi)容可以使學(xué)生在今后

的工作中熟練應(yīng)用本軟件，拓展在廣告平面設(shè)計(jì)、網(wǎng)頁(yè)制作及界面設(shè)計(jì)的崗位職業(yè)能力

培養(yǎng)。

2

圖像處理與圖形界面(GUI)設(shè)計(jì)案例教程-第一部分-1校.indd22019-6-2611:12:28

單元1

初識(shí)Photoshop?CS6

1.1應(yīng)用基礎(chǔ)

1.1.1?矢量圖與位圖

計(jì)算機(jī)中顯示的圖像一般可分為兩大類——矢量圖（Vector）和位圖（Bitmap）。

1．矢量圖

矢量圖又稱其向量圖形，使用直線和曲線來(lái)描述圖形，其元素是點(diǎn)、線、矩

形、多邊形、圓和弧線等，比較適用于編輯色彩較為單純的色塊或文字，如Illustrator、

PageMaker、FreeHand、CorelDRAW等繪圖軟件創(chuàng)建的圖形都是矢量圖。它與分辨率無(wú)

關(guān)，無(wú)法通過(guò)掃描獲得。當(dāng)對(duì)矢量圖進(jìn)行放大后，圖形仍能保持原來(lái)的清晰度，且色彩

不失真，如圖1-1-1所示。Flash制作的動(dòng)畫也是矢量圖形動(dòng)畫。

圖1-1-1矢量圖放大

矢量圖不受分辨率的影響，因此在印刷時(shí)，可以任意放大或縮小圖形而不會(huì)影響出

圖的清晰度，文件占用空間較小，適用于圖形設(shè)計(jì)、文字設(shè)計(jì)和一些標(biāo)志設(shè)計(jì)、版式設(shè)

計(jì)等。

常見的矢量圖圖形格式有CDR、COL、EPS、ICO、DWG等。

3

圖像處理與圖形界面(GUI)設(shè)計(jì)案例教程-第一部分-1校.indd32019-6-2611:12:31

圖像處理與圖形界面（GUI）設(shè)計(jì)案例教程

2．位圖圖像

位圖也稱柵格圖像，是由很多個(gè)像素組成的，比較適合制作細(xì)膩、輕柔縹緲的特殊

效果，Photoshop生成的圖像一般都是位圖。位圖圖像放大到一定的倍數(shù)后，看到的便是

一個(gè)一個(gè)方形的色塊，每一個(gè)色塊就是一個(gè)像素，每個(gè)像素只顯示一種顏色，是構(gòu)成圖

像的最小單位，如圖1-1-2所示。

圖1-1-2位圖放大

處理位圖時(shí)要著重考慮分辨率，因此位圖不能隨意放大，超過(guò)它的設(shè)定分辨率就會(huì)

使圖像失真。

常見的位圖圖形格式有BMP、JPEG、GIF、TIF、PIG等。

1.1.2?像素與分辨率

像素與分辨率是Photoshop中最常用的兩個(gè)概念，對(duì)它們的設(shè)置決定了文件的大小及

圖像的質(zhì)量。

1．像素

如果把影像放大數(shù)倍，會(huì)發(fā)現(xiàn)這些連續(xù)色調(diào)其實(shí)是由許多色彩相近的小方點(diǎn)所組成

的，這些小方點(diǎn)就是構(gòu)成圖像的最小單位，這每一個(gè)點(diǎn)就稱為一個(gè)“像素”，且一個(gè)像素

只顯示一種顏色。

2．分辨率

分辨率是指顯示或打印圖像時(shí)，單位距離中所含像素點(diǎn)的數(shù)量，通常以“像素/英寸”

（PPI）來(lái)衡量，用于表示圖片的清晰度。

圖像分辨率：長(zhǎng)度為1in的范圍內(nèi)單排像素的個(gè)數(shù)稱為圖像的分辨率，如1024×768、

800×600、640×480。分辨率越高，圖像更清晰，圖像存儲(chǔ)空間更大。

打印機(jī)分辨率：用CPI表示，即每英寸上等距離排列多少條網(wǎng)線，打印機(jī)的分辨率用

來(lái)衡量打印機(jī)的輸出精度。

分辨率的高低直接影響圖像的效果，使用太低的分辨率會(huì)導(dǎo)致圖像粗糙，在排版打

印時(shí)圖片會(huì)變得非常模糊；而使用較高的分辨率則會(huì)增加文件的大小，并降低圖像的打

印速度。

修改圖像的分辨率可以改變圖像的精細(xì)程度。對(duì)以較低分辨率掃描或創(chuàng)建的圖像，在

Photoshop中提高其分辨率只能提高每單位圖像中的像素?cái)?shù)量，卻不能提高圖像的品質(zhì)。

4

圖像處理與圖形界面(GUI)設(shè)計(jì)案例教程-第一部分-1校.indd42019-6-2611:12:31

第1部分?Photoshop?CS6的應(yīng)用

圖1-1-3所示為不同分辨率下的圖樣對(duì)比。

圖1-1-3不同分辨率下的圖樣對(duì)比

1.1.3?圖像的色彩模式

色彩模式?jīng)Q定顯示和打印輸出圖像的色彩模型，色彩模型可理解為表示圖像的顏色

范圍及合成方式。

Photoshop中有8種圖像的色彩模式，每種模式的圖像描述和再現(xiàn)圖像色彩的原理以

及再現(xiàn)顏色的數(shù)目都是不同的，圖像中的色彩都放在通道中。因此，圖像色彩模式不同，

圖像的通道數(shù)也不同。

單擊“圖像→模式”命令，打開二級(jí)菜單，如圖1-1-4所示。

圖1-1-4“模式”菜單

1．位圖模式

位圖模式通常被稱為黑白藝術(shù)，它是只由黑白兩色構(gòu)成而且沒有灰色陰影的圖像，

按這種方式形成的圖像處理速度快，產(chǎn)生的圖像文件小，因?yàn)樗４鎴D像的顏色信

息少。要將圖像轉(zhuǎn)換為位圖模式，必須首先將圖像轉(zhuǎn)換為灰度模式，然后再轉(zhuǎn)換為位

圖模式。

2．灰度模式

灰度模式中只有灰度顏色而沒有彩色，在Photoshop中灰度圖可以看成是只有一種顏

色通道的數(shù)字圖像，它可以設(shè)置灰階的級(jí)別，如常用的8位/通道、16位/通道等，其位數(shù)

的大小代表了通道中所包含的顏色信息量的多少，8位就是28，即256色，這是最常見的通

道，16位就是216，即65536色。

5

圖像處理與圖形界面(GUI)設(shè)計(jì)案例教程-第一部分-1校.indd52019-6-2611:12:31

圖像處理與圖形界面（GUI）設(shè)計(jì)案例教程

3．雙色調(diào)模式

雙色調(diào)模式由灰度模式發(fā)展而來(lái)，但在雙色調(diào)模式中顏色只是用來(lái)表示“色調(diào)”而

已，因此，在這種模式下，彩色油墨只是用來(lái)創(chuàng)建灰度級(jí)別的，而不是創(chuàng)建彩色的。當(dāng)

油墨顏色不同時(shí)，其加入的顏色作為副色，可表現(xiàn)出較豐富的層次和質(zhì)感。

4．索引顏色模式

因?yàn)閳D像中所包含的顏色數(shù)目有限，為了減小圖像文件的大小，人們?cè)O(shè)計(jì)了索引顏

色模式。將一幅圖轉(zhuǎn)換為索引顏色模式后，系統(tǒng)將從圖像中提取256種典型的顏色作為顏

色表，子菜單下的“顏色表”菜單項(xiàng)被激活，選擇該菜單項(xiàng)可調(diào)整顏色表中的顏色，或

選擇其他顏色表。

這種模式可極大地減小圖像文件的存儲(chǔ)空間（大概只有RGB模式圖像文件的1/3），

同時(shí)，這種顏色模式在顯示上與真彩色模式基本相同，它多用于制作多媒體數(shù)據(jù)，如

GIF動(dòng)畫。

5．RGB顏色模式

RGB顏色模式是一種利用紅（Red）、綠（Green）、藍(lán)（Blue）3種基本顏色進(jìn)行顏色

加法，配制出絕大部分肉眼能看到的顏色，一般主要用于屏幕顯示。

Photoshop將24位的RGB圖像看作由3個(gè)顏色信息通道組成，這3個(gè)顏色通道分別為紅

色通道、綠色通道、藍(lán)色通道。其中每個(gè)通道使用8位顏色信息，該信息由0~255的亮度

值來(lái)表示，這3個(gè)通道通過(guò)組合，可以產(chǎn)生1670余萬(wàn)種不同的顏色，由于它的通道可以進(jìn)

行編輯，從而增強(qiáng)了圖像的可編輯性。

6．CMYK顏色模式

CMYK顏色模式是一種印刷模式，其中的4個(gè)字母分別表示青、洋紅、黃、黑4個(gè)通

道。CMYK模式在本質(zhì)上與RGB顏色模式?jīng)]有什么區(qū)別，只是產(chǎn)生色彩的原理不同，RGB

產(chǎn)生顏色的方法稱為加色法，CMYK產(chǎn)生顏色的方法稱為減色法，青、洋紅、黃、黑4個(gè)通

道內(nèi)的顏色信息由0~100的亮度值來(lái)表示，因此，它所顯示的顏色比RGB顏色模式要少。

7．Lab顏色模式

Lab顏色模式是以一個(gè)亮度分量L以及兩個(gè)顏色分量a和b來(lái)表示顏色的。其中，L的取

值范圍為0~100，a分量代表了由綠色到紅色的光譜變化，而b分量代表由藍(lán)色到黃色的光

譜變化，且a和b分量的取值范圍均為-120~120。

通常情況下，Lab顏色模式很少使用，它是Photoshop內(nèi)部的顏色模式，是所有模式中

包含色彩范圍（也稱色域）最廣的顏色模式，它能毫無(wú)偏差地在不同的系統(tǒng)和平臺(tái)之間

進(jìn)行交換。

8．多通道模式

將圖像轉(zhuǎn)換為多通道模式后，系統(tǒng)將根據(jù)原圖像產(chǎn)生相同數(shù)目的新通道，但該模式

下的每個(gè)通道都為256級(jí)灰度通道（其組合仍為彩色），這種顯示模式通常用于處理特殊

打印。用戶刪除了RGB、CMYK、Lab顏色模式中的某個(gè)通道后，圖像會(huì)自動(dòng)轉(zhuǎn)換為多通

道模式。

6

圖像處理與圖形界面(GUI)設(shè)計(jì)案例教程-第一部分-1校.indd62019-6-2611:12:32

第1部分?Photoshop?CS6的應(yīng)用

1.2基本操作

1.2.1?調(diào)整圖像

1．調(diào)整圖像大小

圖像文件的大小是由文件的寬度、高度和分辨率決定的，圖像文件的寬度、高度和

分辨率數(shù)值越大，圖像文件也就越大。

當(dāng)圖像的寬度、高度及分辨率無(wú)法符合設(shè)計(jì)要求時(shí)，可以執(zhí)行“圖像”→“圖像大

小”命令，通過(guò)改變寬度、高度及分辨率的分配來(lái)重新設(shè)置圖像的大小。

（1）單擊“文件”→“打開”命令，打開素材中rw2.jpg文件，如圖1-1-5所示。

（2）單擊“圖像”→“圖像大小”命令，如圖1-1-6所示。

圖1-1-5打開圖像圖1-1-6單擊“圖像大小”命令

（3）彈出“圖像大小”對(duì)話框，在“寬

度”欄填入寬度值，如果勾選“約束比例”

復(fù)選框，高度可以不填，這樣改變大小時(shí)圖

像不會(huì)變形，如果不勾選“約束比例”復(fù)選

框，填入高度值時(shí)，圖像會(huì)變形?！翱s放樣

式”、“約束比例”和“重定圖像像素”復(fù)選

框是默認(rèn)是勾選的，單擊“確定”按鈕，如

圖1-1-7所示。

2．改變圖像顯示比例

在處理圖像時(shí)，放大圖像可以更方便地

對(duì)圖像細(xì)節(jié)進(jìn)行處理，縮小圖像可以更方便

地觀察圖像的整體。放大或縮小圖像的方法圖1-1-7“圖像大小”對(duì)話框

有以下3種：

7

圖像處理與圖形界面(GUI)設(shè)計(jì)案例教程-第一部分-1校.indd72019-6-2611:12:32

圖像處理與圖形界面（GUI）設(shè)計(jì)案例教程

（1）單擊工具箱中的“縮放工具”，然后將其移動(dòng)到打開的圖像上，光標(biāo)呈狀，此

時(shí)單擊即可將圖像放大一倍顯示；若按住Alt鍵光標(biāo)變?yōu)闋?，此時(shí)單擊即可將圖像縮小

1/2顯示，如圖1-1-8所示。

放大圖像縮小圖像

縮放工具

圖1-1-8設(shè)置圖像縮放

（2）拖動(dòng)“導(dǎo)航面板”上的縮放滑桿，可以放大或縮小當(dāng)前圖像。

（3）單擊“視圖→放大”命令（快捷鍵為Ctrl＋+），或“縮小”命令（快捷鍵為Ctrl

＋-），可使圖像放大1倍或縮小1/2。按Ctrl＋Alt＋-或Ctrl＋Alt＋+組合鍵可使窗口和圖像

一起縮小或放大。

如果希望將圖像按100%顯示，可以通過(guò)以下幾種方法實(shí)現(xiàn)（100%顯示的圖像是用戶

看到的真實(shí)的圖像效果）：

（1）雙擊工具箱中的“縮放”工具。

（2）單擊工具箱中的“縮放”工具，右擊圖像窗口，從彈出的快捷菜單中單擊

“實(shí)際像素”命令。

（3）單擊“實(shí)際像素”按鈕。

如果希望視圖按屏幕大小顯示，單擊“適合屏幕”按鈕；如果希望圖像以實(shí)際打印

尺寸顯示，可單擊“打印尺寸”按鈕

1.2.2?調(diào)整圖像窗口

在編輯圖像時(shí)，經(jīng)常需要打開多個(gè)圖像窗口。為了操作方便，可以根據(jù)需要移動(dòng)窗

口的位置、調(diào)整窗口的大小或在各窗口間進(jìn)行切換等。

調(diào)整窗口的基本操作如下：

8

圖像處理與圖形界面(GUI)設(shè)計(jì)案例教程-第一部分-1校.indd82019-6-2611:12:32

第1部分?Photoshop?CS6的應(yīng)用

（1）在PhotoshopCS6中任意打開一幅圖

像，此時(shí)窗口處于默認(rèn)的顯示大小狀態(tài)，單擊圖

像窗口標(biāo)題欄并拖動(dòng)即可移動(dòng)窗口的位置，如

圖1-1-9所示。

（2）要使窗口最小化或最大化顯示，可單擊

圖像窗口右上角的“最小化”按鈕或“最大化”

按鈕；如果想還原為默認(rèn)大小，單擊窗口右上角

的“還原”按鈕，如圖1-1-10所示。

（3）圖像窗口大小的調(diào)整，還可以通過(guò)鼠標(biāo)圖1-1-9移動(dòng)圖像窗口

左鍵拖動(dòng)窗口邊界來(lái)實(shí)現(xiàn)，當(dāng)窗口在非最大和非

最小化狀態(tài)下，光標(biāo)置于窗口邊界時(shí)會(huì)變化為以下形狀，如圖1-1-11所示。

“最大化”按鈕

“還原”按鈕

圖1-1-10窗口最大化和還原按鈕圖標(biāo)圖1-1-11調(diào)整窗口大小時(shí)的光標(biāo)形狀

同時(shí)打開多個(gè)窗口時(shí)，可以通過(guò)“窗

口→排列”菜單中的“層疊、平鋪、在窗

口中浮動(dòng)”等排列方式來(lái)改變窗口的顯示

狀態(tài)，如圖1-1-12所示。如果要使某一窗

口成為當(dāng)前窗口，單擊該窗口或“窗口”

菜單中的文件名即可。如果希望在各窗口

循環(huán)切換，可用快捷鍵Ctrl+Tab或Ctrl+F6

組合。

PhotoshopCS6中，系統(tǒng)提供了3種屏

幕顯示模式：標(biāo)準(zhǔn)屏幕模式、帶有菜單欄

的全屏模式、全屏模式。這幾種模式之間

可以切換，切換的方法有兩種。單擊工

具箱底部的“更改屏幕模式”按鈕，如

圖1-1-13所示；在英文輸入狀態(tài)下，連續(xù)圖1-1-12排列菜單

按F鍵切換。

1.2.3?設(shè)置前景色和背景色

在Photoshop中創(chuàng)作圖像時(shí)，通常使用

前景色繪畫、填充或描邊選區(qū)，使用背景

色生成漸變填充，并在圖像的抹除區(qū)域中

填充。一些特殊的濾鏡也使用前景色和背圖1-1-13屏幕顯示模式

9

圖像處理與圖形界面(GUI)設(shè)計(jì)案例教程-第一部分-1校.indd92019-6-2611:12:33

圖像處理與圖形界面（GUI）設(shè)計(jì)案例教程

景色來(lái)生成效果。

前景色和背景色的圖標(biāo)位于工具箱下方，如圖1-1-14所示。默認(rèn)情況下，前景色為

黑色，背景色為白色。單擊“默認(rèn)前景色和背景色”按鈕，或者按D鍵，即可將前景色

和背景色恢復(fù)為默認(rèn)設(shè)置。按X鍵可將前景色和背景色互換。

前景色切換前景色和背景色

恢復(fù)默認(rèn)的前景色和背景色背景色

圖1-1-14前景色和背景色設(shè)置工具

提示：在蒙版和通道中，默認(rèn)的前景色與背景色為白色和黑色。關(guān)于蒙版和通道，

將在后面的章節(jié)中進(jìn)行詳細(xì)講解。

在Photoshop中，用戶可以通過(guò)多種方法設(shè)置前景色和背景色。例如，可以使用“吸

管”工具、“顏色”面板、“色板”面板或“拾色器”對(duì)話框來(lái)指定前景色或背景色。

（1）單擊前景色或背景色圖標(biāo)，即可彈出“拾色器”對(duì)話框，如圖1-1-15所示。

圖1-1-15“拾色器”對(duì)話框

（2）在“拾色器”對(duì)話框中選擇所需的顏色，單擊“確定”按鈕，前景色被改變。

（3）還可以使用“吸管”工具在圖像或“色板”面板中單擊，吸取所需的顏色，如

圖1-1-16所示。

10

圖像處理與圖形界面(GUI)設(shè)計(jì)案例教程-第一部分-1校.indd102019-6-2611:12:33