Illustator制作網頁超酷的長陰影效果

UI設計教程   /  UI圖標教程     

uimaker
UI設計師 / 江蘇 南京

來源:網絡   作者:佚名

隨著扁平化設計趨勢的日漸流行,尤其是在網絡世界里,接著脫穎而出的便是長投影的使用,特別是在小型UI元素圖標上。這些陰影有著特征性的水平斜向下45度角以及在靠近背景陰影處應用漸變。

這樣的處理并不算新穎,其實它一直被廣泛應用在攝影上,用于強調形狀,向觀看者傳遞別樣的情感。我們將向你演示用AI制作長陰影的兩種方法:一種使用路徑尋找器 ,另一種使用混合選項。

方法一:混合工具

第一步,繪制形狀


Illustator制作網頁超酷的長陰影效果,PS教程,思緣教程網


Illustator制作網頁超酷的長陰影效果,PS教程,思緣教程網

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

第二步,復制和移動


Illustator制作網頁超酷的長陰影效果,PS教程,思緣教程網

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

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

第三步,混合選項


Illustator制作網頁超酷的長陰影效果,PS教程,思緣教程網

接下來我們將使用混合工具來制作陰影。選擇混合選項后單擊這兩個圖標元素,我們將得到從頭到尾連成一串的圖標元素。

混合工具里有一個選項叫做,你可以設置一個大點的值來縮短元素間的距離制造一種裸眼無法識別的平滑過渡效果。

第四步 改變顏色 漸變


Illustator制作網頁超酷的長陰影效果,PS教程,思緣教程網

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

 收藏
捕鱼欢乐炸送炮灵