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

用Illustator制作長陰影

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

方法一：混合工具

第一步，繪制形狀

在開始前，我們需要準(zhǔn)備好以下元素：圖標(biāo)元素和背景圖形。此外，我們需要選擇扁平化設(shè)計(jì)風(fēng)格的調(diào)色。后面有些樣例供你參考。

第二步，復(fù)制和移動(dòng)

首先我們?yōu)閳D標(biāo)元素制作長陰影。為此，我們需要先復(fù)制圖標(biāo)元素后進(jìn)行原位粘貼（Ctrl+f）。然后將復(fù)制的元素沿X正軸或負(fù)軸方向（取決于我們想把陰影放在哪個(gè)位置）和Y的負(fù)軸方向移動(dòng)相同數(shù)量的像素。（例如：x0=0 y0=0 > x1=+100 y1=-100）

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

第三步，混合選項(xiàng)

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

第四步 改變顏色 漸變

混合后結(jié)果將是一道長長的陰影。如果我們對其進(jìn)行顏色，透明度或者混合模式的設(shè)置，就會(huì)得到不同的效果。應(yīng)用漸變也會(huì)得到比較生動(dòng)有趣的結(jié)果。

第五步 裁剪陰影

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

最終效果

對圖標(biāo)的背景圖形做同樣的操作后，就會(huì)得到我們要的效果啦。

方法二：路徑尋找器

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

第一步

我們創(chuàng)建一個(gè)矩形，高度跟圖標(biāo)元素的直徑一致。

第二步

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

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

資源

Photoshop動(dòng)作

另一個(gè)非常有用的方法是使用Photoshop動(dòng)作來制作長陰影。我們?yōu)槟阏业揭恍┓浅１阋说腜S動(dòng)作，另外還有一個(gè)是Dlacrem制作的，可供免費(fèi)下載。

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的新功能允許我們自動(dòng)為網(wǎng)頁制作出長陰影。下面是幾個(gè)非常有意思的開源鏈接。

Google Fonts CSS longshade Icon, by CSS Deck

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

Long Shadow Generator, by Codepen

Long Shadows Generator, by @heyimjuani

社交網(wǎng)站圖標(biāo)套件下載

下載

樣例

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等來制作長陰影。在這種類型的圖像環(huán)境中我們通常使用光源來模擬一年或一天當(dāng)中不同時(shí)刻的太陽光線。我們可以改變時(shí)區(qū)和季節(jié)，或把光變成橙色或藍(lán)色，看看不同環(huán)境光下的陰影變化。因此，我們可以用它來制作今天所講的長陰影效果以及控制元素的體積。雖然是使用3D環(huán)境來制作，我們依然可以用一些技巧配合扁平化的色彩來獲得有趣的效果。

原文：awwwards
翻譯：優(yōu)設(shè)網(wǎng)翻茄匠@Iamkikidong

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