AAA教育

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

開始前

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

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

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

（上圖來自錘子團隊的大神繪制的圖片）

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

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

1.符合視覺原理的整體光感。

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

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

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

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

上面講的還是太啰嗦。

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

哈哈開個玩笑。。

下面開始案例講解吧。。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

第七步：繪制輔助圖形，增強畫面流動感。

為了讓畫面豐富和流動感，可以適當(dāng)加一些酷酷的輔助元素。（因為以前做過很多VI設(shè)計，輔助圖形是我經(jīng)常用的，所以在這里運用一下。）

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

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

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

希望大家在制作的時候，用心思考和體會整個過程。就可以在以后的作品中舉一反三啦。

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