提交需求
賽事與廣告咨詢合作,請(qǐng)?zhí)顚懶枨蟊韱?,我們?huì)在第一時(shí)間與您聯(lián)系!
2016開始火爆的描邊風(fēng)相關(guān)設(shè)計(jì)相信大家都已經(jīng)看爛了,這次來(lái)分享個(gè)簡(jiǎn)單實(shí)用的三步走描邊風(fēng)設(shè)計(jì)教程
對(duì)不起,我又跳票了~ APP啟動(dòng)頁(yè)的教程再等下一期吧,大家先看看這篇教程(*^__^*)
如果還不知道描邊風(fēng)是什么的可以先看下面幾張圖
以上這種又萌又漂亮的設(shè)計(jì)風(fēng)格就叫描邊風(fēng)~ 是起源于Dribbble火透半邊的MBE設(shè)計(jì)師
為什么現(xiàn)在才寫這篇文章呢? 因?yàn)槊柽咃L(fēng)很火啊,不跟著潮流寫教程豈不是OUT了~
那么廢話不多說,這是個(gè)超級(jí)簡(jiǎn)單的小教程,所以直接開工吧 so~
老規(guī)矩拿出寡人剛才提到的的羞羞案例來(lái)做示范:
第一步、這里以界面中的收聽圖標(biāo)來(lái)做示范,先畫個(gè)120*120的正圓形,色值#ffd401,得到一個(gè)圓形A
(為了方便新手跟著練習(xí)我這里示例形狀是最簡(jiǎn)單的正圓,朋友們可以像我案例中那樣用特殊形狀來(lái)設(shè)計(jì)也可以,效果會(huì)更好)
第二步、ctrl+j快捷鍵復(fù)制圓形A得到圓形B,然后設(shè)置圓形B的顏色填充為空,邊框4像素 色值#000000(邊框粗細(xì)具體自己把握,但顏色別隨便改,一般純黑是最合適的。另外記得把B圖層移到A圖層上方)
第三步、選中圓形A然后ctrl+T等比例縮放大小為110*110,注意縮放方向是往右下的方向。然后給圓形A添加個(gè)內(nèi)陰影樣式,設(shè)置混合模式為“柔光”、顏色#000000、角度-24、距離13
最后隨便放個(gè)純黑的三角形上去,噠啦~ 一個(gè)最最簡(jiǎn)單的實(shí)用型描邊風(fēng)圖標(biāo)就做出來(lái)啦?。。▎为?dú)展示的話,也可以像我這樣加一些+-。.*等多彩符號(hào)做個(gè)裝飾)
依次類推,我們可以發(fā)揮創(chuàng)意,運(yùn)用描邊風(fēng)的風(fēng)格設(shè)計(jì)出更多有意思的UI元素,并且完美運(yùn)用到APP中~~
本文只是希望帶大家入個(gè)門,其中的技巧還有很多的:比如顏色不能亂用,如果配不好色的可以用我下面提供的幾個(gè)色值,還有描邊的粗細(xì)要搭配好,最后當(dāng)然是希望聰明的你還能設(shè)計(jì)衍變出更多的風(fēng)格,都打開PS來(lái)動(dòng)動(dòng)手,讓我們愛上設(shè)計(jì)吧~?。ㄎ闹械暮芏嗑腊咐际蔷W(wǎng)上找的,感謝大家的分享,如果善用了您的作品請(qǐng)聯(lián)系刪除( ^_^ )/~~)
上圖這種彌散陰影效果,可看這篇教程:http://www.htnj110.cn/detail/87521.html
下一期的視頻教程預(yù)告:教你如何快速設(shè)計(jì)一個(gè)APP啟動(dòng)頁(yè) ↓ (已發(fā):http://www.htnj110.cn/detail/174402.html)
如果客官覺得本教程還行,歡迎關(guān)注并幫忙推薦哦↓
密碼登錄
大牛,別默默的看了,快登錄幫我點(diǎn)評(píng)一下吧!:)
登錄 立即注冊(cè)