Photoshop商業修圖高手之道：CHAPTER 9 Photoshop UI界面設計_郭西雅

界面就是在使用工具完成任務的過程中，你所做的操作及工具的響應的總和。所以用戶界面設計不僅要考慮如何擺放按鈕和菜單，還要考慮程序、設備與用戶如何互動。但是由於用戶看不到隱藏在背後的代碼，所以界面就代表了產品的全部。

9.1　日曆圖標

icon是一種圖標格式，用於系統圖標、軟件圖標等。常見的軟件或Windows桌面上的那些圖標一般都是PNG格式的。接下來就來教大家如何製作好看的icon圖標。

本節案例講解的是如何製作日曆圖標。在智能手機中日曆圖標是非常常見的一種圖標，如何將看似簡單的圖標做得更加時尚？本案例我們要學習的是，首先使用圓角矩形工具繪製日曆圖標的形狀，然後添加圖層樣式製作立體感，最後使用文字工具在頁面上輸入文字來突出圖標的主題。

原始文件：無

最終文件：Chapter 09/Complete/9-1-1.psd

01　新建文件執行「文件＞新建」命令，或按Ctrl+N組合鍵，打開「新建文檔」對話框，設置參數。

02　繪製形狀單擊工具箱中的「圓角矩形工具」按鈕，在選項欄中設置工作模式為「形狀」，填充顏色為咖啡色（R：62，G：26，B：4），半徑為55像素，在頁面上繪製形狀，將圖層名稱修改為「木板底部」。

03　添加效果雙擊「木板底部」圖層，在彈出的「圖層樣式」對話框中選擇「描邊」、「漸變疊加」選項，設置參數，為其添加效果。

04　添加效果繼續在「圖層樣式」對話框中選擇「內發光」、「投影」選項，設置參數，為其添加效果。

05　繪製形狀使用同樣的方法製作出「木板上層」。

06　創建剪貼蒙版執行「文件＞打開」命令，在打開的對話框中選擇「木紋.jpg」素材，將其打開拖入到場景中，在「圖層」面板中將該圖層的混合模式調整為「柔光」。執行「圖層＞創建剪貼蒙版」命令，為圖層創建剪貼蒙版。

07　繪製形狀單擊工具箱中的「圓角矩形工具」按鈕，在選項欄中設置工作模式為「形狀」，填充顏色為任意色，設置半徑為30像素，在頁面上繪製形狀，將圖層名稱修改為「紙張」。雙擊該圖層，在彈出的「圖層樣式」對話框中選擇「漸變疊加」、「投影」選項，設置參數，為其添加效果。

08　繪製形狀使用同樣的方法製作出其他效果。

09　繪製形狀單擊工具箱中的「鋼筆工具」按鈕，在選項欄中設置工作模式為「形狀」，在頁面上繪製形狀，將圖層名稱修改為「右邊固定栓底部」。雙擊該圖層，在彈出的「圖層樣式」對話框中選擇「斜面和浮雕」、「顏色疊加」選項，設置參數，為其添加效果。

10　繪製陰影單擊工具箱中的「鋼筆工具」按鈕，在選項欄中設置工作模式為「路徑」，在頁面上繪製路徑，按下快捷鍵Ctrl+Enter將路徑轉換為選區。按下快捷鍵Shift+F6，在彈出的「羽化選區」對話框中設置羽化半徑為5像素，設置前景色為黑色，按下快捷鍵Alt+Delete填充顏色，按下Ctrl+D組合鍵取消選區，將圖層名稱修改為「右邊投影」，在「圖層」面板中將該圖層的不透明度調整為50％。

11　繪製形狀單擊工具箱中的「橢圓工具」按鈕，在選項欄中設置工作模式為「形狀」，填充顏色為咖啡色（R：86，G：42，B：12），按住Shift鍵在頁面上繪製正圓，將圖層名稱修改為「右邊圓形」。雙擊該圖層，在彈出的「圖層樣式」對話框中選擇「內陰影」、「投影」選項，設置參數，為其添加效果。

12　繪製形狀單擊工具箱中的「鋼筆工具」按鈕，在選項欄中設置工作模式為「形狀」，在頁面上繪製形狀，將圖層名稱修改為「右邊固定栓」。雙擊該圖層，在彈出的「圖層樣式」對話框中選擇「斜面和浮雕」、「漸變疊加」選項，設置參數，為其添加效果。

13　繪製形狀使用同樣的方法製作出左邊的固定栓。

14　添加文字單擊工具箱中的「文字工具」按鈕，在「字符」面板中設置文字的字體、字號、顏色等參數，在頁面上輸入文字。

15　添加投影雙擊文字圖層，在彈出的「圖層樣式」對話框中選擇「投影」選項，設置參數，為其添加效果。

16　添加文字單擊工具箱中的「文字工具」按鈕，在「字符」面板中設置文字的字體、字號、顏色等參數，在頁面上輸入文字。

17　添加效果雙擊文字圖層，在彈出的「圖層樣式」對話框中選擇「內陰影」、「投影」選項，設置參數，為其添加效果。

9.2　收音機圖標

本節案例講解的是如何製作收音機圖標。在智能手機中收音機圖標是非常常見的一種圖標，如何將看似簡單的圖標做得更加時尚？本案例我們要學習的是，首先使用圓角矩形工具繪製收音機圖標的形狀，然後添加圖層樣式製作立體感，最後使用文字工具在頁面上輸入文字來突出圖標的主題。

原始文件：Chapter 09/Media/9-2-1.jpg

最終文件：Chapter 09/Complete/9-2-1.psd

01　新建文件執行「文件＞打開」命令，在打開的對話框中選擇「9-2-1.jpg」素材將其打開。

02　繪製形狀單擊工具箱中的「鋼筆工具」按鈕，在選項欄中設置工作模式為「形狀」，設置顏色為任意色，在頁面上繪製形狀，將圖層名稱修改為「天線」。

03　添加效果雙擊「天線」圖層，在彈出的對話框中選擇「斜面和浮雕」、「漸變疊加」選項，設置參數，為其添加效果。

04　繪製形狀單擊工具箱中的「圓角矩形工具」按鈕，在選項欄中設置工作模式為「形狀」，填充顏色為淺灰色（R：239，G：238，B：233），半徑為80像素，在頁面上繪製形狀，將圖層名稱修改為「收音機底部」。雙擊該圖層，在彈出的「圖層樣式」對話框中選擇「內陰影」選項，設置參數。

05　添加效果繼續在彈出的「圖層樣式」對話框中選擇「漸變疊加」選項，設置參數，添加漸變疊加效果。

06　添加效果使用同樣的方法製作出其他效果。

07　添加素材執行「文件＞打開」命令，在彈出的打開對話框中選擇「聲孔.png」素材，將其打開拖入到場景中並放置到合適的位置。

08　繪製形狀單擊工具箱中的「橢圓工具」按鈕，在選項欄中設置工作模式為「形狀」，填充顏色為任意色，按住Shift鍵在頁面上繪製正圓，將圖層名稱修改為「右邊按鈕」，在「圖層」面板中設置填充為0％。雙擊該圖層，在彈出的「圖層樣式」對話框中選擇「描邊」選項，設置參數，為其添加效果。

09　添加效果繼續在「圖層樣式」對話框中選擇「內陰影」、「投影」選項，設置參數，為其添加效果。

10　繪製形狀單擊工具箱中的「鋼筆工具」按鈕，在選項欄中設置工作模式為「形狀」，設置顏色為黑色，在頁面上繪製形狀，將圖層名稱修改為「加號」，在「圖層」面板中設置填充為10％。雙擊該圖層，在彈出的「圖層樣式」對話框中選擇「內陰影」、「投影」選項，設置參數、為其添加效果。

11　繪製形狀使用同樣的方法製作出其他效果。

12　繪製形狀使用同樣的方法製作出中間按鈕。單擊工具箱中的「矩形工具」按鈕，在選項欄中設置工作模式為「形狀」，填充顏色為黑色，在頁面上繪製矩形，在「圖層」面板中設置填充為10％。執行「圖層＞創建剪貼蒙版」命令，為其創建剪貼蒙版。雙擊該圖層，在彈出的「圖層樣式」對話框中選擇「內陰影」、「投影」選項，設置參數，為其添加效果。

13　製作高光使用同樣的方法製作出按鈕背景。單擊工具箱中的「鋼筆工具」按鈕，設置工作模式為「形狀」，填充為白色到透明的漸變，在頁面上繪製矩形，將圖層名稱修改為「高光」，在「圖層」面板中設置不透明度為65％。

14　製作文字使用同樣的方法製作出文字效果。

15　製作高光使用同樣的方法製作出其他高光效果。

9.3　金屬按鈕設計

UI設計是指對軟件的人機交互、操作邏輯、界面美觀的整體設計。好的UI設計不僅要讓軟件變得有個性、有品位，還要讓軟件的操作變得舒適、簡單、自由，充分體現軟件的定位和特點。那麼本節案例就來為大家講解UI小零件的設計。

在智能手機中按鈕圖標是經常出現的圖標，本例的重點是製作金屬拉絲效果、立體效果，以及利用光影知識製作發光效果。本案例我們要學習的是，首先使用橢圓工具繪製正圓，然後添加圖層樣式來體現按鈕的金屬質感及金屬拉絲效果。

原始文件：無

最終文件：Chapter 09/Complete/9-3-1.jpg

01　新建文件執行「文件＞新建」命令，或按Ctrl+N組合鍵，打開「新建文檔」對話框，設置參數，設置前景色為深藍色（R：25，G：31，B：46），按下快捷鍵Alt+Delete填充顏色。

02　繪製形狀單擊工具箱中的「橢圓工具」按鈕，在選項欄中設置工作模式為「形狀」，填充顏色為深灰色（R：26，G：28，B：35），按住Shift鍵在頁面上繪製正圓。雙擊該圖層，在彈出的「圖層樣式」對話框中選擇「內陰影」、「漸變疊加」選項，設置參數，為其添加效果。

03　繪製形狀使用同樣的方法繼續製作正圓形。

04　繪製形狀繼續使用「橢圓工具」繪製正圓，為「橢圓3」圖層。雙擊「橢圓3」圖層，在彈出的「圖層樣式」對話框中選擇「漸變疊加」選項，設置參數，為其添加效果。

05　繪製形狀使用同樣的方法繪製其他正圓形。

06　繪製形狀單擊工具箱中的「橢圓工具」按鈕，在選項欄中設置工作模式為「形狀」，填充顏色為任意色，按住Shift鍵在頁面上繪製正圓，在「圖層」面板中設置填充為0％。雙擊該圖層，在彈出的「圖層樣式」對話框中選擇「描邊」選項，設置參數，為其添加效果。

07　繪製形狀使用同樣的方法製作其他效果，並為其創建一個組，將紋理圖層放到組中，在「圖層」面板中，將組的不透明度調整為13％。

08　繪製形狀使用同樣的方法製作其他效果。單擊工具箱中的「鋼筆工具」按鈕，設置工作模式為「形狀」，填充顏色為深灰色（R：95，G：103，B：121），在頁面上繪製形狀。雙擊該圖層，在彈出的「圖層樣式」對話框中選擇「內陰影」選項，設置參數，為其添加效果。為該按鈕創建組並命名為「左邊按鈕」。

09　繪製形狀使用同樣的方法製作右邊按鈕。

9.4　彩色進度條和下拉菜單設計

本節案例講解如何製作彩色進度條和下拉菜單。彩色進度條主要使用橢圓工具、圓角矩形工具來製作圖標的形狀，配合文字使圖標變得更加具有時尚感。下拉菜單主要使用矩形工具繪製形狀，為形狀添加圖層樣式使圖標更加立體、更加精緻，再使用文字工具添加文字使圖標看起來更加充實。

原始文件：Chapter 09/Media/9-4-1（1）、（2）.jpg

最終文件：Chapter 09/Complete/9-4-1（1）、（2）.psd

01　新建文件執行「文件＞打開」命令，在打開的對話框中選擇「9-4-1（1）.jpg」素材將其打開。

02　繪製形狀單擊工具箱中的「橢圓工具」按鈕，在選項欄中設置工作模式為「形狀」，設置顏色為深灰色（R：23，G：22，B：33），在頁面上繪製正圓。

03　添加效果雙擊「橢圓1」圖層，在彈出的「圖層樣式」對話框中選擇「描邊」、「內發光」選項，設置參數，為其添加效果。

04　添加效果單擊工具箱中的「鋼筆工具」按鈕，在選項欄中設置工作模式為「形狀」，設置顏色為任意色，在頁面上繪製形狀，將圖層名稱修改為「半圓」。雙擊該圖層，在彈出的「圖層樣式」對話框中選擇「漸變疊加」選項，設置參數，為其添加效果。執行「圖層＞創建剪貼蒙版」命令，為其創建剪貼蒙版。

05　繪製形狀新建一個「矩形1」圖層，單擊工具箱中的「矩形選框工具」按鈕，在頁面上繪製矩形選框。單擊工具箱中的「漸變工具」按鈕，在選項欄中選擇線性漸變，單擊「點按可編輯漸變」按鈕，在彈出的對話框中設置漸變顏色為黑色到透明，單擊「確定」按鈕完成，在選框內拖曳鼠標為其填充漸變，按下快捷鍵Ctrl+D取消選區。

06　創建剪貼蒙版在「圖層」面板中設置「矩形1」圖層的混合模式為「柔光」。執行「圖層＞創建剪貼蒙版」命令，為其創建剪貼蒙版。

07　添加效果使用同樣的方法製作其他效果。

08　繪製形狀單擊工具箱中的「鋼筆工具」按鈕，在選項欄中設置工作模式為「形狀」，設置顏色為任意色，在頁面上繪製形狀，將圖層名稱修改為「進度條」。雙擊該圖層，在彈出的「圖層樣式」對話框中選擇「漸變疊加」選項，設置參數，為其添加效果。

09　繪製形狀單擊工具箱中的「橢圓工具」按鈕，在選項欄中設置工作模式為「形狀」，設置顏色為深灰色（R：23，G：22，B：33），在頁面上繪製形狀。雙擊該圖層，在彈出的「圖層樣式」對話框中選擇「斜面和浮雕」、「內發光」選項，設置參數，為其添加效果。

10　繪製形狀繼續在「圖層樣式」對話框中選擇「漸變疊加」、「外發光」、「投影」選項，設置參數，為其添加效果。

11　繪製形狀單擊工具箱中的「鋼筆工具」按鈕，在選項欄中設置工作模式為「形狀」，設置顏色為黑色，在頁面上繪製形狀，將圖層名稱修改為「球紋理」，在「圖層」面板中將該圖層的不透明度調整為13％。

12　繪製形狀新建一個「高光」圖層，單擊工具箱中的「畫筆工具」按鈕，在選項欄中選擇一個虛一點的畫筆筆觸，設置前景色為白色，在頁面上繪製高光。單擊「圖層」面板下方的「添加圖層蒙版」按鈕，為圖層添加蒙版。在圖層蒙版中使用橢圓選框工具繪製選區，按下快捷鍵Ctrl+Shift+I將選區進行反選，為選區填充灰色（R：120，G：120，B：120）,按下快捷鍵Ctrl+D取消選區。