快速製作圓形漸層icon


看到有人問這種圓型 icon 要怎麼做,覺得很有趣稍微思考一下原理,做了個簡易快速版本。比不上原版精緻、只是記錄思考方式。

中間的漸層色

畫一個圓,設圖層樣式,角度。

凹進去的部份

其實是用疊的,再畫一個半圓,設內陰影。

如果設了遮色片還是搞不定這個有內陰影的圓,看看「圖層遮色片隱藏效果」的選項有沒有勾起。

中心

畫一個圓,用圖層樣式設定,一層就能解決厚度和高光問題。



外框

用形狀工具、重疊兩個圓畫出圓環。同樣用圖層樣式設定,一層就解決厚度和高光。



陰影

複製需要陰影的那個圖層、高斯模糊,複製一層略縮小85%,調整透明度和重疊部份,陰影會比較立體。共有外框、中心、整體這 3 個部份要處理。


如果這顆 icon 小於 300x300px 、又不是主力 icon 只是個配角、且走扁平化風格的話,用圖層樣式一層解決高光和厚度是很方便快速的作法。但如果是擬物風就得把這幾層拆開獨立製作。比較有趣的部份是「角度漸層」,平時很少使用這種漸層方式、明明是凹陷的部份卻以疊加一個圓的方式製造假陰影也扭轉平時的作圖想法。果然多臨摹大師作品可以學到很多不同的思維方式。

Akane Lee

Akane Lee

如果設計師能和工程師順利合作,那麼老公也就能準時下班了吧!因此努力分享 UI 和 UX 方面的知識、技術、各種踩過的坑與心得。

Comments

wave
comments powered by Disqus

Press ESC to close