如何使用AI和PS製作長陰影圖標？

12-05

前方高能，大圖慎入

我們將向你演示用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

http://dribbble.com/shots/1136357-Hexagon-Twitter-with-Long-Shadow

Hexagon TWFB with Long Shadow, by Suleiman Leadbitter

Uuuuuuuuuuu, by Strahinja Todorovi?

Cinema4D

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

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

原文地址：特典：長投影製作教程+資源+案例大合集

AI是一款非常好的矢量圖形處理工具，所以用AI製作圖標的長陰影也是很簡單的。

圖片源於網路，侵刪。

接下來我就說說長陰影製作的原理，將需要突顯長陰影的圖標複製並移動到想要的位置，得出路徑之後，混合工具製作陰影，對顏色進行漸變。

例子參考@三聯。

1、首先，新建一個500x500px的文檔，用RGB或CMYK顏色模式隨你喜歡，屏幕72PPI就好，其它不用動，點確定。

2、選用星形工具創建一個半徑1：160px，半徑2：80px，角點數：8的八角星。（任意圖形都可以）

3、打開外觀面板，把八角星的描邊去掉。然後添加一個新填色。接下來把下面的白色填色更改成K=40的灰色。再接下來童鞋們注意了，我要變形了。點擊效果 &> 扭曲和變換 &> 變換，彈出變換效果面板。

在變換效果的移動下面的水平和垂直各增加0.5px，副本加500，點擊確定。效果如下圖。

4、把這個長陰影效果的圖形，拖進圖形樣式裡面去，這個樣式可以成為你的專屬圖形樣式，你再畫個五角星，圓形，什麼形狀的東東，再套用這個圖形樣式，馬上長陰影就出來了。

5、接下來我們要對剛才填充灰色的填色使用一個漸變效果。打開漸變面板，角度為135°，左邊為白色，右邊為K=40的灰色。得到效果如圖。你也可以調整你喜歡的漸變和角度。

6、打開外觀面板，為這個灰白漸變色不透明度選為正片疊底，然後再添加一個相加效果。效果&> 路徑查找器 &> 相加，不用理會彈出的對話框直接點確定。然後把相加和變換調換一下位置，如圖一樣，變換在上，相加在下。然後把這個圖形，拖進圖形樣式裡面去。

7、接下來用矩形工具為畫板加一個500x500px的正方形，C=70，M=15的天藍色，置於底層(Shift+Ctrl+[ )，然後複製副本(Ctrl+C &> Ctrl+F)再把矩形置頂(Shift+Ctrl+])，按Ctrl + A全選，進行剪切蒙版(Ctrl+7)。這個簡單的扁平化長陰影效果就完成了。

基本的原理就是這樣，當然還有複雜一點的，就是給每一個圖標加長陰影，效果可以看看下面的。

效果圖：

8、點擊文字工具，打上LONG SHADOW，選好字體，排好版。應用我們剛才存起來的圖形樣式。

9、把字體轉曲線(Ctrl + Shift + O)，取消群組，再應用剛才的圖形樣式，再群組起來。是不是有點接近了，可是還沒完。看起來陰影太強烈了是吧，選擇透明度面板，把挖空組打上勾。

10、最終效果如下

根據上面的例子悟出原理，製作就很方便啦~

對illustrator不熟悉的可以看看Illustrator CS6零基礎快速入門自學教程，從四個要點講解AI。

關注微信公眾號：yihuwang2012，更多軟體資源在等你~

以上，不足之處望海涵~

尼們都弱爆了。。。
我都是直接鋼筆繪好陰影區域然後填充漸變的。。。
?～(′ε｀　)

好吧，混合工具或者直接畫矩形然後剪切蒙版或者路徑查找器切割都可以。。。像我這種什麼都靠鋼筆繪的，純粹就是閑慣了。。。
混合工具就是複製一個，然後透明度調整，然後同時選中兩個，雙擊混合工具，就是那個好幾個圓的那個東西。。然後設好數目，選平滑顏色。。。如果後一個對象不是透明的話，可能要用剪切蒙版。。。
直接畫矩形就很簡單了，你畫個矩形，然後向下一層，然後旋轉，白箭頭拉拉錨點，然後剪切蒙版就可以了（或者用路徑查找器選交集或者切割然後把多餘的刪掉。。）。。。

至於鋼筆繪陰影。。。這個看著畫就可以了。。。漸變後面的顏色透明度調成全透明，調整好角度，然後調整好位置就ok了。。

一樓是AI做的，很不錯，但如果是陰影，我還是認為要選擇適當的位置，而不是隨便的找完角度直接拉個陰影就可以了。