1.2 UI在Photoshop中的常用工具

雖然Photoshop的工具有很多，但用在UI設計中的只有一小部分，如“移動工具”“矩形工具”和“鋼筆工具”等。

1.2.1 課堂案例：用常用工具制作界面

本案例是在Photoshop中用UI設計的常用工具制作一個簡單的路由器界面，效果如圖1-6所示。讀者可以通過這個案例，簡單了解UI設計的過程。

01 啟動Photoshop CC 2017，執行“文件>新建”菜單命令，在彈出的“新建文檔”對話框中選擇“移動設備”選項卡，然后選擇iPhone 6預設并單擊“創建”按鈕，如圖1-7所示。生成的界面顯示為“畫板1”，如圖1-8所示。

02繪制背景。設置“前景色”為深藍色（R:26,G:27,B:42），然后按Alt+Delete組合鍵將背景進行填充，如圖1-9所示。

03繪制發光圓環。單擊“創建新圖層”按鈕，在背景圖層上創建一個新圖層，選中“橢圓工具”并按住Shift鍵繪制一個520像素×520像素的圓形，然后關閉“填充”，設置“描邊”顏色為白色，“描邊寬度”為50像素，如圖1-10所示。

04單擊“創建新的填充或調整圖層”按鈕，在彈出的菜單中選擇“漸變填充”選項，然后設置“漸變”為紫藍漸變，“角度”為-35度，如圖1-11所示。

提示

圓形路徑需要與背景居中對齊。切換到“移動工具”后，單擊“選項”欄中的“水平居中對齊”按鈕，圓環和背景就可以居中對齊。

05選中“漸變填充”圖層并按住Alt鍵，將光標放置于“漸變填充”圖層和“橢圓1”圖層之間，此時光標會變成向下彎折的箭頭，單擊鼠標后“漸變填充”圖層會成為“橢圓1”圖層的剪貼蒙版，如圖1-12所示。

提示

按Ctrl+Alt+G組合鍵也可實現剪貼蒙版的操作。

06選中“漸變填充”圖層和“橢圓1”圖層，按Ctrl+E組合鍵將二者合并為一個圖層，如圖1-13所示。

07雙擊“漸變填充1”圖層打開“圖層樣式”對話框，勾選“外發光”選項，設置“混合模式”為“柔光”,“顏色”為藍色（R:94,G:147,B:255）,“不透明度”為51％,“擴展”為17％,“大小”為65像素，如圖1-14所示。單擊“確定”按鈕后生成的效果如圖1-15所示。

08繪制底部色塊。使用“矩形工具”在底部繪制一個高為150像素的白色矩形，如圖1-16所示。

09輸入文字。使用“橫排文字工具”在圓環內輸入“網絡正常”，然后設置“字體”為“方正蘭亭黑”,“字體大小”為55點，“顏色”為白色，如圖1-17所示。

10 繼續在圓環內輸入“當前3臺設備連接”，設置“字體大小”為30點，“顏色”為灰色（R:182,G:182,B:182），如圖1-18所示。

11 繪制三角形圖標。使用“多邊形工具”在畫板上繪制一個倒三角形，設置“寬度”和“高度”都為30像素，“邊數”為3,“填充”為淺藍色（R:53,G:249,B:255），如圖1-19所示。

12 將上一步創建的倒三角形圖標復制一份旋轉180°，然后設置“顏色”為紫色（R:108,G:97,B:255），如圖1-20所示。

13 輸入流量文字。使用“橫排文字工具”在左側的三角形旁邊輸入“當前下載速度”，設置“字體大小”為24點，“顏色”為灰色（R:182,G:182,B:182），如圖1-21所示。

提示

由于“當前下載速度”圖層與“當前3臺設備連接”圖層中文字的字體和顏色相同，讀者也可以將“當前3臺設備連接”圖層復制一層，然后修改文字內容和字體大小。

14 將上一步輸入的文字復制一份，修改為“當前上傳速度”后放置在右側三角形旁邊，如圖1-22所示。在放置文字時，需要適當調整三角形和文字的位置。

15 在“當前下載速度”下方輸入文字000.1，設置“字體”為Arial,“字體大小”為70點，并設置不同的顏色，如圖1-23所示。

16 按照同樣的方法在“當前上傳速度”下方輸入000.2，如圖1-24所示。

17 在數值的下方輸入KB/s，具體參數如圖1-25所示。

18 調整版面。此時觀察頁面，所有元素整體偏下。將圓環和文字內容的圖層全部選中，然后向上移動一段距離調整細節，如圖1-26所示。

19 繪制分割線。使用“鋼筆工具”在圓環下方畫一條直線，設置“描邊”顏色為灰色（R:182,G:182,B:182），寬度為3像素，并設置該圖層的“不透明度”為30％，如圖1-27所示。

20添加圖標。打開“素材文件>CH01>01.psd”文件，將其中的圖標都放置在界面上，案例最終效果如圖1-28所示。

1.2.2 移動工具

“移動工具”（快捷鍵為V）是常用的工具之一，無論是移動圖層、元素，還是移動其他文檔到當前文檔，都需要使用該工具。圖1-29所示是“移動工具”的選項欄。

“移動工具”除了可以移動圖層外，還可以將圖層進行對齊。當同時選中兩個或兩個以上的圖層時，單擊圖1-30所示的相應按鈕可以實現圖層對齊。對齊方式包括“頂對齊”“垂直居中對齊”“底對齊”“左對齊”“水平居中對齊”和“右對齊”，如圖1-31所示。

1.2.3 自由變換工具

“自由變換”工具（快捷鍵為Ctrl+T）可以將場景中的對象放大、縮小或旋轉。

選中需要調整的對象，執行“編輯>自由變換”菜單命令，對象的周圍會出現一個調整框，如圖1-32所示。

按住Shift鍵并使用鼠標移動4個角點，可以均勻放大或縮小選中的對象，如圖1-33所示。

按住Shift鍵和Alt鍵并使用鼠標移動4個角點，可以沿中心點等比例放大或縮小選中的對象，如圖1-34所示。

將鼠標放在4個角點外，可以觀察到光標變成圓弧形箭頭，這時拖曳鼠標就可以旋轉對象，如圖1-35所示。若按住Shift鍵則以15°為一個單位精確旋轉對象，如圖1-36所示。

1.2.4 矩形工具

“矩形工具”（快捷鍵為Shift+U）可以創建矩形的路徑或填充區域，其選項欄如圖1-37所示。

填充：設置矩形的填充顏色，形成一個實心的矩形，如圖1-38所示。

描邊：設置矩形描邊的顏色，形成一個空心的矩形，如圖1-39所示。

描邊寬度：設置描邊的線框寬度，單位為像素，如圖1-40所示。

描邊選項：設置描邊線框的類型、對齊方式、角點類型和端點類型，如圖1-41所示。

1.2.5 圓角矩形工具

“圓角矩形工具”（快捷鍵為Shift+U）與“矩形工具”類似，只是增加了圓角的“半徑”選項，如圖1-42所示。

“半徑”數值越大，矩形的圓角越圓滑，如圖1-43所示。

提示

對于已經創建完成的圓角矩形，如果需要修改其參數，可以在“屬性”面板中進行修改，如圖1-44所示。

1.2.6 橢圓工具

“橢圓工具”（快捷鍵為Shift+U）可以繪制橢圓形或圓形，其選項欄與“矩形工具”基本相同，如圖1-45所示。

按住Shift鍵，然后使用“橢圓工具”繪制時，會繪制一個圓形，如圖1-46所示。

提示

若將橢圓形的長和寬數值設置的相同，也同樣是繪制圓形。

1.2.7 鋼筆工具

“鋼筆工具”（快捷鍵為Shift+P）可以繪制任意形狀的路徑，其選項欄如圖1-47所示。

“鋼筆工具”配合一些快捷鍵可以形成不同的操作效果。

鋼筆工具+Shift鍵：當創建新錨點時，系統會以45°或其倍數生成新的錨點，如圖1-48所示。

鋼筆工具+Alt鍵：當按住Alt鍵時，“鋼筆工具”會暫時切換為“轉換點工具”，這時選中的點會由尖銳的角點會變成帶控制手柄的圓滑角點，如圖1-49所示。

鋼筆工具+Ctrl鍵：當按住Ctrl鍵時，“鋼筆工具”會暫時切換為“直接選擇工具”，選中的錨點可以移動位置或改變角度，如圖1-50所示。

“鋼筆工具”不僅能繪制直線還能繪制曲線，二者在操作上有些區別。

繪制直線：選中“鋼筆工具”后在圖像的任意位置單擊一次，創建第1個錨點，然后將鼠標指針移動到圖像的其他位置再次單擊鼠標，創建第2個錨點。與此同時，創建的兩個錨點之間會生成一條直線，如圖1-51所示。

提示

當設置“描邊”的顏色和寬度后，才能在圖像上看到生成的直線，若設置的是“填充”的顏色，則可能會生成一個色塊區域，如圖1-52所示。

繪制曲線：選中“鋼筆工具”在圖像的任意位置按住鼠標不放并拖曳，此時就建立了第1個曲線錨點，然后將鼠標指針移動到圖像的其他位置再次按住鼠標不放并拖曳，形成第2個曲線錨點。與此同時，新建的兩個錨點之間會生成一條曲線，如圖1-53所示。調整錨點的控制手柄可以調整曲線彎曲的弧度。

1.2.8 直接選擇工具

“直接選擇工具”可以對“鋼筆工具”或“矩形工具”等生成的錨點位置進行選擇、移動和刪除等操作，從而改變路徑的走勢和弧度，如圖1-54所示。

1.2.9 橫排文字工具

“橫排文字工具”（快捷鍵為T）可以輸入橫向排列的文字，其選項欄如圖1-55所示。

切換文本方向：單擊該按鈕后，橫向排列的文字會變成豎向排列。

：設置輸入文本的字體。該列表中的字體與計算機中安裝的字體一致。

：設置輸入文字的大小。

：用于消除輸入文字的鋸齒，單擊下拉菜單，有“銳利”“犀利”“渾厚”和“平滑”選項，如圖1-56所示。

：設置輸入文字的對齊方式。

：設置輸入文字的顏色。

創建文字變形：單擊該按鈕會彈出“變形文字”對話框，用于設置文字的變形方式，如圖1-57所示。

切換字符和段落面板：單擊該按鈕會彈出“字符”和“段落”面板，如圖1-58所示。在該面板中可以詳細設置文字的各項參數。