設(shè)計(jì)彌散陰影效果海報(bào)圖片的PS實(shí)例教程

之前發(fā)了兩篇彌散陰影的教程，從新手版到進(jìn)階版，同學(xué)們應(yīng)該都學(xué)會(huì)了，今天來(lái)最后一發(fā)教程，除了復(fù)習(xí)一下Photoshop 做彌散陰影的方法，學(xué)完彌散陰影就通關(guān)了。一起來(lái)跟上趨勢(shì)。

目錄

什么是彌散陰影?

用Photoshop來(lái)設(shè)計(jì)的方法：

使用矢量圖形技術(shù)

使用圖層下拉陰影技術(shù)

使用智能對(duì)象技術(shù)

用Sketch來(lái)設(shè)計(jì)的方法

用HTML/CSS來(lái)設(shè)計(jì)的方法

HTML/CSS參考案例

可供參考的創(chuàng)意UI設(shè)計(jì)

什么是彌散陰影？

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

Photoshop 的設(shè)計(jì)方法

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

01. 使用矢量圖形技術(shù)

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

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

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

復(fù)制剛剛做好的形狀圖層，把圖層命名為【陰影】。然后自由變換【快捷鍵CTRL+T】，寬高調(diào)整為原來(lái)的80%，然后底部居中對(duì)齊。

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

然后選擇【窗口】菜單中的【屬性】，讓我們來(lái)調(diào)整【模糊】的值，應(yīng)用的值的大小取決于你設(shè)計(jì)的圖像大小，在這次案例中，我們選擇66px。

應(yīng)用模糊后，我們?cè)賹D層的不透明度設(shè)置為80%，就大功告成了。

然后我們選中這三個(gè)圖層，右鍵給他們編一個(gè)組【CTRL+G】。這樣我們就可以同時(shí)移動(dòng)多個(gè)圖層了。