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