曾在一本photoshop的教程中看到這樣一句話，深入細致的觀察乃是營造真實效果的最重要的基礎，而不是技術。（當然技術上的局限也會阻撓我們實現自己想要的效果。）這就好比通過細致入微的觀察即使只用鉛筆也能呈現出一個真實的、光影縱橫的世界，而無須依賴油畫棒、美工刀乃至photoshop，CorelDRAW。

上圖是我們在網頁中常見的按鈕樣式，比較獨特的是在它的中間有一條刻痕，

如果不清楚怎么制作的話我們就放大來看看

放大來看你會發現它很簡單，它只不過是由1像素寬的一條較深的線和一條較淺的線組成罷了。

明白了它的構成，那它做起來也就簡單了，方法有很多。你可以分別用矩形選框工具框選兩個寬為一像素的長條區域，然后分別填充深色和淺色。還有一個更為簡便的辦法就是，你可以用直徑為一像素的鉛筆工具來繪制。那么為什么要用鉛筆工具來繪制呢？如果你對鉛筆工具已經很熟悉的話，那么大可以跳過這段了。鉛筆工具同其他繪圖工具相比，它的顯著特點就是保留鋸齒，它的筆觸是干凈利落的，介于筆觸的有和無之間不存在一個中間地帶，而畫筆工具的邊緣則是柔和的，過渡平緩的。如果這段敘述不夠直觀，那么請看下圖

正如前面所講到的，繪制這樣的線條并不需要多么高超的photoshop技術，卻需要深入細致的觀察與思考。在上面的按鈕圖片中，我們假定光線是從圖片的左上方照射下來的（在大多數情況下光線也正是從上方照射下來的），為了體現這一點，我為按鈕的背景賦予了一個從上到下由亮到暗的漸變疊加，還有一個投射到右下方的投影效果。在一個光線是從左上方照射下來的光線環境下，營造一種刻痕的效果，那么刻痕的左側必然為背光面，右側為受光面。

因而，刻痕左側的線條要比背景更暗，右側的線條要比背景更亮。與此同時，不管是刻痕的陰影還是高光面，顏色都不宜太暗或者太亮，否則可能破壞掉整個畫面的協調性，掩蓋掉其他的按鈕樣式從而突兀地顯現在畫面中。作為一個按鈕上的一條裝飾性的分割線，太顯眼的效果顯然并不是我們想要的。

光線從左上方照射下來，這就要求我們去模擬與再現這種光線環境下的每一個部件的受光面和背光面，以及如何用顏色和形狀去表現。反過來，通過形狀與顏色的運用，使之體現出不同的受光面和背光面，我們也能暗示出光線環境。

上面是我在相同的光線環境下繪制的兩條水平線條，線條和文字的立體效果互相呼應，都在暗示著光線是從左上方打下來的。只不過在這里線條更加淺一點，起到一種裝飾和襯托的作用。

除此之外，通過和虛線的結合使用，還能夠產生出很多種可能。

這種按鈕樣式和線條主要是出現在網頁中，若要保持整站的圖形樣式的統一性，可以在圖層樣式面板中勾選"使用全局光"，（不過本文中只有按鈕背景和文字用到了圖層樣式）或者將常用的圖層樣式保存在圖層樣式面板中，在以后繪制按鈕時直接套用。

各位網頁設計的老手對此自然是很通曉了，不對的地方還請多多指點。

在photoshop中有一樣工具是專為圖像對象的立體化而誕生的，那就是圖層樣式。從各個圖層樣式的名字中就可得見。如投影，內陰影，內發光，外發光，浮雕等。正因為圖層樣式的發明才使得圖像產生出光和影，從而使得平板一塊的畫布顯示出凹凸有致的立體感。

上一篇分享中講到了怎樣使用最簡單的繪圖工具——鉛筆繪制出網頁中常見的凹痕效果，因為凹痕的構造最為簡單，因而繪制方法也最為簡單。但是這種效果是死板的，不管是陰影還是高光，都需要手動繪制出來，同時，這種效果也無法應用于文字和按鈕（當然也可以自定義一個圖層樣式來做這種效果，但我總是覺得使用鉛筆更直觀一點，個人想法）。而圖層樣式則是"活"的，圖層樣式可以被從一個圖層復制到另一個圖層，或更多的圖層，它也可以保存起來，在以后繪制的時候直接套用，如果不滿意圖層樣式的效果，還可以隨時修改各項參數。在畫面中有多個按鈕或者文本需要修飾甚至多個文檔需要保持按鈕樣式一致的情況下，圖層樣式尤其有用。

在photoshop的圖層樣式中，雖然有著名為"投影""陰影""內發光""外發光"這樣的樣式，但"投影"樣式并不局限于塑造一種投影效果，"內發光"樣式也不僅僅能夠表現內發光的效果（為避免混淆，本文中"樣式"一詞單指photoshop中的圖層樣式名稱，"效果"一詞單指我們看到的實際效果），這也就是本文題目中"非常規"的意義所在。但非常規并不是要故意標新立異，而是使photoshop這個工具更加靈活好用。

由于本文要講的主要是網頁中的文字和按鈕樣式，因而各項數據都是以像素為單位，如果用作印刷或其他媒介，根據分辨率，各個參數的數值就要相應地增大或減小。

上圖是我在上一篇分享中用到的一種文字效果，它應用到了兩種圖層樣式，先試著推測一下都是哪幾種圖層樣式，然后在自己的photoshop里驗證一下。在這里我先聲明一下，在上圖中我表現的是一種如同碑文一般凹刻下去的效果，不管在你眼中它是哪一種效果，我都要從這個出發點來分析。涉及到參數分析的時候總會有點枯燥和不易理解，還請各位有興趣的酷友耐心慢慢看。我們先把圖放大來看一下。

在上面的圖片中我為大家指出了各個圖層樣式作用的區域，在運用到的圖層樣式中，內陰影可以說是最為"本分"的，它也恰如其分地營造出一種陰影的效果，在這里我只是稍微降低了透明度，使得陰影不至于太暗。因為假定光線是從左上方照射下來，因此，我把角度修改為135°。為了使得陰影只投射到文字輪廓的邊緣，而不是填充了整個文字的輪廓，因此我把距離和角度都降低到3像素的大?。ň唧w數字要依據實際文字的尺寸和筆畫粗細來定）。具體參數如下

如果把文字凹刻的橫截面想象成如下圖所示，那么內陰影樣式的運用已經塑造出了橫截面左側的陰影區域。

接下來解釋一下投影樣式的各項參數設置。參數如下

　　在這里，角度仍然為135°，因為要保持光線角度的一致。至關重要的幾項參數在于，我把默認的"正片疊底"混合模式修改為"正常"（雖然改為"濾色"模式更為貼切一些，但為了便于掌控，此處使用了"正常"模式），顏色也由默認的黑色修改為白色。至此，投影樣式從本質上不再制造投影效果,如題目所說，走向了"非常規"。這里詳細地說一下，為什么要把"正片疊底"模式修改為"正常"模式。如果你對混合模式很了解，此處也可略過不看。眾所周知，影子都是比較昏暗的，而"正片疊底"正是使得兩個圖層在混合之后變得更為暗一點，不管居于上層的圖層是明是暗，混合之后的結果只有更暗，如果上層圖層是白色，那么"正片疊底"模式就不起作用了?；氐奖纠?，如果只是把投影樣式中的顏色修改為白色，而不修改混合模式，那么白色也是不起作用的。（限于水平有限，此處"正片疊底"的解釋不夠專業，希望高手指點）

接下來的兩處修改就是"距離"更改為1像素，"大小"更改為0像素。這樣設置的效果就如同將原先的文本復制一個副本，放置在原文本下面的圖層上，填充為白色降低透明度，然后分別向右向下各偏移1個像素。由此，在文本輪廓的右下方產生出了一條明亮的顏色帶，自然而然地也就成為了上面截面圖中右側的高光。

通過上面兩個圖層樣式的結合運用，生成了文本輪廓中的陰影和輪廓右下方的高光，共同模擬出了凹刻下去的立體效果。還有一點需要注意的是，背景既不應該是純黑也不能是純白，因為我們要讓陰影和高光有一個可供對比的環境。同時，圖層樣式也不宜過于強烈，最好是能讓最終的效果起到一種暗示的效果。

在文字太小的情況下，我們就可以略去內陰影樣式，如下面所示，當然，效果也會大打折扣。不過這種效果也是可以由css直接生成的，而不用把文字做成圖片。

如果文中有一些不足之處，請各位高手指點。

以上就是方寸之間的真實的光影世界詳解，很不錯，希望大家喜歡！