目錄

1. 什么是彌散陰影？

2. 用Photoshop來設(shè)計的方法：

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

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

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

6. 用Sketch來設(shè)計的方法

7. 用HTML/CSS來設(shè)計的方法

8. HTML/CSS參考案例

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

什么是彌散陰影？

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

Photoshop 的設(shè)計方法

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

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

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

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

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

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

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

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

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

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

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

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

‍‍

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

用Sketch來設(shè)計的方法

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

需要注意的有兩點：

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

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

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

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

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

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

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

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

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

HTML/CSS參考案例

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

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

Apple TV上專供的海報設(shè)計效果，還能根據(jù)鼠標的反應(yīng)來動。

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

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

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

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

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

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

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

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

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

那么，一起來享受設(shè)計的樂趣吧~我們兩周后再見~