1.2　UI在Photoshop中的常用工具

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

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

素材位置　素材文件>CH01>01.psd

實例位置　實例文件>CH01>課堂案例：用常用工具制作界面.psd

視頻名稱　課堂案例：用常用工具制作界面.mp4

學習目標　掌握UI設(shè)計的常用工具

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

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

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

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

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

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

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

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

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

09　輸入文字。使用“橫排文字工具”在圓環(huán)內(nèi)輸入“網(wǎng)絡(luò)正常”，然后設(shè)置“字體”為“方正蘭亭黑”，“字體大小”為55點，“顏色”為白色，如圖1-17所示。

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

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

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

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

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

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

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

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

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

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

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

1.2.2　移動工具

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

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

1.2.3　自由變換工具

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

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

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

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

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

1.2.4　矩形工具

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

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

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

描邊寬度：設(shè)置描邊的線框?qū)挾龋瑔挝粸橄袼兀鐖D1-40所示。

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

1.2.5　圓角矩形工具

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

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

1.2.6　橢圓工具

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

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

1.2.7　鋼筆工具

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

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

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

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

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

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

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

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

1.2.8　直接選擇工具

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

1.2.9　橫排文字工具

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

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

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

：設(shè)置輸入文字的大小。

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

：設(shè)置輸入文字的對齊方式。

：設(shè)置輸入文字的顏色。

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

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