扁平化設計:斜陰影
常常在扁平化的 icon 上看到斜陰影效果,要製作這個效果有很多種方式。網路上的教學文也很多種,我就挑了比較簡單的作法來實作順便 PO 自己的作法了。可以結合厚度、讓 icon 更潮。(沒辦法、現在就是流行扁平化、厚度、斜陰影。)
扁平化設計:厚度
這張是 512 x 512 px 的 iOS Desktop icon 原始圖檔,可以看到在我放在 photoshop 分類中關於扁平化設計系列文章所製作出來的效果。高光線真的很重要,細細一條就能帶給人「厚度」和「轉折」的視覺效果。
扁平化設計:折頁
翻頁效果也是很常見的扁平化小技巧,簡單幾個步驟就能完成了。請接著扁平化設計:高光、陰影
繼續做喔!
扁平化設計:高光、陰影
有了基本雛型後可以開始添加細節,從放大鏡icon的優化開始。如果有上過素描課、老師會說明高光和陰影的重要性,扁平化設計將視覺元素抽掉很多,高光、漸層、陰影等基本組成因此變得更重要,更需要注意每 1px 的細部處理。
扁平化設計:基本雛型
扁平化設計是現在最流行的設計趨勢,比起擬物風,扁平化設計去除大部份的材質和光影變化,但仔細觀察,仍保有許多細節。無論是陰影、漸層、高光、立體感等,並不因「扁平」而隨意帶過。這個教學不太需要修圖技巧,只要會用「形狀圖層」就好。為了因應各種尺寸的 icon,我習慣盡可能用向量來製圖。
各式按鈕背景:進階篇
這篇會教大家怎麼在按鈕外圍做一圈凹陷的陰影,為了教學需要、有故意將效果做得誇張些。如果知道原理了、記得把數值調小一點比較自然。請接續各式按鈕背景:基本篇
製作~
各式按鈕背景:基本篇
最常見的按鈕就是個長條型的色塊,配上文字說明讓使用者知道點擊這個色塊能達到什麼目的。讓這個色塊擁有像現實生活的光影變化,在視覺上更顯精緻。可接著各式按鈕作法:文字篇
的步驟接著做。
各式按鈕作法:文字篇
在 App 裡,許多操作方式都需要透過「按鈕」,本篇將介紹如何在Photoshop作出各種樣式按鈕上的「文字」。包含立體凸起、或是凹陷的質感。按鈕本身的作法也有很多種表現形式,將另開一篇專講背景製作。