2.1 軟件的基本操作

在學(xué)習(xí)用Photoshop制作UI之前，需要先學(xué)會該軟件的一些基本操作。下面開始了解Photoshop中的新建文件、打開文件和置入文件等軟件的基本操作。

2.1.1 新建文件

在Photoshop中，不僅可以編輯一個現(xiàn)有的圖像，還可以創(chuàng)建一個空白的文件，對它進(jìn)行各種編輯操作。執(zhí)行“文件”→“新建”命令或按Ctrl+N組合鍵，打開“新建文檔”對話框，如圖2-1所示，設(shè)置文件名稱、大小、分辨率、顏色模式和背景內(nèi)容等，然后單擊“創(chuàng)建”按鈕即可新建文件。

2.1.4 輔助工具

在繪制圖標(biāo)或軟件UI的時候，有時會使用到Photoshop中的輔助工具。標(biāo)尺、參考線、網(wǎng)格等都屬于輔助工具，它們雖然不能用來編輯圖像，但是可以幫我們更精確地完成UI的制作。下面來介紹這些輔助工具。

1. 標(biāo)尺

標(biāo)尺可以確定圖像或元素的位置。

【練習(xí)2-1】使用標(biāo)尺

源 文 件：第2章\練習(xí)2-1

在線視頻：第2章\練習(xí)2-1　使用標(biāo)尺.mp4

繪制圖標(biāo)或UI之前可以使用標(biāo)尺工具拖出參考線，下面講解調(diào)整標(biāo)尺原點的方法。

01　運(yùn)行Photoshop 2020，執(zhí)行“文件”→“打開”命令，打開資源文件中的“相冊圖標(biāo).psd”素材。執(zhí)行“視圖”→“標(biāo)尺”命令，或按Ctrl+R組合鍵，顯示標(biāo)尺，如圖2-4所示。

02　如果要設(shè)置標(biāo)尺的測量單位，將鼠標(biāo)指針移動至標(biāo)尺上方并右擊，在彈出的快捷菜單中設(shè)置尺寸單位，如圖2-5所示。

03　默認(rèn)情況下，標(biāo)尺的原點位于窗口的左上角，如果要修改原點的位置，可以從圖像的特定點開始測量。將鼠標(biāo)指針放在原點上，向右下方拖動，畫面中會顯示出十字線，如圖2-6所示。

04　將原點拖放到需要的位置，該處便成為原點的新位置，如圖2-7所示。

05　在窗口左上角雙擊，可以將原點恢復(fù)到默認(rèn)位置，如圖2-8所示。

2. 參考線

參考線是一款非常常用的輔助工具，在平面設(shè)計中尤為實用。在制作整齊排列的元素時，徒手移動很難保證元素整齊排列。如果有了參考線，則可以在移動元素時使之自動“吸附”到參考線上，從而使版面更加整齊。使用參考線之前需要先顯示標(biāo)尺。

【練習(xí)2-2】使用參考線

源 文 件：第2章\練習(xí)2-2

在線視頻：第2章\練習(xí)2-2　使用參考線.mp4

使用參考線可以繪制標(biāo)準(zhǔn)的圖標(biāo)，下面講解參考線的使用方法。

01　運(yùn)行Photoshop 2020，執(zhí)行“文件”→“打開”命令，打開資源文件中的“相冊圖標(biāo).psd”素材。按Ctrl+R組合鍵，顯示標(biāo)尺，將鼠標(biāo)指針放在水平標(biāo)尺上，向下拖動鼠標(biāo)，即可拖出水平參考線，如圖2-9所示。

02　采用步驟01的方法可在垂直標(biāo)尺上拖出垂直參考線，如圖2-10所示。

03　選擇工具箱中的“移動工具”，將鼠標(biāo)指針放在參考線上，鼠標(biāo)指針會變?yōu)?img alt="55773-00-023-04" class="kindle-cn-inline-image" src="https://epubservercos.yuewen.com/7C9149/19886963608869306/epubprivate/OEBPS/Images/55773-00-023-04.jpg?sign=1753923762-eQxDhstd25ivmgrGwTPP5J9KDgQUu0Bz-0-dbd05a1bc93904e04c9fe35c711a1e83">狀，拖動鼠標(biāo)即可移動參考線，如圖2-11所示。

04　將垂直參考線“拖回”垂直標(biāo)尺，可將其刪除，如圖2-12所示。執(zhí)行“視圖”→“清除參考線”命令，可以刪除所有參考線，如圖2-13所示。

3. 網(wǎng)格

網(wǎng)格對于對稱布置對象非常有用。執(zhí)行“視圖”→“顯示”→“網(wǎng)格”命令，可在文檔窗口中顯示網(wǎng)格，如圖2-14所示。顯示網(wǎng)格之后，執(zhí)行“視圖”→“對齊”→“網(wǎng)格”命令，可使用對齊功能，此后在進(jìn)行創(chuàng)建選區(qū)和移動圖像等操作時，對象將會自動對齊到網(wǎng)格上。

02　執(zhí)行“編輯”→“自由變換”命令，或按Ctrl+T組合鍵顯示定界框，如圖2-21所示。將鼠標(biāo)指針放在定界框外靠近中間位置的控制點處，當(dāng)鼠標(biāo)指針變?yōu)?img alt="55773-00-024-10" class="kindle-cn-inline-image" src="https://epubservercos.yuewen.com/7C9149/19886963608869306/epubprivate/OEBPS/Images/55773-00-024-10.jpg?sign=1753923762-NjY00fMPONQv4EaDZtczawB7T3DlTLhr-0-7e59766eea948797bb9839417613a27f">狀時，拖動鼠標(biāo)即可旋轉(zhuǎn)對象，如圖2-22所示。

03　操作完成后，按Enter鍵確認(rèn)。如果對旋轉(zhuǎn)結(jié)果不滿意，可以按Esc鍵取消操作。

04　下面縮放圖像。將鼠標(biāo)指針放在定界框四周的任一控制點上，當(dāng)鼠標(biāo)指針變?yōu)?img alt="55773-00-025-03" class="kindle-cn-inline-image" src="https://epubservercos.yuewen.com/7C9149/19886963608869306/epubprivate/OEBPS/Images/55773-00-025-03.jpg?sign=1753923762-v8zc4qapn7fUgPiANnAIWQj1EltnSeMw-0-b64fead9f137902040cec305c00f2d39">狀時，拖動鼠標(biāo)即可等比縮放圖像，如圖2-23所示。如果要進(jìn)行不等比縮放，可在縮放的同時按住Shift鍵，如圖2-24所示。

【練習(xí)2-4】傾斜與扭曲

源 文 件：第2章\練習(xí)2-4

在線視頻：第2章\練習(xí)2-4　傾斜與扭曲.mp4

除了旋轉(zhuǎn)與縮放圖標(biāo)外，還可以傾斜與扭曲圖標(biāo)，下面講解傾斜與扭曲圖標(biāo)的方法。

01　運(yùn)行Photoshop 2020，按Ctrl+O組合鍵，打開資源文件中的“好書推薦圖標(biāo).psd”素材，如圖2-25所示。

02　按Ctrl+T組合鍵顯示定界框，將鼠標(biāo)指針放在定界框外側(cè)位于水平中間位置的控制點上，按住Shift+Ctrl組合鍵，當(dāng)鼠標(biāo)指針變?yōu)?img alt="55773-00-025-07" class="kindle-cn-inline-image" src="https://epubservercos.yuewen.com/7C9149/19886963608869306/epubprivate/OEBPS/Images/55773-00-025-07.jpg?sign=1753923762-trF1n7Ow9uwrcJrLF4MTIztzDC9ULUan-0-0d970edfd6e05f68310cf95f4a851abd">狀時，拖動鼠標(biāo)可沿水平方向斜切對象，如圖2-26所示。直接執(zhí)行“編輯”→“變換”→“斜切”命令，也可以斜切對象。

03　將鼠標(biāo)指針放在定界框外側(cè)位于垂直中間位置的控制點上，鼠標(biāo)指針會變?yōu)?img alt="55773-00-025-09" class="kindle-cn-inline-image" src="https://epubservercos.yuewen.com/7C9149/19886963608869306/epubprivate/OEBPS/Images/55773-00-025-09.jpg?sign=1753923762-3x480Fgv1ao36VCrPml1MISVg3L8Q4EC-0-cd365d8f2843988d6a23e3498197779b">狀，可以沿垂直方向斜切對象，如圖2-27所示。

04　按Esc鍵取消操作，接下來進(jìn)行扭曲操作。執(zhí)行“編輯”→“變換”→“扭曲”命令，將鼠標(biāo)指針放在定界框四周的任意控制點上，鼠標(biāo)指針會變?yōu)?img alt="55773-00-025-10" class="kindle-cn-inline-image" src="https://epubservercos.yuewen.com/7C9149/19886963608869306/epubprivate/OEBPS/Images/55773-00-025-10.jpg?sign=1753923762-JQDideYmTZEjmVthPCBjst6y7mgNtPtG-0-e121cbfc4ff3fc722400119197546a35">狀，拖動鼠標(biāo)可扭曲對象，如圖2-28所示。