本例是為智能手機(jī)設(shè)計(jì)個(gè)人首頁界面設(shè)計(jì)，首先明確整個(gè)設(shè)計(jì)風(fēng)格以簡(jiǎn)潔為主，結(jié)構(gòu)一目了然，在色彩運(yùn)用上運(yùn)用清爽的對(duì)比色系，給人視覺上帶來舒適的效果。

（1）按Ctrl+N組合鍵新建一個(gè)600×1077像素的文檔，然后執(zhí)行“視圖>標(biāo)尺”命令，在顯示的標(biāo)尺區(qū)域拉出參考線，效果如圖所示。

（2）設(shè)置前景色為（R:184，G:255，B:229），然后新建一個(gè)“圖層 1”，接著按Alt+Delete組合鍵用前景色填充該圖層，效果如圖所示。

（3）新建一個(gè)“組 1”，然后選擇“矩形工具”，接著在選項(xiàng)欄中設(shè)置“填充顏色”為（R:245，G:148，B:102）、“描邊”為“無顏色”，最后繪制出如圖所示的矩形。

（4）執(zhí)行“圖層>圖層樣式>投影”菜單命令，打開“圖層樣式”對(duì)話框，然后設(shè)置“混合模式”為“正?！薄ⅰ安煌该鞫取睘?0%、“角度”為90°、“距離”為4像素、“大小”為0像素，具體參數(shù)設(shè)置如圖所示，效果如圖所示。

（5）按Ctrl+J組合鍵復(fù)制出一個(gè)副本圖層，然后調(diào)整至合適的顏色和位置，效果如圖所示。

（6）導(dǎo)入光盤中的“素材文件>CH23>素材01-1.png”文件，然后將新生成的圖層更名為“圖標(biāo)”圖層，并設(shè)置該圖層的“不透明度”為50%，效果如圖所示。

（7）使用“橫排文字工具”在繪圖區(qū)域中輸入文字信息，然后按Alt鍵復(fù)制“矩形 1”的“投影”圖層效果到該圖層，接著調(diào)整相關(guān)數(shù)值大小，效果如圖所示。

（8）選擇“自定形狀工具”，然后在選項(xiàng)欄中設(shè)置“填充顏色”為白色、“描邊”為“無顏色”，單擊“形狀圖層”按鈕，接著選擇“形狀”中的“箭頭 2”圖形，最后在繪圖區(qū)域中繪制出如圖所示的圖形。

（9）按住Alt鍵復(fù)制Lily Allen文字圖層的“投影”圖層效果到該形狀圖層，效果如圖所示。

（10）打開光盤中的“素材文件>CH23>素材01-2.png”文件，然后將其拖曳到“手機(jī)UI界面設(shè)計(jì)”操作界面中，接著將新生成的圖層更名為“素材”圖層，如圖所示。

（11）在“組 1”的下方新建一個(gè)“組 2”，然后選擇“矩形工具”沿畫面上方標(biāo)尺繪制一個(gè)合適的白色矩形，接著按Alt鍵復(fù)制“矩形 1”的“投影”圖層效果到該圖層，效果如圖所示。

（12）打開光盤中的“素材文件>CH23>素材01-3.jpg和素材01-4.png”文件，然后將其拖曳到“手機(jī)UI界面設(shè)計(jì)”操作界面中，接著將新生成的圖層更名為“圖片”圖層和“按鈕”圖層，如圖所示。

（13）使用“橫排文字工具”（字體大小和樣式可根據(jù)實(shí)際情況而定）在繪圖區(qū)域中輸入文字信息，效果如圖所示。

（14）新建一個(gè)“圖層 3”，然后設(shè)置前景色為（R:187，G:182，B:179），接著使用“矩形選框工具”繪制一個(gè)合適的矩形選區(qū)，最后按Ctrl+J組合鍵復(fù)制出一個(gè)副本圖層并調(diào)整至合適的位置，效果如圖所示。

（15）新建一個(gè)“組 3”，然后選擇“橢圓工具”繪制一個(gè)合適的白色圓形，效果如圖所示。

（16）按Ctrl+J組合鍵復(fù)制出一個(gè)副本圖層，并將其移動(dòng)到“橢圓 1”圖層的下方，然后調(diào)整至合適的大小，最后設(shè)置該圖層的“填充”為20%，效果如圖所示。

（17）執(zhí)行“圖層>圖層樣式>內(nèi)陰影”菜單命令，打開“圖層樣式”對(duì)話框，然后設(shè)置“混合模式”為“正?！?、陰影顏色為白色、“角度”為90°、“距離”為2像素、“大小”為3像素，具體參數(shù)設(shè)置如圖所示，效果如圖所示。

（18）打開光盤中的“素材文件>CH23>素材01-5.jpg”文件，然后將其拖曳到“手機(jī)UI界面設(shè)計(jì)”操作界面中，接著將新生成的圖層更名為“頭像”圖層，最后將該圖層設(shè)置為“橢圓 1”圖層的剪貼蒙版，效果如圖所示。

（19）繼續(xù)打開光盤中的“素材文件>CH23>素材01-6.png”文件，然后將其拖曳到“手機(jī)UI界面設(shè)計(jì)”操作界面中，接著將新生成的圖層更名為“地標(biāo)”圖層，效果如圖所示。

（20）設(shè)置前景色為（R:245，G:148，B:102），使用“橫排文字工具”在繪圖區(qū)域中輸入文字信息，效果如圖所示。

（21）新建一個(gè)“點(diǎn)”圖層，然后使用“橢圓選框工具”繪制一個(gè)合適的圓形選區(qū)，并用白色填充，接著按Ctrl+J組合鍵復(fù)制出一個(gè)副本圖層，移動(dòng)至合適的位置，最后設(shè)置該副本圖層的“不透明度”為20%，效果如圖所示。

（22）在“組 2”的下方新建一個(gè)“組 4”，然后使用“矩形選框工具”沿畫面上方標(biāo)尺創(chuàng)建一個(gè)合適的選區(qū)并填充白色，效果如圖所示。

（23）執(zhí)行“圖層>圖層樣式>投影”菜單命令，打開“圖層樣式”對(duì)話框，然后設(shè)置“混合模式”為“正?！?、“不透明度”為15%、“角度”為90°、“距離”為4像素、“大小”為0像素，具體參數(shù)設(shè)置如圖所示，效果如圖所示。

（24）選擇“圓角矩形 2”，然后按下Ctrl+J組合鍵復(fù)制一個(gè)副本圖層，接著調(diào)整矩形位置，最后按照相同的方法復(fù)制更多矩形并調(diào)整，效果如圖所示。

（25）打開光盤中的“素材文件>CH23>素材01-07.jpg”文件，然后將其拖曳至當(dāng)前文件中并調(diào)整位置和大小，接著按下Ctrl+Alt+G組合鍵創(chuàng)建剪貼蒙版，效果如圖所示。

（26）繼續(xù)打開“素材01-8.jpg至素材01-12.jpg”文件，然后分別將其拖曳至當(dāng)前文件中并調(diào)整位置和大小，接著分別創(chuàng)建剪貼蒙版，最終效果如圖所示。

完

本文節(jié)選至

愛讀（iread360.com）原創(chuàng)讀物｜中文版Photoshop CC白金手冊(cè)

?