扁平化設計:高光、陰影

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
扁平化設計:厚度

flat-厚度.png
這張是 512 x 512 px 的 iOS Desktop icon 原始圖檔,可以看到在我放在 photoshop 分類中關於扁平化設計系列文章所製作出來的效果。高光線真的很重要,細細一條就能帶給人「厚度」和「轉折」的視覺效果。

Nest Pastiche 製作過程

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

快速製作圓形漸層icon


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

自製簡易 icon 教學


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

Akane Lee

Akane Lee

我是 Akane Lee,10 年 UI/UX 設計教學,帶過 1000+ 學員擺脫焦慮,找出人生方向。不只聊設計,也教你怎麼少繞遠路,摔坑也知道怎麼自己爬起來。

Comments

wave
comments powered by Disqus

Press ESC to close