深度剖析吉祥物制作

2018-9-26    資深UI設(shè)計(jì)者

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

“解密細(xì)膩制作的關(guān)鍵點(diǎn)。深度剖析了色理知識”

       



      之前說過我要出一個(gè)吉祥物制作的教程,但是其實(shí)這種教程很多,上百度隨便搜一個(gè)就能知道個(gè)大概?,F(xiàn)在是教程泛濫的時(shí)代,今天看一篇明天看一篇,發(fā)現(xiàn)很多換湯不換藥,有種不看可惜看了又很雞肋的感覺。所以我在想我要怎么出這篇教程才會讓大家有所收獲。

        設(shè)計(jì)的進(jìn)階道路,大概分為借鑒,實(shí)操,駕馭,引領(lǐng)。從借鑒到引領(lǐng)這個(gè)過程學(xué)習(xí)、思考、總結(jié)是貫穿的,多實(shí)踐,多總結(jié)才能飛速進(jìn)步,不然有可能你干了5年的設(shè)計(jì)還不如人家干一年來得出色。我總結(jié)了一些原理性的東西給大家一個(gè)啟發(fā),做東西掌握實(shí)質(zhì)才能一生二,二生n多,然后你就羽化成“大神”、“大濕”了哈。


Image title

       關(guān)于吉祥物,詳細(xì)步驟教程大家可以看看其他大神的總結(jié),不過大概步驟是要知道,用些什么關(guān)鍵性的工具也需要爛熟于心。 



 

一、吉祥物制作過程


1、鋼筆勾輪廓(描邊成線稿)

用鋼筆的形狀工具,勾出輪廓,描邊成線稿。要領(lǐng)是需要每個(gè)部分都要畫全,圖層都分好,詳細(xì)命名。


2、面稿上色(隱藏描邊)

隱藏描邊,形狀上色,即成面稿。各自部分需要單獨(dú)做蒙版,然后整體需要建組加一個(gè)形狀蒙版,便于上色,不超出身體部位。


3、剖析光影(這個(gè)可以找一些實(shí)物,或者大神的吉祥物觀察) 
常用圖層樣式:眉毛(斜面浮雕);眼睛(眼白漸變加內(nèi)陰影,眼眶漸變加羽化);嘴(加兩個(gè)內(nèi)陰影,一亮一暗,內(nèi)部光影用鋼筆勾,羽化);身體(漸變,暗部正片疊底一個(gè)內(nèi)陰影強(qiáng)化陰影,再內(nèi)陰影一個(gè)細(xì)的環(huán)境光);衣服(內(nèi)陰影+漸變,加上明暗交界線和衣服袖口的厚度)。 


4、靈活應(yīng)用筆刷,不好畫的圓弧用鋼筆勾然后羽化

Image title



吉祥物細(xì)膩制作過程中,剖析光影是很關(guān)鍵的。光影細(xì)膩了才能立體生動。




二、光影效果總結(jié)

光有明度、方向、色彩等特征。光的反射形成了物體的形象,光讓我們辨別事物,認(rèn)識材質(zhì)、尺寸和透視。


1、三大面:黑(背光面)、白(受光面)、灰(側(cè)光面)


2、五大調(diào)子:

(1)高光(最亮部分)

不同材質(zhì)的高光強(qiáng)度也不一樣。同樣強(qiáng)度光線的情況下,越是光滑的物體的高光部分越是強(qiáng);棉、毛、粗糙物體的表面則會相對柔和。

(2)中間調(diào)、亮部(本色部分)

一般是物體本身的顏色。

(3)明暗交界線(是最深的部分,刻畫結(jié)構(gòu))

它深淺的程度跟光線和物體的材質(zhì)都有關(guān)系。光線越強(qiáng)硬度越高明暗交界線越是明顯。比如光滑的金屬對比是很強(qiáng)烈的。如果是棉毛制品則相對柔和。

(4)暗部+反光(暗部本色偏暗,反光受環(huán)境光影響,反光強(qiáng)烈時(shí)暗部和明暗交界線重疊)

反光跟光線強(qiáng)弱和材質(zhì)也有關(guān)系,反光同時(shí)也受環(huán)境色的影響。越是光滑的表面受環(huán)境色影響越是大。

(5)投影

同樣投影跟光線強(qiáng)弱和材質(zhì)也一樣有密切的聯(lián)系??拷矬w的部分通常最深。透明物體投影相對也弱。

Image title

明暗五調(diào)子在深淺變化上有規(guī)律,以明暗交界線為界,在背光部是逐漸亮起來到反光;在受光部是逐漸亮來到高光(輝點(diǎn))。這被稱為漸變規(guī)律。



       光有一個(gè)灰色的球還是不夠的,我們還要了解色彩的基本知識。插畫中很多插畫師為了先定好精準(zhǔn)的型和光影效果,一般會先畫黑白稿然后用混合模式疊加顏色上去。混合模式在圖片合成和濾鏡中也應(yīng)用廣泛。下面是我的一些總結(jié),有點(diǎn)類似理工科的筆記哈,一張表格弄懂混合模式和色彩模式,大家隨便看看。




三、了解混合模式


       知識體系的連接起來有助于我們理解,沒必要去背,理解一下大概心里有個(gè)底,能鎖定自己要用模式的區(qū)域就行。理論是基礎(chǔ),一切的產(chǎn)出源于實(shí)踐,所以大家一定要好好去實(shí)踐嘗試一下,各種疊加一下,就能弄懂這些模式,就會覺得這個(gè)神奇而不神秘了。 

Image title




四、用HSB模式分析色彩


       用HSB是基于人眼的色彩模式,是我們最容易理解的,所以我著重在這塊進(jìn)行分析。色相即色彩,只要不是色盲都能看清楚;明暗也一目了然,素描稿可以理解為只有明暗對比,色相飽和度為0。 但是飽和度夾雜色彩和明暗的時(shí)候就難以分辨。 畫畫用色上中也會受到一定的干擾。從小畫畫, 基本功扎實(shí)的小伙伴有時(shí)候憑感覺就可以畫出美麗的色彩, 但是現(xiàn)在很多半路出家的同學(xué)就會發(fā)現(xiàn)難以入手, 所以搞懂我們吉祥物中色彩飽和度的原理就會順手很多,就可以比較好的應(yīng)用HSB模式。

       我的習(xí)慣是用拾色器的色相版面,橫向從左向右,明度一樣,飽和度變高,縱向從從下往上,飽和度一樣,明度變高,所以右上角的點(diǎn)是明度和飽和度同時(shí)最高的點(diǎn),所以想要取飽和度高的盡量右,想要亮的盡量往上。
Image title

       在拾色器中還可以總結(jié)出很多用色技巧,以這個(gè)灰度球?yàn)槔宕笳{(diào)子明暗度分別是:92 60 40 62 43 。疊加高飽和混色后(球1)五大調(diào)子明暗度分別是:100  91 73 95 67。疊加高飽和混色后(球2),五大調(diào)子明暗度分別是:100  82 76 100 67。說明顏色疊加上去,可以改變一些明度值,但是整體趨勢是一致的。所以在疊加顏色值考慮色相和飽和度即可。 
       疊加高飽和混色后(球2)五大調(diào)子飽和度為:13 62 76 64 68 可以得出結(jié)論就是光照越強(qiáng)(越趨白)飽和度越低,明暗交接線上飽和值較高。 
       高光一般都是飽和度的,透明材質(zhì)和反光材質(zhì),明暗交界線飽和度高,反光強(qiáng),給人一種通透感。(球3)上我用飽和度模式提高了明暗交界線和反光區(qū)域的飽和度,整個(gè)球看起來通透了很多。所以要增加通透感可以增加明暗交接線的飽和度,提亮高光(明度)。


     下面是我給灰度球上色的過程。

Image title

Image title



       說了這么多,感覺是不是跟沒看一樣,有點(diǎn)懵。而且大部分吉祥物上色也是直接上色。我講灰度球上色過程你幫助深度理解光影和色彩,而且球會畫了,其他也不在話下。那我來總結(jié)一些更實(shí)用的要點(diǎn)。




五、吉祥物細(xì)膩刻畫的要點(diǎn)


1、鮮明的對比,整體的飽和度高

(1)吉祥物彌漫著色彩絢爛的卡通色彩,所以一般采用飽和度較高的顏色。

(2)配色方案可以用對比色。需要注意的是,背景明度不能太高,否則反光發(fā)揮不出作用,就像我們高光也不會用純白的,這樣畫面才有張弛。

         以下是我對自己三張吉祥物海報(bào)的色彩分析(除去吉祥物原本的顏色): 

Image title

Image title

Image title

       從色盤構(gòu)成的三角形中看每組配色中都有對比色。除了對比色還用到了中差色和相似色。在吉祥物中為了拉開顏色的對比,一般鄰近色作為一個(gè)物體的過度,不會作為一個(gè)配色方案?;パa(bǔ)色是對比最強(qiáng)的色組,放在一起,會給人強(qiáng)烈的排斥感。若混合在一起,會調(diào)出渾濁的顏色。但是也不是不能用,可以調(diào)節(jié)明度對比和飽和度對比來減弱這種排斥感。

       對比色中還包含了一種冷暖對比,第三張海報(bào)“藍(lán)黃”搭配就是對比中的冷暖對比,黃色在藍(lán)色中使整個(gè)畫面更加活潑。

        紅色、橙色、黃色--為暖色,象征著:太陽、火焰。

        綠色、藍(lán)色、黑色--為冷色,象征著:森林、大海、藍(lán)天。

        灰色、紫色、白色--為中間色。


總結(jié):想要顏色豐富又沒有排斥感,可以用對比色(包含冷暖對比),再配合調(diào)節(jié)明度對比和飽和度對比。



2、假象光源要定好,再加環(huán)境光

(1 ) 在未加入環(huán)境中,一般假象光是左上和正前光相結(jié)合。整體光源源要一致。(2)為了讓吉祥物更加融入場景,應(yīng)該疊加一些環(huán)境光。

(3)環(huán)境光可以加多個(gè),一般常用的是兩個(gè)一個(gè)高光一個(gè)反光。

(4)光需要有強(qiáng)度對比,不要兩個(gè)一樣強(qiáng)弱,沒有主次。

Image title


3、細(xì)膩度的體現(xiàn)

Image title

Image title



4、用不慣筆刷可以用鋼筆+羽化

       要做一個(gè)柔和的吉祥物,就像c4d做出來的,用“鋼筆+羽化+圖層樣式+蒙版”就夠用了。

       如下圖給水滴加環(huán)境色,我們可以用鋼筆畫出輪廓然后根據(jù)實(shí)際情況調(diào)整羽化程度。

Image title


       同樣的效果,也可以用內(nèi)陰影做出,還可以多加幾個(gè)光?!颁摴P+羽化”比圖層樣式好用的地方是:受限制少,不依靠物體的輪廓,可以隨機(jī)調(diào)節(jié)區(qū)域。

Image title


感覺差不多了,我們下次再見!


有人會問:好幾點(diǎn)沒看懂?

答:評論問唄。

有人會說:看了等于沒看!

答:還是謝謝你看了,寶寶會繼續(xù)走自己的風(fēng)格。

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

分享本文至:

日歷

鏈接

個(gè)人資料

存檔