設(shè)計(jì)圓形漸變icon(5)
看到有人問這種圓型 icon 要怎么做,覺得很有趣稍微思考一下原理,做了個(gè)簡(jiǎn)易快速版本。比不上原版精致、只是記錄思考方式。
中間的漸層色
畫一個(gè)圓,設(shè)圖層樣式,角度。
凹進(jìn)去的部份
其實(shí)是用迭的,再畫一個(gè)半圓,設(shè)內(nèi)陰影。
中心
畫一個(gè)圓,用圖層樣式設(shè)定,一層就能解決厚度和高光問題。
外框
用形狀工具、重迭兩個(gè)圓畫出圓環(huán)。同樣用圖層樣式設(shè)定,一層就解決厚度和高光。
陰影
復(fù)制需要陰影的那個(gè)圖層、高斯模糊,復(fù)制一層略縮小85%,調(diào)整透明度和重迭部份,陰影會(huì)比較立體。共有外框、中心、整體這 3 個(gè)部份要處理。
如果這顆 icon 小于 300x300px 、又不是主力 icon 只是個(gè)配角、且走扁平化風(fēng)格的話,用圖層樣式一層解決高光和厚度是很方便快速的作法。但如果是擬物風(fēng)就得把這幾層拆開獨(dú)立制作。比較有趣的部份是「角度漸層」,平時(shí)很少使用這種漸層方式、明明是凹陷的部份卻以迭加一個(gè)圓的方式制造假陰影也扭轉(zhuǎn)平時(shí)的作圖想法。果然多臨摹大師作品可以學(xué)到很多不同的思維方式。
學(xué)習(xí) · 提示
相關(guān)教程
推薦教程
- ps設(shè)計(jì)UI應(yīng)用的立體圖標(biāo)實(shí)例
- PS鉆石UI圖標(biāo)教程
- Photoshop制作簡(jiǎn)約美觀的圖標(biāo)教程
- UI設(shè)計(jì)細(xì)節(jié)及技巧
- UI知識(shí),安卓和蘋果的界面設(shè)計(jì)之尺寸規(guī)范
- UI教程,設(shè)計(jì)一個(gè)調(diào)檔開關(guān)UI圖標(biāo)
- 播放器圖標(biāo),設(shè)計(jì)勃朗風(fēng)格音樂播放器圖標(biāo)
- ps設(shè)計(jì)一個(gè)真實(shí)的App圖標(biāo)教程
- 手機(jī)圖標(biāo),設(shè)計(jì)iPhoneES手機(jī)主題圖標(biāo)
- UI設(shè)計(jì)的PS配置技巧