5種利用光線和陰影的技法

引導線網頁製作網提示您：凡是你目光所及光線和陰影無處不在。你看到的任何東西都反射回光線，也都或多或少產生陰影。光線和陰影幫助我們去感知我們的所見，並且幫助我們理解材質紋理、尺寸大小以及位置空間。所以，當我們試圖讓web頁面設計更加自然生動、栩栩如生的時候，對於光

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

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

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

但是你有疑問了，這些和web設計有什麼關係?

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

也許運用光線的最重要的一點就是要了解光是從**來的。光源的方向幾乎決定了高光和陰影投射的位置（雖然在web設計中你可以適當的調整一下規則）。如果你使用的是photoshop，使用「全域性光」可將所有的光照效果遵循同乙個光源方向。

在設計中（哪怕只是線性或徑向漸變）控制光源有助於為你的設計增添一種環境效果。當然也可以為設計新增乙個視覺焦點。

案例campaign monitor 運用乙個放射性的光線以表現一種太陽在頁面後公升起的效果。

icebrrg 運用光線讓**有種處於水面之下的感覺。

mike precious 使用了多處光源以增加視覺興趣點，並且風格上合（右上角的）工作燈聯絡起來。

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

引導線網頁製作網提示您：2、漸變在真實世界種，幾乎沒有什麼是單一色調的。光影無處不在。巧妙的漸變運用是讓設計具有深度並讓設計在螢幕之上變得真實生動的絕好方法。漸變的關鍵點是不要太過生硬。如果你使用photoshop，可在圖層樣式

在真實世界種，幾乎沒有什麼是單一色調的。光影無處不在。巧妙的漸變運用是讓設計具有深度並讓設計在螢幕之上變得真實生動的絕好方法。

漸變的關鍵點是不要太過生硬。如果你使用photoshop，可在圖層樣式中新增漸變。你可以隨意的設定漸變的起始點；如果你改變了元素的大小，那麼漸變也將重新調整。

案例nclud』s website 是漸變運用的經典教案，它告訴我們即使細微的漸變也可以在分割和組織內容版面上取得非常好效果的。

css ninjas 給人的第一眼印象是單調的顏色，但細看之下每種顏色都有著細微的漸變，使其變得具有質感。

引導線網頁製作網提示您：3、高光高光可以平衡陰影，並且需要在靠近光源的物體邊緣上使用。巧妙的設計之下，高光往往被忽略掉，因為你甚至沒有注意到它。雖然不是每一處設計都適用，但是乙個細小的高光往往可以讓介面在光亮度上顯得不同

高光可以平衡陰影，並且需要在靠近光源的物體邊緣上使用。巧妙的設計之下，高光往往被忽略掉，因為你甚至沒有注意到它。雖然不是每一處設計都適用，但是乙個細小的高光往往可以讓介面在光亮度上顯得不同。高光越「明晰」，介面呈現上就越顯光亮。

要細緻的體會高光，我們需要放大拉近觀察它。新增高光的乙個妙計就是在200%或者更大的放大比例下工作，因為原始尺寸之下你很難清楚地觀察你所做的一切。

案例icon dock 以及 newism 兩者都運用乙個半透明白色線條以給頁面元素的頂端邊緣新增乙個高光。幾乎難以察覺的效果卻讓設計十分出彩。

引導線網頁製作網提示您：4、陰影基礎就像漸變一樣，陰影也是web設計師手中常用**之一。如果運用恰當，陰影可以很好的增加立體感和質感。關鍵是不要用過火了。陰影的特徵取決與光線的方向和強弱，以及物體和陰影投射面之間的距離。光

就像漸變一樣，陰影也是web設計師手中「常用**」之一。如果運用恰當，陰影可以很好的增加立體感和質感。關鍵是不要用過火了。

陰影的特徵取決與光線的方向和強弱，以及物體和陰影投射面之間的距離。光線越強，陰影隨之越深和明顯；光線越弱，陰影隨之越柔和。

案例由於應用起來十分簡單，當陰影效果在網上嶄露頭角時，無數的**便開始選擇使用這種設計。如果經過巧妙運用的話，哪怕是很細微的一處設計也能讓空間感油然而生。

linkedin 在它側邊欄的底部新增了乙個非常細微的陰影，從而產生立體感。

google —— 也許是網際網路上最忙碌的頁面 —— 依然在它的搜尋頁上加入細微的陰影效果。

引導線網頁製作網提示您：5、陰影高階你可以用很多方式超越基礎的陰影效果，從而賦予乙個物體以三維空間感。拉長投影是一種在頁面上改變物體空間位置關係的很好的途徑。在下面這個例子中，同樣一聽可樂罐依靠陰影呈現出完全不同的空間位

你可以用很多方式超越基礎的陰影效果，從而賦予乙個物體以三維空間感。拉長投影是一種在頁面上改變物體空間位置關係的很好的途徑。

在下面這個例子中，同樣一聽可樂罐依靠陰影呈現出完全不同的空間位置感覺。

案例emotions by mike 很聰明的用陰影（以及光線）將乙個原本是平面的背景變成地面。

superkix 運用陰影讓運動鞋像是「浮」在**之上。當你改變頁面大小的時候，陰影也跟著改變，好像光線在移動一樣。

sofa 在光線和陰影的優秀運用下，白色背景上產生了地面的空間感覺。