AAA教育

今天教大家一個(gè)BANNER設(shè)計(jì)，過(guò)程不會(huì)太難，只需要會(huì)PS基礎(chǔ)就能制作出來(lái)，這個(gè)教程可以鍛煉我們對(duì)網(wǎng)頁(yè)BANNER畫面的質(zhì)感表現(xiàn)有很大幫助，喜歡的同學(xué)可以一起來(lái)制作一下，來(lái)，記得交作業(yè)，有問(wèn)題可在設(shè)計(jì)達(dá)人官方文章下評(píng)論，小編會(huì)親自指導(dǎo)哦。

開始前

不要先急著做，了解一下質(zhì)感是什么，看下圖：

在光的表現(xiàn)下，物體表面的光澤便變化，精致的細(xì)節(jié)和紋理，通透而舒服的陰影。正是光的作用，讓這些視覺(jué)元素得以表達(dá)，讓我們沒(méi)有摸到它便感覺(jué)到了質(zhì)感。

一些優(yōu)秀的UI設(shè)計(jì)也是如此：

（上圖來(lái)自錘子團(tuán)隊(duì)的大神繪制的圖片）

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

那么我們就可以簡(jiǎn)單地來(lái)一波分析，怎么樣才能讓界面變得有質(zhì)感。

1.符合視覺(jué)原理的整體光感。

2.通過(guò)色彩漸變所模擬的真實(shí)的質(zhì)感和豐富的層次感。

3.柔和舒服、符合光感的投影。

4.精致的細(xì)節(jié)，讓畫面足夠精美，耐看。

所以除了作品本身足夠精美以外，整個(gè)作品的光感需要非常整體。每個(gè)元素的投影大小、投影之間的相互影響，都需要與光感嚴(yán)謹(jǐn)?shù)亟y(tǒng)一。也就是你繪制所有的元素時(shí)，需要大概假定一個(gè)統(tǒng)一光源。這樣才能讓物體更具有真實(shí)的質(zhì)感。

上面講的還是太啰嗦。

最后的總結(jié)就是：你就把它當(dāng)成真的東西來(lái)做就好啦！（啪啪啪。。。此處肯定會(huì)被扔拖鞋）

哈哈開個(gè)玩笑。。

下面開始案例講解吧。。

質(zhì)感案例教程：Poster-1 案例步驟

一波精彩的質(zhì)感的原理分析后，那么我們就開始這個(gè)教程吧。 每一個(gè)步驟我都會(huì)講解一下思考的過(guò)程和原因，方便大家理解。

第一步：整體背景和主體框架繪制。

建立畫布1200x900px（Mac 2倍）。矩形工具繪制背景和主體框架1100x700px（Mac 2倍），漸變疊加加上顏色，光線方向統(tǒng)一。（漸變是為了模擬背景的質(zhì)感和在光線下的變化，兩層光線方向需要統(tǒng)一；背景顏色稍淺且飽和度低，符合遠(yuǎn)近的視覺(jué)規(guī)律）

第二步：繪制投影和主體背景。

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

2. 繪制主體背景（1070x670px），漸變疊加模式，漸變方向與前面保持一致保持。（漸變的顏色對(duì)于質(zhì)感很重要，漸變方向則是統(tǒng)一光線需要）。

第三步：人物圖片與背景融合，加強(qiáng)發(fā)絲增加層次和質(zhì)感。

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

2. 復(fù)制人物層，取消圖層模式和透明度。 用選擇顏色提取發(fā)絲高光，添加蒙版抹去不需要的高光，圖層模式改為變亮模式，調(diào)整透明度使其融合進(jìn)人物。（單純的人物正片疊底太平了，所以需要豐富細(xì)節(jié)）。

第四步：主體字體和投影。

輸入主體文字，圖層模式漸變疊加，根據(jù)光源調(diào)整顏色漸變。復(fù)制一層作為投影，改為黑色正片疊底，轉(zhuǎn)智能對(duì)象后模糊對(duì)象，調(diào)整透明度和大小，放在字體后面。（投影模擬真實(shí)感，需要若有若無(wú)的感覺(jué)，讓文字有懸浮在圖層上面，豐富畫面層次感）。

第五步：主體文字的刻畫（整個(gè)畫面的視覺(jué)中心，需要刻畫細(xì)致）。

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

這一步需要反復(fù)的嘗試，英文字體為“Monotype Corsiva Regular”，大家可以換一些字母嘗試一下。（講解：字體的立體依靠的仍然是統(tǒng)一的光源，需要想象字體在假定光源下的陰影關(guān)系）。

第六步：細(xì)文的穿插與投影。

1. 輸入細(xì)文，復(fù)制圖層，制作陰影。（因?yàn)樽煮w較小，距離拉遠(yuǎn)后投影肯定是看不清細(xì)節(jié)的，所以已經(jīng)模糊的若有若無(wú)啦。。。）

2. 表現(xiàn)文字穿插關(guān)系，讓“is an”懸浮于“L”上，并留下近距離投影。讓“attitude穿過(guò)“e”字，遮擋部分文字。

（豐富的穿插和相互投影，進(jìn)一步增加主體文字細(xì)節(jié)和層次，讓畫面細(xì)節(jié)豐富且更加耐看。）

第七步：繪制輔助圖形，增強(qiáng)畫面流動(dòng)感。

為了讓畫面豐富和流動(dòng)感，可以適當(dāng)加一些酷酷的輔助元素。（因?yàn)橐郧白鲞^(guò)很多VI設(shè)計(jì)，輔助圖形是我經(jīng)常用的，所以在這里運(yùn)用一下。）

需要注意的是，你需要明確視覺(jué)中心與運(yùn)動(dòng)的整體性。沿著整體畫面的水平中心向右運(yùn)動(dòng)，想象圖形散開后的飄散的畫面，反復(fù)調(diào)整元素的合理位置。（如果沒(méi)有一定的規(guī)律，所有圖形就不像一個(gè)整體，就會(huì)看起來(lái)很亂。大家可以根據(jù)這點(diǎn)來(lái)判斷是否需要進(jìn)一步調(diào)整。）

第八步：收尾工作，大功告成。

根據(jù)需要（裝逼或者更加裝逼）配上合適的元素。需要注意的還是整體光感的考量，在不同的位置，這些元素的顏色也是有深淺的，并不是都是一個(gè)顏色。

希望大家在制作的時(shí)候，用心思考和體會(huì)整個(gè)過(guò)程。就可以在以后的作品中舉一反三啦。

小編推薦相關(guān)文章《電視交互設(shè)計(jì)的基礎(chǔ)知識(shí)科普大會(huì)》