扁平化設計:基本雛型

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 上的教學都是很基本又很實用的技巧,很快就能學起來騙騙外行人好用。)

Akane Lee

Akane Lee

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

Comments

wave
comments powered by Disqus

Press ESC to close