@Iamkikidong 隨著扁平化設計趨勢的日漸流行，尤其是在網絡世界里，接著脫穎而出的便是長投影的使用，特別是在小型UI元素和圖標上。這些陰影有著特征性的水平斜向下45度角以及在靠近背景陰影處應用漸變。
這樣的處理并不算新穎，其實它一直被廣泛應用在攝影上，用于強調形狀，向觀看者傳遞別樣的情感。

用Illustator制作長陰影

我們將向你演示用AI制作長陰影的兩種方法：一種使用路徑尋找器 ，另一種使用混合選項。

方法一：混合工具

第一步，繪制形狀

在開始前，我們需要準備好以下元素：圖標元素和背景圖形。此外，我們需要選擇扁平化設計風格的調色。后面有些樣例供你參考。

第二步，復制和移動

首先我們為圖標元素制作長陰影。為此，我們需要先復制圖標元素后進行原位粘貼（Ctrl+f）。然后將復制的元素沿X正軸或負軸方向（取決于我們想把陰影放在哪個位置）和Y的負軸方向移動相同數量的像素。（例如：x0=0 y0=0 > x1=+100 y1=-100）

這就是我們獲得長陰影那特征性的水平斜向下45度角或135度角的方法了。

第三步，混合選項

接下來我們將使用混合工具來制作陰影。選擇混合選項后單擊這兩個圖標元素，我們將得到從頭到尾連成一串的圖標元素。
混合工具里有一個選項叫做<指定步數>，你可以設置一個大點的值來縮短元素間的距離制造一種裸眼無法識別的平滑過渡效果。

第四步 改變顏色 漸變

混合后結果將是一道長長的陰影。如果我們對其進行顏色，透明度或者混合模式的設置，就會得到不同的效果。應用漸變也會得到比較生動有趣的結果。

第五步 裁剪陰影

最后，由于我們希望圖標看起來是連續的，所以要對超出的陰影進行剪裁。這個步驟非常簡單，將背景圖形復制后原位粘貼，并置于所有其他元素的最上方，全選后應用下<剪切蒙版>（Ctrl+7）。

最終效果

對圖標的背景圖形做同樣的操作后，就會得到我們要的效果啦。

方法二：路徑尋找器

使用路徑尋找器也可以制作出長陰影。這個方法可能會慢些但能做出更逼真的效果。

第一步

我們創建一個矩形，高度跟圖標元素的直徑一致。

第二步

（原文這里作者并未寫，以下是小編的方法，僅供參考）利用鋼筆工具勾勒出需要去除部分的形狀結合路徑尋找器將其去掉。然后對陰影部分進行顏色，透明度，混合模式跟漸變等的設置。

對背景圖形應用相同的方法就能得到最終的效果啦。

資源

Photoshop動作

另一個非常有用的方法是使用Photoshop動作來制作長陰影。我們為你找到一些非常便宜的PS動作，另外還有一個是Dlacrem制作的，可供免費下載。

Long Shadows PS Action, by Dlacrem

Long Shadow Generator, by Graphic Burger
Long Shadow Maker, by InventGroup
3D Long Shadows Generator Photoshop Action Set, by joelferrell

CSS3長陰影效果

CSS3的新功能允許我們自動為網頁制作出長陰影。下面是幾個非常有意思的開源鏈接。

Google Fonts CSS longshade Icon, by CSS Deck

有了Sass mixin 做長陰影跟做派一樣簡單。

Long Shadow Generator, by Codepen

Long Shadows Generator, by @heyimjuani

社交網站圖標套件下載

下載

樣例

Long Shadow Icons, by Georgi Davitaya

Hexagon TW&FB with Long Shadow, by Suleiman Leadbitter

Uuuuuuuuuuu, by Strahinja Todorovi?

Cinema4D

我們還可以用3D制作軟件例如Cinema4D，3Ds Max, Maya等來制作長陰影。在這種類型的圖像環境中我們通常使用光源來模擬一年或一天當中不同時刻的太陽光線。我們可以改變時區和季節，或把光變成橙色或藍色，看看不同環境光下的陰影變化。因此，我們可以用它來制作今天所講的長陰影效果以及控制元素的體積。雖然是使用3D環境來制作，我們依然可以用一些技巧配合扁平化的色彩來獲得有趣的效果。

原文：awwwards
翻譯：優設網翻茄匠@Iamkikidong

 
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計講座：每月邀請國內互聯網公司設計前輩及行業總監在群內及YY語音（YY頻道：15335158）分享實戰經驗。
設計微博：擁有粉絲量43萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：