人往高处走，水往低处流: 5種在設計中應用光線和陰影的簡單技法

2011年5月27日星期五

http://www.inspirr.com

凡是你目光所及——光線和陰影無處不在。你看到的任何東西都反射回光線，也都或多或少產生陰影。光線和陰影幫助我們去感知我們的所見，并且幫助我們理解材質紋理、尺寸大小以及位置空間。

所以，當我們試圖讓Web頁面設計更加自然生動、栩栩如生的時候，對于光線和陰影的透徹理解就顯得相當重要了。以下5種利用光線和陰影的技法讓你的頁面得以重塑，使它們在屏幕上變得引人注目。

光線和陰影的快速解析

在下面這個簡單的圖例中，我們可以看到，光源從畫面左上方投射過來，高光在光線最強的那一面上，而陰影則落在離光源最遠的那一面。在這張圖片中，通過光和影的表現，我們得以了解物體的外觀和紋理質感。

但是你有疑問了，這些和Web設計有什么關系？

如果你正嘗試投身入豐富、真實的界面和網站設計，那么光線和陰影無疑是你的良師益友。同樣的，許多傳統藝術家運用此法讓筆下所畫之物躍然紙上，你也可以利用光影讓你的設計空間感十足并博得人們的視覺興趣點。讓我們開始吧。

1、使用光源

也許運用光線的最重要的一點就是要了解光是從哪里來的。光源的方向幾乎決定了高光和陰影投射的位置。如果你使用的是Photoshop，使用“全局光”可將所有的光照效果遵循同一個光源方向。

在設計中控制光源有助于為你的設計增添一種環境效果。當然也可以為設計添加一個視覺焦點。

案例

Campaign Monitor 運用一個放射性的光線以表現一種太陽在頁面后升起的效果。

Icebrrg 運用光線讓網站有種處于水面之下的感覺。

Mike Precious 使用了多處光源以增加視覺興趣點，并且風格上合工作燈聯系起來。

Deaxon在其logo背后運用一個細微的光源，起到了突出logo視覺效果的作用。

人往高处走，水往低处流