常常在扁平化的 icon 上看到斜陰影效果,要製作這個效果有很多種方式。網路上的教學文也很多種,我就挑了比較簡單的作法來實作順便 PO 自己的作法了。可以結合厚度、讓 icon 更潮。(沒辦法、現在就是流行扁平化、厚度、斜陰影。)
作法一
如果放大鏡上的icon有任何半透明或色彩增值的設定,請改為 100%、正常模式,以免加上斜陰影後混色。
使用矩型工具拉一個長方形在放大鏡下方。
Ctrl+T 變形,旋轉黑色方塊至想要的陰影角度。如果陰影比 icon 大,要微調到剛好切齊放大鏡邊緣。
增加整個圓角矩形的遮色片,讓陰影在限定範圍裡。
既然陰影是往右下方延展,代表光線從左上方照射,icon 左方不會出現任何陰影,所以將要遮住的部份圈選起來。(這步驟是我偷懶,正規一點的作法是拉貝茲曲線。)
在遮色片上把要隱藏的部份塗黑。(我還是偷懶…)
陰影也是會有漸層變化,使用漸層工具在遮色片上拉出黑白漸層。離放大鏡越近、陰影顏色越深。
調整透明度,淡化陰影,看起來就會是個很自然的斜陰影了。
作法二:如果icon圖樣比較複雜、或是文字需要製作斜陰影,可以採取這個作法。
複製一層放大鏡 icon、開新圖層。將兩個圖層選起。
右鍵,選擇合併圖層。放大鏡 icon 使用圖層樣式的筆畫來製作厚度,斜陰影需將厚度也考量進去,所以用這種方式製作陰影層。
色相/飽和度,明亮調至 -100,把陰影調黑。
選中陰影層,按 Ctrl+T,出現變型框。
使用鍵盤方向鍵,按一下 →、一下 ↓,按 enter 完成變形。
同時按下 Ctrl + Shift + Alt + T ,會看到圖層快速增加,同時陰影層慢慢往右下角延伸。
選取剛剛增加的圖層,選合併圖層。(可以按個 100 下直接讓圖層增加到想要的長度再來合併。)
將陰影移到放大鏡下方。
如果不喜歡圖層數量突然爆增,可以在陰影僅延伸一小段時便合併圖層,再複製一層陰影往右下角移動,同樣能把陰影加長。
將兩個陰影合併成一個圖層。
再複製一層陰影。
重覆幾次複製陰影層、移動、合併的步驟,直到想要的長度。
按住 Ctrl 點選圓角矩型,在陰影層上框出範圍。
製作遮色片,讓陰影不會超出範圍。
使用漸層工具,加強光影變化。
調整圖層透明度。
相信我好一陣子都不想寫扁平化的Photoshop教學文了,邊做邊截圖邊確認步驟邊打字好麻煩啊!有種步調一直被打亂的感覺(摔筆)。這 icon 上還有很多細節可以添加,看個人喜好囉!