如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

質(zhì)感是什么？如何讓畫(huà)面擁有更高端的質(zhì)感？本文由質(zhì)感的原理出發(fā)，深入分析質(zhì)感表現(xiàn)所需要的要素，并通過(guò)實(shí)例來(lái)講解如何在作品中表現(xiàn)高端質(zhì)感。

很多同學(xué)在設(shè)計(jì)完成后，總是會(huì)發(fā)現(xiàn)頁(yè)面很單薄，導(dǎo)致整體看起來(lái)很粗糙、不耐看。究其原因，大多數(shù)是因?yàn)轫?yè)面缺乏質(zhì)感。

質(zhì)感，對(duì)于設(shè)計(jì)作品來(lái)說(shuō)，是一個(gè)非常重要的視覺(jué)元素。它能夠提升作品的層次，讓整個(gè)作品更高端、更有品質(zhì)。

什么是質(zhì)感？

質(zhì)感，基本釋義為所表現(xiàn)的物體呈現(xiàn)出的物質(zhì)真實(shí)感和細(xì)膩的品質(zhì)感。這是一種視覺(jué)的綜合感受，會(huì)觸動(dòng)你的某種本能的綜合感官，讓你感覺(jué)非常舒服、非常爽。

我找了幾張比較富有質(zhì)感的圖片，大家可以感受一下這種感覺(jué)。

觀察完這些圖片后，你發(fā)現(xiàn)有什么共同點(diǎn)了嗎？我們可以試著來(lái)分析一下。

首先，物體本身的型是好看舒服的，并且細(xì)節(jié)足夠精致。

其次，在光的影響下，物體的表面呈現(xiàn)出細(xì)膩的光澤變化，以及通透而舒服的陰影，展現(xiàn)了豐富的層級(jí)關(guān)系。正是光的作用，讓這些視覺(jué)元素得以表達(dá)，讓我們沒(méi)有觸摸便能感知到這種質(zhì)感。

我們?cè)賮?lái)看一些優(yōu)秀的擬物作品。大家對(duì)照一下，是否都遵循相同的要素。

觀察這些優(yōu)秀的擬物作品，為什么會(huì)覺(jué)得有質(zhì)感呢？首先圖標(biāo)很精致，它的形具有一定的美感。但是這不足以讓它富有質(zhì)感，關(guān)鍵是它也符合了上面所說(shuō)的幾個(gè)質(zhì)感要素。

最后，我們可以總結(jié)一下，質(zhì)感產(chǎn)生的要素：

• 整體光感：符合視覺(jué)原理的整體光感。
• 細(xì)膩的漸變：通過(guò)色彩漸變所模擬出的真實(shí)的質(zhì)感和豐富的層次感，以及柔和舒服、符合光感的投影。
• 細(xì)節(jié)/紋理：精致的細(xì)節(jié)/紋理，讓畫(huà)面足夠精美和耐看。

所以除了作品本身足夠精美以外，整個(gè)作品的光感需要和諧統(tǒng)一。每個(gè)元素表現(xiàn)的色彩變化規(guī)律（漸變色）、投影大小和投影間的相互影響，都需要與光感嚴(yán)謹(jǐn)?shù)慕y(tǒng)一。

這就要求你在繪制所有元素時(shí)，需要去假定一個(gè)統(tǒng)一的光源，這樣才能讓物體擁有更真實(shí)的質(zhì)感。

我們已經(jīng)了解了質(zhì)感產(chǎn)生的原理，下面就開(kāi)始實(shí)際案例。每一個(gè)步驟我都會(huì)講解思考的過(guò)程和原因，方便大家理解。

案例解析

1. 整體背景和主體框架繪制

建立畫(huà)布（1200 x 900）。用矩形工具繪制背景和主體框架（1100 x 700），圖層樣式為漸變疊加，光線方向統(tǒng)一。

漸變是為了模擬背景的質(zhì)感和在光線下的變化，兩層光線方向需要統(tǒng)一。背景顏色稍淺且飽和度低，符合遠(yuǎn)近的視覺(jué)規(guī)律。

2. 繪制投影和主體背景

復(fù)制矩形作為投影層，顏色調(diào)整為黑色，轉(zhuǎn)為智能對(duì)象后，加入高斯模糊效果。調(diào)整矩形圖層的模糊度和透明度，移到適當(dāng)位置。具體參數(shù)對(duì)照?qǐng)D中。投影的位置根據(jù)假定光源位置而定，使其符合視覺(jué)原理（詳見(jiàn)光線分析圖）。

繪制主體深色背景（1070 x 670），添加漸變疊加模式，漸變方向與前面保持一致。漸變的顏色對(duì)于質(zhì)感非常重要，恰當(dāng)且高級(jí)的漸變色，能夠在本質(zhì)上提升畫(huà)面質(zhì)感。而漸變方向則需要根據(jù)假定光源進(jìn)行判定。

為什么要這么繪制漸變與投影的位置呢？我繪制了一張光線分析圖，大家可以從圖中看出假定光源的位置，以此來(lái)確定漸變的方向以及投影的位置。

只有整體光感的統(tǒng)一，整個(gè)畫(huà)面才能表現(xiàn)出強(qiáng)烈的質(zhì)感。大家在繪制這一步時(shí)，需要用心體會(huì)假定光感的這個(gè)過(guò)程。

3. 將人物融入背景，提升發(fā)絲層次和質(zhì)感

放入人物圖片，圖層模式改為正片疊底。調(diào)整圖層透明度，添加蒙版使人物下半部分漸隱，與背景融合。

復(fù)制人物層，取消圖層模式和透明度。用選擇顏色命令提取發(fā)絲高光，添加蒙版抹去不需要的高光，圖層模式改為變亮模式，調(diào)整透明度使其融合進(jìn)人物。

為什么要做這一步呢？單純的人物在畫(huà)面中顯得太平了，所以需要豐富細(xì)節(jié)、增加層次。

4. 主體字體和投影繪制

輸入主體文字，圖層模式調(diào)整為漸變疊加，根據(jù)光源調(diào)整顏色漸變。案例中的英文字體為「Monotype Corsiva Regular」。這一步需要反復(fù)的嘗試，大家可以換一些字體嘗試一下。

復(fù)制一層作為投影，文本顏色改為黑色，圖層樣式設(shè)置為正片疊底，轉(zhuǎn)智能對(duì)象后模糊對(duì)象，調(diào)整圖層的透明度和大小，放在字體后面。字體的立體感依靠的仍然是統(tǒng)一的光源，需要想象字體在假定光源下的陰影關(guān)系。

投影能夠模擬真實(shí)感，需要若有若無(wú)的感覺(jué)，讓文字懸浮在圖層上面，豐富畫(huà)面層次。

5. 主體文字細(xì)節(jié)刻畫(huà)

根據(jù)字體的結(jié)構(gòu)，用形狀工具繪制出字體的立體關(guān)系。每一個(gè)形狀圖層繪制后需要兩層蒙版，一層為了限制字體范圍，一層為漸變蒙版。讓充滿(mǎn)立體感的文字懸浮于畫(huà)面中央，提升視覺(jué)中心的細(xì)節(jié)品質(zhì)。

6. 穿插細(xì)文與投影繪制

輸入細(xì)文，并復(fù)制一層作為陰影。不過(guò)因?yàn)樽煮w較小，距離拉遠(yuǎn)后投影肯定是看不清細(xì)節(jié)的，所以已經(jīng)模糊的若有若無(wú)，但還是需要有的。

表現(xiàn)文字穿插關(guān)系，讓「is an」懸浮于「L」上，并留下近距離投影。讓「attitude」穿過(guò)「e」字，遮擋部分文字。豐富的穿插和相互投影，進(jìn)一步增加主體文字的細(xì)節(jié)和層次，讓畫(huà)面細(xì)節(jié)豐富且更加耐看。

7. 繪制輔助圖形，增強(qiáng)畫(huà)面流動(dòng)感

為了豐富畫(huà)面細(xì)節(jié)，增強(qiáng)畫(huà)面流動(dòng)感，可以適當(dāng)加一些飄零的輔助元素。

繪制時(shí)需要注意的是，你需要明確整體視覺(jué)中心與運(yùn)動(dòng)的方向。輔助圖形沿著整體畫(huà)面，水平中心向右運(yùn)動(dòng)，你可以想象圖形散開(kāi)后的畫(huà)面，并反復(fù)調(diào)整元素的合理位置。

如果沒(méi)有一定的規(guī)律，所有圖形就不像一個(gè)整體，就會(huì)看起來(lái)很亂。大家可以根據(jù)這點(diǎn)來(lái)判斷輔助元素是否需要進(jìn)一步調(diào)整。

8. 收尾工作，大功告成

最后，根據(jù)頁(yè)面需要，搭配上合適的元素，讓畫(huà)面更完整。

需要注意的一個(gè)細(xì)節(jié)是，由于所處的位置不同，這些元素在光照中呈現(xiàn)的顏色也會(huì)出現(xiàn)深淺變化，所以左邊的元素較淺，而右邊的元素會(huì)深一些。

怎么樣，是不是看起來(lái)并不難？

希望大家可以抽空認(rèn)真地跟著教程去嘗試一遍。只要你能夠理解每個(gè)步驟的目的，耐心地繪制每一個(gè)細(xì)節(jié)，相信你也能夠做出這種非常高端的質(zhì)感。

如果你能在制作時(shí)，用心思考和體會(huì)整個(gè)過(guò)程。就能在以后的作品中舉一反三，讓這個(gè)技能成為你自己的技能了。

藍(lán)藍(lán)設(shè)計(jì)( m.sdgs6788.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。