本著放在收藏夾里吃灰永遠(yuǎn)不虧的思想，我們恨不得網(wǎng)羅所有的素材網(wǎng)站，但只有自己真正做圖的時(shí)候才發(fā)現(xiàn)，想要的素材永遠(yuǎn)找不到，后宮佳麗三千，終究還是錯(cuò)付了。

授人以魚不如授人以漁，今天由王子老師現(xiàn)身說法，用實(shí)際案例教大家如何手搓UI，自制素材。

之前，我們和三只松鼠共同策劃的七夕活動(dòng)頁面上架后受到了廣泛的好評(píng)。

后續(xù)還有不少店鋪對(duì)這個(gè)頁面進(jìn)行了模仿和借鑒。

但這些臨摹的朋友未免有些過于不走心了，除了外形，質(zhì)感和光影就一言難盡了。

?

為了讓大家未來能夠更好地臨摹，今天就拿這個(gè)“招魂幡”給大家具體講講如何極致地手搓素材。

先用鋼筆工具勾出旗幟大概外形，填充一個(gè)基本顏色。

再勾出旗幟的內(nèi)部面塊，顏色可以自己搭，也可以參考我們這邊的數(shù)值。

同理，用鋼筆工具勾勒出旗桿、橫梁、牌匾以及飄帶的外形。

至此，輪廓勾勒工作完成，接下來進(jìn)入“一看就會(huì)”的手搓材質(zhì)階段。

從這根又長又細(xì)的棒棒開始，我們先將這個(gè)平面形狀做出立體感。

?

從花瓣上找一個(gè)木紋材質(zhì)的貼圖：

適當(dāng)調(diào)整大小，疊入木棍中，注意遮擋邏輯。

打開曲線工具，先將旗桿整體壓暗：

利用反向蒙版，配合畫筆工具畫出一道陰影區(qū)：

好，有一根曲線壓暗，我們就再用另一根曲線提亮。

同樣的手法，運(yùn)用反向蒙版配合畫筆在陰影區(qū)旁畫出高光區(qū)。

當(dāng)然，不要忘了處理上端的小部分木棍。

但是呢，總感覺旗面和木棍直接缺少連接感，旗面像是懸空一樣。

因此，我們?nèi)セò晟险乙恍├K結(jié)素材，適當(dāng)調(diào)整增加元素之間的關(guān)聯(lián)感。

如果透視和方向存在略微的不匹配，我們可以用變形工具輕度調(diào)整。

由于繩結(jié)本身顏色過于搶鏡，用色相/飽和度進(jìn)行去色處理：

再用色彩平衡進(jìn)行著色，調(diào)成和旗桿近似的顏色：

接下來，按照旗桿的邏輯，用曲線將繩結(jié)的立體感做出來：

另外，不要忘了用曲線畫出繩結(jié)與旗桿相接處的閉塞陰影：

好，旗桿的制作就告一段落，接下來我們從上至下，從橫梁開始強(qiáng)化它的質(zhì)感：

同樣，我們先在花瓣上找一張合適的布紋材質(zhì)貼圖。

適當(dāng)調(diào)整大小和方向，注意圖層模式疊入橫梁：

使用曲線工具對(duì)材質(zhì)明暗不均勻的地方做一個(gè)平衡：

和做旗桿一樣的思路，先用曲線壓暗，配合蒙版畫出陰影區(qū)，制造體積感：

再來根曲線，做出亮部區(qū)，強(qiáng)化體積感：

不難發(fā)現(xiàn)，疊入素材后整個(gè)區(qū)域的色彩飽和度明顯過高，所以用色相/飽和度壓低它的飽和度：

之后，用色彩平衡工具略微向洋紅偏一點(diǎn)：

最后再借用曲線工具提亮，配合蒙版讓邊緣顯得不那么鋒利：

橫梁的木質(zhì)結(jié)構(gòu)的體積做法就不過多贅述啦，和旗桿是一樣的制作邏輯：

為了保證配色比，讓畫面不是單調(diào)的原木色和紅色，在兩邊用青色的繩結(jié)進(jìn)行裝飾：

接下來，終于來到了重頭戲——正面旗面的材質(zhì)渲染！

從紅色旗面開始，在網(wǎng)上找一些絲綢材質(zhì)貼圖：

調(diào)整好大小和方向，疊入紅色旗面：

打開色相/飽和度，調(diào)節(jié)材質(zhì)顏色，與橫梁顏色匹配：

對(duì)于暗部的死黑，我們可以用可選顏色進(jìn)行調(diào)節(jié)：

一個(gè)優(yōu)秀的稿子必須注意的就是避免大面積死黑的出現(xiàn)，通過可選顏色，緩解死黑現(xiàn)象：

但這么看，依然有濃濃的紙片感，不夠立體，因此，我們?cè)賹?duì)其邊緣進(jìn)行處理：

點(diǎn)選輪廓邊緣，選擇居中描邊3像素：

選擇正片疊底，擦去不必要部分，這樣旗面的厚度就做出來了。

再用色彩平衡進(jìn)行一個(gè)整體的偏色調(diào)整即可完成旗面的材質(zhì)渲染：

最后，用曲線做出接縫處的閉塞陰影：

看看整體效果，是不是有內(nèi)味兒了？

好，接下來我們來看一下金色綢面的處理方法：

?

先用布紋材質(zhì)打底：

再疊入絲綢的褶皺貼圖，注意褶皺要和紅色底面的褶皺匹配：

用這樣的邏輯，找到合適素材銜接底面褶皺：

對(duì)于顏色不一致的素材，我們用色彩平衡統(tǒng)一色彩：

如果要增加褶皺紋理，還可以使用正片疊底模式疊上去，但是注意用色階降低暗部飽和度：

接下來，為了后續(xù)調(diào)色便捷，先用色相/飽和度降低色彩飽和度：

再用色彩平衡針對(duì)整體和高光分別添加色彩：

現(xiàn)在金色旗面整體偏暗，所以我們曲線工具適當(dāng)提亮，增加畫面明亮感：

最后，勾選邊緣，制作旗面金邊。

接下來我們?cè)賮戆褍蛇叺乃墒箢^形狀的牌匾搞定~

復(fù)制一層，移動(dòng)幾個(gè)像素，做出牌匾厚度：

疊入金屬素材：

點(diǎn)選，描邊，做出嵌入邊的厚度：

調(diào)色后，用曲線工具提亮：

復(fù)制一層，配合蒙版，做出嵌邊厚度：

金屬圓環(huán)怎么制作呢，新建圓環(huán)，雙擊圖層樣式，在斜面和浮雕處調(diào)出圓環(huán)3D感：

調(diào)節(jié)顏色，避免圓環(huán)顏色過重，根據(jù)穿透邏輯用蒙版擦去不必要的部分：

復(fù)制一層，調(diào)節(jié)大小，用鎖鏈將橫梁與牌匾連接好：

最后，在底部加一點(diǎn)例如寶石之類的裝飾元素，增加畫面觀賞性，當(dāng)然，不要忘了調(diào)色調(diào)明暗哦！

打開之前勾好的絲帶輪廓：

疊入布紋素材，ctrl+鼠標(biāo)左鍵點(diǎn)選輪廓，描邊2.5像素，做出飄帶厚度：

再用曲線工具配合蒙版擦出飄帶的高光區(qū)：

另外，不要忘了給牌匾上的文字也疊入材質(zhì)哦：

再復(fù)制一層文字，左移幾像素，做出文字立體感：

按照這樣的方法，將左邊牌匾和飄帶也進(jìn)行一個(gè)制作：

再找一些中國風(fēng)的花紋，疊入金色布面，增加畫面細(xì)節(jié)，提高畫面耐看度：

至此，一個(gè)旗幟的人工制作就完成啦~

這樣的素材自制思路不僅適用于旗幟的制作，像這個(gè)頁面中桌面和桌布其實(shí)都是依照這樣的制作邏輯全程手搓“搓”出來的。

這也就是被很多人批判“華而不實(shí)”的P4D訓(xùn)練法的實(shí)戰(zhàn)應(yīng)用。

?

P4D訓(xùn)練法不僅會(huì)磨礪你對(duì)素材的敏感度，還會(huì)讓你深悟：如何通過光影統(tǒng)一素材明暗；如何從無到有自制無風(fēng)險(xiǎn)素材；如何強(qiáng)化素材質(zhì)感以假亂真。

?

通過訓(xùn)練美術(shù)基礎(chǔ)并能夠在實(shí)戰(zhàn)中真正應(yīng)用理論體系，這才是我們學(xué)習(xí)P4D的真正目的。

?

萬丈高樓平地起，根基扎實(shí)成大器！很多人往往忽視了基本功對(duì)于設(shè)計(jì)師的必要性，所以做的東西跟隔壁家的設(shè)計(jì)師比起來總是差了那么一點(diǎn)。

希望今天的小教程能幫助各位更好地理解素材自制和堆疊邏輯，還是那句話，光看熱鬧不成事兒，抽一局王者榮耀的時(shí)間親自上手試一試。