2.2 Photoshop工具組

在學習完輔助工具后，接下來學習實際操作工具。Photoshop提供了多個工具組，運用它們可以繪制出豐富多彩的界面。

2.2.1 選區(qū)工具組

在Photoshop中處理界面的局部內(nèi)容時，要先指定編輯操作的有效區(qū)域，即創(chuàng)建選區(qū)。一般在制作UI的過程中常用一些基本選擇工具創(chuàng)建選區(qū)。

基本選擇工具包括選框類工具和套索類工具。“矩形選框工具”、“橢圓選框工具”、“單行選框工具”和“單列選框工具”等屬于選框類工具，這些工具可以創(chuàng)建規(guī)則的選區(qū)。而“套索工具”、“多邊形套索工具”和“磁性套索工具”等屬于套索類工具，這些工具可以創(chuàng)建不規(guī)則的選區(qū)。

1. 矩形選框工具

“矩形選框工具”用于創(chuàng)建矩形和正方形選區(qū)，圖2-29所示為“矩形選框工具”的選項欄。

2. 橢圓選框工具

“橢圓選框工具”主要用來創(chuàng)建橢圓形選區(qū)和圓形選區(qū)，按住Shift鍵就可以創(chuàng)建圓形選區(qū)，如圖2-34和圖2-35所示。其操作方法和“矩形選框工具”的操作方法相同。

圖2-36所示為“橢圓選框工具”的選項欄。

02　執(zhí)行“視圖”→“顯示”→“網(wǎng)格”命令，在畫面中顯示網(wǎng)格，如圖2-38所示。

03　選擇工具箱中的“單列選框工具”，在工具選項欄中單擊“添加到選區(qū)”按鈕，然后在網(wǎng)格線上單擊，創(chuàng)建寬度為1像素的選區(qū)，如圖2-39所示。

04　單擊“圖層”面板底部的“創(chuàng)建新圖層”按鈕，創(chuàng)建圖層。按Ctrl+Delete組合鍵，在選區(qū)內(nèi)填充背景色（白色），按Ctrl+D組合鍵取消選區(qū)，并隱藏網(wǎng)格，如圖2-40所示。

05　按Ctrl+T組合鍵顯示定界框，旋轉(zhuǎn)線條，如圖2-41所示。

06　按Alt+Ctrl+G組合鍵創(chuàng)建剪貼蒙版，將圖標以外的線條隱藏，如圖2-42所示。

2.2.2 形狀工具組

形狀實際上就是由路徑輪廓圍成的矢量圖形，UI的元素通常都是由矢量圖形構(gòu)成的。Photoshop中的形狀工具包括“矩形工具”、“圓角矩形工具”、“橢圓工具”、“多邊形工具”、“直線工具”和“自定形狀工具”等。它們可以繪制出標準的幾何矢量圖形，也可以繪制出自定義的圖形。

1. 矩形工具

使用“矩形工具”可以繪制正方形和矩形，其使用方法與“矩形選框工具”類似。在繪制時，按住Shift鍵可以繪制出正方形，如圖2-43所示；按住Alt鍵可以以鼠標單擊點為中心繪制矩形，如圖2-44所示；按住Shift+Alt組合鍵則可以以鼠標單擊點為中心繪制正方形。

2. 圓角矩形工具

使用“圓角矩形工具”可以繪制出具有圓角效果的矩形，其繪制方法和選項與“矩形工具”相似，只不過多了一個“半徑”選項。“半徑”選項用來設(shè)置圓角的半徑，數(shù)值越大，圓角越大，如圖2-45所示。

3. 橢圓工具

使用“橢圓工具”可以繪制出橢圓形和圓形，其繪制方法和設(shè)置選項與矩形工具相似。如果要繪制橢圓形，拖動鼠標就可以進行繪制；如果要繪制圓形，可以按住Shift鍵或Shift+Alt組合鍵進行繪制，如圖2-46所示。

04　按3次Ctrl+J組合鍵，將該星形復(fù)制3份，并移動它們的位置，如圖2-49所示。

05　繼續(xù)在畫面中繪制星形，并在工具選項欄修改“填充”為無，“描邊”為黃色（R:255,G:214,B:41），描邊寬度為6像素，修改星形的大小和位置，如圖2-50所示。

06　復(fù)制3個該星形，并移動它們的位置，如圖2-51所示。

07　在“圖層”面板選中“背景”圖層，設(shè)置前景色為深灰色（R:58,G:58,B:58），按Alt+Delete組合鍵為“背景”圖層填充前景色，最終效果如圖2-52所示。

5. 直線工具

“直線工具”用來繪制直線和帶箭頭的線段。選擇該工具后，拖動鼠標可以繪制直線或線段，按住Shift鍵可以繪制水平、垂直或以45°角為增量的直線。它的選項欄中包含了設(shè)置直線粗細的選項，此外，下拉面板中還包含了設(shè)置箭頭的選項，如圖2-53所示。

03　繼續(xù)在工具選項欄設(shè)置“平滑”為50%，設(shè)置前景色為藍色（R:26,G:32,B:142），在畫面中繪制兔子玩偶圖形，如圖2-58所示。

04　修改畫筆的“大小”為“3像素”，繪制兔子耳朵的陰影，如圖2-59所示。

05　在工具選項欄設(shè)置畫筆“不透明度”為50%，修改前景色為紅色（R:255,G:0,B:0），在兔子臉部繪制短線段，完成玩偶圖標的繪制，如圖2-60所示。

2. 鋼筆工具

“鋼筆工具”是Photoshop中強大的繪圖工具之一，它主要有兩種用途：一是繪制矢量圖形，二是用于選取對象。當作為選取工具使用時，“鋼筆工具”描繪出的輪廓光滑、準確，將路徑轉(zhuǎn)換為選區(qū)就可以準確地選擇對象，如圖2-61所示。

02　單擊工具箱中的“漸變工具”，在工具選項欄單擊“線性漸變”按鈕，如圖2-64所示。

03　單擊左側(cè)的漸變顏色條，打開“漸變編輯器”窗口，雙擊左側(cè)的色標，打開“拾色器（色標顏色）”對話框，在“拾色器（色標顏色）”對話框中調(diào)整該色標的顏色，修改漸變顏色，如圖2-65所示。

05　雙擊最后一個色標，修改漸變顏色為深紫色（R:41,G:16,B:83），如圖2-67所示。

06　選中“圖層1”，按住Ctrl鍵并單擊該圖層的縮略圖，將其載入選區(qū)，如圖2-68所示。

08　選中“圖層2”，打開“漸變編輯器”窗口，重新修改漸變顏色，如圖2-70所示。使用相同的方法，在上方的圓角矩形內(nèi)填充漸變顏色，繪制有水晶質(zhì)感的按鈕，如圖2-71所示。

4. 油漆桶工具

“油漆桶工具”可以在圖像中填充前景色或圖案。如果創(chuàng)建了選區(qū)，填充的區(qū)域為所選區(qū)域；如果沒有創(chuàng)建選區(qū)，則填充與鼠標單擊點顏色相近的區(qū)域。

【練習2-10】用油漆桶工具為圖標填色

源 文 件：第2章\練習2-10

在線視頻：第2章\練習2-10　用油漆桶工具為圖標填色.mp4

使用“油漆桶工具”可以為圖標填色，下面講解具體填色方法。

01　運行Photoshop 2020，按Ctrl+O組合鍵，打開資源文件中的“傳輸圖標.psd”素材，如圖2-72所示。

02　單擊工具箱中的“油漆桶工具”，在工具選項欄設(shè)置“填充”為“前景”，“容差”為32，如圖2-73所示。

在使用文字工具輸入文字之前，需要在工具選項欄或“字符”面板中設(shè)置字符的屬性，如字體、大小和文本顏色等，圖2-78所示為“橫排文字工具”的選項欄。

2.3.2 濾鏡

Photoshop中的濾鏡具有非常神奇的作用，在UI設(shè)計中，可以通過不同的濾鏡制作各具特色的UI元素。在多種濾鏡中常使用到“高斯模糊”“動感模糊”“添加雜色”等濾鏡。

1. 高斯模糊

“高斯模糊”濾鏡屬于模糊濾鏡組中的濾鏡。模糊濾鏡組包含高斯模糊、光暈?zāi)：⒈砻婺：痈心：蛷较蚰：?4種濾鏡。它們可以削弱相鄰像素的對比度并柔化圖像，使圖像產(chǎn)生模糊效果。

“高斯模糊”濾鏡可以添加低頻細節(jié)，使圖像產(chǎn)生一種朦朧的效果，如圖2-81所示。通過調(diào)整“半徑”值可以設(shè)置模糊的范圍，其以像素為單位，數(shù)值越高，模糊效果越強。

2. 動感模糊

“動感模糊”濾鏡可以根據(jù)制作效果的需要沿指定方向，以指定強度模糊圖像，產(chǎn)生的效果類似于以固定的曝光時間給一個移動的對象拍照，如圖2-82所示。

03　按Ctrl+T組合鍵調(diào)整汽車大小，再按住Ctrl鍵拖動定界框四周的控制點對圖像進行變形，如圖2-94所示。

04　單擊“圖層”面板底部的按鈕，為圖層添加蒙版。使用“畫筆工具”，選擇柔角畫筆，在汽車上涂抹黑色，用蒙版遮蓋圖像，如圖2-95所示。