設計彌散陰影效果海報圖片的PS實例教程

之前發(fā)了兩篇彌散陰影的教程，從新手版到進階版，同學們應該都學會了，今天來最后一發(fā)教程，除了復習一下Photoshop 做彌散陰影的方法，學完彌散陰影就通關了。一起來跟上趨勢。

目錄

什么是彌散陰影?

用Photoshop來設計的方法：

使用矢量圖形技術

使用圖層下拉陰影技術

使用智能對象技術

用Sketch來設計的方法

用HTML/CSS來設計的方法

HTML/CSS參考案例

可供參考的創(chuàng)意UI設計

什么是彌散陰影？

具體的英文名稱尚未決定，但這種技術一般被稱為彌散陰影(英: Diffuse Shadow)，與普通的陰影技術相比，他能表現(xiàn)出更有深度的感覺。雖然說是從平面設計中衍生出來的一種技術，但也反映出了現(xiàn)在的設計潮流。

Photoshop 的設計方法

使用Photoshop，你可以用多種方法輕松地實現(xiàn)彌散陰影效果。這一次，我們來簡單的介紹一下利用【矢量圖形】【圖層下拉陰影】【智能對象】來實現(xiàn)效果吧。

01. 使用矢量圖形技術

這次介紹的Photoshop中的方法，也許是最簡單的方法，也是最容易編輯的方法。首先讓我們準備好需要添加效果的圖像。作為演示，我使用下面的UI組件作為案例。

選擇【長方形】工具，創(chuàng)建一個與圖像相同大小的長方形。在這里，我設定的是750 x 1334 px。選擇【長方形】工具后直接點擊畫布，你可以看到彈出一個讓你設置大小的對話框，輸入數(shù)值就可以了。

將畫好的形狀圖層放置在UI的下面，然后在兩個圖層之間按住Option【MAC】/Alt【s】鍵，然后單擊。

復制剛剛做好的形狀圖層，把圖層命名為【陰影】。然后自由變換【快捷鍵CTRL+T】，寬高調整為原來的80%，然后底部居中對齊。

然后選擇【移動工具】，選擇剛剛變小的圖層，向下移動20px。你可以選中這個圖層，shift鍵按住不放，然后按兩下向下箭頭，一次是移動10px。

然后選擇【窗口】菜單中的【屬性】，讓我們來調整【模糊】的值，應用的值的大小取決于你設計的圖像大小，在這次案例中，我們選擇66px。

應用模糊后，我們再將圖層的不透明度設置為80%，就大功告成了。

然后我們選中這三個圖層，右鍵給他們編一個組【CTRL+G】。這樣我們就可以同時移動多個圖層了。