扁平化設計是現在最流行的設計趨勢,比起擬物風,扁平化設計去除大部份的材質和光影變化,但仔細觀察,仍保有許多細節。無論是陰影、漸層、高光、立體感等,並不因「扁平」而隨意帶過。這個教學不太需要修圖技巧,只要會用「形狀圖層」就好。為了因應各種尺寸的 icon,我習慣盡可能用向量來製圖。
開啟Photoshop,建立一個512x512的圓角矩型,並複製一層。
圖層樣式,漸層複蓋。iOS預設光線都是由正上方往下打,所以上方色彩較淺,下方較深。
扁平化設計的漸層沒有一定的規則,如果在同色、僅需要深淺變化時,可以只調整HSB的B格數據。HSB的B指的就是「明度」,增加10%或減少10%,帶點淡淡的變化即可。
使用形狀工具繪製一個正圓型。
複製一個
路徑選取工具,按住Shift點取兩個圓,選擇排除重疊形狀。
圓環完成!
使用圓角矩型工具,畫出一個和圓環差不多粗細的長條方塊。
選取圓環和方塊,垂直居中對齊。
移動工具,按下Ctrl+T,轉個方向,變成放大鏡icon。
點選兩個圖層,垂直置中、水平置中,將放大鏡icon置於畫面中央。
icon 的雛型就算完成了,很簡單吧。之後將開始進行各種細節處理,對扁平化設計有興趣的人可以先跟著基本篇做出一個「搜尋」icon,未來共有高光、折頁、厚度、斜陰影 4 種作法皆由基本雛型延續。(反正我寫在 BLOG 上的教學都是很基本又很實用的技巧,很快就能學起來騙騙外行人好用。)