扁平化設計:基本雛型

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

  1. 開啟Photoshop,建立一個512x512的圓角矩型,並複製一層。
    1.jpg

  2. 圖層樣式,漸層複蓋。iOS預設光線都是由正上方往下打,所以上方色彩較淺,下方較深。
    2.jpg

  3. 扁平化設計的漸層沒有一定的規則,如果在同色、僅需要深淺變化時,可以只調整HSB的B格數據。HSB的B指的就是「明度」,增加10%或減少10%,帶點淡淡的變化即可。
    3.jpg

  4. 使用形狀工具繪製一個正圓型。
    4.jpg

  5. 複製一個
    5.jpg

  6. 路徑選取工具,按住Shift點取兩個圓,選擇排除重疊形狀。
    6.jpg

  7. 圓環完成!
    7.jpg

  8. 使用圓角矩型工具,畫出一個和圓環差不多粗細的長條方塊。
    8.jpg

  9. 選取圓環和方塊,垂直居中對齊。
    9.jpg

  10. 移動工具,按下Ctrl+T,轉個方向,變成放大鏡icon。
    10.jpg

  11. 點選兩個圖層,垂直置中、水平置中,將放大鏡icon置於畫面中央。
    11.jpg

icon 的雛型就算完成了,很簡單吧。之後將開始進行各種細節處理,對扁平化設計有興趣的人可以先跟著基本篇做出一個「搜尋」icon,未來共有高光、折頁、厚度、斜陰影 4 種作法皆由基本雛型延續。(反正我寫在 BLOG 上的教學都是很基本又很實用的技巧,很快就能學起來騙騙外行人好用。)

不知道設計卡在哪?

👉 第一次來?從這裡開始

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

wave
快速製作圓形漸層icon


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

製作過程:Anna Sui Wallet


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

扁平化設計:厚度

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

Nest Pastiche 製作過程

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

Akane Lee

Akane Lee

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

Comments

wave
comments powered by Disqus

Press ESC to close