第3章網(wǎng)頁(yè)設(shè)計(jì)《PhotoshopCC設(shè)計(jì)與應(yīng)用任務(wù)教程（第3版）》學(xué)習(xí)目標(biāo)/Target掌握網(wǎng)頁(yè)設(shè)計(jì)的基本結(jié)構(gòu)和尺寸規(guī)范，能夠制作網(wǎng)頁(yè)中的各個(gè)模塊。掌握文字工具的使用方法，能夠?qū)ξ淖謱傩赃M(jìn)行設(shè)置。掌握鋼筆工具的使用技巧，能夠使用鋼筆工具繪制路徑。掌握選區(qū)工具的使用，能夠繪制矩形、橢圓和不規(guī)則形狀的選區(qū)。章節(jié)概述/SummaryPhotoshop是制作網(wǎng)頁(yè)的一個(gè)重要的輔助工具。在Photoshop中，既可以利用文字、形狀等工具設(shè)計(jì)網(wǎng)頁(yè)中的元素，還可以利用選區(qū)和一些輔助工具對(duì)已有的素材進(jìn)行調(diào)整。本章將制作網(wǎng)頁(yè)中的常見(jiàn)模塊。通過(guò)學(xué)習(xí)本章，讀者能夠掌握文字工具、鋼筆工具，以及一些選區(qū)工具的使用方法。目錄/Contents010203網(wǎng)頁(yè)設(shè)計(jì)簡(jiǎn)介【任務(wù)3】咖啡網(wǎng)站導(dǎo)航欄設(shè)計(jì)【任務(wù)4】咖啡網(wǎng)站Banner設(shè)計(jì)04【任務(wù)5】咖啡網(wǎng)站首頁(yè)設(shè)計(jì)網(wǎng)頁(yè)設(shè)計(jì)簡(jiǎn)介3.13.1網(wǎng)頁(yè)設(shè)計(jì)簡(jiǎn)介網(wǎng)站功能策劃網(wǎng)頁(yè)設(shè)計(jì)吸引用戶頁(yè)面美化提升企業(yè)的互聯(lián)網(wǎng)品牌形象3.1網(wǎng)頁(yè)設(shè)計(jì)簡(jiǎn)介網(wǎng)頁(yè)分類個(gè)人類網(wǎng)站3.1網(wǎng)頁(yè)設(shè)計(jì)簡(jiǎn)介網(wǎng)頁(yè)分類個(gè)人類網(wǎng)站企業(yè)類網(wǎng)站3.1網(wǎng)頁(yè)設(shè)計(jì)簡(jiǎn)介網(wǎng)頁(yè)分類個(gè)人類網(wǎng)站企業(yè)類網(wǎng)站娛樂(lè)休閑類網(wǎng)站3.1網(wǎng)頁(yè)設(shè)計(jì)簡(jiǎn)介網(wǎng)頁(yè)分類個(gè)人類網(wǎng)站企業(yè)類網(wǎng)站娛樂(lè)休閑類網(wǎng)站購(gòu)物類網(wǎng)站3.1網(wǎng)頁(yè)設(shè)計(jì)簡(jiǎn)介網(wǎng)頁(yè)分類個(gè)人類網(wǎng)站企業(yè)類網(wǎng)站娛樂(lè)休閑類網(wǎng)站購(gòu)物類網(wǎng)站門戶類網(wǎng)站3.1.1網(wǎng)頁(yè)設(shè)計(jì)的基本結(jié)構(gòu)

先定一個(gè)小目標(biāo)！掌握網(wǎng)頁(yè)設(shè)計(jì)的基本結(jié)構(gòu)，能夠說(shuō)出網(wǎng)頁(yè)由哪些結(jié)構(gòu)組成。熟悉網(wǎng)頁(yè)各個(gè)模塊，能夠說(shuō)出引導(dǎo)欄、header、導(dǎo)航欄、Banner、內(nèi)容區(qū)域、版權(quán)信息各模塊的功能和位置。3.1.1網(wǎng)頁(yè)設(shè)計(jì)的基本結(jié)構(gòu)基本結(jié)構(gòu)Banner內(nèi)容區(qū)域版權(quán)信息header導(dǎo)航欄引導(dǎo)欄3.1.1網(wǎng)頁(yè)設(shè)計(jì)的基本結(jié)構(gòu)基本結(jié)構(gòu)3.1.1網(wǎng)頁(yè)設(shè)計(jì)的基本結(jié)構(gòu)引導(dǎo)欄客服電話登錄注冊(cè)個(gè)人信息3.1.1網(wǎng)頁(yè)設(shè)計(jì)的基本結(jié)構(gòu)headerlogo等內(nèi)容信息3.1.1網(wǎng)頁(yè)設(shè)計(jì)的基本結(jié)構(gòu)導(dǎo)航欄各個(gè)子級(jí)頁(yè)面的入口3.1.1網(wǎng)頁(yè)設(shè)計(jì)的基本結(jié)構(gòu)Banner宣傳企業(yè)的廣告形式幻燈片3.1.1網(wǎng)頁(yè)設(shè)計(jì)的基本結(jié)構(gòu)內(nèi)容區(qū)域文字、圖像、超鏈接供用戶提取自定義3.1.1網(wǎng)頁(yè)設(shè)計(jì)的基本結(jié)構(gòu)版權(quán)信息聯(lián)系方式地址友情鏈接二維碼備案號(hào)3.1.1網(wǎng)頁(yè)設(shè)計(jì)的基本結(jié)構(gòu)版心

先定一個(gè)小目標(biāo)！掌握網(wǎng)頁(yè)的設(shè)計(jì)規(guī)范，例如頁(yè)面尺寸規(guī)范和字體選擇規(guī)范，能夠制作出符合規(guī)范的頁(yè)面。3.1.2網(wǎng)頁(yè)設(shè)計(jì)的規(guī)范3.1.2網(wǎng)頁(yè)設(shè)計(jì)的規(guī)范1920×1080引導(dǎo)欄header導(dǎo)航欄Banner內(nèi)容區(qū)域版權(quán)信息版心35像素~50像素35像素~50像素80像素~100像素40像素~60像素500像素左右不限不限1000像素~1200像素85像素~130像素1.頁(yè)面尺寸規(guī)范3.1.2網(wǎng)頁(yè)設(shè)計(jì)的規(guī)范字體編排感性直觀字體字號(hào)參考網(wǎng)頁(yè)界面用戶感受基本字體2.字體選擇規(guī)范【任務(wù)3】咖啡網(wǎng)站導(dǎo)航欄設(shè)計(jì)3.23.2.1任務(wù)描述本任務(wù)是為知味coffee設(shè)計(jì)一個(gè)導(dǎo)航欄，客戶要求體現(xiàn)咖啡網(wǎng)站的溫暖3.2.2知識(shí)點(diǎn)講解

先定一個(gè)小目標(biāo)！掌握”文字工具“的使用方法，能夠使用”文字工具“創(chuàng)建文字。掌握“文字工具”選項(xiàng)欄中各個(gè)參數(shù)的作用，通過(guò)”選項(xiàng)欄“能夠設(shè)置”文字工具“的常用參數(shù)。3.2.2知識(shí)點(diǎn)講解文字工具強(qiáng)化主題美化版面?zhèn)鬟f信息圖像與文字的同構(gòu)關(guān)系1.文字工具3.2.2知識(shí)點(diǎn)講解03040102橫排文字工具直排文字工具橫排文字蒙版工具直排文字蒙版工具點(diǎn)文字段落文字路徑文字文字形狀的選區(qū)1.文字工具3.2.2知識(shí)點(diǎn)講解排列方向字體文本大小消除鋸齒邊緣對(duì)齊方式文本顏色變形文本隱藏/顯示“字符”和“段落”面板轉(zhuǎn)化為3D1.文字工具多學(xué)一招：如何安裝字庫(kù)3.2.2知識(shí)點(diǎn)講解字庫(kù)C盤/Fonts重啟軟件將準(zhǔn)備好的字庫(kù)復(fù)制到C盤Windows文件夾下的Fonts文件夾內(nèi)，即可安裝字庫(kù)，重啟Photoshop后便可以應(yīng)用新安裝的字體3.2.2知識(shí)點(diǎn)講解

先定一個(gè)小目標(biāo)！熟悉點(diǎn)文本和段落文本，能夠分別輸入點(diǎn)文本和段落文本。3.2.2知識(shí)點(diǎn)講解（1）

輸入點(diǎn)文本【Ctrl+Enter】點(diǎn)文本不能自動(dòng)換行。單擊出現(xiàn)占位字符輸入文本提交完成輸入2.輸入點(diǎn)文本和段落文本3.2.2知識(shí)點(diǎn)講解（2）

輸入段落文本【Ctrl+Enter】創(chuàng)建定界框輸入文本提交完成輸入2.輸入點(diǎn)文本和段落文本3.2.2知識(shí)點(diǎn)講解【Ctrl】左擊并拖動(dòng)移動(dòng)文字位置在編輯狀態(tài)下移動(dòng)文字位置2.輸入點(diǎn)文本和段落文本3.2.2知識(shí)點(diǎn)講解

先定一個(gè)小目標(biāo)！掌握矩形工具的使用方法，能夠繪制矩形和正方形。3.2.2知識(shí)點(diǎn)講解矩形工具是形狀工具中最基礎(chǔ)的工具之一，可以很方便地繪制矩形或正方形。3.矩形工具【Shift】正方形【Alt】以單擊點(diǎn)為中心的矩形【Alt+Shift】以單擊點(diǎn)為中心的正方形在畫布中左擊自定義寬高3.2.2知識(shí)點(diǎn)講解繪制矩形的小技巧:3.矩形工具3.2.2知識(shí)點(diǎn)講解

先定一個(gè)小目標(biāo)！掌握多邊形工具的使用方法，能夠繪制三角形、五角星等圖形。3.2.2知識(shí)點(diǎn)講解可以快速創(chuàng)建一些特殊形狀的矢量圖形，例如等邊三角形、五角星等。4.多邊形工具3.2.2知識(shí)點(diǎn)講解“多邊形工具”默認(rèn)的形狀是正五邊形，但是可以通過(guò)“多邊形工具”的選項(xiàng)欄自定義多邊形的邊數(shù)。例如：4.多邊形工具3.2.2知識(shí)點(diǎn)講解“多邊形工具”繪制五角星：4.多邊形工具3.2.2知識(shí)點(diǎn)講解勾選勾選4.多邊形工具3.2.2知識(shí)點(diǎn)講解

先定一個(gè)小目標(biāo)！掌握“直線工具”的使用方法，能夠繪制直線。掌握“直線工具”選項(xiàng)欄及相關(guān)參數(shù)的設(shè)置方法，能夠設(shè)置直線的粗細(xì)、箭頭。3.2.2知識(shí)點(diǎn)講解右擊選擇“直線工具”繪制直線形狀工具之一5.直線工具3.2.2知識(shí)點(diǎn)講解直線的粗細(xì)路徑的粗細(xì)添加箭頭箭頭的寬度與直線寬度的百分比10%~1000%箭頭的長(zhǎng)度與直線寬度的百分比10%~5000%箭頭的凹陷程度-50%~50%=0%尾部平齊>0%向內(nèi)凹陷<0%向外突出5.直線工具注意：按住【Shift】鍵不放，可沿水平、垂直或45°倍數(shù)的方向繪制直線。3.2.2知識(shí)點(diǎn)講解5.直線工具3.2.2知識(shí)點(diǎn)講解

先定一個(gè)小目標(biāo)！掌握復(fù)制變換的方法，能夠?qū)D像或圖形進(jìn)行復(fù)制變換。3.2.2知識(shí)點(diǎn)講解變換操作【Ctrl+Alt+Shift+T】復(fù)制圖像執(zhí)行最后一次變換6.復(fù)制變換3.2.2知識(shí)點(diǎn)講解

先定一個(gè)小目標(biāo)！掌握“橢圓選框工具”的使用方法，能夠繪制圓形選框。掌握繪制橢圓時(shí)的小技巧，通過(guò)小技巧能夠快速繪制圓形選框。3.2.2知識(shí)點(diǎn)講解右擊選擇“直線工具”繪制直線常用的選區(qū)工具之一。7.橢圓選框工具【Shift】正圓選區(qū)【Alt】以單擊點(diǎn)為中心的橢圓選區(qū)【Alt+Shift】以單擊點(diǎn)為中心的正圓選區(qū)【Shift+M】切換工具3.2.2知識(shí)點(diǎn)講解使用“橢圓選框工具”創(chuàng)建選區(qū)時(shí)，有一些實(shí)用的小技巧：7.橢圓選框工具3.2.2知識(shí)點(diǎn)講解布爾運(yùn)算模糊程度消除鋸齒選框方式正常：默認(rèn)任意大小固定比例：輸入比例數(shù)值固定比例固定大小：輸入數(shù)值固定尺寸7.橢圓選框工具多學(xué)一招：了解“消除鋸齒”的作用3.2.2知識(shí)點(diǎn)講解未勾選消除鋸齒勾選消除鋸齒像素是組成圖像的最小元素，由于它們都是矩形的，在創(chuàng)建圓形、多邊形等不規(guī)則選區(qū)時(shí)便容易產(chǎn)生鋸齒。勾選“消除鋸齒”后，Photoshop會(huì)在選區(qū)邊緣1個(gè)像素的范圍內(nèi)添加與周圍圖像相近的顏色，使選區(qū)看上去光滑。3.2.2知識(shí)點(diǎn)講解

先定一個(gè)小目標(biāo)！掌握選區(qū)的操作方法，能夠全選、反選、取消選區(qū)、移動(dòng)選區(qū)。3.2.2知識(shí)點(diǎn)講解全選反選取消選區(qū)移動(dòng)選區(qū)隱藏和顯示選區(qū)在Photoshop中處理局部圖像時(shí)，若要指定編輯操作的有效區(qū)域，就需要?jiǎng)?chuàng)建選區(qū)并對(duì)選區(qū)進(jìn)行操作。8.選區(qū)的基本操作3.2.2知識(shí)點(diǎn)講解全選選擇→全部【Ctrl+A】8.選區(qū)的基本操作3.2.2知識(shí)點(diǎn)講解【Ctrl+C】復(fù)制整個(gè)圖像【Ctrl+Shift+C】復(fù)制多個(gè)圖層的整個(gè)圖像如果需要復(fù)制整個(gè)圖像，可以全選，再按【Ctrl+C】組合鍵復(fù)制圖像。如果文檔中包含多個(gè)圖層，則可按【Ctrl+Shift+C】組合鍵進(jìn)行合并復(fù)制。8.選區(qū)的基本操作3.2.2知識(shí)點(diǎn)講解反選選擇→反向【Ctrl+Shift+I】8.選區(qū)的基本操作腳下留心：“反向”和“反相”的區(qū)別3.2.2知識(shí)點(diǎn)講解反向選區(qū)反相顏色、色調(diào)圖像→調(diào)整→反相【Ctrl+I】3.2.2知識(shí)點(diǎn)講解取消選區(qū)選擇→取消選擇【Ctrl+D】8.選區(qū)的基本操作3.2.2知識(shí)點(diǎn)講解移動(dòng)選區(qū)創(chuàng)建選區(qū)時(shí)創(chuàng)建選區(qū)后釋放鼠標(biāo)左鍵前按住【空格】拖動(dòng)“新選區(qū)”狀態(tài)下鼠標(biāo)指針在選區(qū)內(nèi)單擊并拖動(dòng)8.選區(qū)的基本操作3.2.2知識(shí)點(diǎn)講解隱藏和顯示選區(qū)視圖→顯示→選區(qū)邊緣隱藏/顯示選區(qū)視圖→顯示額外內(nèi)容【Ctrl+H】8.選區(qū)的基本操作3.2.2知識(shí)點(diǎn)講解隱藏和顯示選區(qū)隱藏選區(qū)后，選區(qū)雖然不見(jiàn)了，但它仍然存在限定操作的有效區(qū)域。8.選區(qū)的基本操作3.2.2知識(shí)點(diǎn)講解

先定一個(gè)小目標(biāo)！了解羽化選區(qū)的原理，能夠說(shuō)出為什么要羽化選區(qū)。掌握羽化選區(qū)的方法，能夠分別在繪制選區(qū)前和繪制選區(qū)后對(duì)選區(qū)進(jìn)行羽化。3.2.2知識(shí)點(diǎn)講解通過(guò)建立選區(qū)和選區(qū)周圍像素之間的轉(zhuǎn)換邊界來(lái)模糊邊緣，會(huì)丟失一些細(xì)節(jié)。未模糊邊緣模糊邊緣9.羽化選區(qū)3.2.2知識(shí)點(diǎn)講解（1）

繪制選區(qū)前在選項(xiàng)欄中輸入羽化的數(shù)值，然后在畫布上繪制選區(qū)，此時(shí)，繪制的選區(qū)邊緣就是模糊的。優(yōu)點(diǎn)例如：設(shè)置羽化值未30像素，繪制并填充9.羽化選區(qū)3.2.2知識(shí)點(diǎn)講解（2）

繪制選區(qū)后在圖像上繪制選區(qū)，執(zhí)行“選擇→修改→羽化”命令（或按【Shift+F6】組合鍵），彈出“羽化”對(duì)話框，設(shè)置“羽化半徑”值為20像素。按【Ctrl+J】組合鍵復(fù)制圖層，隱藏背景。9.羽化選區(qū)3.2.2知識(shí)點(diǎn)講解（2）

繪制選區(qū)后若畫布中不存在選區(qū)，則該命令呈現(xiàn)為灰色。優(yōu)點(diǎn)“羽化”命令不能被執(zhí)行9.羽化選區(qū)3.2.2知識(shí)點(diǎn)講解（2）

繪制選區(qū)后選區(qū)較小而羽化半徑設(shè)置得較大時(shí)，會(huì)彈出一個(gè)羽化警告框。確認(rèn)當(dāng)前設(shè)置的羽化半徑，這時(shí)選區(qū)可能變得非常模糊，以至于在畫面中看不到，但是選區(qū)仍然存在。單擊9.羽化選區(qū)多學(xué)一招：形狀的羽化3.2.2知識(shí)點(diǎn)講解在運(yùn)用形狀工具時(shí)，運(yùn)用形狀屬性中的“羽化”，可以將形狀邊緣變得模糊，與周圍像素混合。羽化效果可隨時(shí)更改。3.2.2知識(shí)點(diǎn)講解

先定一個(gè)小目標(biāo)！掌握?qǐng)D層不透明度的設(shè)置方法，能夠?qū)D層的不透明度進(jìn)行設(shè)置。3.2.2知識(shí)點(diǎn)講解“不透明度”用于控制圖層、圖層組中圖像和形狀的透明程度。設(shè)置范圍是0%~100%。不透明度100%不透明度60%畫筆圖章橡皮擦按數(shù)字可更改透明度10.圖層的不透明度3.2.2知識(shí)點(diǎn)講解

先定一個(gè)小目標(biāo)！掌握標(biāo)尺的使用方法，能夠調(diào)出或隱藏標(biāo)尺，并設(shè)置標(biāo)尺的單位。3.2.2知識(shí)點(diǎn)講解標(biāo)尺屬于輔助工具，不能直接編輯圖像，但可以幫助用戶更好地完成圖像地選擇、定位和編輯等操作。視圖→標(biāo)尺【Ctrl+R】在標(biāo)尺上右擊11.標(biāo)尺3.2.2知識(shí)點(diǎn)講解

先定一個(gè)小目標(biāo)！掌握創(chuàng)建參考線的方法，既能夠快速創(chuàng)建參考線，也能夠精確創(chuàng)建參考線。3.2.2知識(shí)點(diǎn)講解參考線也是Photoshop的輔助工具之一，通過(guò)參考線可以更精確地繪制和調(diào)整圖層圖像。（1）

快速創(chuàng)建參考線將光標(biāo)置于標(biāo)尺上進(jìn)行拖動(dòng)可創(chuàng)建參考線。12.參考線3.2.2知識(shí)點(diǎn)講解（2）

精確創(chuàng)建參考線執(zhí)行“視圖→新建參考線”命令（或依次按【Alt】→【V】→【E】鍵），會(huì)彈出對(duì)話框。設(shè)置參考線方向確定參考線的精確位置12.參考線3.2.2知識(shí)點(diǎn)講解視圖→鎖定參考【Ctrl+Alt+;】鎖定參考線視圖→清除參考線【Alt】→【V】→【D】清除參考線視圖→顯示→參考線【Ctrl+;】顯示和隱藏參考線運(yùn)用參考線時(shí)的小技巧:12.參考線3.2.3任務(wù)分析（1）顏色咖啡是深棕色的，而且深棕色給人一種可靠、莊重的感覺(jué)，因此本案例的主色調(diào)采用深棕色。由于logo素材的顏色為白色，因此我們可以選取深棕色和白色的一個(gè)混合色——淺棕色作為點(diǎn)睛色。（2）顯示樣式和尺寸導(dǎo)航欄中主要由logo和導(dǎo)航構(gòu)成，我們可以將導(dǎo)航的選中狀態(tài)突出顯示。本任務(wù)將采取1920像素×90像素進(jìn)行設(shè)計(jì)。3.2.3任務(wù)制作咖啡網(wǎng)站導(dǎo)航欄設(shè)計(jì)【任務(wù)4】咖啡網(wǎng)站Banner設(shè)計(jì)3.33.3.1任務(wù)描述本任務(wù)是為知味coffee網(wǎng)站首頁(yè)設(shè)計(jì)一個(gè)Banner，主題內(nèi)容為“知你的味道”。要求主色為深棕色或咖啡色，并且根據(jù)主題搜索素材，可適當(dāng)匹配文案3.3.2知識(shí)點(diǎn)講解

先定一個(gè)小目標(biāo)！了解路徑和錨點(diǎn)，能夠明確路徑和錨點(diǎn)的關(guān)系。3.3.2知識(shí)點(diǎn)講解路徑和錨點(diǎn)是任何一個(gè)矢量圖形都不可或缺的元素。形狀的邊緣會(huì)有一圈明顯的“細(xì)線”和細(xì)線兩端的“端點(diǎn)”。路徑通常由一條或多條直線段或曲線段組成，而每條直線或線段上可以有多個(gè)錨點(diǎn)。1.路徑和錨點(diǎn)3.3.2知識(shí)點(diǎn)講解注意：路徑可以是閉合的，也可以是開(kāi)放的。1.路徑和錨點(diǎn)

先定一個(gè)小目標(biāo)！了解“鋼筆工具”的作用，能夠說(shuō)出“鋼筆工具”能用來(lái)做什么。掌握“鋼筆工具”的使用方法，能夠使用“鋼筆工具”繪制不同路徑和形狀。3.3.2知識(shí)點(diǎn)講解3.3.2知識(shí)點(diǎn)講解“鋼筆工具”用于繪制自定義的形狀或路徑，也可以對(duì)背景復(fù)雜的圖像進(jìn)行摳圖。在選項(xiàng)欄設(shè)置工具模式形狀路徑2.鋼筆工具3.3.2知識(shí)點(diǎn)講解使用“鋼筆工具”進(jìn)行摳圖時(shí)，若需要將其轉(zhuǎn)換成選區(qū)，可在繪制好的路徑上右擊，會(huì)彈出快捷菜單，在快捷菜單中選擇“建立選區(qū)”選項(xiàng)。2.鋼筆工具3.3.2知識(shí)點(diǎn)講解（1）

繪制直線路徑選擇“鋼筆工具”，在畫布上單擊，可創(chuàng)建路徑的第一個(gè)錨點(diǎn)。在該錨點(diǎn)附近再次單擊，兩個(gè)錨點(diǎn)之間即會(huì)形成一條直線路徑?！維hift】水平線段垂直線段45°倍數(shù)2.鋼筆工具3.3.2知識(shí)點(diǎn)講解（2）

繪制曲線路徑使用“鋼筆工具”在畫布上單擊并拖動(dòng)鼠標(biāo)可創(chuàng)建平滑點(diǎn)，從而創(chuàng)建曲線。首先創(chuàng)建路徑的第一個(gè)錨點(diǎn)，在該錨點(diǎn)附近再次單擊并拖動(dòng)鼠標(biāo)可創(chuàng)建一個(gè)平滑點(diǎn)，兩個(gè)錨點(diǎn)之間會(huì)形成一條曲線路徑。2.鋼筆工具3.3.2知識(shí)點(diǎn)講解【Ctrl】直接選擇工具【Alt】轉(zhuǎn)換點(diǎn)工具光標(biāo)放在路徑上添加錨點(diǎn)工具使用“鋼筆工具”時(shí)的小技巧:光標(biāo)放在錨點(diǎn)上刪除錨點(diǎn)工具調(diào)整曲線路徑的弧度平滑點(diǎn)和角點(diǎn)之間相互轉(zhuǎn)換添加錨點(diǎn)刪除錨點(diǎn)2.鋼筆工具3.3.2知識(shí)點(diǎn)講解注意：將路徑轉(zhuǎn)換為選區(qū)時(shí)，可能會(huì)出現(xiàn)自動(dòng)反向的情況，這是由于在繪制路徑時(shí)，不小心設(shè)置了選項(xiàng)欄的“路徑操作”。2.鋼筆工具3.3.2知識(shí)點(diǎn)講解

先定一個(gè)小目標(biāo)！掌握“彎度鋼筆工具”的使用方法，能夠使用工具繪制比較圓滑的路徑或圖形。3.3.2知識(shí)點(diǎn)講解“彎度鋼筆工具”

可以輕松繪制弧線路徑并可以快速調(diào)整弧線的位置、弧度等。用于創(chuàng)建線條比較圓滑的路徑和形狀。添加第3個(gè)錨點(diǎn)調(diào)整弧度3.彎度鋼筆工具3.3.2知識(shí)點(diǎn)講解

先定一個(gè)小目標(biāo)！掌握選擇和調(diào)整路徑的方法。能夠選擇路徑并對(duì)選中路徑進(jìn)行調(diào)整。3.3.2知識(shí)點(diǎn)講解在Photoshop中，選擇路徑的工具是“路徑選擇工具”，調(diào)整路徑的工具是“直接選擇工具”。路徑選擇工具選擇路徑和錨點(diǎn)直接選擇工具選中錨點(diǎn)4.選擇和調(diào)整路徑3.3.2知識(shí)點(diǎn)講解1像素【→】【←】【↑】【↓】【→】【←】【↑】【↓】【Shift】10像素4.選擇和調(diào)整路徑3.3.2知識(shí)點(diǎn)講解

先定一個(gè)小目標(biāo)！掌握“字符”面板中的參數(shù)設(shè)置，能夠在“字符”面板中設(shè)置文本樣式。掌握“段落”面板中的參數(shù)設(shè)置，能夠在“段落”面板中設(shè)置段落。3.3.2知識(shí)點(diǎn)講解在Photoshop中，提供了“字符”面板和“段落”面板，用于設(shè)置文字和段落的屬性。（1）“字符”面板設(shè)置文字的屬性主要是在“字符”面板中進(jìn)行。執(zhí)行“窗口→字符”命令（或在文字編輯狀態(tài)按【Ctrl+T】組合鍵），即可彈出“字符”面板。5.設(shè)置文字屬性3.3.2知識(shí)點(diǎn)講解行間距兩個(gè)字符的間距多個(gè)選中字符的間距所選字符的比例間距字符高度字符寬度控制文字與基線的距離添加特殊樣式5.設(shè)置文字屬性3.3.2知識(shí)點(diǎn)講解（2）“段落”面板“段落”面板用于設(shè)置段落屬性。執(zhí)行“窗口→段落”命令，即可彈出“段落”面板。5.設(shè)置文字屬性3.3.2知識(shí)點(diǎn)講解

先定一個(gè)小目標(biāo)！掌握載入自定形狀的方法，能夠載入并繪制自定形狀。3.3.2知識(shí)點(diǎn)講解使用“自定形狀工具”

可以創(chuàng)建預(yù)設(shè)的形狀、自定義的形狀或者載入的形狀。單擊單擊單擊6.自定形狀工具3.3.2知識(shí)點(diǎn)講解

先定一個(gè)小目標(biāo)！掌握“吸管工具”的使用方法。能夠快速獲取圖像中某處的顏色。3.3.2知識(shí)點(diǎn)講解在圖像處理的過(guò)程中，經(jīng)常需要從圖像中獲取某處的顏色，這時(shí)就需要用到“吸管工具”

。在工具欄中選擇“吸管工具”（或按【I】鍵），將鼠標(biāo)移動(dòng)至文檔窗口，單擊取樣，替換前景色。優(yōu)點(diǎn)例如：吸取圖像中的青色【Alt】單擊背景色7.吸管工具3.3.2知識(shí)點(diǎn)講解

先定一個(gè)小目標(biāo)！掌握“魔棒工具”的使用方法。能夠快速選中背景簡(jiǎn)單的圖像中的背景。3.3.2知識(shí)點(diǎn)講解“魔棒工具”

是基于色調(diào)和顏色差異來(lái)構(gòu)建選區(qū)的工具，它可以快速選擇色彩變化不大，且色調(diào)相近的區(qū)域。在工具欄中選擇“魔棒工具”（或按【W(wǎng)】鍵），單擊，與單擊點(diǎn)顏色相近的區(qū)域會(huì)被選中。優(yōu)點(diǎn)例如：選中圖像中的背景8.魔棒工具3.3.2知識(shí)點(diǎn)講解容差值的大小決定了選擇范圍的大小，容差值越大則選擇的范圍越大。勾選：只選擇顏色連接的區(qū)域；取消勾選：選擇顏色相近的所有區(qū)域，包括沒(méi)有連接的區(qū)域容差為10容差為100連續(xù)不連續(xù)8.魔棒工具3.3.3任務(wù)分析咖啡網(wǎng)站的主題是咖啡、Banner的主題是“知你的味道”，根據(jù)這兩個(gè)線索，可以在選取素材的時(shí)候選擇一個(gè)裝滿咖啡的咖啡杯為元素，再配上一些噱頭文案，這樣既可以突出咖啡網(wǎng)站，也可以勾起瀏覽者購(gòu)買咖啡的欲望。本案例選取的Banner背景尺寸為1920像素×472像素。在制作時(shí)，可將版心設(shè)置為1200像素。3.3.4任務(wù)制作咖啡網(wǎng)站Banner設(shè)計(jì)【任務(wù)5】咖啡網(wǎng)站首頁(yè)設(shè)計(jì)3.43.4.1任務(wù)描述本次任務(wù)是為知味咖啡設(shè)計(jì)一個(gè)網(wǎng)站首頁(yè)，公司要求結(jié)合公司的特點(diǎn)和理念，設(shè)計(jì)一個(gè)簡(jiǎn)約大氣，寧?kù)o、典雅的網(wǎng)站首頁(yè)，同時(shí)在首頁(yè)中要重點(diǎn)突出咖啡的美味與性價(jià)比。3.4.2知識(shí)點(diǎn)講解

先定一個(gè)小目標(biāo)！掌握“圖框工具”的使用方法，能夠用圖像填充圖框，且能夠?qū)⑿螤詈臀谋巨D(zhuǎn)化為圖框。3.4.2知識(shí)點(diǎn)講解“圖框工具”

可以為圖像創(chuàng)建占位符圖框。選擇“圖框工具”，在畫布中單擊并拖動(dòng)，可創(chuàng)建一個(gè)圖框?qū)?。無(wú)損縮放1.圖框工具3.4.2知識(shí)點(diǎn)講解在形狀或文本圖層上右擊，在彈出的菜單中選擇“轉(zhuǎn)換為圖框”選項(xiàng)，即可將其形狀或文本轉(zhuǎn)換為圖框。1.圖框工具3.4.2知識(shí)點(diǎn)講解單擊“圖層”面板中圖框后面的圖像即可選中圖框中的圖像，對(duì)其進(jìn)行下一步操作（更改位置、大?。８淖儓D像位置和大小1.圖框工具3.4.2知識(shí)點(diǎn)講解在“圖層”面板中選中圖框可以對(duì)圖框進(jìn)行調(diào)整。調(diào)整圖框1.圖框工具3.4.2知識(shí)點(diǎn)講解將新圖像拖到圖框中可自動(dòng)替換原圖像。更換圖像1.圖框工具3.4.2知識(shí)點(diǎn)講解

先定一個(gè)小目標(biāo)！掌握“漸變工具”的使用方法，能夠通過(guò)設(shè)置選項(xiàng)欄，繪制不同類型及不同顏色的漸變。3.4.2知識(shí)點(diǎn)講解選擇“漸變工具”

（或按【G】鍵）后，可以先在其選項(xiàng)欄中選擇一種漸變類型，并設(shè)置漸變顏色等選項(xiàng)，再來(lái)繪制漸變。顯示當(dāng)前的漸變顏色單擊選擇預(yù)設(shè)漸變2.漸變工具3.4.2知識(shí)點(diǎn)講解用于設(shè)置漸變類型，從左到右依次為線性漸變、徑向漸變、角度漸變、對(duì)稱漸變和菱形漸變線性漸變徑向漸變角度漸變對(duì)稱漸變菱形漸變2.漸變工具3.4.2知識(shí)點(diǎn)講解用來(lái)選擇漸變時(shí)的混合模式2.漸變工具3.4.2知識(shí)點(diǎn)講解設(shè)置漸變效果的不透明度2.漸變工具3.4.2知識(shí)點(diǎn)講解可轉(zhuǎn)換漸變中的顏色順序，得到反方向的漸變效果2.漸變工具3.4.2知識(shí)點(diǎn)講解可以使?jié)u變效果更加平滑。防止打印時(shí)出現(xiàn)條帶化現(xiàn)象2.漸變工具3.4.2知識(shí)點(diǎn)講解啟用編輯漸變時(shí)設(shè)置的透明效果，創(chuàng)建包含透明像素的漸變2.漸變工具3.4.2知識(shí)點(diǎn)講解

先定一個(gè)小目標(biāo)！掌握“漸變編輯器”的使用方法，能夠在“漸變編輯器”設(shè)置漸變。3.4.2知識(shí)點(diǎn)講解單擊“漸變顏色條”，彈出“漸變編輯器”對(duì)話框。①3.漸變編輯器3.4.2知識(shí)點(diǎn)講解將光標(biāo)移至“漸變顏色條”的下方，當(dāng)光標(biāo)變?yōu)樾螤詈髥螕艏纯稍黾由珮?biāo)。②3.漸變編輯器3.4.2知識(shí)點(diǎn)講解將該色標(biāo)向下拖出對(duì)話框，或單擊該色標(biāo)，然后單擊“漸變編輯器”對(duì)話框下方的“刪除”按鈕可刪除色標(biāo)。③3.漸變編輯器3.4.2知識(shí)點(diǎn)講解單擊色標(biāo)，將彈出“拾色器（色標(biāo)顏色）”對(duì)話框，在該對(duì)話框中可以更改色標(biāo)的顏色。④3.漸變編輯器3.4.2知識(shí)點(diǎn)講解在漸變顏色條的上方單擊可以添加不透明度色標(biāo)，通過(guò)“色標(biāo)”欄中的“不透明度”和“位置”可以設(shè)置色標(biāo)的不透明度和位置。⑤3.漸變編輯器3.4.2知識(shí)點(diǎn)講解拖動(dòng)兩個(gè)漸變色標(biāo)之間的菱形中點(diǎn)，可以調(diào)整色標(biāo)兩側(cè)