1.5 課堂練習(xí)——制作iOS鎖屏界面

通過(guò)以上基礎(chǔ)知識(shí)的學(xué)習(xí)，讀者對(duì)手機(jī)UI的設(shè)計(jì)有了一定的了解。接下來(lái)通過(guò)一個(gè)案例演示一個(gè)鎖屏界面的創(chuàng)作過(guò)程。

1.5.1 案例分析

案例特點(diǎn)：本案例制作的是iOS數(shù)字解鎖界面，界面中包含了許多細(xì)節(jié)，例如圖形元素的投影、內(nèi)陰影以及透明漸變等特殊效果，這些都需要讀者對(duì)Photoshop中圖層樣式的運(yùn)用有充分的掌握。

制作思路與要點(diǎn)：本案例的難點(diǎn)就是使用漸變樣式實(shí)現(xiàn)透明玻璃質(zhì)感。

·色彩分析

整個(gè)界面并沒(méi)有使用絢爛華麗的顏色，低調(diào)的黑色表現(xiàn)出了莊重的氣息，灰色以不同明度的漸變制作出透明玻璃質(zhì)感，加入少量藍(lán)色，顯現(xiàn)出低調(diào)、精致的奢華感。

1.5.2 制作步驟

01 執(zhí)行“文件＞打開(kāi)”命令，打開(kāi)素材圖像“素材\第1章\001.jpg”，如圖1-12所示。使用“矩形工具”在畫(huà)布頂部創(chuàng)建一個(gè)黑色的矩形，如圖1-13所示。繼續(xù)使用“矩形工具”在畫(huà)布頂部創(chuàng)建一個(gè)白色的矩形，如圖1-14所示。

02 設(shè)置“路徑操作”為“合并形狀”，繼續(xù)在畫(huà)布中繪制矩形，如圖1-15所示。使用相同的方法繼續(xù)繪制矩形，并修改圖層“不透明度”為75%，得到界面信號(hào)圖標(biāo)效果，如圖1-16、圖1-17所示。

03 打開(kāi)“字符”面板，設(shè)置各項(xiàng)參數(shù)值，如圖1-18所示。使用“橫排文字工具”輸入相應(yīng)文字，并修改圖層“不透明度”為80%，如圖1-19所示。選擇“橢圓工具”，按下Shift鍵的同時(shí)在畫(huà)布中單擊并拖動(dòng)鼠標(biāo)，繪制白色正圓，如圖1-20所示。

04 選擇“矩形工具”，設(shè)置“路徑操作”為“減去頂層形狀”，在橢圓中繪制，并修改圖層“不透明度”為80%，如圖1-21、圖1-22所示。選擇“橢圓工具”，按下Shift鍵的同時(shí)在畫(huà)布中單擊并拖動(dòng)鼠標(biāo)，繪制白色正圓，如圖1-23所示。

05 選擇“矩形工具”，設(shè)置“路徑操作”為“減去頂層形狀”，在形狀中繪制，如圖1-24所示。繼續(xù)設(shè)置“路徑操作”為“合并形狀”，在形狀中繪制矩形，得到形狀相加效果，如圖1-25所示。

06 使用相同的方法在圖像中繪制，并修改圖層“不透明度”為80%，圖標(biāo)效果如圖1-26所示。使用相同的方法完成相似的制作，將相關(guān)圖層編組，重命名為“狀態(tài)欄”，如圖1-27所示。

07 使用“矩形工具”在狀態(tài)欄下方創(chuàng)建任意顏色的矩形，如圖1-28所示。雙擊該圖層縮覽圖，彈出“圖層樣式”對(duì)話框，選擇“描邊”選項(xiàng)設(shè)置參數(shù)值，如圖1-29所示。

08 繼續(xù)選擇“內(nèi)陰影”選項(xiàng)設(shè)置參數(shù)值，如圖1-30所示。選擇“漸變疊加”選項(xiàng)設(shè)置參數(shù)值，如圖1-31所示。

09 選擇“投影”選項(xiàng)，設(shè)置參數(shù)值，如圖1-32所示。設(shè)置完成后單擊“確定”按鈕，設(shè)置“填充”為0%，得到的圖像效果如圖1-33所示。

10 打開(kāi)“字符”面板設(shè)置參數(shù)值，并使用“橫排文字工具”在畫(huà)布中輸入相應(yīng)的文字，如圖1-34、圖1-35所示。雙擊該圖層縮覽圖，彈出“圖層樣式”對(duì)話框，選擇“投影”選項(xiàng)設(shè)置參數(shù)值，如圖1-36所示。

11 設(shè)置完成后單擊“確定”按鈕，得到的圖像效果如圖1-37所示。使用相同的方法在畫(huà)布底部創(chuàng)建形狀并添加圖層樣式，如圖1-38所示。

12 使用“直線工具”在矩形上方創(chuàng)建黑色的直線，如圖1-39所示。打開(kāi)“圖層樣式”對(duì)話框，在彈出的“圖層樣式”對(duì)話框中選擇“描邊”選項(xiàng)設(shè)置參數(shù)，如圖1-40所示。

13 設(shè)置完成后單擊“確定”按鈕，修改圖層的“不透明度”為60%，得到的圖像效果如圖1-41所示，“圖層”面板如圖1-42所示。使用相同的方法完成另一條直線的制作，并將相關(guān)圖層編組，重命名為“分割線”，如圖1-43所示。

14 使用相同的方法輸入文字并添加圖層樣式，得到底部按鍵效果，如圖1-44所示。

15 使用相同的方法完成其他按鍵的制作，如圖1-45所示。使用“矩形工具”創(chuàng)建任意顏色的形狀，如圖1-46所示。

16 打開(kāi)“圖層樣式”對(duì)話框，彈出“圖層樣式”對(duì)話框，選擇“描邊”選項(xiàng)設(shè)置參數(shù)值，如圖1-47所示。選擇“內(nèi)陰影”選項(xiàng)設(shè)置參數(shù)值，如圖1-48所示。

17 選擇“漸變疊加”選項(xiàng)設(shè)置參數(shù)值，如圖1-49所示。設(shè)置完成后單擊“確定”按鈕，得到的圖像效果，如圖1-50所示。

18 反復(fù)復(fù)制該形狀，選擇“移動(dòng)工具”，按下Shift鍵的同時(shí)拖動(dòng)該形狀，將所有形狀拖移至合適的位置，其效果如圖1-51所示。

19 整理圖層，將相關(guān)圖層編組，“圖層”面板如圖1-52所示。界面的最終效果如圖1-53、圖1-54所示。