這篇教程是向腳本之家的朋友分享PS結(jié)合AI制作超級(jí)跑鞋APP界面教程，教程真的很不錯(cuò)，值得大家學(xué)習(xí)，喜歡的朋友可以參考本文，來看看吧！

最終效果圖：

先上最終效果圖，我們這邊的超跑不是超級(jí)跑車，是超級(jí)跑鞋的意思~··

設(shè)計(jì)師除了要設(shè)計(jì)，還要多運(yùn)動(dòng)?。?/p>

1、首先你需要上網(wǎng)找一張NIKE鞋圖片，素材的顏色將被用作界面的主配色。

2、接下來，你需要用磁力套索工具，或者選區(qū)工具，把圖片周圍的白色扣干凈。

PS：如果你是個(gè)懶人的話，可以在花瓣直接搜NIKE PNG，

可以得到已扣完的耐克鞋(｡・`ω´･)，這么懶真的好嗎？

3、你需要建一個(gè)750*1334像素，分辨率為72的畫布，背景色值為：#1e1e1e

4、你需要找到正方形形狀工具，畫出狀態(tài)欄40像素和標(biāo)題欄88像素的長(zhǎng)方形,色值為#1a1a1a,然后畫出粉紅色的長(zhǎng)方形裝飾

5、畫一個(gè)內(nèi)容區(qū)域的正方形，尺寸如圖，色值還是為#1a1a1a，再給它添加黑色外發(fā)光，透明度30%，正片疊底

6、很多人說狀態(tài)欄那類找，一般我們都是用模板里面的素材，你沒有的話，請(qǐng)下載本教程里的源文件里面直接拿，(｡☉౪ ⊙｡)吶尼，你說你要自己畫？有懶不偷……那只好隨便你了~··

圖標(biāo)呢！可以去阿里矢量圖標(biāo)庫下載，記得下載矢量格式就是那個(gè)SVG或者AI格式，當(dāng)然你要自己畫也可以，至于如何畫圖標(biāo)可以參閱雪姐姐的其它教程~··本處不展開~··

6、接下來再百度圖片里搜一張NIKE的logo圖片，高清一些的，拖進(jìn)AI里，小黑箭頭點(diǎn)中后，會(huì)出現(xiàn)圖像描摹工具欄，下來箭頭后選黑白徽標(biāo)

7、描摹好后，點(diǎn)頂部菜單對(duì)象-擴(kuò)展，對(duì)象-取消編組，要重復(fù)取消編組到無編組可取消后，用小黑箭頭點(diǎn)一下畫板空白處，再點(diǎn)擊白色部分，delete掉所有的白色背景

接下去就可以拷貝到PS里去用了，粘貼的時(shí)候要選4個(gè)菜單中的最后『形狀圖層』

8、接下來用圓角矩形工具畫一個(gè)按鈕唄，尺寸如圖，給加個(gè)漸變的圖層樣式

9、復(fù)制按鈕圖層，錯(cuò)開一些位置，把窗口-屬性-蒙版面板打開，設(shè)置羽化值為8，透明度加一些，做個(gè)彌散投影，再給按鈕添加文字

10、我們把扣完的NIKE鞋放上圖調(diào)整下角度，然后用加深工具，在顏色部分，使用陰影模式擦2下，這樣鞋子顏色會(huì)更加妖艷一些，也是我們需要的效果

11、接下來我們打上價(jià)格，去阿里矢量圖標(biāo)庫找一些小星星或者小愛心，當(dāng)然你自己畫也很快，然后把5顆小星星CTRL+G成組后，在圖層文件夾上方新建一層，右鍵-剪切圖層，把最后1顆半星星涂白

12、最后我們來做COLOR和SIZE區(qū)域的分割線，其實(shí)也很簡(jiǎn)單，建一個(gè)高2個(gè)像素，寬和中心方形區(qū)域一樣寬的像線一樣的黑色長(zhǎng)方形路徑，再給這個(gè)線加一個(gè)淺灰色投影

13、關(guān)于此運(yùn)動(dòng)鞋的介紹文字，你去官網(wǎng)或者各種專賣店產(chǎn)品介紹里拷貝來即可，記得把品名加粗，MORE加粗，其它的就細(xì)細(xì)的好了，我用的冬青體，你愛用蘋方還是微軟雅黑隨你~··那個(gè)SIZE的尺寸小方塊也只是正方形加了一個(gè)粉紅描邊~··

耶~··這些你都做完了，你就得到了一張看起來比較概念的流行時(shí)尚的購(gòu)物車APP界面就做完了，接下來把它塞進(jìn)Iphone7的MOCK UP手機(jī)殼里就大功告成了！

沒有好看的手機(jī)殼的話，在本教程的源文件里我給你準(zhǔn)備了一個(gè)~··快去下載吧！(●'◡'●)ﾉ♥ 大家也可以試著做一些其它配色的NIKE鞋APP界面出來，期待大家的作品~··

學(xué)UI就到UEgood，好、省、快！即教軟件技術(shù)，又教設(shè)計(jì)思維！更多教程請(qǐng)點(diǎn)右邊頭像查看！UEgood必修班第六期4月16日開課，要集中式學(xué)習(xí)的抓緊時(shí)間上車！

教程結(jié)束，以上就是PS結(jié)合AI制作超級(jí)跑鞋APP界面教程，希望這篇教程能對(duì)大家有一定的幫助，喜歡的朋友不妨來嘗試一下吧！

最新評(píng)論