目錄

1. 什么是彌散陰影？

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

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

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

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

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

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

8. HTML/CSS參考案例

9. 可供參考的創(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【windows】鍵，然后單擊。

復(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è)賹�圖層的不透明度設(shè)置為80%，就大功告成了。

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

到這里就全部都完成了，因?yàn)閼?yīng)用的是矢量圖層，所以數(shù)值是隨時(shí)都能變化的。你也可以自由定制一個(gè)屬于你的優(yōu)秀設(shè)計(jì)。

‍‍02. 使用圖層的下拉【陰影】技術(shù)

‍‍

和之前一樣，我們先創(chuàng)建一個(gè)和需要添加效果的圖層一樣大小的矢量圖層。這樣我們?cè)趹?yīng)用各種效果的時(shí)候就不會(huì)影響到原圖了。

然后我們復(fù)制形狀圖層，將圖層命名為【陰影】，然后自由變換寬高調(diào)整為原來(lái)的80%地步居中對(duì)齊，到此都是和之前一樣。然后我們雙擊這個(gè)圖層，打開(kāi)圖層樣式界面。選擇【陰影】效果，設(shè)置參數(shù)如下。

然后將圖層不透明度改成80%就可以了。

這就是完成效果。這種技術(shù)，不管是形狀層還是圖像層都可以一一對(duì)應(yīng)的適用。

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

到現(xiàn)在為止同樣的，我們創(chuàng)建一個(gè)長(zhǎng)方形，不對(duì)原圖進(jìn)行改動(dòng)而應(yīng)用效果。

首先在圖層面板上，選中長(zhǎng)方形圖層和圖像圖層，然后右鍵，選擇【轉(zhuǎn)換為智能對(duì)象】，通過(guò)這種方法，你也可以在保持原本圖像的基礎(chǔ)上（不破壞原圖）來(lái)進(jìn)行編輯了。

復(fù)制你創(chuàng)建的智能對(duì)象，然后放在下面，將圖層命名為【陰影】。然后選擇圖層樣式中的【顏色疊加】，選擇【黑色#000000】不透明度100%。

然后自由變換【快捷鍵CTRL+T】，寬高調(diào)整為原來(lái)的80%，然后底部居中對(duì)齊。

然后選擇【濾鏡】→【模糊】→【高斯模糊】，填上數(shù)值就可以了，在這個(gè)案例中，我們?cè)O(shè)置為65px。

選中這兩個(gè)同時(shí)創(chuàng)建的智能對(duì)象圖層，右鍵選擇【轉(zhuǎn)換為鏈接對(duì)象】，這樣就會(huì)防止移動(dòng)一個(gè)圖層時(shí)忘記移動(dòng)另一個(gè)了。

這就是完成后的效果圖了。我們能夠?qū)崿F(xiàn)不亞于其他技術(shù)所制作出來(lái)的深度了。

在選項(xiàng)設(shè)定中，如果將【顏色疊加】效果隱藏起來(lái)，你還能創(chuàng)建一個(gè)反映出圖像色調(diào)的陰影效果。

似乎有些難以理解，但你能看到圖像下半部分的黃色從陰影中表現(xiàn)出來(lái)了。

下面是這三種效果制作的三張圖片并列在一起的效果。不管是哪一種技術(shù)都能很好的表現(xiàn)出彌散陰影。

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

接下來(lái)介紹的是利用和Photoshop具有相同人氣的設(shè)計(jì)工具sketch，來(lái)制作彌散陰影效果的方法。

需要注意的有兩點(diǎn)：

一方面，在應(yīng)用陰影效果的大小時(shí)要注意按住Option/Alt鍵。另一方面，你可以為陰影稍微添加一點(diǎn)顏色。具體操作方法請(qǐng)看下面四分鐘的視頻：https://youtu.be/IbtFSbUkw7k（由于是HTML 5播放器無(wú)法下載，大家自備梯子）

使用HTML/CSS的設(shè)計(jì)方法

利用CSS的box-shadow屬性，可以實(shí)現(xiàn)具有深度的陰影效果。

1.box-shadow：【水平方向移動(dòng)（px）】【垂直方向移動(dòng)（px）】【模糊半徑（px）】【擴(kuò)展】【顏色（#）】；

水平，垂直方向移動(dòng)是為了表現(xiàn)出光照過(guò)來(lái)的方向，從而確定陰影的位置。例如下面的案例，他就同時(shí)利用了多個(gè)box-shadow，讓陰影效果表現(xiàn)的更加真實(shí)細(xì)膩。

但是，如果你想在box-shadow上運(yùn)用懸停效果，又不會(huì)對(duì)頁(yè)面的載入產(chǎn)生影響，你可以參考這篇文章：How to animate “box-shadow” with silky smooth performance

源代碼：http://codepen.io/vipcrew/pen/AXoPNA

下面是各個(gè)瀏覽器的支持情況。我們可以看到，從IE11以后各個(gè)瀏覽器都開(kāi)始支持了，所以將來(lái)也會(huì)越來(lái)越多的應(yīng)用這項(xiàng)技術(shù)吧。

源代碼：http://caniuse.com/#feat=css-boxshadow

HTML/CSS參考案例

給每個(gè)UI組件添加陰影，可以給圖像一種更高的完成度。

源代碼：http://codepen.io/caphil/pen/NxMdRo

Apple TV上專供的海報(bào)設(shè)計(jì)效果，還能根據(jù)鼠標(biāo)的反應(yīng)來(lái)動(dòng)。

源代碼：http://codepen.io/mariusbalaj/pen/MaKRar

應(yīng)用了漸變效果的美麗按鈕，根據(jù)鼠標(biāo)移動(dòng)到上面的懸停效果來(lái)使用陰影。

源代碼：http://codepen.io/Mohsen-Khakbiz/pen/RaqaOG

這也是應(yīng)用了box-shadow的一個(gè)簡(jiǎn)單效果。

源代碼：http://codepen.io/mefynn/pen/XdyyKw

已被采用的材料設(shè)計(jì)，上面再現(xiàn)了6個(gè)種類的陰影效果，可以記錄下來(lái)作為速查筆記。

源代碼：http://codepen.io/sdthornton/pen/wBZdXq

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

這是在設(shè)計(jì)社區(qū)網(wǎng)站dribbble上可以為我們的靈感提供參考的創(chuàng)意UI陰影效果的設(shè)計(jì)。在這之中有很多都可以給我們留下深刻的映象，在今后的設(shè)計(jì)之中用上他們吧~

那么，一起來(lái)享受設(shè)計(jì)的樂(lè)趣吧~我們兩周后再見(jiàn)~