扁平化設計:高光、陰影

6.jpg
有了基本雛型後可以開始添加細節,從放大鏡icon的優化開始。如果有上過素描課、老師會說明高光和陰影的重要性,扁平化設計將視覺元素抽掉很多,高光、漸層、陰影等基本組成因此變得更重要,更需要注意每 1px 的細部處理。

  1. 將放大鏡icon的顏色改為淺灰。
    1.jpg

  2. 設定高光,使用圖層樣式的內陰影,色彩為#ffffff純白。
    2.jpg

  3. 設定陰影。注意「尺寸」為0,陰影才不會模糊有毛邊。如果這個icon尺寸較小,可以只做到這個步驟就算完成。
    3.jpg

  4. 如果這個icon尺寸較大,需要更多細節時,可以設定漸層覆蓋。下方設定為90%。
    4.jpg

  5. 上方設定成95%。
    5.jpg

  6. 設定漸層後,icon的高光轉折被柔化,看起來不會太明顯。
    6.jpg

以上是很簡單扁平化設計,屬於邊緣銳利的高光和陰影作法。對於小型 icon 做到這個步驟就可以了。今天是星期日,我也只打算 PO 到這個地步…扁平化你好、扁平化再見…

更多文章

wave
Nest Pastiche 製作過程

這是模仿 Nest 煙霧警報器 做的 icon,打洞實在被難倒了沒辦法完全一樣,只能做個差不多相似的樣子出來。打洞排列怎麼做可以參考這篇:製作螺旋圓點花紋的方法 ,不怎麼好做就是了。

快速製作圓形漸層icon


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

自製簡易 icon 教學


雖然網路上有很多多多免費的 icon 讓人使用,但大半都禁止「商業用途」,要馬就掏錢買一套、要馬就自己畫。介紹一下我愛用的自動筆和筆記本,以及最基本的 icon 從鉛筆草圖一直到電腦完稿的流程。(相信念廣告設計的學生對這過程非常熟悉。

彩色圓環試作


我在 QQ 優設 12 群掛著,有時候會看到他們 PO 一些問題求救,很有意思,會試著想要怎麼做得更漂亮,從中學到很多。這個圓環需要用到 AI 和 PS,看起來滿適合運用在技能值或數據視覺化。

Akane Lee

Akane Lee

內心戲小劇場超多!每個事件背後,都有無數個為什麼,天天和自己的腦內聲音吵架。

Comments

wave
comments powered by Disqus

Press ESC to close