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做出来的，用“钢笔+羽化+图层样式+蒙版”就够用了。
如下图给水滴加环境色，我们可以用钢笔画出轮廓然后根据实际情况调整羽化程度。
同样的效果，也可以用内阴影做出，还可以多加几个光。“钢笔+羽化”比图层样式好用的地方是：受限制少，不依靠物体的轮廓，可以随机调节区域。
感觉差不多了，我们下次再见！
有人会问：好几点没看懂？
答：评论问呗。
有人会说：看了等于没看！
答：还是谢谢你看了，宝宝会继续走自己的风格。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
