發新話題

[繪圖]『教學』深入Photoshop陰影設計

[繪圖]『教學』深入Photoshop陰影設計


難道一個圖形上的陰影不能算作是陰影嗎?連接近都談不上。陰影的類型太多了,其中有很多在本文涉及不到,比如透視陰影。在這裡,我們將討論普通的老式陰影。


  基礎準備

  現在我們從簡單地複習基礎陰影開始。
  設計者對於陰影所犯的最嚴重的錯誤就在於他們只是把陰影當成一種效果,而不表示真實的內容。其實陰影是一種將物體從頁面上提升起來的方法。它欺騙你的眼睛,使你相信我們所看到的物體真的在頁面或屏幕的表面之上。當你看到一頁紙象真的一樣有深度和尺寸時,那麼毫無例外,你肯定是看到了專業的陰影效果。設計者理解了陰影的全部含義。
  陰影還和光有關。當光線落在一個三維物體上時就形成了陰影。但是,除非你將一個300瓦的白光燈泡照在這個物體上,否則你就不可能創造出象大多數圖形程序中默認設置那樣的陰影。





  以上三個完全相同的圖像,只有陰影有所變化。請注意默認的陰影,在底部的例子中,是如何使球變平成為一個紐扣的。
  看看上面的3個蘭色球。最後一個圖像是用默認陰影創建的。當它沒有陰影時看起來更像一個球。實際上,這個陰影把它變平了,使它看起來更像是一個紐扣了。我想如果你使用一個白光燈,在幾乎接觸到球的位置照射,可能也會得到這個效果,但是肯定不會有其它情況能夠造成這種效果。
  請注意在最上面的那個球以及中間的那一個。現在我們所見到的是我們的眼睛可以適當轉化的效果。最上面的球好像是在離表面較遠的地方漂浮,中間的球好像是在表面上一點點。但是並不僅僅是與表面的距離在創造著幻象,距離物體較遠的那個陰影好像色彩較淺形狀較大。球離表面越近,陰影就越明確,並且有點變形。
  根據我的意見,如果你有興趣創造生動的陰影,如果你想使用陰影,那麼你就應該開始觀察:光和陰影是如何起作用的;當光較近時,陰影看起來什麼樣?光線柔和時,陰影又是什麼樣?
  如果你真想提高自己的藝術水準,就應該花些時間從傳統藝術領域中學習光線的原理。我們有一些過濾器,除了跳舞之外,它們什麼都能做,但是它們又總是不很靈敏。如果你理解了光線工作的原理,你就能夠使用程序和插件的無窮威力,創造出令所有人都歎服的作品。花費的時間是非常值得的。
  最後,即使你的興趣還沒有達到「藝術」的範圍,下一次你需要增加一個陰影的時候,也請你停下來。停下來問問你自己,你想要做到什麼。如果答案是你想要做出一些「看起來更有趣的東西」,那麼你就是在犯錯誤。如果你的回答是:希望通過使用從頂端直射到一個白色表面上的光源,使圖像看起來是一個三維圖像...
那麼你可能就快要創造出偉大的效果來了。
  現在我們繼續前進,看看如何處理陰影。


Photoshop陰影設計基礎

  Photoshop陰影已經發生了一些變化,下面的內容只適用於
Photoshop 6。
  層類型窗口
  Photoshop
6中的層效果功能與5.5版本中的完全不同。實際上,它改變了很多以至於根本就不存在了。現在的Layer Effect(層效果)功能已經成為 Layer
Style(層類型)了。你可以通過菜單「選擇層->層類型」,然後選擇想要增加的類型。還可以在將要接受這個類型的層上雙擊從而快速到達層類型窗口。
   


  以上是Photoshop 6
層類型窗口。必須將你想要做的陰影類型選中並加亮才能到達窗口右側區域中的類型選項。
  這個窗口的外觀與以前的層效果窗口也是根本不同的,而且有點讓人搞不清楚。必須要從左側的欄,或叫類型欄中選擇你想要增加或編輯的效果,這樣才能使那個選擇的選項顯示出來。請看左邊那個層類型窗口的小小區域。請注意Drop
Shadow(下拉陰影)是如何選中並加亮的,這樣才在屏幕的右側帶出了下拉陰影的選項。
  也可以一次增加或編輯多個類型。類型的數目增加,各個類型的選項數目也在增加。
  但是對於下拉陰影的原則仍然是一樣的,這才是我們今天的重點。有一些名稱發生了變化。Size 代替了Blur,Spread
代替了Intensity。還有兩個新功能:第一,你可以向陰影中加入噪聲,這對於某些特殊效果來說會很明顯。如果想輸出GIF文件格式的話,這是非常有價值的。如果增加了一些數量較少的噪聲的話,就可以經常在一個陰影效果中使用有限的顏色。第二,你還可以使用等高線功能來改變陰影計算的方式。請看下面的例子,在其中可以看到只改變等高線格式帶來的變化。
   



  以上我很快地概括了在Photoshop 6中下拉陰影的新外觀及新功能。從這裡開始,在必要時我會給出5.5版和
6版兩者的指令。
 開始行動
  一旦你真正用心地去審視你的陰影,就已經成功了一半了。因此,我對陰影提出了一個口號:首先,要行動!
  幾乎在所有情況下,第一步都是要降低不透明度。默認的值對於大多數應用程序來說都太暗了。我在Photoshop
中把默認的不透明度降低到低於50%。上面那個"stop"的例子中不透明度為21%,而默認值為75%。暗的陰影不僅是看起來不真實,還有可能會干擾陰影的設計線條,或者文本的可讀性。
   


  以上圖形中,頂部樣本為75%的默認陰影,下面樣本是將不透明度降低到38%。
  但是除了通過距離和不透明度的調整使陰影更加真實外,還可以做許多事情。試著為你的下拉陰影使用一個不同的顏色。當你試圖創造一個透明的外觀時,這個效果會很有幫助。在下面的圖像中,請注意光線是如何看起來好像在文本中穿行的。如果沒有加了顏色的陰影,文本看起來是有紋理的,但是不透明。
   



  創造性地使用陰影指令

  使用陰影指令向文本或圖像中增加一點點生命力是非常標準的,但是這樣一來,我們會錯過一些可以用陰影創造出來的其它效果,如頁面分隔。
  最近,一個陰影幫助我的一個
Web站點解決了大問題。在其標題部分,有一個很搶眼的圖形,但是頁面的其它部分卻非常乾淨整潔而且單調。整個頁面很和諧。但是我們需要增加一個適合頁面的一側菜單,另外還有一些其它圖形密集並且更加「忙」的菜單。
  答案是使用基於白色菜單風格的白色。這個菜單是用白色頁面上的白色來構造的,唯一用來創造出菜單區域幻覺的分隔符是一個分隔層,它在不同的頁面上發揮著魔法一般的作用。
  基本的概念如下圖所示:
  


  以上為在一個白色背景上帶有下拉陰影效果的白色矩形。
  下面我們將在陰影中做一些有趣的事情,它們會使你感到奇怪,為什麼一直把陰影當成是一個自動功能呢。
 
Photoshop陰影設計訣竅

  這裡有一個「白色-白色」的陰影舉例。我希望確定的是你知道你能夠使用陰影來增強一個有任意顏色或紋理的區域。秘訣在於使將要被增加陰影的區域的背景與頁面的背景保持完全相同。在這個例子中,背景和被選中的矩形區域都被填充了同樣的褐色,並且讓兩者使用同樣的紋理。你很難找到一種分隔頁面區域或菜單項的精密方法能夠勝過這種方法的效果。像我在這裡使用的這麼獨特的陰影,你根本就用不著。它真的特別精密,看著它從一個單色的頁面變得栩栩如生吧。
   


  看看以下樣本,就可以知道這是如何完成的。我將背景恢復成白色,選擇了創建陰影的矩形。這個效果需要兩層,一層是有背景的,一層是填充了的矩形,這一層是接受陰影處理的層。
   


 將陰影從層中分離

  Photoshop
中有一些竅門使你能夠輕鬆地創建出許多種類的陰影。請看下面的樣本:
   


  這是一個與上面同樣的有陰影的矩形,但是請注意在圖像的頂端和左側,陰影好像消失在頁面中了。現在看起來好像是只有一個角從頁面上提升起來了。
  這是如何實現的呢?當你調整陰影的時候,整個的陰影都會變化。但是如果像這個例子一樣,陰影是一個單獨的層時就不會這樣。我取這一層的效果,並將其與該層分開。這之後,就可以對陰影做任何想做的處理,包括變形、扭曲或者就如我在這裡所做的,給它的一部分染色。
  要想創造這個效果,就要象對其它陰影一樣,增加上將要形成陰影基礎的效果。你對基礎陰影感到滿意之後,使這一層被激活,在該層的效果圖標上點擊右鍵
(PC平台) 或Command-Click (Mac平台),從彈出菜單中選擇創建層。
PS
6注意事項:也可以從主菜單中「選擇層->層格式->創建層」。
PS 6 注意事項2:一定要在層格式窗口中取消Layer Knocks
out Drop Shadow 這一選項。
PS 5.5 注意事項:也可以從主菜單中「選擇層->效果->創建層」。
你能看到有一個新的層被創建出來,並且就放在你放置陰影的那層下面。請看下面所示的上面圖像的層調色板:
   


  現在你的陰影已經在一個單獨的層中了,然後就可以像處理其它層一樣對它進行處理。為了增加陰影的立體感,我使用了一個很大的畫筆以進行溫和的顏色調整,並用一個較低的不透明度製作陰影的形狀。左上角這個陰影完全消失了,然後沿著整個陰影逐漸變得越來越柔和。
  一旦你掌握了這個技巧,就可以將它用在更多的設計元素中。以菜單為例,創建一個相匹配的分隔線,如下面所示,它也能作為一個頁面分隔符:



你還可以把這些線合在一起,用它們來形成一個菜單。


Menu Item 1


Menu Item 2


Menu Item 3



 處理陰影層

  一旦你能夠把自己心目中所希望對陰影層做的處理都實踐出來,你有可能就要開始搜尋藝術領域中關於光線和透視法的信息了。我們可以進行變形、調整大小、虛化、增加紋理
... 盡可能地發揮你的想像力吧。
  在下面包含了一個不規則圖形。當陰影指令能夠完成全部任務時,陰影對象的形狀多麼複雜都沒有關係。在這個例子中,我將陰影變得更小並且進行了輕微的扭曲。
   


  當陰影被自動創建並且分層時,不規則形狀也不成問題。這個圖像底部的版本中所增加的紋理與背景中增加的紋理相同。下面顯示了沒有背景的增加了紋理的陰影。
   


  上面的陰影使用了紋理。雖然這個陰影非常透明,但是其中那一點點純色足以使紋理在背景上失去光彩。你能夠看到紋理,但是它卻不生動。我向陰影中增加了在背景中所使用的紋理,它增加了一些細微的顏色轉變,使陰影變得栩栩如生。
  我對於掌握一個效果的功能比掌握一個簡單的解決方案更感興趣。當我第一次點擊創建層,看到所發生的一切時,簡直都不能相信自己的眼睛。從那天開始,我就很少再把陰影固定到層上。我通常都是增加一點額外的虛化,或者是稍微調整一下大小,在我不希望陰影出現的地方,把陰影從邊緣移走,因為虛化效果使它消失了。
  我還喜歡用鼠標或箭頭鍵將陰影四處移動。新的層格式窗口很大,很合我的口味。重要的不僅僅是有了對象的陰影的外觀,與頁面的其它部分在一起看起來也一定很好。
  現在我提出關於陰影的最後一個觀點。可以用梯度填充來增強陰影層,從而創造出真實的圖形,特別是要表達一個側面視圖的時候。
  學習了這些技巧,一定要花一些時間來反覆實驗。在此過程中,你一定要記住:你可以把所有的
PS層效果都分離出來,正如我們對下拉陰影所做的那樣。難道這還沒有使你的思維開始活躍嗎?


TOP

發新話題

本站所有圖文均屬網友發表,僅代表作者的觀點與本站無關,如有侵權請通知版主會盡快刪除。