光影怎樣處理？給你10個非常有效的建議！

最新 03-12

來源：http://www.zcool.com.cn/article/ZNjI0NDI4.html

作者：海空設計

你有沒有花時間觀察從一扇窗戶透過的陽光，看看燈光如何改變房間中物體的顏色並投下陰影？

沒有？我敢打賭。我們大多數人都習慣於看光和影子，以至於很少花時間去思考它們是如何工作的。但無論我們是否意識到它們，光和陰影都是我們每天都與之互動的視覺線索——它們給我們提供了關於形狀、距離、位置、質地以及其他身體和觸覺的信息。

使用光影設計：利弊兩面

關注現實生活中光影的相互作用能給我們帶來一些靈感，讓我們的設計看起來更逼真。除非你的地下室里有一台3D印表機，否則我們大多數人都只能在二維空間里進行設計。但我們都習慣了在三維空間中看到事物，有時會在日常生活中看到的東西和在紙上或屏幕上看到的東西之間產生視覺上的脫節。在你的設計中加入光和陰影元素，可以幫助瀏覽者縮小視覺上的差距，讓你的2D設計更加逼真，看起來幾乎是3D的樣子。

但是你在互聯網上肯定會注意到，光和陰影效果很容易做過頭。正如一名設計師在他的博客中所承認的那樣，在我們的現代世界裡，很容易添加一個又一個的效果，而不考慮它們對你的設計項目是否有必要或有益。

話雖如此，讓我們來看一些正反兩方面的觀點：

光和陰影可以增加你的設計的深度、尺寸、透視、現實主義和視覺感興趣。這可以同時吸引瀏覽者關注你的設計，使它看起來像是從頁面或屏幕彈出。但是過度的效果會讓一個好的設計看起來很業餘和俗氣。

總而言之，聰明地使用光影的秘訣包括記住兩件事：目的和微妙。首先確保你使用的任何效果具有特定的實用目的，並且對你的項目有意義，那麼採取「少即是多」的方法將其應用於你的設計。如果使用的是設計程序附帶的效果，則默認設置總是比實際更具戲劇性（特別是對於陰影）；不要依賴它們，你需要運用它們，使你的設計作品ka更柔軟、更輕、更微妙。

光和影的工作原理：

快速概述

在我們就如何將光線和陰影融入設計中提出建議之前，有助於對其解剖學有基本的了解。這是藝術家和攝影師為了創作光線充足的作品而學習的東西，但它也可以幫助平面設計師和網頁設計師創作逼真的光影效果。

在上面的圖表中，我已經指出了一些關鍵的術語。我們在這裡簡單地定義一下：

?光源：如果你看到的是陰影或高光，則必須有光源。聽起來這個很淺顯，但是在大多數的設計項目中（除了包括太陽、月亮、燈等的插圖），光源都不可見。然而，如果你確定一個假想光源的位置，並設定你的效果，看起來好像它們都是由同一光源引起的，你最終會得到一個更現實、更一致的外觀，而不是僅僅是一些隨機的特殊效果。

?高光：這是光線在物體上最亮的地方（離光源最近，面向光源）。

?陰影/核心陰影：這是物體最黑暗的部分（離光源最遠）。但是陰影並不是一團黑色的顏色，它們的色調有所不同。在陰影的最深處，物體完全背離光源，被稱為核心陰影。

?投射陰影：與核心陰影（在對象上）不同，這是由對象創建的。當物體本身擋住光源時，它會在它所在的表面投射陰影。投射陰影指向與光源相同的方向，就在物體的另一邊。

這是一個非常基本的概述，它將給你一個正確使用光和陰影的起點。現在，讓我們開始談正事;關於你一直在等待的設計提示：

01.使用顏色創建深度

色彩本身可以成為創造輕盈或黑暗幻覺的絕佳方式——無需訴諸預先包裝的效果。特別是將不同顏色的相同顏色分層，可以創建深度或距離的外觀。這是因為在我們的眼中，光亮漸漸褪色，暗色漸漸增強。

下面的插圖完美地展示了這個想法。注意山脈是如何從靠近前景的地方開始變暗的，但隨後變亮並且看起來像是在背景中迷霧般的距離。

這裡還有很多其他的燈光和顏色。設計師為每個面板選擇的色溫，對於增強對光線和黑暗的印象有很大作用。天空中細微的漸變也會產生不同時間和光線類型的印象（例如：日出的暖光與涼爽的白色月光）。談到漸變，下一個提示來談......

02.為背景圖添加漸變效果

在你的房子打開一盞燈，看看最近的牆壁…...這不是所有都是平坦的顏色，是吧？最靠近燈的部分可能看起來更亮或更暖，而你離燈越遠，它看起來就越黑。你可能會認為你在看一面牆，但仔細看，你可能會看到灰色、綠色、藍色或紫色的陰影。重點是很少有光線使物體或表面看起來像一個均勻的、不變的顏色。

創建這種動態顏色變化的一種方法，是在你的設計中添加一個漸變到背景或其他大區域。現在，漸變可能會讓你想起上世紀90年代的網站上一個可怕的多色背景，這使得文本不可能被閱讀——但這是一個糟糕的漸變案例。如果做得好，漸變可以添加一些微妙的顏色變化（如前面所提到的），幫助柔化/淡出陰影，或者在你的設計的某一特定區域（特別是徑向、圓形、漸變）中創建光線的外觀。

下面，一個網站的著陸頁面上的徑向漸變為多個目的服務。梯度的較輕部分使它看起來像一盞燈從上面照耀，並且也使有陰影的手機更可見。結合起來，這些效果使這裡的場景看起來逼真——看起來你可以伸手去摸那部手機，它有形狀和尺寸。同時也要注意右上角的高亮顯示，以及陰影，使手機有了3D外觀。

03. 使用高亮顯示來吸引注意力

閃閃發光的東西總是吸引你的目光，不是嗎？在設計中，亮點可以像一個微妙的聚光燈，使某些元素變得更加明顯——除了幫助設計項目看起來更真實，正如前面提到的。如果你想在你的設計中強調多個東西，一定要記得考慮你想像中的光源，讓你的亮點保持一致。

查看以下產品包裝上的「801」標誌的簡單高亮顯示。它只是線條的顏色略輕於主要顏色的數字，但它給設計的焦點提供了更多的可見性和視覺興趣。

04.陰影大師：陰影

陰影是物體上陰影的另一個術語，如我們在文章頂部定義的核心陰影。陰影可以賦予平面設計元素或文字的形狀和尺寸。

在這裡，一個平面的白色印刷標誌的紋理陰影使它看起來有分層和複雜的效果。

05.主陰影：投下陰影

記得文章前面的蘋果圖嗎？投影是蘋果本身遮擋光線而產生的陰影，從而在側面產生影子。陰影只是一種特定類型的投影，其中光源或多或少直接在頭頂上投射，這會在對象後面或下方投射陰影。這使得物體看起來像浮在表面之上。

從設計的角度來看，陰影可以幫助物品或信息「上升」到布局的頂部，使它們脫穎而出。它們對於提高淺色設計元素（尤其是文本）的可見性也很有用。例如：在這個網頁設計中，陰影有助於使特色內容更加突出。

陰影在各種設計項目中非常普遍，但也經常被濫用。典型的投影錯誤是把它們做得太大，太暗或太尖銳。在設計中使用陰影通常不應該讓瀏覽者思考：「哦，看，有一個影子！」相反，他們應該與設計的其餘部分無縫融合。

06.調整不透明度

在現實生活中，陰影不是不透明的，光線不是白色或黃色的平面，它們是透明的，在你的設計中它應該是一樣的。對於微妙而逼真的外觀，不透明度和透明度設置是應用效果時最好的朋友。從一個真正低調的應用程序開始，然後根據需要稍微構建它是一個很好的做法；這會使你不太可能過度使用它。

07.在字體設計中結合光與影，達成令人瞠目的字體排版效果

印刷字體可以通過添加光和陰影效果，使字體突顯或者不突顯。尤其是在文字排版設計中，這確實能讓這些文字以醒目的方式活躍起來。

以這個字體的標誌為例：它使用了高亮和陰影的字母用漸變來創建一個輪廓分明的3D外觀。下面還有一個漂亮的投影（注意一個假想光源從左上角開始的一致使用：主要的亮點落在字母的頂部和左邊，而投影點向下和向右，遠離光線，就像它應該的那樣）。一些微妙的紋理把一切都拉到一起。

08.更多版式陰影選項：嘗試凸起和嵌入式樣式

字體是一個你可以在陰影樣式中真正發揮創造力的地方。它們在很大程度上是很容易應用的（有些字體甚至帶有陰影樣式），並且可以給你的字體設計一個定製的外觀。讓我們再看兩個選項：

1）凸版：凸版是一種印刷工藝技術，它能在紙上（或其他材料的）表面上增加一種設計特徵（通常是文字）。這通常是用某種金屬印版來完成的。你可以用一些很好的陰影（在字母形狀的邊界之外）和高亮（在字母本身）上複製這種效果。

2）壓印：人們使用各種詞語來描述雕刻或壓入表面的文字。凸版印刷是一種常見的印刷技術，它使用金屬印版將設計（無論是否使用油墨）壓入厚紙中——但這個詞也經常用於複製這種外觀的數字效果。如這個標誌設計

陰影和高光被放置在相反的位置，就像一個浮雕的樣子：陰影在字母內部，高光在外，標記表面被按下的位置。

09.平面設計如何？

平面設計已經變成了一種經久不衰的潮流：從蘋果轉型到平板手機設計，再到谷歌的新平面標誌，至少在一段時間內，它似乎還會停留在這裡。平面設計的特點之一是缺乏表現深度，這通常意味著你不會看到很多陰影或高光。但是，如果你想保持平面設計的極簡主義，同時又添加一些動態的燈光或陰影，那該怎麼辦呢?設計師們一直在調整這一趨勢，以實現這一目標。以下是一些常見的方法：

?顏色：使用顏色變化或漸變可以增加維度感或光/陰影的交互作用，同時在技術上仍然堅持平面設計的概念。

這個404頁面設計層次更淺、顏色更深，以創建深度的外觀（這是我們在第1點討論的技術）。