實戰練習02　設計制作逼真的話筒圖標

視　頻：資源包\視頻\第2章\2-4-5.mp4　　

源文件：資源包\源文件\第2章\2-4-5.psd

●案例分析

該案例的制作方法略微復雜，涉及很多工具和命令。其中底座和支架部分是由各種形狀工具繪制完成的；話筒是由“鋼筆工具”和形狀工具配合完成的；話筒的蜂窩狀紋理是通過圖案填充和“球面化”濾鏡處理完成的。案例的完成效果如圖2-61所示。

●制作步驟

01 執行“文件>新建”命令，彈出“新建”對話框，新建一個空白文檔，如圖2-62所示。使用“漸變工具”在畫布中心拖動鼠標填充從白色到RGB（150、150、150）的徑向漸變，效果如圖2-63所示。

02 使用“橢圓工具”，設置“工具模式”為“形狀”，在畫布中創建一個310px×70px的橢圓，如圖2-64所示。雙擊該圖層縮覽圖，打開“圖層樣式”對話框，選擇“漸變疊加”選項進行相應設置，如圖2-65所示。

03 設置完成后單擊“確定”按鈕，得到的圖形效果如圖2-66所示。按快捷鍵【Ctrl+J】復制該圖層，將其等比例縮小，然后打開“圖層樣式”對話框，修改“漸變疊加”選項的參數，如圖2-67所示。

04 設置完成后單擊“確定”按鈕，得到的圖形效果如圖2-68所示。在“背景”圖層上方新建“圖層1”，使用黑色柔邊畫筆涂抹出圖形的陰影，并設置該圖層的“不透明度”為60%，如圖2-69、圖2-70所示。

提示

在使用“畫筆工具”涂抹畫布時，如果前期涂抹得不是十分完美，也可以使用“橡皮擦工具”在涂抹完成后稍加修改。

05 使用“矩形工具”，設置“工具模式”為“形狀”，在畫布中拖動鼠標創建一個22px×416px的矩形，如圖2-71所示。雙擊該圖層縮覽圖，打開“圖層樣式”對話框，選擇“內陰影”選項進行相應設置，如圖2-72所示。

06 繼續在對話框中選擇“漸變疊加”選項進行相應設置，如圖2-73所示。設置完成后單擊“確定”按鈕，可以看到圖形效果，如圖2-74所示。

07 使用相同方法完成相似內容的制作，如圖2-75、圖2-76所示。選中除“背景”圖層之外的全部圖層，按快捷鍵【Ctrl+G】進行編組，并將其重命名為“底座”，如圖2-77所示。

08 使用“鋼筆工具”，設置“工具模式”為“形狀”，在畫布中繪制出話筒的線纜，如圖2-78所示。雙擊該圖層縮覽圖，彈出“圖層樣式”對話框，選擇“漸變疊加”選項進行相應設置，如圖2-79所示。

09 設置完成后單擊“確定”按鈕，得到的圖形效果如圖2-80所示。使用“圓角矩形工具”在線纜上繪制一個任意顏色的圓角矩形，并適當調整其大小和角度，如圖2-81所示。

10 雙擊該圖層縮覽圖，打開“圖層樣式”對話框，選擇“漸變疊加”選項進行相應設置，如圖2-82所示。設置完成后單擊“確定”按鈕，得到的圖形效果如圖2-83所示。

11 使用相同方法完成相似內容的制作，如圖2-84、圖2-85所示。新建一個30px×30px的文檔，然后使用“橢圓工具”在畫布中央創建一個15px×15px的黑色正圓，如圖2-86所示。

提示

本案例的步驟11：在定義圖層之前請務必先隱藏“背景”圖層，否則填充圖案后的畫布為白色背景而不是透明背景，后面的操作將難以進行。

12 執行“編輯>定義圖案”命令，彈出“圖案名稱”對話框，將圓點圖形定義為“圖案5”，如圖2-87所示。新建“圖層3”，執行“編輯>填充”命令，為畫布填充剛剛定義的“圖案5”，如圖2-88、圖2-89所示。

知識鏈接

該案例中自定義圖案的步驟也可以直接在當前文檔中完成

新建一個圖層，按下【Alt】鍵單擊該圖層縮覽圖前面的眼睛圖標，隱藏其他的圖層；

使用“矩形選框工具”創建合適大小的選區，并繪制圓點；

執行“編輯>定義圖案”命令，將選區內圖像定義為新的圖案。

13 按快捷鍵【Ctrl+T】適當調整畫布的大小和角度，如圖2-90所示。按【Ctrl】鍵單擊下方圖層的縮覽圖載入選區，然后為“圖層3”添加圖層蒙版，如圖2-91、圖2-92所示。

14 載入蒙版選區，執行“濾鏡>扭曲>球面化”命令，在彈出的“球面化”對話框中設置參數，如圖2-93所示。設置完成后可以看到圖形效果，如圖2-94所示。

提示

執行過“球面化”命令后，話筒上的點陣圖紋理會變得很模糊，請酌情執行“濾鏡>銳化>USM 銳化”命令銳化圖像。

15 雙擊該圖層縮覽圖，在彈出的“圖層樣式”對話框中選擇“漸變疊加”選項進行相應設置，如圖2-95所示。設置完成后單擊“確定”按鈕，得到的圖形效果如圖2-96所示。

16 使用“鋼筆工具”，設置“工具模式”為“形狀”，在畫布中創建如圖2-97所示的圖形（顏色任意）。雙擊該圖層縮覽圖，打開“圖層樣式”對話框，選擇“漸變疊加”選項設置參數，如圖2-98所示。

17 設置完成后單擊“確定”按鈕，圖形效果如圖2-99所示。再次使用“鋼筆工具”在話筒上創建如圖2-100所示的圖形，顏色任意。

18 雙擊該圖層縮覽圖，在彈出的“圖層樣式”對話框中選擇“漸變疊加”選項進行相應設置，如圖2-101所示。設置完成后可以看到圖形效果，如圖2-102所示。

19 使用相同方法完成相似內容的制作，并選中相關的圖層進行編組，重命名為“話筒”，如圖2-103所示。至此，完成逼真話筒的全部制作過程，最終效果如圖2-104所示。

20 隱藏“背景”圖層，執行“圖層>裁切”命令，裁掉文檔邊緣的透明像素，如圖2-105所示。執行“文件>導出>導出為”命令，彈出“導出為”對話框，設置各項參數，如圖2-106所示。

21 設置完成后，單擊“全部導出”按鈕，在彈出的對話框中選擇存儲切圖的文件夾。文件導出后，圖像效果如圖2-107所示。

2.4.6　扁平化風格圖標

扁平化圖標在軟件UI界面設計中應用得越來越多，因其簡潔、大方、直觀和易用等特點，越來越受到人們的喜愛和歡迎。在人們的日常生活中，每天都要接觸手機和電腦等媒體，細心觀察可以發現不同風格的扁平化圖標，概括起來主要有四種：基礎、陰影、長陰影和微漸變風格。

●基礎風格扁平化圖標

基礎風格的扁平化圖標，不添加任何的漸變、陰影、高光等體現圖標透視感的圖形元素，而是通過極其簡約的基本形狀圖形、符號等表現出圖標的主題，如圖2-108所示。

●陰影風格扁平化圖標

陰影風格的扁平化圖標主要是為圖標中主體圖形元素添加常規的陰影效果，如圖2-109所示。

●長陰影風格扁平化圖標

長陰影風格的扁平化圖標是目前最流行，也是應用范圍最廣的圖標。目前，長陰影設計主要應用于較小的對象和元素。如圖2-110所示為長陰影風格的扁平化圖標。

●微漸變風格扁平化圖標

扁平化設計風格雖然摒棄漸變、高光和陰影等圖形透視元素，但并不是完全不用，在扁平化設計風格中有一種風格稱為“微漸變風格”。微漸變風格就是將簡單的圖形元素與傳統高光表現方式相結合，通過微漸變的方式體現出圖標的層次感和立體感，如圖2-111所示。