2018-9-26 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
“解密細(xì)膩制作的關(guān)鍵點(diǎn)。深度剖析了色理知識(shí)”
之前說(shuō)過(guò)我要出一個(gè)吉祥物制作的教程，但是其實(shí)這種教程很多，上百度隨便搜一個(gè)就能知道個(gè)大概。現(xiàn)在是教程泛濫的時(shí)代，今天看一篇明天看一篇，發(fā)現(xiàn)很多換湯不換藥，有種不看可惜看了又很雞肋的感覺(jué)。所以我在想我要怎么出這篇教程才會(huì)讓大家有所收獲。
設(shè)計(jì)的進(jìn)階道路，大概分為借鑒，實(shí)操，駕馭，引領(lǐng)。從借鑒到引領(lǐng)這個(gè)過(guò)程學(xué)習(xí)、思考、總結(jié)是貫穿的，多實(shí)踐，多總結(jié)才能飛速進(jìn)步，不然有可能你干了5年的設(shè)計(jì)還不如人家干一年來(lái)得出色。我總結(jié)了一些原理性的東西給大家一個(gè)啟發(fā)，做東西掌握實(shí)質(zhì)才能一生二，二生n多，然后你就羽化成“大神”、“大濕”了哈。
關(guān)于吉祥物，詳細(xì)步驟教程大家可以看看其他大神的總結(jié)，不過(guò)大概步驟是要知道，用些什么關(guān)鍵性的工具也需要爛熟于心。
一、吉祥物制作過(guò)程
1、鋼筆勾輪廓（描邊成線稿）
用鋼筆的形狀工具，勾出輪廓，描邊成線稿。要領(lǐng)是需要每個(gè)部分都要畫(huà)全，圖層都分好，詳細(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)用筆刷，不好畫(huà)的圓弧用鋼筆勾然后羽化
吉祥物細(xì)膩制作過(guò)程中，剖析光影是很關(guān)鍵的。光影細(xì)膩了才能立體生動(dòng)。
二、光影效果總結(jié)
光有明度、方向、色彩等特征。光的反射形成了物體的形象，光讓我們辨別事物，認(rèn)識(shí)材質(zhì)、尺寸和透視。
1、三大面：黑（背光面）、白（受光面）、灰（側(cè)光面）
2、五大調(diào)子：
（1）高光（最亮部分）
不同材質(zhì)的高光強(qiáng)度也不一樣。同樣強(qiáng)度光線的情況下，越是光滑的物體的高光部分越是強(qiáng)；棉、毛、粗糙物體的表面則會(huì)相對(duì)柔和。
（2）中間調(diào)、亮部（本色部分）
一般是物體本身的顏色。
（3）明暗交界線（是最深的部分，刻畫(huà)結(jié)構(gòu)）
它深淺的程度跟光線和物體的材質(zhì)都有關(guān)系。光線越強(qiáng)硬度越高明暗交界線越是明顯。比如光滑的金屬對(duì)比是很強(qiáng)烈的。如果是棉毛制品則相對(duì)柔和。
（4）暗部+反光（暗部本色偏暗，反光受環(huán)境光影響，反光強(qiáng)烈時(shí)暗部和明暗交界線重疊）
反光跟光線強(qiáng)弱和材質(zhì)也有關(guān)系，反光同時(shí)也受環(huán)境色的影響。越是光滑的表面受環(huán)境色影響越是大。
（5）投影
同樣投影跟光線強(qiáng)弱和材質(zhì)也一樣有密切的聯(lián)系。靠近物體的部分通常最深。透明物體投影相對(duì)也弱。
明暗五調(diào)子在深淺變化上有規(guī)律，以明暗交界線為界，在背光部是逐漸亮起來(lái)到反光；在受光部是逐漸亮來(lái)到高光（輝點(diǎn)）。這被稱(chēng)為漸變規(guī)律。
光有一個(gè)灰色的球還是不夠的，我們還要了解色彩的基本知識(shí)。插畫(huà)中很多插畫(huà)師為了先定好精準(zhǔn)的型和光影效果，一般會(huì)先畫(huà)黑白稿然后用混合模式疊加顏色上去。混合模式在圖片合成和濾鏡中也應(yīng)用廣泛。下面是我的一些總結(jié)，有點(diǎn)類(lèi)似理工科的筆記哈，一張表格弄懂混合模式和色彩模式，大家隨便看看。
三、了解混合模式
知識(shí)體系的連接起來(lái)有助于我們理解，沒(méi)必要去背，理解一下大概心里有個(gè)底，能鎖定自己要用模式的區(qū)域就行。理論是基礎(chǔ)，一切的產(chǎn)出源于實(shí)踐，所以大家一定要好好去實(shí)踐嘗試一下，各種疊加一下，就能弄懂這些模式，就會(huì)覺(jué)得這個(gè)神奇而不神秘了。
四、用HSB模式分析色彩
用HSB是基于人眼的色彩模式，是我們最容易理解的，所以我著重在這塊進(jìn)行分析。色相即色彩，只要不是色盲都能看清楚；明暗也一目了然，素描稿可以理解為只有明暗對(duì)比，色相飽和度為0。 但是飽和度夾雜色彩和明暗的時(shí)候就難以分辨。 畫(huà)畫(huà)用色上中也會(huì)受到一定的干擾。從小畫(huà)畫(huà)， 基本功扎實(shí)的小伙伴有時(shí)候憑感覺(jué)就可以畫(huà)出美麗的色彩， 但是現(xiàn)在很多半路出家的同學(xué)就會(huì)發(fā)現(xiàn)難以入手， 所以搞懂我們吉祥物中色彩飽和度的原理就會(huì)順手很多，就可以比較好的應(yīng)用HSB模式。
我的習(xí)慣是用拾色器的色相版面,橫向從左向右，明度一樣，飽和度變高，縱向從從下往上，飽和度一樣，明度變高，所以右上角的點(diǎn)是明度和飽和度同時(shí)最高的點(diǎn)，所以想要取飽和度高的盡量右，想要亮的盡量往上。
在拾色器中還可以總結(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。說(shuō)明顏色疊加上去，可以改變一些明度值，但是整體趨勢(shì)是一致的。所以在疊加顏色值考慮色相和飽和度即可。
疊加高飽和混色后（球2）五大調(diào)子飽和度為：13 62 76 64 68 可以得出結(jié)論就是光照越強(qiáng)（越趨白）飽和度越低，明暗交接線上飽和值較高。
高光一般都是飽和度的，透明材質(zhì)和反光材質(zhì)，明暗交界線飽和度高，反光強(qiáng)，給人一種通透感。（球3）上我用飽和度模式提高了明暗交界線和反光區(qū)域的飽和度，整個(gè)球看起來(lái)通透了很多。所以要增加通透感可以增加明暗交接線的飽和度，提亮高光（明度）。
下面是我給灰度球上色的過(guò)程。
說(shuō)了這么多，感覺(jué)是不是跟沒(méi)看一樣，有點(diǎn)懵。而且大部分吉祥物上色也是直接上色。我講灰度球上色過(guò)程你幫助深度理解光影和色彩，而且球會(huì)畫(huà)了，其他也不在話下。那我來(lái)總結(jié)一些更實(shí)用的要點(diǎn)。
五、吉祥物細(xì)膩刻畫(huà)的要點(diǎn)
1、鮮明的對(duì)比,整體的飽和度高
（1）吉祥物彌漫著色彩絢爛的卡通色彩，所以一般采用飽和度較高的顏色。
（2）配色方案可以用對(duì)比色。需要注意的是，背景明度不能太高，否則反光發(fā)揮不出作用，就像我們高光也不會(huì)用純白的，這樣畫(huà)面才有張弛。
以下是我對(duì)自己三張吉祥物海報(bào)的色彩分析（除去吉祥物原本的顏色）：
從色盤(pán)構(gòu)成的三角形中看每組配色中都有對(duì)比色。除了對(duì)比色還用到了中差色和相似色。在吉祥物中為了拉開(kāi)顏色的對(duì)比，一般鄰近色作為一個(gè)物體的過(guò)度，不會(huì)作為一個(gè)配色方案。互補(bǔ)色是對(duì)比最強(qiáng)的色組，放在一起，會(huì)給人強(qiáng)烈的排斥感。若混合在一起，會(huì)調(diào)出渾濁的顏色。但是也不是不能用，可以調(diào)節(jié)明度對(duì)比和飽和度對(duì)比來(lái)減弱這種排斥感。
對(duì)比色中還包含了一種冷暖對(duì)比，第三張海報(bào)“藍(lán)黃”搭配就是對(duì)比中的冷暖對(duì)比，黃色在藍(lán)色中使整個(gè)畫(huà)面更加活潑。
紅色、橙色、黃色--為暖色，象征著：太陽(yáng)、火焰。
綠色、藍(lán)色、黑色--為冷色，象征著：森林、大海、藍(lán)天。
灰色、紫色、白色--為中間色。
總結(jié)：想要顏色豐富又沒(méi)有排斥感，可以用對(duì)比色（包含冷暖對(duì)比），再配合調(diào)節(jié)明度對(duì)比和飽和度對(duì)比。
2、假象光源要定好，再加環(huán)境光
（1 ) 在未加入環(huán)境中，一般假象光是左上和正前光相結(jié)合。整體光源源要一致。（2）為了讓吉祥物更加融入場(chǎng)景，應(yīng)該疊加一些環(huán)境光。
（3）環(huán)境光可以加多個(gè)，一般常用的是兩個(gè)一個(gè)高光一個(gè)反光。
（4）光需要有強(qiáng)度對(duì)比，不要兩個(gè)一樣強(qiáng)弱，沒(méi)有主次。
3、細(xì)膩度的體現(xiàn)
4、用不慣筆刷可以用鋼筆+羽化
要做一個(gè)柔和的吉祥物，就像c4d做出來(lái)的，用“鋼筆+羽化+圖層樣式+蒙版”就夠用了。
如下圖給水滴加環(huán)境色，我們可以用鋼筆畫(huà)出輪廓然后根據(jù)實(shí)際情況調(diào)整羽化程度。
同樣的效果，也可以用內(nèi)陰影做出，還可以多加幾個(gè)光。“鋼筆+羽化”比圖層樣式好用的地方是：受限制少，不依靠物體的輪廓，可以隨機(jī)調(diào)節(jié)區(qū)域。
感覺(jué)差不多了，我們下次再見(jiàn)！
有人會(huì)問(wèn)：好幾點(diǎn)沒(méi)看懂？
答：評(píng)論問(wèn)唄。
有人會(huì)說(shuō)：看了等于沒(méi)看！
答：還是謝謝你看了，寶寶會(huì)繼續(xù)走自己的風(fēng)格。
藍(lán)藍(lán)設(shè)計(jì)( paul-jarrel.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ù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://paul-jarrel.com
