[PhotoShop] 手機(jī)UI設(shè)計教程

1、作者：rainoxu出處：最終效果圖：1、打開ps，新建一個文檔，300px*400px，填充黑色背景，依照下圖打好參考線。2、新建一個圖層，沿參考線做一個選區(qū)，填充上灰色，然后縮選1px，刪除多余的色塊，創(chuàng)建出邊框；也可以用描邊的方式來完成。3、復(fù)制邊框圖層，選擇邊框內(nèi)的部分，填充上背景色，此時我們便有了三個圖層：4、建立一個“頂部工具條”的序列，在這個序列中新建一個圖層，命名“綠色部分”，選取如圖矩形框，填充上白色。5、對綠色部分添加圖層樣式,做漸變疊加,設(shè)置如圖:6、效果如圖：27、使用同樣的方法，新建一個圖層，命名“黑色部分”，創(chuàng)建選區(qū)，填充

2、白色，然后使用漸變疊加，參考設(shè)置如下：8、“黑色部分”效果圖如下：9、將圖層“綠色部分”拉到圖層“黑色部分”之上，使用路徑工具勾出如圖區(qū)域。10、按ctrlenter 把路徑轉(zhuǎn)變?yōu)檫x區(qū)，按delete 刪除選區(qū)內(nèi)容，可以給左邊角綠色的部分加上“內(nèi)發(fā)光”效果，如圖。然后用同樣的方法完成右邊角的制作。11、接下來，做陰影效果。新建一個“綠色陰影”的圖層，填充一個合適的橢圓。12、對“綠色陰影”進(jìn)行高斯模糊，刪掉不需要的部分。13、建立“頭像顯示欄”的序列，新建一個圖層，命名“頭像”，做一個圓角矩形的選區(qū)，填充白色。14、對“頭像”圖層進(jìn)行描邊，顏色疊加和投影效果的添加，參數(shù)設(shè)置如下：15、效果如下

3、圖：16、再添加一張自己喜歡的圖片和需要的文字，適當(dāng)進(jìn)行效果調(diào)整。17、下面講講中間的水晶條的制作。建立“中間綠色條”序列，新建一個圖層，創(chuàng)建圓角矩形選區(qū)，填充白色，然后對這個圖層添加圖層式樣，包括邊框、陰影和過渡色的制作。18、效果已經(jīng)出來了，是不是有些感覺了？19、接下來做高光部分。新建一個高光圖層，畫個橢圓，用白色透明的方式填充。20、刪除多余的部分，效果就出來了。21、接下來再做一個條形高光。新建一個圖層，取名“高光條”，畫一個很細(xì)的長橢圓，填充白色，再對其進(jìn)行“動感模糊”，適當(dāng)調(diào)整位置及透明度即可。22、現(xiàn)在開始做鍵盤區(qū)。建立一個序列“鍵盤區(qū)”，新建圖層“底紋”。用路徑工具畫一條直線

4、，對直線進(jìn)行描邊。23、新建圖層“底紋二”，用路徑工具畫出一條弧線，描邊，然后復(fù)制圖層得到“底紋二副本”，水平翻轉(zhuǎn)調(diào)整到合適位置。24、分別對三個底紋圖層添加蒙板，并用漸變填充蒙板，做出漸隱的效果。25、用畫筆工具在交叉處打上亮點，3px的筆觸即可。26、新建一個圖層“按鍵1”，同樣使用路徑工具繪制形狀，存儲一下路徑，然后ctrlenter 轉(zhuǎn)換成選區(qū)，填充白色，添加圖層式樣，參數(shù)設(shè)置參照前面的步驟。27、參照高光條的做法，給按鍵加上高光效果。28、新建一個圖層“其它按鍵”，調(diào)出剛才存儲的路徑，變換一下位置，添加如下圖層樣式。得到效果圖如下：29、用同樣的方式做出所有的按鍵，合并所有灰色按鍵的圖層，加上蒙板，一個區(qū)