超火的彌散陰影全方位通關指南

分類欄目:經驗 - Photoshop教程

發布于 暫無評論

 

目錄

  1. 什么是彌散陰影?

  2. 用Photoshop來設計的方法:

  3. 使用矢量圖形技術

  4. 使用圖層下拉陰影技術

  5. 使用智能對象技術

  6. 用Sketch來設計的方法

  7. 用HTML/CSS來設計的方法

  8. HTML/CSS參考案例

  9. 可供參考的創意UI設計

什么是彌散陰影?

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

來源自愛設計http://www.giovls.tw/

Photoshop 的設計方法

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

01. 使用矢量圖形技術

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

來源自愛設計http://www.giovls.tw/

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

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

來源自愛設計http://www.giovls.tw/

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

來源自愛設計http://www.giovls.tw/

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

來源自愛設計http://www.giovls.tw/

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

來源自愛設計http://www.giovls.tw/

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

來源自愛設計http://www.giovls.tw/

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

來源自愛設計http://www.giovls.tw/

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

來源自愛設計http://www.giovls.tw/

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

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

來源自愛設計http://www.giovls.tw/

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

來源自愛設計http://www.giovls.tw/

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

來源自愛設計http://www.giovls.tw/

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

來源自愛設計http://www.giovls.tw/

03. 使用智能對象技術

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

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

來源自愛設計http://www.giovls.tw/

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

來源自愛設計http://www.giovls.tw/

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

來源自愛設計http://www.giovls.tw/

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

來源自愛設計http://www.giovls.tw/

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

來源自愛設計http://www.giovls.tw/

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

來源自愛設計http://www.giovls.tw/

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

來源自愛設計http://www.giovls.tw/

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

來源自愛設計http://www.giovls.tw/

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

來源自愛設計http://www.giovls.tw/

用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://www.giovls.tw/

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

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

來源自愛設計http://www.giovls.tw/

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

HTML/CSS參考案例

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

來源自愛設計http://www.giovls.tw/

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

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

來源自愛設計http://www.giovls.tw/

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

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

來源自愛設計http://www.giovls.tw/

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

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

來源自愛設計http://www.giovls.tw/

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

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

來源自愛設計http://www.giovls.tw/

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

可供參考的創意UI設計

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

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

來源自愛設計http://www.giovls.tw/

來源自愛設計http://www.giovls.tw/

來源自愛設計http://www.giovls.tw/

來源自愛設計http://www.giovls.tw/

來源自愛設計http://www.giovls.tw/

原文地址:photoshopvip