扁平化設計:厚度

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

請接續之前的扁平化設計系列文章繼續做下去喔!

  1. 使用直接選取工具,圈選下方 4 個錨點。
    1.jpg

  2. 按住 Shift,將錨點向上方移動。露出來的灰色部份就是這個 icon 的厚度,依個人喜好決定。
    2.jpg

  3. 將厚度改成較深的顏色,可以使用 HSB,S 飽和度減少 10、B 明度減少 20。這個作法可以保持同色系 icon 的一致感。
    3.jpg

  4. 因為剛才調整圓角矩型的尺寸,所以要將放大鏡重新設定水平置中。
    4.jpg

  5. 為了凸顯厚度轉折,加上高光線會更立體。使用圖層樣式的內陰影。
    5.jpg

  6. 厚度層也可以加上淡淡的黑色陰影,我慣用的是這種作法:調整矩型方塊的尺寸,設定半透明的黑色漸層。
    6.jpg

小技巧:
如果 icon 很小、又不希望圖層數量太多,可以用「陰影」來假造厚度。
把混合模式設為「正常」,不透明度 100%、尺寸為 0。間距數值多寡代表 icon 的厚度,可自由調整。
7.jpg

把 Desktop icon 加上厚度是我最喜歡用的作法,平面式的 icon 略嫌單調,用這種方式馬上增加立體感與精緻度。當 iPhone 上都是平平的 icon 時,有厚度的 icon 會非常搶眼,大概因為透視感和其他都不一樣吧…扁平化設計其實很方便使用形狀圖層向量製作,不管怎麼放大縮小都不會耗損模糊,這對 Android 非常重要,螢幕尺寸真要命的好多種…

不知道設計卡在哪?

👉 第一次來?從這裡開始

下面這些文章,從不同角度整理那些容易被忽略的地方

wave
製作過程:Anna Sui Wallet


Icon Design:My Wallet 真的讓我拿到 Dribbble 帳號了,為了感謝大家的支持(喂)我把創作過程和思路放出來。簡單來說呢就是硬上、沒什麼華麗麗的技巧,不停加圖層加高光加陰影…畢竟這是我第一顆刻這麼細的擬物風 icon,之前都在接案公司工作、哪來 30hr 的時間慢工出細活。(大概是做習慣 iPhone 和 Android 的 App UI,凡是製圖我都優先考慮向量格式,即使這 icon 不可能上架,我還是做成向量格式,至少邊緣乾淨銳利漂亮。)Dribbble:ANNA SUI wallet

扁平化設計:基本雛型

11.jpg
扁平化設計是現在最流行的設計趨勢,比起擬物風,扁平化設計去除大部份的材質和光影變化,但仔細觀察,仍保有許多細節。無論是陰影、漸層、高光、立體感等,並不因「扁平」而隨意帶過。這個教學不太需要修圖技巧,只要會用「形狀圖層」就好。為了因應各種尺寸的 icon,我習慣盡可能用向量來製圖。

Nest Pastiche 製作過程

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

快速製作圓形漸層icon


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

Akane Lee

Akane Lee

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

Comments

wave
comments powered by Disqus

Press ESC to close