【 第一部分:立體感 】
寫在開頭:
我們平常所說的美術,都是有關視覺的藝術。設計分很多種,但大家目前所集中關心的,要用到PS的設計,無非就是人機界麵(網頁也算一種人機界麵)、平麵廣告、動畫、插圖等等,這些都與視覺有關。
而視覺魔術當中,我們普遍運用的手法,就是通過視覺錯誤來產生各種各樣的“立體感”。本來都是平麵的,但添加了各種效果後,你就覺得這是立體的,有空間感的。比如一個簡單的按鈕,就不再是平麵的板塊,你會覺得它是有體積感的。這就是我們所說的“逼真”。
首先要說的是,我舉的例子都會是很簡單、數個步驟就能上手並且能演變出其他效果的,因為我覺得對於初學者而言,畫一個方塊,和畫一個人頭像在操作上沒有很大的區別。如果你參加了美術班的學習,你就會知道,對於陰影、高光的把握,畫一個雞蛋與畫一個人頭像沒什麼不同,不同的就是後者需要結構上的理解與更多的練習。舉個小例子,小非想必大家很熟悉了,以PS描繪逼真的超寫實人像,他對自己的操作是這樣說的:我無非就是用了路徑、加亮與變暗工具多一些而已,剩下的就是美術功底了。因此,對於初學者,我不推薦馬上去畫什麼人臉,而是先理解好、運用好手頭的這幾樣工具,再深入研究結構,這樣才是學習PS之道。
好了,我們現在馬上開始,從結果倒推到步驟的思考之旅。大家來看這個水晶按鈕(嗬嗬,我總是從水晶按鈕開始,因為它基本上把樣式的技巧都用上了)。
下麵我們放大來看這個水晶按鈕由哪些結構組成。按鈕構成圖:
按鈕橫截麵光線圖:
1、任何光滑的東西都會產生鏡麵反射,水晶按鈕當然不會例外。 很多人可能要問了,不就做一個小按鈕嗎,用得著花這麼多筆墨去說這些物理問題嗎?——這不對。隻有深入理解結構,才能舉一反三。下麵就要說到,理解這些東西究竟有什麼用。
好,現在我們開始思考,我們應該用什麼工具去實現這些效果。(在這裏不妨停住,自己想想,剛剛分開的那些結構部分,如果是你自己,如何把這些部分畫出來,並且組合起來?)
部分1:高光讓我們產生這個物體很光滑的感覺。但要實現很容易,我們畫一個這種形狀的白色塊,然後以一定的透明度疊加在下方的按鈕實體上麵就行,這個問題解決了,我們需要的是一個新圖層,一個以白色填充的圓角長矩形。——具體步驟先不急,我們先要知道我們要些什麼。
部分5:對於下麵的大圓角矩形,上部以及邊緣會發暗。如何才能讓這個大圓角矩形的上部以及邊緣有點暗呢?這裏列舉兩種做法。一種是用羽化的選區把按鈕矩形的邊緣變暗。變暗有什麼好辦法?色相/飽和度工具,此法用在這裏有點小題大作,此外這種方法是一次性的,不能再調整的,也就是說當你確認修改後,下次要改回來可就不那麼容易了。那麼我們選擇第二種做法,圖層樣式。記得圖層樣式裏麵有一個“內陰影”嗎?對,內陰影~ 內陰影除了能幹內陰影這件事之外,也能讓邊緣變暗——我們隻要讓陰影在邊緣停留就好了嘛。看圖:
看看第三個就是,參數怎麼調整?這裏先不說,大家可以根據上麵的那個圖自己調整一下方向、距離與大小,試試看。 部分4:這裏還有一個較窄的、細細的邊緣變暗。因為我們剛剛已經采用了內陰影來製作按鈕的立體感,難道再增加一個內陰影效果嗎?PS裏麵不允許說一個圖層加幾個同樣類型的樣式。那我們要換一下口味了。這個較黑較細的邊緣,應該對整個按鈕都是均勻的。整個按鈕具有變暗的模糊邊緣——用色相/飽和度工具當然可行,但不能事後調整——還是用樣式吧,什麼樣式呢,內發光。
內發光不僅能發“亮”光,也能發“暗”光。看圖:
第三個色快產生了邊緣變暗的效果,如何做到的呢?看看具體的參數設置:
好,至此,是我們應該組合這些效果的時候了。看圖:
大家注意到我原本的色塊是綠色的沒有?——因為有了漸變疊加,原來用什麼顏色都無所謂。我這裏一開始就是亂選了一種顏色填充圓角矩形,反正到後麵都能調整,方便得很~
反思一下剛剛得步驟與結構,究竟是那些步驟讓我們產生了按鈕得立體感?
-投影樣式能讓物體浮出畫布;
-內陰影樣式能讓物體產生玻璃般的透明立體感;
-內發光能讓玻璃的邊緣更加真實(我們感覺到這個按鈕的橫界麵下邊緣必定是圓滑的);
-漸變疊加樣式能讓按鈕的反光更為真實,也讓整個按鈕的色彩層次感更豐富,不死板;
思考了這些以後,如果要做別的按鈕可以嗎?我要怎麼產生立體感呢?金屬的和玻璃又有什麼相同和不同之處呢?還有其他的樣式,比如斜麵與浮雕、光澤能做些什麼嗎?這些在我接下來的後麵說金屬立體感的時候就會說到,但在此之前,大家都可以先自己思考一下。
好了,我們先把這個按鈕完善一下吧。基本的圖層樣式已經做好,我們以後再要做這種按鈕可就方便了。看圖:
看,各種形狀都行,隻要我們複製、粘貼圖層樣式。然後大家注意到樣式產生了立體感與按鈕的折射與陰影,但高光還是要自己做的。上圖中圓形按鈕與長圓角按鈕就加了高光,高光怎麼做,已經不用我再補充了吧。但有個東西需要提醒,就是高光也有層次感,注意看下圖:
下麵我們再把這個按鈕變得更完美些吧。既然是水晶按鈕,那就是透明的。如果我們在底下墊一層網格,那就應該會透出一些來。看圖,我們在底下加上網格。
這裏有兩個同樣的按鈕,都不透明。下麵我們要把下麵那個水晶按鈕變得透明。首先我們把按鈕的混合模式改成“柔光”,柔光能讓我們的按鈕以一種透明模式覆蓋在圖案上,但又能保留陰影與立體感。但要讓它透明,還要花點小功夫:首先要想它為什麼原來不透明?
——是漸變疊加那裏,它是一個不透明的漸變色,於是讓按鈕不透明了。
打開樣式的漸變疊加對話框,看看參數有什麼可變化的:
對,有個不透明性。原來是100%,我們下降到56%看看效果如何?
果然,整個按鈕透明了。這個時候有人會問,為什麼不把那個按鈕層全層下降不透明度呢?我們來看看比較好了。
整個圖層的不透明度下降後,的確是透明了,但邊緣也模糊了,讓人覺得立體感就沒有了。原因就在於那些產生立體感的樣式:內陰影、內發光、陰影也一並透明了,因此效果就下降了。我們看第二行第一個按鈕,是有顏色的水晶按鈕,立體感仍在。
把漸變樣式變成完全透明又如何呢?這裏還要記住,那個內陰影是有顏色的,我們把漸變色去掉之後,也要把內陰影變成灰色(灰色就是中性色,不帶色相的),這就產生了無色彩的透明玻璃按鈕,第二行第二個。
追求完美的人可能會說,玻璃會有折射的吧,下麵的網格不應該是平的才對。這是對的,但考慮到我們的按鈕比較靠近背景,發生的透鏡效果不會太明顯,如果我們一定要這個透鏡效果的話,那就要把後麵的背景做些透鏡變化了。的確可行,但會讓背景破壞,如果我要移動按鈕位置的話,就麻煩了。所以考慮再三,這個效果先把它忽略,日後在有需要的時候、定稿的時候,再做不遲。下麵給出一個有透鏡效果的透明按鈕: