扁平化設計:斜陰影

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 上還有很多細節可以添加,看個人喜好囉!

不知道設計卡在哪?

👉 第一次來?從這裡開始

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

wave
進化吧!Mockup 展示圖

(裝了 Photoshop CC 2015 後一堆外掛都 GG 了,幸好最重要的幾個都活著。)

超簡單「擴增實境」自己做
超簡單「擴增實境」自己做

Apple 去年 6 月出了 Vision Pro,讓擴增實境這項技術瞬間又火紅起來。

我找到個非常簡單的擴增實境作法,簡單易上手、成品又酷又炫!

標示文件神器:specKing

之前推薦過的 馬克鰻 絕對可以說是一個好用的標示工具,但它止步太久沒有更新的功能,而且也開始收月費了,於是我重新尋找好用的工具,目前推薦 2 套:specKingAssistor PS 都是付費的 PS 外掛。

愛用的 Photoshop Plugins

12 Premium Photoshop Plugins for Designers 這篇文章提到 12 個好用的 Photoshop Plugins,有幾款功能重復,有些非買不可。來介紹一下我已經買了且覺得超好用的 PS 外掛…台灣買 Plugins 的風氣不太盛行,但如果能節省自己的工作時間增加效率,每一筆錢都花得非常有價值。(省下來的時間不要傻傻的跟 PM 說因為我自己掏腰包買了神兵利器所以可以塞給我更多工作,那段空檔是拿來充電用的!)

Akane Lee

Akane Lee

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

Comments

wave
comments powered by Disqus

Press ESC to close