@喪心病狂十六夜貓?：之前發了兩篇彌散陰影的教程，從新手版到進階版，同學們應該都學會了，今天來最后一發教程，除了復習一下Photoshop 做彌散陰影的方法，還加上了HTML/CSS 的制作方法，附超多優秀案例，學完彌散陰影就通關了。一起來跟上趨勢！

1. 新手版：PS教程！簡單3步教你快速畫出時尚漂亮的彌散陰影》
2. 進階版：《超贊！一份簡單易上手的青春彌散陰影修煉手冊》
3. 正常版：《全面系統！GUI設計中如何做出有格調的投影？》

目錄

1. 什么是彌散陰影？
2. 用Photoshop來設計的方法：
3. 使用矢量圖形技術
4. 使用圖層下拉陰影技術
5. 使用智能對象技術
6. 用Sketch來設計的方法
7. 用HTML/CSS來設計的方法
8. HTML/CSS參考案例
9. 可供參考的創意UI設計

什么是彌散陰影？

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

Photoshop 的設計方法

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

01. 使用矢量圖形技術

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

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

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

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

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

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

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

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

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

02. 使用圖層的下拉【陰影】技術

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

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

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

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

03. 使用智能對象技術

到現在為止同樣的，我們創建一個長方形，不對原圖進行改動而應用效果。

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

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

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

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

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

這就是完成后的效果圖了。我們能夠實現不亞于其他技術所制作出來的深度了。

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

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

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

用Sketch來設計的方法

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

需要注意的有兩點：

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

使用HTML/CSS的設計方法

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

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

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

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

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

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

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

HTML/CSS參考案例

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

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

Apple TV上專供的海報設計效果，還能根據鼠標的反應來動。

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

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

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

這也是應用了box-shadow的一個簡單效果。

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

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

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

可供參考的創意UI設計

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

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

「優設七月份人氣最高的PS教程合集」

繪制漂亮的漸變圖標：
《PS教程！教你繪制超漂亮的漸變按鈕圖標》

Q版卡通形象：
《熱門教程！手把手教你把真人變成Q版卡通形象》

PS摳圖神器！
《PS摳圖神器！兩個實例幫你徹底掌握「調整邊緣」的逆天功能》

原文地址：photoshopvip

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量160萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com