扁平化設計:斜陰影

flat-斜陰影.png
常常在扁平化的 icon 上看到斜陰影效果,要製作這個效果有很多種方式。網路上的教學文也很多種,我就挑了比較簡單的作法來實作順便 PO 自己的作法了。可以結合厚度、讓 icon 更潮。(沒辦法、現在就是流行扁平化、厚度、斜陰影。)

作法一

  1. 如果放大鏡上的icon有任何半透明或色彩增值的設定,請改為 100%、正常模式,以免加上斜陰影後混色。
    1.jpg

  2. 使用矩型工具拉一個長方形在放大鏡下方。
    2.jpg

  3. Ctrl+T 變形,旋轉黑色方塊至想要的陰影角度。如果陰影比 icon 大,要微調到剛好切齊放大鏡邊緣。
    3.jpg

  4. 增加整個圓角矩形的遮色片,讓陰影在限定範圍裡。
    4.jpg

  5. 既然陰影是往右下方延展,代表光線從左上方照射,icon 左方不會出現任何陰影,所以將要遮住的部份圈選起來。(這步驟是我偷懶,正規一點的作法是拉貝茲曲線。)
    5.jpg

  6. 在遮色片上把要隱藏的部份塗黑。(我還是偷懶…)
    6.jpg

  7. 陰影也是會有漸層變化,使用漸層工具在遮色片上拉出黑白漸層。離放大鏡越近、陰影顏色越深。
    7.jpg

  8. 調整透明度,淡化陰影,看起來就會是個很自然的斜陰影了。
    8.jpg

作法二:如果icon圖樣比較複雜、或是文字需要製作斜陰影,可以採取這個作法。

  1. 複製一層放大鏡 icon、開新圖層。將兩個圖層選起。
    9.jpg

  2. 右鍵,選擇合併圖層。放大鏡 icon 使用圖層樣式的筆畫來製作厚度,斜陰影需將厚度也考量進去,所以用這種方式製作陰影層。
    10.jpg

  3. 色相/飽和度,明亮調至 -100,把陰影調黑。
    11.jpg

  4. 選中陰影層,按 Ctrl+T,出現變型框。
    12.jpg

  5. 使用鍵盤方向鍵,按一下 →、一下 ↓,按 enter 完成變形。
    13.jpg

  6. 同時按下 Ctrl + Shift + Alt + T ,會看到圖層快速增加,同時陰影層慢慢往右下角延伸。
    14.jpg

  7. 選取剛剛增加的圖層,選合併圖層。(可以按個 100 下直接讓圖層增加到想要的長度再來合併。)
    15.jpg

  8. 將陰影移到放大鏡下方。
    16.jpg

  9. 如果不喜歡圖層數量突然爆增,可以在陰影僅延伸一小段時便合併圖層,再複製一層陰影往右下角移動,同樣能把陰影加長。
    17.jpg

  10. 將兩個陰影合併成一個圖層。
    18.jpg

  11. 再複製一層陰影。
    19.jpg

  12. 重覆幾次複製陰影層、移動、合併的步驟,直到想要的長度。
    20.jpg

  13. 按住 Ctrl 點選圓角矩型,在陰影層上框出範圍。
    21.jpg

  14. 製作遮色片,讓陰影不會超出範圍。
    22.jpg

  15. 使用漸層工具,加強光影變化。
    23.jpg

  16. 調整圖層透明度。
    24.jpg

相信我好一陣子都不想寫扁平化的Photoshop教學文了,邊做邊截圖邊確認步驟邊打字好麻煩啊!有種步調一直被打亂的感覺(摔筆)。這 icon 上還有很多細節可以添加,看個人喜好囉!

Akane Lee

Akane Lee

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

Comments

wave
comments powered by Disqus

Press ESC to close